@digital-realty/ix-grid 1.3.2 → 1.4.1-alpha.2

package/src/components/grid-column-filter-styles.js

@@ -0,0 +1,89 @@
+import { css } from 'lit';
+export const IxGridColumnFilterStyles = css `
+  .dropdown-content {
+    position: absolute;
+    background-color: var(--clr-surface-container-lowest, #fff);
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+    z-index: 9;
+    -webkit-box-align: center;
+    align-items: center;
+    cursor: pointer;
+    vertical-align: middle;
+    -webkit-tap-highlight-color: transparent;
+    padding: 10px;
+    width: 247px;
+    left: -100px;
+    border-radius: 16px;
+  }
+
+  .dropdown-content > div {
+    margin: 0px;
+    color: var(--clr-on-surface, #092241);
+    font-family: var(--text-small-font, sans-serif);
+    font-size: var(--text-small-size, 0.875rem);
+    letter-spacing: var(--text-small-letter-spacing, 0.0275em);
+    line-height: var(--text-small-line-height, 1.42857143em);
+    font-weight: var(--text-small-weight, normal);
+    text-decoration: var(--text-small-decoration, none);
+    text-transform: var(--text-small-transform, none);
+    display: block;
+    cursor: pointer;
+  }
+
+  .dropdown-content span:hover {
+    background-color: #f1f1f1;
+  }
+
+  .dropdown-content label {
+    display: flex;
+    align-items: center;
+  }
+
+  .dropdown-content label.dragOrigin {
+    background: #ff000017;
+    outline: 1px #ff9d9d dashed;
+  }
+
+  .dropdown-content label p {
+    width: 158px;
+  }
+
+  .dropdown-content label .draggable {
+    font-size: 24px;
+    cursor: move; /* fallback if grab cursor is unsupported */
+    cursor: grab;
+    cursor: -moz-grab;
+    cursor: -webkit-grab;
+  }
+
+  .dropdown-content label .draggable path {
+    fill: var(--clr-primary, #1456e0);
+  }
+
+  .active {
+    position: absolute;
+    right: 8px;
+    top: 8px;
+    height: 8px;
+    width: 8px;
+    background-color: var(--clr-critical, #db0028);
+    border-radius: 50%;
+  }
+
+  ix-switch {
+    padding: 0 0 0 6px;
+    display: flex;
+    width: 48px;
+  }
+
+  .list {
+    position: relative;
+  }
+
+  @media only screen and (max-width: 840px) {
+    .dropdown-content {
+      left: 0;
+    }
+  }
+`;

package/src/components/grid-column-filter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-column-filter-styles.js","sourceRoot":"","sources":["grid-column-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,wBAAwB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuF1C,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridColumnFilterStyles = css`\n  .dropdown-content {\n    position: absolute;\n    background-color: var(--clr-surface-container-lowest, #fff);\n    min-width: 160px;\n    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n    z-index: 9;\n    -webkit-box-align: center;\n    align-items: center;\n    cursor: pointer;\n    vertical-align: middle;\n    -webkit-tap-highlight-color: transparent;\n    padding: 10px;\n    width: 247px;\n    left: -100px;\n    border-radius: 16px;\n  }\n\n  .dropdown-content > div {\n    margin: 0px;\n    color: var(--clr-on-surface, #092241);\n    font-family: var(--text-small-font, sans-serif);\n    font-size: var(--text-small-size, 0.875rem);\n    letter-spacing: var(--text-small-letter-spacing, 0.0275em);\n    line-height: var(--text-small-line-height, 1.42857143em);\n    font-weight: var(--text-small-weight, normal);\n    text-decoration: var(--text-small-decoration, none);\n    text-transform: var(--text-small-transform, none);\n    display: block;\n    cursor: pointer;\n  }\n\n  .dropdown-content span:hover {\n    background-color: #f1f1f1;\n  }\n\n  .dropdown-content label {\n    display: flex;\n    align-items: center;\n  }\n\n  .dropdown-content label.dragOrigin {\n    background: #ff000017;\n    outline: 1px #ff9d9d dashed;\n  }\n\n  .dropdown-content label p {\n    width: 158px;\n  }\n\n  .dropdown-content label .draggable {\n    font-size: 24px;\n    cursor: move; /* fallback if grab cursor is unsupported */\n    cursor: grab;\n    cursor: -moz-grab;\n    cursor: -webkit-grab;\n  }\n\n  .dropdown-content label .draggable path {\n    fill: var(--clr-primary, #1456e0);\n  }\n\n  .active {\n    position: absolute;\n    right: 8px;\n    top: 8px;\n    height: 8px;\n    width: 8px;\n    background-color: var(--clr-critical, #db0028);\n    border-radius: 50%;\n  }\n\n  ix-switch {\n    padding: 0 0 0 6px;\n    display: flex;\n    width: 48px;\n  }\n\n  .list {\n    position: relative;\n  }\n\n  @media only screen and (max-width: 840px) {\n    .dropdown-content {\n      left: 0;\n    }\n  }\n`;\n"]}

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

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

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

@@ -0,0 +1,311 @@
+import { css } from 'lit';
+export const IxGridRowFilterStyles = css `
+  .slot-wrap {
+    display: flex;
+  }
+
+  .slot-wrap ix-icon {
+    --ix-icon-font-size: 24px;
+    color: var(--clr-primary, #1456e0);
+    margin-right: 5px;
+  }
+
+  .grid-menu ix-button .filter {
+    margin-top: 2px;
+  }
+
+  .filter-form {
+    white-space: nowrap;
+    padding: 9px;
+    color: var(--clr-on-surface-variant, #092241b3);
+  }
+
+  .filter-form-column {
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  .filter-remove span {
+    margin-right: 0px;
+    color: var(--clr-on-surface-variant, #092241b3);
+  }
+
+  .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;
+    z-index: 10;
+  }
+
+  .filter-form input,
+  .filter-form select,
+  .filter-form option {
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    border-radius: 0px;
+    cursor: pointer;
+    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;
+    box-sizing: border-box;
+    cursor: text;
+    user-select: none;
+    color: currentcolor;
+    -webkit-tap-highlight-color: transparent;
+    display: block;
+    min-width: 0px;
+    width: 100%;
+    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: var(--text-default-font, sans-serif);
+  }
+
+  .form-group label {
+    font-family: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    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: var(--text-default-font, sans-serif);
+    font-size: var(--text-default-size, 16px);
+    letter-spacing: var(--text-default-letter-spacing, 0.0275em);
+    line-height: var(--text-default-line-height, 1.75em);
+    font-weight: var(--text-default-weight, normal);
+    text-transform: var(--text-default-decoration, none);
+    text-decoration: var(--text-default-transform, none);
+    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: var(--text-default-font, sans-serif);
+  }
+
+  option {
+    font-weight: normal;
+    display: block;
+    min-height: 1.2em;
+    padding: 0px 2px 1px;
+    white-space: nowrap;
+  }
+
+  .filter-footer {
+    padding: 9px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .no-display {
+    display: none;
+  }
+
+  .filter-local-operator-empty {
+    width: 54px;
+    border: none;
+  }
+
+  .grid-menu span.filter-superscript {
+    position: absolute;
+    top: 6px;
+    left: 14px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+    padding: 0;
+    height: 16px;
+    width: 16px;
+    border-radius: 50%;
+    background-color: var(--clr-primary, #1456e0);
+    color: var(--clr-on-primary, #fff);
+  }
+
+  .filterlist {
+    width: 40px;
+  }
+
+  .filterColumnField {
+    width: 150px;
+  }
+
+  .filterValueField {
+    width: 190px;
+  }
+
+  .filterOperatorField {
+    width: 120px;
+  }
+
+  .form-group-operator-label {
+    width: 100%;
+  }
+
+  .filter-form .filterOperatorInput {
+    min-width: 96px;
+  }
+
+  select:hover {
+    cursor: pointer;
+  }
+
+  input:hover {
+    cursor: text;
+  }
+
+  .tooltip-container {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tool-tip {
+    color: var(--clr-on-secondary, #fff);
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    background-color: var(--clr-secondary, #071454);
+    padding: 5px 8px;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+
+    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;
+    overflow-wrap: break-word;
+    border-radius: 3px;
+    max-width: 250px;
+    min-width: 200px;
+    white-space: wrap;
+  }
+
+  .tool-tip p {
+    margin: 0;
+    padding: 0;
+  }
+
+  .grid-menu ix-button {
+    align-items: center;
+    display: flex;
+  }
+
+  @media only screen and (max-width: 840px) {
+    .filter-dropdown-content {
+      right: inherit;
+      top: 0;
+    }
+  }
+
+  @media only screen and (max-width: 600px) {
+    .grid-menu ix-button .filter {
+      display: none;
+    }
+    .grid-menu ix-button {
+      --md-text-button-leading-space: 6px;
+      --md-text-button-trailing-space: 0;
+      margin-left: 4px;
+    }
+  }
+`;

package/src/components/grid-row-filter-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-row-filter-styles.js","sourceRoot":"","sources":["grid-row-filter-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqTvC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const IxGridRowFilterStyles = css`\n  .slot-wrap {\n    display: flex;\n  }\n\n  .slot-wrap ix-icon {\n    --ix-icon-font-size: 24px;\n    color: var(--clr-primary, #1456e0);\n    margin-right: 5px;\n  }\n\n  .grid-menu ix-button .filter {\n    margin-top: 2px;\n  }\n\n  .filter-form {\n    white-space: nowrap;\n    padding: 9px;\n    color: var(--clr-on-surface-variant, #092241b3);\n  }\n\n  .filter-form-column {\n    display: inline-block;\n    vertical-align: middle;\n  }\n\n  .filter-remove span {\n    margin-right: 0px;\n    color: var(--clr-on-surface-variant, #092241b3);\n  }\n\n  .filter-dropdown-content {\n    position: absolute;\n    display: inline;\n    right: 0;\n    top: 78%;\n    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);\n    z-index: 3;\n    transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n    border-radius: 12px;\n    box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 5px -3px,\n      rgba(0, 0, 0, 0.14) 0px 8px 10px 1px, rgba(0, 0, 0, 0.12) 0px 3px 14px 2px;\n    background-color: #ffffff;\n    z-index: 10;\n  }\n\n  .filter-form input,\n  .filter-form select,\n  .filter-form option {\n    font-family: var(--text-default-font, sans-serif);\n    font-size: var(--text-default-size, 16px);\n    letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n    line-height: var(--text-default-line-height, 1.75em);\n    font-weight: var(--text-default-weight, normal);\n    text-transform: var(--text-default-decoration, none);\n    text-decoration: var(--text-default-transform, none);\n    border-radius: 0px;\n    cursor: pointer;\n    box-sizing: content-box;\n    background: none;\n    height: 1.4375em;\n    margin: 0px;\n    animation-name: mui-auto-fill-cancel;\n    animation-duration: 10ms;\n    border: none;\n    border-image: initial;\n    box-sizing: border-box;\n    cursor: text;\n    user-select: none;\n    color: currentcolor;\n    -webkit-tap-highlight-color: transparent;\n    display: block;\n    min-width: 0px;\n    width: 100%;\n    height: 25px;\n    border-bottom: 1px solid black;\n  }\n\n  .filter-form option {\n    -webkit-tap-highlight-color: #9ca6b2;\n  }\n\n  .filter-form input:hover,\n  .filter-form select:hover {\n    outline: none !important;\n    border-bottom: 2px solid black;\n  }\n\n  .filter-form input:focus,\n  .filter-form select:focus {\n    outline: none !important;\n    border-bottom: 2px solid #1456e0;\n  }\n\n  .filter-form select:focus {\n    background-color: rgba(0, 0, 0, 0.05);\n  }\n\n  .form-group {\n    display: flex;\n    flex-direction: column;\n    align-items: baseline;\n    height: 54px;\n    justify-content: flex-end;\n    font-family: var(--text-default-font, sans-serif);\n  }\n\n  .form-group label {\n    font-family: var(--text-default-font, sans-serif);\n    font-size: var(--text-default-size, 16px);\n    letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n    line-height: var(--text-default-line-height, 1.75em);\n    font-weight: var(--text-default-weight, normal);\n    text-transform: var(--text-default-decoration, none);\n    text-decoration: var(--text-default-transform, none);\n    padding: 0px;\n    color: #092241;\n    display: block;\n    transform-origin: left top;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 133%;\n    transform: translate(0px, -1.5px) scale(0.75);\n    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  }\n\n  .filter-form-group label span {\n    font-family: var(--text-default-font, sans-serif);\n    font-size: var(--text-default-size, 16px);\n    letter-spacing: var(--text-default-letter-spacing, 0.0275em);\n    line-height: var(--text-default-line-height, 1.75em);\n    font-weight: var(--text-default-weight, normal);\n    text-transform: var(--text-default-decoration, none);\n    text-decoration: var(--text-default-transform, none);\n    padding: 0px;\n    color: #092241;\n    display: block;\n    transform-origin: left top;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 133%;\n    transform: translate(0px, -1.5px) scale(0.75);\n    transition: color 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n      transform 200ms cubic-bezier(0, 0, 0.2, 1) 0ms,\n      max-width 200ms cubic-bezier(0, 0, 0.2, 1) 0ms;\n  }\n\n  .filter-form-group label:focus-within span {\n    color: #1456e0;\n  }\n\n  .filter-form-group {\n    display: flex;\n    flex-direction: column;\n    align-items: baseline;\n    height: 54px;\n    justify-content: flex-end;\n    font-family: var(--text-default-font, sans-serif);\n  }\n\n  option {\n    font-weight: normal;\n    display: block;\n    min-height: 1.2em;\n    padding: 0px 2px 1px;\n    white-space: nowrap;\n  }\n\n  .filter-footer {\n    padding: 9px;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .no-display {\n    display: none;\n  }\n\n  .filter-local-operator-empty {\n    width: 54px;\n    border: none;\n  }\n\n  .grid-menu span.filter-superscript {\n    position: absolute;\n    top: 6px;\n    left: 14px;\n    z-index: 1;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-family: var(--text-caption-font, sans-serif);\n    font-size: var(--text-caption-size, 0.75rem);\n    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n    line-height: var(--text-caption-line-height, 1.33333333em);\n    font-weight: var(--text-caption-weight, normal);\n    text-transform: var(--text-caption-transform, none);\n    text-decoration: var(--text-caption-decoration, none);\n    padding: 0;\n    height: 16px;\n    width: 16px;\n    border-radius: 50%;\n    background-color: var(--clr-primary, #1456e0);\n    color: var(--clr-on-primary, #fff);\n  }\n\n  .filterlist {\n    width: 40px;\n  }\n\n  .filterColumnField {\n    width: 150px;\n  }\n\n  .filterValueField {\n    width: 190px;\n  }\n\n  .filterOperatorField {\n    width: 120px;\n  }\n\n  .form-group-operator-label {\n    width: 100%;\n  }\n\n  .filter-form .filterOperatorInput {\n    min-width: 96px;\n  }\n\n  select:hover {\n    cursor: pointer;\n  }\n\n  input:hover {\n    cursor: text;\n  }\n\n  .tooltip-container {\n    position: relative;\n    display: inline-block;\n  }\n\n  .tool-tip {\n    color: var(--clr-on-secondary, #fff);\n    overflow-wrap: break-word;\n    border-radius: 3px;\n    background-color: var(--clr-secondary, #071454);\n    padding: 5px 8px;\n    font-family: var(--text-caption-font, sans-serif);\n    font-size: var(--text-caption-size, 0.75rem);\n    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n    line-height: var(--text-caption-line-height, 1.33333333em);\n    font-weight: var(--text-caption-weight, normal);\n    text-transform: var(--text-caption-transform, none);\n    text-decoration: var(--text-caption-decoration, none);\n\n    position: absolute;\n    top: 42px;\n    right: 0;\n    z-index: 3;\n    white-space: nowrap;\n    display: none;\n  }\n\n  .filter-button:hover ~ .tool-tip {\n    display: block;\n  }\n\n  .tool-tip li {\n    margin-left: -21px;\n    overflow-wrap: break-word;\n    border-radius: 3px;\n    max-width: 250px;\n    min-width: 200px;\n    white-space: wrap;\n  }\n\n  .tool-tip p {\n    margin: 0;\n    padding: 0;\n  }\n\n  .grid-menu ix-button {\n    align-items: center;\n    display: flex;\n  }\n\n  @media only screen and (max-width: 840px) {\n    .filter-dropdown-content {\n      right: inherit;\n      top: 0;\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .grid-menu ix-button .filter {\n      display: none;\n    }\n    .grid-menu ix-button {\n      --md-text-button-leading-space: 6px;\n      --md-text-button-trailing-space: 0;\n      margin-left: 4px;\n    }\n  }\n`;\n"]}

package/src/components/ix-grid-no-rows.d.ts

@@ -0,0 +1 @@
+export {};

package/src/components/ix-grid-no-rows.js

@@ -0,0 +1,2 @@
+import { IxGridNoRows } from './IxGridNoRows.js';
+window.customElements.define('ix-grid-no-rows', IxGridNoRows);

package/src/components/ix-grid-no-rows.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ix-grid-no-rows.js","sourceRoot":"","sources":["ix-grid-no-rows.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAEjD,MAAM,CAAC,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,YAAY,CAAC,CAAC","sourcesContent":["import { IxGridNoRows } from './IxGridNoRows.js';\n\nwindow.customElements.define('ix-grid-no-rows', IxGridNoRows);\n"]}

package/src/components/pagination-styles.d.ts

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

package/src/components/pagination-styles.js

@@ -0,0 +1,84 @@
+import { css } from 'lit';
+export const PaginationStyles = css `
+  :host {
+    --md-filled-select-text-field-input-text-size: var(
+      --ix-filled-select-text-field-input-text-size,
+      12px
+    );
+  }
+
+  .pagination {
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    gap: 0;
+    font-family: var(--text-caption-font, sans-serif);
+    font-size: var(--text-caption-size, 0.75rem);
+    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);
+    line-height: var(--text-caption-line-height, 1.33333333em);
+    font-weight: var(--text-caption-weight, normal);
+    text-transform: var(--text-caption-transform, none);
+    text-decoration: var(--text-caption-decoration, none);
+    margin: 1.25rem 0.5rem 1.25rem 1rem;
+  }
+
+  .pagination > div {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .pagination p {
+    margin: 0;
+  }
+
+  .pagination-nav {
+    display: flex;
+    margin-left: 1.5rem;
+    height: 1.5rem;
+    gap: 0.5rem;
+  }
+
+  .pagination-nav > ix-icon-button {
+    margin-top: -0.5rem;
+  }
+
+  .rows-per-page {
+    color: var(--clr-on-surface, #092241);
+  }
+
+  ix-select {
+    --md-menu-container-color: var(--bg-surface-container-lowest, #fff);
+    --md-filled-select-text-field-container-color: var(
+      --bg-surface-container-lowest,
+      #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-filled-field-bottom-space: 4px;
+    --md-filled-field-top-space: 4px;
+
+    --md-filled-select-text-field-focus-trailing-icon-color: var(
+      --clr-primary,
+      #1456e0
+    );
+    --md-filled-select-text-field-focus-active-indicator-color: var(
+      --md-filled-select-text-field-focus-trailing-icon-color
+    );
+  }
+
+  ix-select-option {
+    --md-menu-item-selected-container-color: rgba(20, 86, 224, 0.1);
+  }
+
+  @media only screen and (max-width: 600px) {
+    .pagination {
+      justify-content: space-between;
+    }
+    .pagination > div {
+      gap: 0;
+    }
+  }
+`;

package/src/components/pagination-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination-styles.js","sourceRoot":"","sources":["pagination-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkFlC,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const PaginationStyles = css`\n  :host {\n    --md-filled-select-text-field-input-text-size: var(\n      --ix-filled-select-text-field-input-text-size,\n      12px\n    );\n  }\n\n  .pagination {\n    display: flex;\n    align-items: center;\n    justify-content: end;\n    gap: 0;\n    font-family: var(--text-caption-font, sans-serif);\n    font-size: var(--text-caption-size, 0.75rem);\n    letter-spacing: var(--text-caption-letter-spacing, 0.03333333em);\n    line-height: var(--text-caption-line-height, 1.33333333em);\n    font-weight: var(--text-caption-weight, normal);\n    text-transform: var(--text-caption-transform, none);\n    text-decoration: var(--text-caption-decoration, none);\n    margin: 1.25rem 0.5rem 1.25rem 1rem;\n  }\n\n  .pagination > div {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .pagination p {\n    margin: 0;\n  }\n\n  .pagination-nav {\n    display: flex;\n    margin-left: 1.5rem;\n    height: 1.5rem;\n    gap: 0.5rem;\n  }\n\n  .pagination-nav > ix-icon-button {\n    margin-top: -0.5rem;\n  }\n\n  .rows-per-page {\n    color: var(--clr-on-surface, #092241);\n  }\n\n  ix-select {\n    --md-menu-container-color: var(--bg-surface-container-lowest, #fff);\n    --md-filled-select-text-field-container-color: var(\n      --bg-surface-container-lowest,\n      #fff\n    );\n    --md-filled-select-text-field-active-indicator-height: 0px;\n    --md-filled-select-text-field-hover-indicator-height: 0px;\n    --md-filled-field-hover-active-indicator-height: 0px;\n    --md-filled-field-focus-active-indicator-height: 0px;\n    --md-filled-field-bottom-space: 4px;\n    --md-filled-field-top-space: 4px;\n\n    --md-filled-select-text-field-focus-trailing-icon-color: var(\n      --clr-primary,\n      #1456e0\n    );\n    --md-filled-select-text-field-focus-active-indicator-color: var(\n      --md-filled-select-text-field-focus-trailing-icon-color\n    );\n  }\n\n  ix-select-option {\n    --md-menu-item-selected-container-color: rgba(20, 86, 224, 0.1);\n  }\n\n  @media only screen and (max-width: 600px) {\n    .pagination {\n      justify-content: space-between;\n    }\n    .pagination > div {\n      gap: 0;\n    }\n  }\n`;\n"]}

package/src/grid-view-styles.d.ts

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