@digital-realty/ix-grid 1.0.6

package/src/components/grid-row-filter-styles.ts

@@ -0,0 +1,414 @@
+import { css } from 'lit';
+
+export const IxGridRowFilterStyles = css`
+  .filter {
+    margin-left: -15px;
+    align-items: center;
+    font-size: 17px;
+    width: 75px;
+  }
+
+  .grid-menu {
+    display: flex;
+    align-items: center;
+  }
+
+  .grid-menu button {
+    gap: 0.5rem;
+  }
+
+  ix-icon-button {
+    --md-icon-button-icon-color: rgb(20, 86, 224);
+    --md-icon-button-icon-size: 28px;
+  }
+
+  .grid-menu button .filter {
+    font-family: 'Red Hat Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    margin-top: 2px;
+  }
+  .filter-form {
+    white-space: nowrap;
+    padding: 9px;
+    font-family: 'Open Sans', sans-serif;
+    color: #5d6d82;
+  }
+  .filter-form-column {
+    display: inline-block;
+    vertical-align: middle;
+  }
+  .filter-remove span {
+    margin-right: 0px;
+    color: #5d6d82;
+  }
+  .filter-dropdown-content {
+    position: absolute;
+    display: inline;
+    right: 0;
+    top: 78%;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 3;
+    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    border-radius: 12px;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,
+      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;
+    background-color: #ffffff;
+  }
+  .filter-form input,
+  .filter-form select,
+  .filter-form option {
+    border-radius: 0px;
+    cursor: pointer;
+    letter-spacing: 1.44px;
+    line-height: 1.4375em;
+    box-sizing: content-box;
+    background: none;
+    height: 1.4375em;
+    margin: 0px;
+    animation-name: mui-auto-fill-cancel;
+    animation-duration: 10ms;
+    border: none;
+    border-image: initial;
+    font-size: 16px;
+    box-sizing: border-box;
+    cursor: text;
+    user-select: none;
+    color: currentcolor;
+    -webkit-tap-highlight-color: transparent;
+    display: block;
+    min-width: 0px;
+    width: 100%;
+    font-family: 'Open Sans', sans-serif;
+    height: 25px;
+    border-bottom: 1px solid black;
+  }
+  .filter-form option {
+    -webkit-tap-highlight-color: #9ca6b2;
+  }
+  .filter-form input:hover,
+  .filter-form select:hover {
+    outline: none !important;
+    border-bottom: 2px solid black;
+  }
+  .filter-form input:focus,
+  .filter-form select:focus {
+    outline: none !important;
+    border-bottom: 2px solid #1456e0;
+  }
+  .filter-form select:focus {
+    background-color: rgba(0, 0, 0, 0.05);
+  }
+  .form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    height: 54px;
+    justify-content: flex-end;
+    font-family: 'Open Sans', sans-serif;
+  }
+  .form-group label {
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.4375em;
+    letter-spacing: 0.44px;
+    padding: 0px;
+    color: #092241;
+    display: block;
+    transform-origin: left top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 133%;
+    transform: translate(0px, -1.5px) scale(0.75);
+    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  }
+  .filter-form-group label span {
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.4375em;
+    letter-spacing: 0.44px;
+    padding: 0px;
+    color: #092241;
+    display: block;
+    transform-origin: left top;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 133%;
+    transform: translate(0px, -1.5px) scale(0.75);
+    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,
+      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;
+  }
+  .filter-form-group label:focus-within span {
+    color: #1456e0;
+  }
+  .filter-form-group {
+    display: flex;
+    flex-direction: column;
+    align-items: baseline;
+    height: 54px;
+    justify-content: flex-end;
+    font-family: 'Open Sans', sans-serif;
+  }
+  option {
+    font-weight: normal;
+    display: block;
+    min-height: 1.2em;
+    padding: 0px 2px 1px;
+    white-space: nowrap;
+  }
+  .add-filter-button .add {
+    margin-right: 0px;
+    margin-left: -6px;
+  }
+  .filter-footer {
+    margin-top: auto;
+    display: flex;
+    align-items: left;
+    padding: 0px;
+    font-family: 'Red Hat Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    width: 100%;
+  }
+  .filter-footer button {
+    align-items: center !important;
+    margin-left: 0px;
+  }
+  .filter-footer .add {
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: none;
+    min-height: 36px;
+  }
+  .filter-footer .clear {
+    margin-left: auto !important;
+  }
+  .form-group .close {
+    user-select: none;
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    fill: currentcolor;
+    flex-shrink: 0;
+    transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    font-size: 1.25rem;
+    font-weight: lighter;
+  }
+  .no-display {
+    display: none;
+  }
+  .filter-local-operator-empty {
+    width: 54px;
+    border: none;
+  }
+  .grid-menu span.filter-superscript {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    font-size: 0.75rem;
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: #1456e0;
+    color: #ffffff;
+    position: absolute;
+    top: 0;
+    left: 1.6rem;
+  }
+
+  .filterlist {
+    width: 40px;
+  }
+  .filterColumnField {
+    width: 150px;
+  }
+  .filterValueField {
+    width: 190px;
+  }
+  .filterOperatorField {
+    width: 120px;
+  }
+  .add-filter-button.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+  select:hover {
+    cursor: pointer;
+  }
+  input:hover {
+    cursor: text;
+  }
+  .tooltip-container {
+    position: relative;
+    display: inline-block;
+  }
+  .tool-tip {
+    color: #ffffff;
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    background-color: #071454;
+    padding: 5px 8px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    position: absolute;
+    top: 42px;
+    right: 0;
+    z-index: 3;
+    white-space: nowrap;
+    display: none;
+  }
+  .filter-button:hover ~ .tool-tip {
+    display: block;
+  }
+  .tool-tip li {
+    margin-left: -21px;
+    color: #ffffff;
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+    max-width: 250px;
+    min-width: 200px;
+    white-space: wrap;
+  }
+  .tool-tip p {
+    margin: 0;
+    padding: 0;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    font-size: 12px;
+    line-height: 16px;
+    letter-spacing: 0.4px;
+  }
+
+  .add-filter-button {
+    display: inline-flex;
+    -webkit-box-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    font-family: 'Red Hat Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    color: #ffffff;
+    min-width: 64px;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: none;
+    min-height: 36px;
+    border-radius: 100px;
+    background-color: unset;
+  }
+  .add-filter-button:disabled,
+  .clear:disabled {
+    opacity: 0.25;
+    cursor: not-allowed;
+  }
+  button {
+    -webkit-box-align: center;
+    -webkit-box-pack: center;
+    justify-content: center;
+    position: relative;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: transparent;
+    outline: 0px;
+    border: 0px;
+    margin: 0px;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: middle;
+    appearance: none;
+    text-decoration: none;
+    font-family: 'Red Hat Display', sans-serif;
+    font-weight: 700;
+    font-style: normal;
+    font-size: 14px;
+    line-height: 18.52px;
+    letter-spacing: 1.25px;
+    text-transform: uppercase;
+    color: #ffffff;
+    min-width: 64px;
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+      color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+    box-shadow: none;
+    min-height: 36px;
+    border-radius: 100px;
+    background-color: unset;
+  }
+  button.filter-button {
+    padding-inline: 0;
+  }
+  .grid-menu button {
+    align-items: center;
+    display: flex;
+  }
+`;

package/src/components/pagination-styles.ts

@@ -0,0 +1,33 @@
+import { css } from 'lit';
+
+export const PaginationStyles = css`
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 1rem;
+    font-size: 12px;
+    margin: 1rem;
+  }
+  .pagination-nav {
+    display: flex;
+  }
+  ix-select {
+    --md-outlined-field-bottom-space: 2px;
+    --md-outlined-field-top-space: 2px;
+    --md-outlined-button-outline-color: var(--md-sys-color-primary);
+    --md-outlined-select-text-field-outline-color: #ddd;
+    --md-menu-container-color: #fff;
+    --md-filled-select-text-field-active-indicator-height: 0px;
+    --md-filled-select-text-field-hover-indicator-height: 0px;
+    --md-filled-field-hover-active-indicator-height: 0px;
+    --md-filled-field-focus-active-indicator-height: 0px;
+    --md-sys-typescale-body-large-font: 'Open Sans', sans-serif;
+    --md-ref-typeface-plain: 'Open Sans', sans-serif;
+    --md-filled-field-content-size: 14px;
+    --md-sys-typescale-body-large-size: 14px;
+    --md-filled-field-bottom-space: 4px;
+    --md-filled-field-top-space: 4px;
+    --md-filled-field-container-color: #fff;
+  }
+`;

package/src/grid-view-styles.ts

@@ -0,0 +1,265 @@
+import { css } from 'lit';
+
+export const IxGridViewStyles = css`
+  @font-face {
+    font-family: 'Material Icons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(https://fonts.gstatic.com/s/materialicons/v140/flUhRq6tzZclQEJ-Vdg-IuiaDsNZ.ttf)
+      format('truetype');
+  }
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+  ix-dialog {
+    --md-dialog-container-color: #fff;
+  }
+  ix-textbox {
+    --md-sys-color-on-surface-variant: #b8bfc8;
+  }
+  ix-button {
+    --md-outlined-button-outline-color: var(--md-sys-color-primary);
+    --md-outlined-select-text-field-outline-color: #ddd;
+  }
+  ix-button .button-label {
+    text-transform: uppercase;
+    font-weight: bold;
+    letter-spacing: 1.25px;
+  }
+  .btn_primary {
+    --md-filled-button-container-color: var(--md-sys-color-primary);
+  }
+  .btn_primary ix-icon {
+    color: var(--md-sys-color-on-primary);
+  }
+  .btn_secondary {
+    --md-filled-button-container-color: var(--md-sys-color-secondary);
+  }
+  .btn_secondary ix-icon {
+    color: var(--md-sys-color-on-secondary);
+  }
+  .btn_tertiary {
+    --md-filled-button-container-color: var(--md-sys-color-tertiary);
+  }
+  .btn_tertiary ix-icon {
+    color: var(--md-sys-color-on-tertiary);
+  }
+  .btn_danger {
+    --md-filled-button-container-color: var(--md-sys-color-error);
+  }
+  .btn_danger ix-icon {
+    color: var(--md-sys-color-on-error);
+  }
+  .icon-btn_primary ix-icon {
+    color: var(--md-sys-color-primary);
+  }
+  .icon-btn_secondary ix-icon {
+    color: var(--md-sys-color-secondary);
+  }
+  .icon-btn_tertiary ix-icon {
+    color: var(--md-sys-color-tertiary);
+  }
+  .icon-btn_danger ix-icon {
+    color: var(--md-sys-color-error);
+  }
+  .dialog__headline {
+    margin: 0px;
+    font-family: 'Red Hat Display', sans-serif;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    padding: 24px;
+  }
+  .dialog-form {
+    min-width: 500px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 8px 24px 20px;
+  }
+  .dialog-form .textfield {
+    width: 100%;
+  }
+  .dialog-form.sm {
+    min-width: 560px;
+  }
+  .dialog-form__info {
+    margin: 0px;
+    font-family: 'Open Sans', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 28px;
+    letter-spacing: 0.44px;
+    color: rgba(9, 34, 65, 0.7);
+  }
+  .dialog-form__textbox {
+    padding-top: 1rem;
+  }
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 15px 8px 20px;
+  }
+  .material-icons {
+    font-family: 'Material Icons';
+    font-weight: normal;
+    font-style: normal;
+    font-size: 24px;
+    line-height: 1;
+    letter-spacing: normal;
+    text-transform: none;
+    display: inline-block;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+  }
+  .material-icons.delete {
+    color: #6d758c;
+  }
+  .material-icons.info {
+    color: orange;
+    font-size: 48px;
+  }
+  .material-icons.check_circle {
+    color: green;
+  }
+  .material-icons.mail {
+    color: #ff9800;
+  }
+  .material-icons.warning {
+    color: #db0028;
+  }
+  .material-icons.do_not_disturb_on {
+    color: #6d758c;
+  }
+  ix-dialog {
+    --md-dialog-container-color: #fff;
+  }
+  .grid-container {
+    background-color: #ffffff;
+    border-radius: 12px;
+    box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 20px -12px,
+      #e1e4e8 0px 0px 0px 1px inset;
+    box-sizing: border-box;
+    padding: 3px;
+  }
+  .grid-header {
+    display: flex;
+    -webkit-box-pack: justify;
+    place-content: center space-between;
+    -webkit-box-align: center;
+    align-items: center;
+    padding: 0px 11px 0px 24px;
+    flex-wrap: wrap;
+    gap: 18px;
+    height: 64px;
+  }
+  .grid-header h2 {
+    margin: 0px;
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 24px;
+    letter-spacing: 0.15px;
+    color: #092241;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-family: 'Red Hat Display', sans-serif;
+  }
+  .grid-menu {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .grid-menu span {
+    color: #1456e0;
+    cursor: pointer;
+  }
+  .grid-empty-content {
+    height: 73vh;
+    justify-content: center;
+    align-items: flex-start;
+    padding-top: 54px;
+  }
+  .grid-empty-content h2 {
+    font-weight: 900;
+    font-size: 22px;
+    font-family: 'Red Hat Display', sans-serif;
+    color: black;
+  }
+
+  .header {
+    font-weight: bold;
+    display: flex;
+    user-select: none;
+    align-items: center;
+  }
+  .header .header-sort-icon {
+    padding-left: 5px;
+    opacity: 0;
+    font-size: 17px;
+    color: rgba(0, 0, 0, 0.54);
+    cursor: pointer;
+    height: 18px;
+  }
+  .header:hover .header-sort-icon {
+    opacity: 1;
+  }
+  .loading {
+    opacity: 0.25;
+  }
+
+  span .disabled {
+    color: rgba(9, 34, 65, 0.7);
+  }
+
+  .disable-cursor {
+    cursor: default !important;
+  }
+
+  .accounts {
+    display: flex;
+    align-items: center;
+  }
+  .account-name {
+    margin: 0 8px 0 3px;
+  }
+
+  ix-icon-button {
+    --md-icon-button-icon-color: rgb(20, 86, 224);
+    --md-icon-button-icon-size: 28px;
+  }
+
+  .header ix-icon-button {
+    padding-left: 5px;
+    opacity: 0;
+    cursor: pointer;
+    height: 18px;
+    --md-icon-button-icon-color: rgba(0, 0, 0, 0.54);
+    --md-icon-button-icon-size: 18px;
+  }
+
+  vaadin-grid-cell-content {
+    font-family: 'Red Hat Display', sans-serif;
+    font-size: 14px;
+    --_cell-padding: 1rem;
+  }
+
+  .row-limit {
+    display: flex;
+    padding: 8px;
+  }
+`;

package/src/index.ts

@@ -0,0 +1 @@
+export { IxGrid } from './IxGrid.js';

package/src/ix-grid-copy.ts

@@ -0,0 +1,10 @@
+export const copy = {
+  activeFilter: 'active filter',
+  filters: 'Filters',
+  hideFilters: 'Hide Filters',
+  showFilters: 'Show Filters',
+  rowsPerPage: 'Rows per page',
+  user: 'user',
+  viewMore: 'VIEW MORE',
+  viewLess: 'VIEW LESS',
+};

package/src/ix-grid.ts

@@ -0,0 +1,3 @@
+import { IxGrid } from './IxGrid.js';
+
+window.customElements.define('ix-grid', IxGrid);