ids-enterprise-wc 1.2.0 → 1.4.0

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

@@ -433,6 +433,19 @@ th.ids-data-grid-header-cell {
   display: none;
 }
 
+.ids-data-grid-row.is-group-row {
+  background-color: var(--ids-data-grid-row-grouped-color-background);
+  grid-template-columns: 100%;
+}
+.ids-data-grid-row.is-group-row .ids-data-grid-cell {
+  color: var(--ids-data-grid-row-grouped-color-text, red);
+  font-weight: var(--ids-data-grid-row-grouped-font-weight, 600);
+  border-inline-start: 0;
+}
+.ids-data-grid-row.is-group-row ids-button {
+  --ids-button-tertiary-color-background-hover: transparent;
+}
+
 .ids-data-grid[data-row-height=md] .ids-data-grid-cell {
   height: var(--ids-data-grid-row-height-md);
 }
@@ -680,18 +693,21 @@ tr.ids-data-grid-row {
 .ids-data-grid-cell.is-editing.is-lookup, .ids-data-grid-cell.is-editing.is-datepicker, .ids-data-grid-cell.is-editing.is-timepicker {
   overflow: visible;
 }
+.ids-data-grid-cell.is-editing.is-inline ids-input {
+  z-index: 99;
+}
 .ids-data-grid-cell.is-editable.is-dropdown .dropdown-cell-value {
   width: 100%;
 }
+.ids-data-grid-cell.is-editable.is-dropdown.is-editing:not(.is-inline) {
+  border-inline-start-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.formatter-text {
-  white-space: pre;
-}
 .ids-data-grid-cell.is-editing.is-uppercase {
   text-transform: uppercase;
 }
@@ -779,6 +795,9 @@ tr.ids-data-grid-row {
   margin-inline: 6px;
   inset-block-start: 6px;
 }
+.ids-data-grid-cell.is-dirty.is-inline ids-input::part(dirty-tracker-icon) {
+  top: -1px;
+}
 .ids-data-grid-cell.is-invalid {
   background-color: var(--ids-data-grid-cell-color-background-error);
 }
@@ -804,6 +823,13 @@ tr.ids-data-grid-row {
   --ids-space-xxxs: 0;
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
+[data-row-height=xxs] ids-input::part(dirty-tracker-icon) {
+  --ids-icon-height-default: 10px !important;
+  --ids-icon-width-default: 10px !important;
+}
+[data-row-height=xxs] ids-input::part(input) {
+  height: calc(var(--ids-input-height-10) - 4px);
+}
 [data-row-height=xxs] .ids-data-grid-cell.is-editable .editor-cell-icon {
   margin-inline-end: 2px;
 }
@@ -841,6 +867,10 @@ tr.ids-data-grid-row {
 [data-row-height=xs] ids-input {
   --ids-input-font-size-sm: var(--ids-data-grid-font-size-sm);
 }
+[data-row-height=xs] ids-input::part(dirty-tracker-icon) {
+  --ids-icon-height-default: 12px !important;
+  --ids-icon-width-default: 12px !important;
+}
 [data-row-height=xs] .ids-data-grid-cell.is-editable .editor-cell-icon {
   margin-inline-end: 2px;
 }
@@ -1967,6 +1997,13 @@ table.ids-data-grid {
 .ids-data-grid-wrapper {
   position: relative;
 }
+.ids-data-grid-wrapper .ids-data-grid-toolbar {
+  display: flex;
+  width: 100%;
+  margin: 6px 0;
+  align-items: center;
+  justify-content: end;
+}
 
 ids-empty-message:not([hidden]),
 ::slotted(ids-empty-message:not([hidden])) {
@@ -2001,4 +2038,56 @@ ids-loading-indicator {
 }
 ids-loading-indicator[stopped] {
   display: none;
+}
+
+:host(:not([disable-row-highlight])) ids-data-grid-row:hover ids-data-grid-cell,
+:host(:not([disable-row-highlight])) ids-data-grid-row:hover ids-data-grid-cell.is-readonly {
+  background-color: var(--ids-data-grid-row-color-background-hover);
+}
+
+#datagrid-modal {
+  --ids-modal-content-padding: 0;
+  --ids-modal-header-padding: 16px 16px 8px 16px;
+  --ids-popup-fit-height: 400px;
+}
+#datagrid-modal ids-swappable-item {
+  --ids-swappable-item-color-background-selected: var(--ids-color-accent-blue-weakest);
+  --ids-swappable-item-color-text-selected: var(--ids-color-foreground-default-default);
+  align-items: center;
+  height: var(--ids-data-grid-modal-row-height);
+}
+#datagrid-modal #datagrid-modal-title {
+  position: relative;
+  top: calc(var(--ids-space-04) * -1);
+}
+#datagrid-modal ids-search-field {
+  --ids-input-color-background-default: var(--ids-color-accent-gray-weakest);
+  --ids-search-field-color-background-default: var(--ids-color-accent-gray-weakest);
+  --ids-input-color-border-default: var(--ids-color-accent-gray-weak);
+  --ids-input-color-border-hover: var(--ids-color-accent-gray-weak);
+  --ids-input-color-border-focus: var(--ids-color-accent-gray-weak);
+  --ids-input-color-border-shadow: none;
+  --ids-search-field-border-radius: 0;
+  --ids-search-field-border-width: 1px 0;
+  margin-bottom: -8px;
+  margin-top: calc(var(--ids-space-08) * -1);
+  min-width: 330px;
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+#datagrid-modal ids-text {
+  width: 100%;
+}
+#datagrid-modal ids-switch {
+  position: relative;
+  top: 2px;
+}
+#datagrid-modal ids-swappable {
+  width: 100%;
+}
+#datagrid-modal .datagrid-modal-column-list {
+  --ids-modal-column-list-height: calc(100% - 14px);
+  overflow: auto;
+  max-height: var(--ids-modal-column-list-height);
 }