ids-enterprise-wc 1.0.0-beta.11 → 1.0.0-beta.13

package/components/ids-data-grid/ids-data-grid.css

@@ -0,0 +1,1192 @@
+/* Ids Data Grid Component - Filter */
+.ids-data-grid ::slotted([slot^=filter-]) {
+  align-items: center;
+  display: flex;
+}
+.ids-data-grid .ids-data-grid-header-cell-content.vertical-align-center {
+  position: relative;
+  top: calc(50% - var(--ids-space-60));
+}
+.ids-data-grid .ids-data-grid-header-cell-filter-wrapper {
+  align-items: center;
+  display: flex;
+  position: relative;
+  padding-inline-start: var(--ids-space-40);
+  padding-inline-end: var(--ids-space-40);
+  padding-block-end: var(--ids-space-40);
+}
+.ids-data-grid .ids-data-grid-header-cell-filter-wrapper.hidden {
+  display: none;
+}
+.ids-data-grid .ids-data-grid-header-cell-filter-wrapper ids-dropdown[compact] ids-list-box-option {
+  font-size: unset;
+  min-height: var(--ids-size-20);
+}
+.ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-list-box-option,
+.ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-dropdown::part(triggerfield-input),
+.ids-data-grid .ids-data-grid-header-cell.is-uppercase .ids-data-grid-header-cell-filter-wrapper ids-input::part(input) {
+  text-transform: uppercase;
+}
+
+/* Ids Data Grid Component - Header */
+.ids-data-grid-header {
+  position: sticky;
+  top: 0;
+  z-index: 4;
+}
+
+.ids-data-grid-header-text .ids-data-grid-checkbox-container {
+  width: 20px;
+}
+.ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
+  background-color: var(--ids-data-grid-header-checkbox-color-background);
+  border-color: var(--ids-data-grid-header-checkbox-color-border);
+}
+
+.ids-data-grid-column-groups {
+  border-block-end: 1px solid var(--ids-data-grid-header-color-border);
+}
+
+.ids-data-grid-header-cell {
+  border-inline-start: 1px solid var(--ids-data-grid-header-color-border);
+  background-color: var(--ids-data-grid-header-color-background-default);
+  min-height: 28px;
+  position: relative;
+}
+.ids-data-grid-header-cell:first-child {
+  border-inline-start-width: 0;
+}
+.ids-data-grid-header-cell:hover {
+  background-color: var(--ids-data-grid-header-hover-background-color);
+}
+.ids-data-grid-header-cell.align-center .ids-data-grid-header-cell-content, .ids-data-grid-header-cell.align-center .ids-data-grid-header-cell-filter-wrapper {
+  justify-content: center;
+}
+.ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-content, .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper {
+  justify-content: flex-end;
+}
+.ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper ids-menu-button {
+  margin-inline-start: 2px;
+}
+.ids-data-grid-header-cell .resizer {
+  cursor: var(--ids-cursor-resize);
+  display: inline;
+  height: 100%;
+  position: absolute;
+  margin-inline-start: calc(100% - 4px);
+  top: 0;
+  width: 6px;
+  z-index: 2;
+}
+.ids-data-grid-header-cell .reorderer {
+  cursor: var(--ids-cursor-move);
+  display: inline;
+  height: 34px;
+  opacity: 0;
+  position: absolute;
+  inset-inline-start: var(--ids-space-40);
+  top: 0;
+  width: 4px;
+}
+.ids-data-grid-header-cell .reorderer ids-icon {
+  position: absolute;
+  color: var(--ids-data-grid-header-color-icon);
+  inset-inline-start: calc(-1 * var(--ids-space-40));
+  text-align: center;
+  top: calc(50% - 9px);
+}
+.ids-data-grid-header-cell.align-right .reorderer {
+  inset-inline-end: 8px;
+  inset-inline-start: initial;
+}
+.ids-data-grid-header-cell:last-child .resizer {
+  margin-inline-start: calc(100% - 6px);
+}
+.ids-data-grid-header-cell.dragging {
+  background-color: var(--ids-data-grid-header-drag-background-color) !important;
+  border-inline-start: 0;
+  display: block;
+  left: -1000px;
+  position: absolute;
+  top: 0;
+  width: 110px;
+}
+.ids-data-grid-header-cell.active-drag-column {
+  background-color: var(--ids-data-grid-header-color-background-placeholder-dragging);
+}
+.ids-data-grid-header-cell.active-drag-column .sort-indicator {
+  opacity: 0;
+}
+.ids-data-grid-header-cell:hover .reorderer {
+  opacity: 1;
+}
+.ids-data-grid-header-cell.frozen {
+  background-color: var(--ids-data-grid-header-color-background-default);
+  position: sticky;
+  z-index: 3;
+}
+.ids-data-grid-header-cell.frozen-last {
+  border-inline-end: 1px solid var(--ids-data-grid-header-color-border);
+}
+.ids-data-grid-header-cell.frozen-last + .ids-data-grid-header-cell {
+  border-inline-start-width: 0;
+}
+.ids-data-grid-header-cell.frozen-left {
+  position: sticky;
+  left: 0;
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(2) {
+  left: var(--ids-data-grid-frozen-column-left-width-2);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(3) {
+  left: var(--ids-data-grid-frozen-column-left-width-3);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(4) {
+  left: var(--ids-data-grid-frozen-column-left-width-4);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(5) {
+  left: var(--ids-data-grid-frozen-column-left-width-5);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(6) {
+  left: var(--ids-data-grid-frozen-column-left-width-6);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(7) {
+  left: var(--ids-data-grid-frozen-column-left-width-7);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(8) {
+  left: var(--ids-data-grid-frozen-column-left-width-8);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(9) {
+  left: var(--ids-data-grid-frozen-column-left-width-9);
+}
+.ids-data-grid-header-cell.frozen-left:nth-of-type(10) {
+  left: var(--ids-data-grid-frozen-column-left-width-10);
+}
+.ids-data-grid-header-cell.frozen-right {
+  position: sticky;
+  right: 0;
+}
+.ids-data-grid-header-cell.frozen-right .ids-data-grid-header-cell-content {
+  display: inline-flex;
+}
+
+.ids-data-grid-header-cell-content {
+  display: flex;
+}
+
+.ids-data-grid-header-text {
+  display: block;
+  padding: var(--ids-data-grid-header-lg-padding);
+  font-weight: var(--ids-font-weight-semibold);
+  font-size: var(--ids-data-grid-font-size-sm);
+  color: var(--ids-data-grid-header-color-text);
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+}
+
+.ids-data-grid-header-icon {
+  align-self: center;
+  color: var(--ids-data-grid-header-color-text);
+  margin-inline-start: var(--ids-space-30);
+  margin-block-start: var(--ids-space-30);
+}
+
+.sort-indicator {
+  position: relative;
+  overflow: hidden;
+  height: 32px;
+  margin-inline-start: 5px;
+  width: 18px;
+}
+
+.is-sortable .sort-indicator ids-icon {
+  color: var(--ids-data-grid-header-color-icon-unsorted);
+  opacity: 0;
+  transition: opacity 0.3s var(--ids-motion-ease) 0s;
+}
+.is-sortable .sort-indicator ids-icon:first-child {
+  position: relative;
+  top: 4px;
+  transform: rotate(180deg);
+}
+.is-sortable .sort-indicator ids-icon:last-child {
+  position: relative;
+  top: -9px;
+}
+.is-sortable:hover {
+  cursor: pointer;
+}
+.is-sortable:hover .sort-indicator ids-icon {
+  opacity: 1;
+}
+
+.header-expander {
+  display: none;
+  max-height: 18px;
+  cursor: var(--ids-cursor-pointer);
+  color: var(--ids-data-grid-header-expander-color);
+  margin-inline-start: var(--ids-space-50);
+}
+.header-expander:hover {
+  color: var(--ids-data-grid-header-expander-active-color);
+}
+
+:host([show-header-expander]) .header-expander {
+  display: unset;
+}
+
+.has-selectioncheckbox .ids-data-grid-header-text {
+  padding-inline-start: 0;
+  padding-inline-end: 0;
+}
+
+.is-sortable .ids-data-grid-header-text,
+.has-headericon .ids-data-grid-header-text {
+  padding-inline-end: 0;
+}
+
+[aria-sort=ascending] .is-sortable .sort-indicator ids-icon:first-child {
+  color: var(--ids-data-grid-header-color-icon-sorted);
+  opacity: 1;
+}
+[aria-sort=ascending] .is-sortable .sort-indicator ids-icon:last-child {
+  opacity: 1;
+}
+
+[aria-sort=descending] .is-sortable .sort-indicator ids-icon:first-child {
+  opacity: 1;
+}
+[aria-sort=descending] .is-sortable .sort-indicator ids-icon:last-child {
+  color: var(--ids-data-grid-header-color-icon-sorted);
+  opacity: 1;
+}
+
+.ids-data-grid-sort-arrows {
+  display: none;
+  height: 34px;
+  position: absolute;
+  z-index: 1;
+}
+.ids-data-grid-sort-arrows::before, .ids-data-grid-sort-arrows::after {
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  content: "";
+  display: inline-block;
+  height: 0;
+  left: -5px;
+  position: absolute;
+  width: 0;
+}
+.ids-data-grid-sort-arrows::before {
+  border-top: 5px solid var(--ids-data-grid-header-color-background-default);
+  top: -6px;
+}
+.ids-data-grid-sort-arrows::after {
+  border-bottom: 5px solid var(--ids-data-grid-header-color-background-default);
+  bottom: -9px;
+}
+
+tr.ids-data-grid-header {
+  position: initial;
+}
+
+th.ids-data-grid-header-cell {
+  display: table-cell;
+}
+
+.ids-data-grid.is-list-style .ids-data-grid-header-cell {
+  background-color: var(--ids-data-grid-list-header-color-background);
+  border-color: var(--ids-data-grid-list-header-color-border);
+}
+.ids-data-grid.is-list-style .ids-data-grid-header-text {
+  color: var(--ids-data-grid-list-header-color-text);
+}
+.ids-data-grid.is-list-style .is-sortable ids-icon {
+  color: var(--ids-data-grid-header-color-icon-unsorted);
+}
+.ids-data-grid.is-list-style [aria-sort=descending] .is-sortable ids-icon:last-child,
+.ids-data-grid.is-list-style [aria-sort=ascending] .is-sortable ids-icon:first-child {
+  color: var(--ids-data-grid-list-header-color-icon-unsorted);
+}
+.ids-data-grid.is-list-style .ids-data-grid-header-text .ids-data-grid-checkbox-container .ids-data-grid-checkbox:not(.checked):not(.indeterminate) {
+  border-color: var(--ids-data-grid-list-header-checkbox-color-background);
+}
+
+.ids-data-grid-body {
+  min-width: fit-content;
+}
+
+.ids-data-grid[data-row-height=md] .ids-data-grid-header-text {
+  padding: var(--ids-data-grid-header-md-padding);
+}
+.ids-data-grid[data-row-height=md] .reorderer ids-icon {
+  inset-inline-start: -11px;
+}
+.ids-data-grid[data-row-height=md] .sort-indicator {
+  margin-inline-start: -6px;
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-header-text {
+  padding: var(--ids-data-grid-header-sm-padding);
+}
+.ids-data-grid[data-row-height=sm] .reorderer {
+  display: none;
+}
+.ids-data-grid[data-row-height=sm] .sort-indicator {
+  margin-inline-start: -2px;
+}
+.ids-data-grid[data-row-height=sm] .align-right .sort-indicator {
+  margin-inline-start: -4px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-header-text {
+  padding: var(--ids-data-grid-header-xs-padding);
+}
+.ids-data-grid[data-row-height=xs] .reorderer {
+  display: none;
+}
+.ids-data-grid[data-row-height=xs] .sort-indicator {
+  margin-inline-start: -2px;
+  margin-block-start: -2px;
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-checkbox-container {
+  padding-top: 2px;
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-header-text {
+  padding: var(--ids-data-grid-header-xxs-padding);
+}
+.ids-data-grid[data-row-height=xxs] .reorderer {
+  display: none;
+}
+.ids-data-grid[data-row-height=xxs] .sort-indicator {
+  margin-inline-start: 0;
+  margin-block-start: -3px;
+}
+.ids-data-grid[data-row-height=xxs] .align-right .sort-indicator {
+  margin-inline-start: 0;
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-checkbox-container {
+  padding-top: 1px;
+}
+.ids-data-grid[data-row-height=xxs] ids-input {
+  --ids-input-height-10: 24px;
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-header-cell-filter-wrapper {
+  padding-inline-start: calc(var(--ids-data-grid-padding-xxs) + 1px);
+  padding-inline-end: calc(var(--ids-data-grid-padding-xxs) + 1px);
+  padding-block-end: calc(var(--ids-data-grid-padding-xxs) + 2px);
+}
+
+:host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-content, :host([dir=rtl]) .ids-data-grid-header-cell.align-right .ids-data-grid-header-cell-filter-wrapper {
+  direction: ltr;
+}
+:host([dir=rtl]) .ids-data-grid-header-cell:last-child {
+  border-inline-end-width: 0;
+}
+
+/* Ids Data Grid Component - Rows */
+.ids-data-grid-row {
+  display: grid;
+  grid-template-columns: var(--ids-data-grid-column-widths);
+  width: 100%;
+}
+.ids-data-grid-row.selected:not(.mixed) .ids-data-grid-cell, .ids-data-grid-row.activated .ids-data-grid-cell {
+  background-color: var(--ids-data-grid-row-color-background-selected);
+}
+.ids-data-grid-row[hidden] {
+  display: none;
+}
+
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell {
+  height: var(--ids-data-grid-row-height-md);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell .text-ellipsis,
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-badge {
+  padding-inline-start: var(--ids-data-grid-padding-md);
+  padding-inline-end: var(--ids-data-grid-padding-md);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell ids-hyperlink {
+  margin: var(--ids-data-grid-padding-md);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-md);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
+}
+.ids-data-grid[data-row-height=md] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-md);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell {
+  height: var(--ids-data-grid-row-height-sm);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell .text-ellipsis,
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-badge {
+  padding-inline-start: var(--ids-data-grid-padding-sm);
+  padding-inline-end: var(--ids-data-grid-padding-sm);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell ids-hyperlink {
+  margin: var(--ids-data-grid-padding-sm);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-sm);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
+}
+.ids-data-grid[data-row-height=sm] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-sm);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell {
+  height: var(--ids-data-grid-row-height-xs);
+  font-size: var(--ids-data-grid-font-size-sm);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell .text-ellipsis,
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-badge {
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+  padding-inline-end: var(--ids-data-grid-padding-xs);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell ids-hyperlink {
+  margin: var(--ids-data-grid-padding-xs);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
+}
+.ids-data-grid[data-row-height=xs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-xs);
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell {
+  height: var(--ids-data-grid-row-height-xxs);
+  font-size: var(--ids-data-grid-font-size-sm);
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell .text-ellipsis,
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-badge {
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
+  padding-inline-end: var(--ids-data-grid-padding-xxs);
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell ids-hyperlink {
+  margin: var(--ids-data-grid-padding-xxs);
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell-content:not(.vertical-align-center) .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
+  transition: padding var(--ids-motion-duration) var(--ids-motion-ease);
+}
+.ids-data-grid[data-row-height=xxs] .ids-data-grid-cell:not(.align-center) .ids-data-grid-header-cell:hover .ids-data-grid-header-cell-content:not(.vertical-align-center).is-reorderable .ids-data-grid-header-text {
+  padding-inline-start: var(--ids-data-grid-padding-xxs);
+}
+
+.ids-data-grid.alt-row-shading ids-data-grid-row:nth-child(even) {
+  background-color: var(--ids-data-grid-row-alternating-color-background);
+}
+
+.ids-data-grid-expandable-row {
+  border-bottom: 1px solid var(--ids-data-grid-cell-color-border);
+  grid-column: 1/-1;
+  padding: 8px;
+}
+
+tr.ids-data-grid-row {
+  display: table-row;
+  height: var(--ids-data-grid-row-height-lg);
+}
+
+.ids-data-grid.row-navigation .ids-data-grid-row:focus-within {
+  box-shadow: var(--ids-data-grid-row-shadow-focus);
+}
+.ids-data-grid.row-navigation .ids-data-grid-row .ids-data-grid-cell:focus {
+  box-shadow: none;
+  outline: none;
+}
+
+/* Ids Data Grid Component - Cells */
+.ids-data-grid-cell {
+  align-items: center;
+  border-inline-start: 1px solid;
+  border-block-end: 1px solid;
+  border-color: var(--ids-data-grid-cell-color-border);
+  display: inline-flex;
+  color: var(--ids-data-grid-cell-color-text-default);
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  white-space: nowrap;
+}
+.ids-data-grid-cell:first-child {
+  border-inline-start-width: 0;
+}
+.ids-data-grid-cell ids-badge::part(badge) {
+  margin-block-end: var(--ids-space-none);
+  margin-inline-end: var(--ids-space-none);
+}
+.ids-data-grid-cell ids-badge {
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
+}
+.ids-data-grid-cell ids-hyperlink {
+  margin: var(--ids-space-60);
+}
+.ids-data-grid-cell .text-ellipsis {
+  display: inline-block;
+  vertical-align: middle;
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
+  height: auto;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ids-data-grid-cell ids-icon {
+  vertical-align: middle;
+}
+.ids-data-grid-cell ids-icon + span {
+  vertical-align: middle;
+  line-height: 25px;
+  padding-inline: 4px;
+}
+.ids-data-grid-cell.align-center > *:first-child {
+  display: inline-flex;
+  margin: 0 auto;
+}
+.ids-data-grid-cell.align-right > *:first-child {
+  margin-inline-start: auto;
+  margin-inline-end: 0;
+}
+.ids-data-grid-cell.is-readonly {
+  background-color: var(--ids-data-grid-cell-color-background-readonly);
+}
+.ids-data-grid-cell.is-disabled {
+  color: var(--ids-data-grid-cell-color-text-disabled);
+}
+.ids-data-grid-cell.is-disabled .editor-cell-icon {
+  display: none;
+}
+.ids-data-grid-cell.is-uppercase {
+  text-transform: uppercase;
+}
+.ids-data-grid-cell:focus, .ids-data-grid-cell.is-editing:not(.is-inline):focus-within {
+  box-shadow: var(--ids-shadow-20);
+  outline: 1px solid var(--ids-color-border-focus);
+  outline-offset: -1px;
+}
+.ids-data-grid-cell.is-editable.is-inline {
+  box-shadow: inset 0 0 0 4px var(--ids-data-grid-cell-color-background-default), inset 0 0 0 5px var(--ids-input-color-border-default);
+}
+.ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
+  --ids-trigger-field-button-margin: 0;
+  display: inline-flex;
+  visibility: visible;
+  margin-inline-end: 15px;
+}
+.ids-data-grid-cell.is-editable.is-timepicker, .ids-data-grid-cell.is-editable.is-datepicker {
+  justify-content: space-between;
+}
+.ids-data-grid-cell.is-editable.is-timepicker .text-ellipsis, .ids-data-grid-cell.is-editable.is-datepicker .text-ellipsis {
+  padding-inline-end: 0;
+}
+.ids-data-grid-cell.is-editable .editor-cell-icon {
+  margin-inline-end: 10px;
+  display: none;
+}
+.ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):focus .editor-cell-icon, .ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):hover .editor-cell-icon {
+  display: flex;
+}
+.ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):focus ids-alert, .ids-data-grid-cell.is-editable:not(.is-inline):not(.is-invalid):hover ids-alert {
+  margin-inline: calc(100% - 48px);
+}
+.ids-data-grid-cell.is-editable.is-editable.is-invalid {
+  justify-content: space-between;
+}
+.ids-data-grid-cell.is-editable.is-editable.is-invalid ids-alert {
+  margin-inline-end: var(--ids-space-40);
+}
+.ids-data-grid-cell.is-editing ids-checkbox {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  position: relative;
+  left: 6px;
+  top: 4px;
+}
+.ids-data-grid-cell.is-editing.is-dropdown, .ids-data-grid-cell.is-editing.is-timepicker, .ids-data-grid-cell.is-editing.is-datepicker {
+  overflow: visible;
+}
+.ids-data-grid-cell.is-editable.is-dropdown .dropdown-cell-value {
+  width: 100%;
+}
+.ids-data-grid-cell.is-editing.is-dropdown.is-dirty::before {
+  margin-inline: 3px;
+}
+.ids-data-grid-cell.is-editing.is-dropdown:not(.is-inline) {
+  border-left-width: 0;
+}
+.ids-data-grid-cell.is-editing.is-dropdown.is-inline {
+  box-shadow: none;
+}
+.ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
+  padding: 0 4px;
+}
+.ids-data-grid-cell.is-editing.is-dropdown.is-inline.is-dirty::before {
+  margin-inline: 6px;
+}
+.ids-data-grid-cell.is-editing.is-uppercase {
+  text-transform: uppercase;
+}
+.ids-data-grid-cell.is-editing.is-uppercase ids-list-box-option,
+.ids-data-grid-cell.is-editing.is-uppercase ids-dropdown::part(triggerfield-input),
+.ids-data-grid-cell.is-editing.is-uppercase ids-input::part(input) {
+  text-transform: uppercase;
+}
+.ids-data-grid-cell.frozen {
+  background-color: var(--ids-data-grid-cell-color-background-default);
+  position: sticky;
+  z-index: 3;
+}
+.ids-data-grid-cell.frozen-last {
+  border-inline-end: 1px solid var(--ids-data-grid-cell-color-border);
+}
+.ids-data-grid-cell.frozen-last + .ids-data-grid-cell {
+  border-inline-start-width: 0;
+}
+.ids-data-grid-cell.frozen-left {
+  position: sticky;
+  left: 0;
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(2) {
+  left: var(--ids-data-grid-frozen-column-left-width-2);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(3) {
+  left: var(--ids-data-grid-frozen-column-left-width-3);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(4) {
+  left: var(--ids-data-grid-frozen-column-left-width-4);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(5) {
+  left: var(--ids-data-grid-frozen-column-left-width-5);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(6) {
+  left: var(--ids-data-grid-frozen-column-left-width-6);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(7) {
+  left: var(--ids-data-grid-frozen-column-left-width-7);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(8) {
+  left: var(--ids-data-grid-frozen-column-left-width-8);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(9) {
+  left: var(--ids-data-grid-frozen-column-left-width-9);
+}
+.ids-data-grid-cell.frozen-left:nth-of-type(10) {
+  left: var(--ids-data-grid-frozen-column-left-width-10);
+}
+.ids-data-grid-cell.frozen-right {
+  position: sticky;
+  right: 0;
+}
+.ids-data-grid-cell.is-dirty::before {
+  border-color: var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent var(--ids-input-dirty-indicator-color-background-dirty);
+  border-style: solid;
+  border-width: 5px;
+  content: "";
+  display: inline-block;
+  margin-inline: 2px;
+  position: absolute;
+  top: 2px;
+  z-index: 1;
+}
+.ids-data-grid-cell.is-dirty.is-inline::before {
+  margin-inline: 6px;
+  top: 6px;
+}
+.ids-data-grid-cell.is-invalid {
+  background-color: var(--ids-data-grid-cell-color-background-error);
+}
+.ids-data-grid-cell ids-alert {
+  margin-top: 3px;
+}
+
+[data-row-height=xxs] .ids-data-grid-cell.is-dirty::before {
+  border-width: 4px;
+}
+[data-row-height=xxs] .ids-data-grid-cell.is-dirty.is-inline::before {
+  margin-inline: 3px;
+  top: 3px;
+}
+[data-row-height=xxs] .is-editable.is-inline {
+  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
+}
+[data-row-height=xxs] ids-button {
+  --ids-button-icon-padding: 2px;
+}
+[data-row-height=xxs] ids-badge {
+  --ids-badge-font-line-height: calc(var(--ids-data-grid-row-height-xxs) - 8px);
+}
+[data-row-height=xxs] ids-input,
+[data-row-height=xxs] ids-trigger-field {
+  --ids-space-20: 0;
+  --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
+}
+[data-row-height=xxs] .ids-data-grid-cell.is-editable .editor-cell-icon {
+  margin-inline-end: 2px;
+}
+[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
+  margin-inline-end: 4px;
+}
+[data-row-height=xxs] .ids-data-grid-cell.is-editable.is-inline {
+  --ids-trigger-field-button-margin: -2px;
+  --ids-button-tertiary-color-background-hover: transparent;
+}
+[data-row-height=xxs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
+  padding: 0 1px;
+  --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
+}
+
+[data-row-height=xs] .ids-data-grid-cell.is-dirty::before {
+  border-width: 4px;
+}
+[data-row-height=xs] .ids-data-grid-cell.is-dirty.is-inline::before {
+  margin-inline: 3px;
+  top: 3px;
+}
+[data-row-height=xs] .is-editable.is-inline {
+  box-shadow: inset 0 0 0 2px var(--ids-input-color-background-default), inset 0 0 0 3px var(--ids-input-color-border-default);
+}
+[data-row-height=xs] ids-button {
+  --ids-button-icon-padding: 3px;
+}
+[data-row-height=xs] ids-badge {
+  --ids-badge-font-line-height: calc(var(--ids-data-grid-row-height-xs) - 12px);
+}
+[data-row-height=xs] ids-input {
+  --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
+}
+[data-row-height=xs] .ids-data-grid-cell.is-editable .editor-cell-icon {
+  margin-inline-end: 2px;
+}
+[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
+  margin-inline-end: 4px;
+}
+[data-row-height=xs] .ids-data-grid-cell.is-editable.is-inline {
+  --ids-trigger-field-button-margin: -2px;
+  --ids-button-tertiary-color-background-hover: transparent;
+  --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
+}
+[data-row-height=xs] .ids-data-grid-cell.is-editing.is-dropdown.is-inline ids-dropdown {
+  padding: 0 2px;
+}
+
+[data-row-height=sm] .is-editable.is-inline {
+  box-shadow: inset 0 0 0 3px var(--ids-input-color-background-default), inset 0 0 0 4px var(--ids-input-color-border-default);
+}
+[data-row-height=sm] .ids-data-grid-cell.is-dirty.is-inline::before {
+  margin-inline: 5px;
+  top: 5px;
+}
+[data-row-height=sm] ids-button {
+  --ids-button-icon-padding: 4px;
+}
+[data-row-height=sm] .ids-data-grid-cell.is-editable .editor-cell-icon {
+  margin-inline-end: 6px;
+}
+[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
+  margin-inline-end: 6px;
+}
+[data-row-height=sm] .ids-data-grid-cell.is-editable.is-inline {
+  --ids-trigger-field-button-margin: -1px;
+  --ids-button-tertiary-color-background-hover: transparent;
+}
+
+[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline ids-icon.editor-cell-icon {
+  margin-inline-end: var(--ids-data-grid-padding-sm);
+}
+[data-row-height=md] .ids-data-grid-cell.is-editable.is-inline {
+  --ids-trigger-field-button-margin: -3px;
+  --ids-button-tertiary-color-background-hover: transparent;
+}
+
+.ids-data-grid.is-list-style .ids-data-grid-cell {
+  border-inline-start-width: 0;
+  border-bottom: 1px solid var(--ids-data-grid-list-cell-color-border);
+}
+.ids-data-grid.is-list-style .ids-data-grid-cell.is-readonly {
+  background-color: var(--ids-data-grid-cell-color-background-readonly);
+}
+.ids-data-grid.is-list-style .ids-data-grid-cell.is-disabled {
+  color: var(--ids-data-grid-cell-color-text-disabled);
+}
+.ids-data-grid.is-list-style .ids-data-grid-body .ids-data-grid-row:first-child .ids-data-grid-cell {
+  border-top: 0;
+}
+
+td.ids-data-grid-cell {
+  display: table-cell;
+  padding-inline-start: var(--ids-space-60);
+  padding-inline-end: var(--ids-space-60);
+}
+
+:host([dir=rtl]) .ids-data-grid.is-list-style .ids-data-grid-cell {
+  border-inline-end-width: 0;
+}
+:host([dir=rtl]) .ids-data-grid-cell:last-child {
+  border-inline-end-width: 0;
+}
+:host([dir=rtl]) .ids-data-grid-cell.is-dirty::before {
+  border-color: var(--ids-input-dirty-indicator-color-background-dirty) var(--ids-input-dirty-indicator-color-background-dirty) transparent transparent;
+}
+
+.hide {
+  display: none;
+}
+
+@media all and (max-width: 1440px) {
+  .hide-xxl-down {
+    display: none;
+  }
+}
+@media all and (min-width: 1440px) {
+  .hide-xxl-up {
+    display: none;
+  }
+}
+@media all and (max-width: 1280px) {
+  .hide-xl-down {
+    display: none;
+  }
+}
+@media all and (min-width: 1280px) {
+  .hide-xl-up {
+    display: none;
+  }
+}
+@media all and (max-width: 1024px) {
+  .hide-lg-down {
+    display: none;
+  }
+}
+@media all and (min-width: 1024px) {
+  .hide-lg-up {
+    display: none;
+  }
+}
+@media all and (max-width: 840px) {
+  .hide-md-down {
+    display: none;
+  }
+}
+@media all and (min-width: 840px) {
+  .hide-md-up {
+    display: none;
+  }
+}
+@media all and (max-width: 600px) {
+  .hide-sm-down {
+    display: none;
+  }
+}
+@media all and (min-width: 600px) {
+  .hide-sm-up {
+    display: none;
+  }
+}
+@media all and (max-width: 360px) {
+  .hide-xs-down {
+    display: none;
+  }
+}
+@media all and (min-width: 360px) {
+  .hide-xs-up {
+    display: none;
+  }
+}
+@media all and (max-width: 600px) {
+  :host(.hide-sm-down) {
+    display: none;
+  }
+}
+
+.ids-popup-menu:not([hidden]) {
+  display: block;
+  z-index: var(--ids-z-index-60);
+}
+
+/**
+ * Checkbox Mixins.
+ */
+@keyframes check {
+  0% {
+    height: 0;
+    left: 0;
+    top: 8px;
+    width: 0;
+  }
+  50% {
+    height: 0;
+    left: 0;
+    top: 8px;
+    width: 4px;
+  }
+  100% {
+    height: 10px;
+    left: 4px;
+    top: 0;
+    width: 4px;
+  }
+}
+@keyframes checkindeterminate {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 10px;
+  }
+}
+/**
+ * Radio Mixins.
+ */
+:root {
+  --ids-data-grid-column-widths: repeat(1, minmax(110px, 1fr));
+}
+
+.ids-data-grid {
+  background-color: var(--ids-data-grid-color-background);
+  border: 1px solid var(--ids-data-grid-cell-color-border);
+  border-radius: var(--ids-border-radius-01);
+  border-collapse: collapse;
+  box-sizing: border-box;
+  contain: content;
+  overflow: auto;
+  width: 100%;
+  display: inline-grid;
+  align-content: flex-start;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-family: var(--ids-font-family-default);
+  font-size: var(--ids-font-size-40);
+}
+.ids-data-grid .ids-data-grid-checkbox-container {
+  cursor: var(--ids-cursor-pointer);
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.ids-data-grid .ids-data-grid-checkbox {
+  position: absolute;
+  border: var(--ids-checkbox-border);
+  border-radius: var(--ids-checkbox-border-radius);
+  height: 14px;
+  width: 14px;
+  left: 0;
+  top: 2px;
+  border-color: var(--ids-data-grid-cell-checkbox-color-border);
+  position: relative;
+  left: 0;
+  top: 0;
+}
+.ids-data-grid .ids-data-grid-checkbox.editable {
+  cursor: var(--ids-cursor-pointer);
+}
+.ids-data-grid .ids-data-grid-checkbox.disabled {
+  background-color: var(--ids-checkbox-color-background-disabled);
+  border-color: var(--ids-checkbox-color-border-disabled);
+  cursor: var(--ids-cursor-default);
+}
+.ids-data-grid .ids-data-grid-checkbox.checked {
+  background-color: var(--ids-checkbox-color-background-selected);
+  border-color: var(--ids-checkbox-color-border-selected);
+}
+.ids-data-grid .ids-data-grid-checkbox.checked::after {
+  position: absolute;
+  display: block;
+  border: var(--ids-font-size-20) solid var(--ids-checkbox-color-border-selected-after);
+  border-width: var(--ids-checkbox-border-width-selected-after);
+  animation: check 0.15s;
+  transform: rotate(45deg);
+  content: "";
+  height: 10px;
+  left: 4px;
+  top: 0;
+  width: 4px;
+  animation: none;
+}
+.ids-data-grid .ids-data-grid-checkbox.checked.disabled {
+  background-color: var(--ids-checkbox-color-background-selected-disabled);
+  border-color: var(--ids-checkbox-color-border-selected-disabled);
+}
+.ids-data-grid .ids-data-grid-checkbox.indeterminate {
+  background-color: var(--ids-checkbox-color-background-indeterminate);
+  border-color: var(--ids-checkbox-color-border-indeterminate);
+}
+.ids-data-grid .ids-data-grid-checkbox.indeterminate::after {
+  position: absolute;
+  animation: checkindeterminate 0.15s;
+  display: block;
+  border: 1px solid var(--ids-checkbox-color-border-indeterminate-after);
+  border-width: var(--ids-checkbox-border-width-indeterminate);
+  content: "";
+  height: 6px;
+  left: 2px;
+  top: 0;
+  transform: none;
+  width: 10px;
+  animation: none;
+}
+.ids-data-grid .ids-data-grid-radio-container {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+}
+.ids-data-grid .ids-data-grid-radio {
+  position: absolute;
+  border: 1px solid var(--ids-radio-button-color-border-default);
+  border-radius: var(--ids-radio-button-border-radius);
+  height: 14px;
+  left: 0;
+  top: 3px;
+  transition: border-color var(--ids-motion-duration) var(--ids-motion-ease);
+  width: 14px;
+  cursor: var(--ids-cursor-pointer);
+  position: relative;
+  left: 0;
+  top: 0;
+}
+.ids-data-grid .ids-data-grid-radio::after {
+  position: absolute;
+  background-color: var(--ids-radio-button-color-background);
+  border: 1px solid var(--ids-radio-button-color-background);
+  border-radius: var(--ids-radio-button-border-radius);
+  content: "";
+  height: 0;
+  left: 6px;
+  top: 6px;
+  transition: all var(--ids-motion-duration) var(--ids-motion-ease);
+  width: 0;
+}
+.ids-data-grid .ids-data-grid-radio.disabled {
+  border-color: var(--ids-radio-button-color-border-disabled);
+  cursor: var(--ids-cursor-default);
+  box-shadow: none;
+}
+.ids-data-grid .ids-data-grid-radio.checked {
+  background-color: var(--ids-radio-button-color-background-selected);
+  border-color: var(--ids-radio-button-color-border-selected);
+}
+.ids-data-grid .ids-data-grid-radio.checked::after {
+  background-color: var(--ids-radio-button-inner-color-background-selected);
+  border-color: var(--ids-radio-button-inner-color-background-selected);
+  border-width: 2px;
+  height: 4px;
+  left: 3px;
+  top: 3px;
+  width: 4px;
+}
+.ids-data-grid .ids-data-grid-radio.checked.disabled {
+  background-color: var(--ids-radio-button-color-background-selected-disabled);
+  border-color: var(--ids-radio-button-color-border-selected-disabled);
+}
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline: 4px;
+}
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  overflow: initial;
+  padding-inline-start: 40px;
+}
+.ids-data-grid .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis ids-hyperlink {
+  margin-inline-start: 0;
+}
+.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 64px;
+}
+.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 55px;
+}
+.ids-data-grid [aria-level="2"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 91px;
+}
+.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 82px;
+}
+.ids-data-grid [aria-level="3"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 118px;
+}
+.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 109px;
+}
+.ids-data-grid [aria-level="4"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 145px;
+}
+.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 136px;
+}
+.ids-data-grid [aria-level="5"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 172px;
+}
+.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 163px;
+}
+.ids-data-grid [aria-level="6"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 199px;
+}
+.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 190px;
+}
+.ids-data-grid [aria-level="7"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container .text-ellipsis {
+  padding-inline-start: 226px;
+}
+.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button {
+  padding-inline-start: 217px;
+}
+.ids-data-grid [aria-level="8"] .ids-data-grid-cell .ids-data-grid-tree-container ids-button + .text-ellipsis {
+  padding-inline-start: 0;
+}
+.ids-data-grid.is-list-style {
+  border-width: 0;
+}
+
+.ids-data-grid-body {
+  min-width: fit-content;
+}
+
+table.ids-data-grid {
+  display: table;
+  outline: 1px solid var(--ids-data-grid-cell-color-border);
+  outline-offset: -1px;
+}
+
+.ids-data-grid-wrapper.has-empty-message {
+  position: relative;
+  display: grid;
+}
+.ids-data-grid-wrapper.has-empty-message ids-empty-message:not([hidden]),
+.ids-data-grid-wrapper.has-empty-message ::slotted(ids-empty-message:not([hidden])) {
+  position: absolute;
+  display: flex;
+  align-self: center;
+  justify-self: center;
+  top: 80px;
+  bottom: 20px;
+}
+.ids-data-grid-wrapper.has-empty-message .ids-data-grid {
+  min-height: var(--ids-data-grid-height-min);
+}