hrm_ui_lib 2.0.2 → 2.1.0

package/assets/styles/styles.css

@@ -7971,6 +7971,531 @@ body {
   margin-left: var(--ds-size-16);
 }
 
+.advanced-table {
+  --ds-table-th-height:var(--ds-size-56);
+  --ds-table-td-height:var(--ds-size-56);
+  --ds-table-th-padding:var(--ds-space-8) var(--ds-space-16);
+  --ds-table-td-padding:var(--ds-space-8) var(--ds-space-16);
+  --ds-table-th-border-color:var(--ds-color-border-quintary);
+  --ds-table-td-border-color:var(--ds-color-border-quintary);
+  --ds-table-td-bg-hover:var(--ds-color-bg-container-lighter);
+  --ds-table-td-bg-selected:var(--grey-40);
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -moz-box-direction: normal;
+  -moz-box-orient: vertical;
+  border-radius: var(--ds-border-radius-2xl);
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  font-size: var(--font-size-14);
+  height: 100%;
+  position: relative;
+}
+
+.advanced-table, .advanced-table__header-wrapper {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__header-wrapper {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background-color: var(--ds-color-bg-white);
+  border-bottom: 1px solid var(--ds-color-border-quintary);
+  border-top-left-radius: var(--ds-border-radius-2xl);
+  border-top-right-radius: var(--ds-border-radius-2xl);
+  height: var(--ds-size-72);
+  padding: 0 var(--ds-space-24);
+  z-index: 3;
+}
+
+.advanced-table__collapse-button {
+  margin-right: var(--ds-space-16);
+}
+
+.advanced-table__header {
+  -ms-flex-align: center;
+  flex: 1;
+}
+
+.advanced-table__footer, .advanced-table__header {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__footer {
+  -ms-flex-align: center;
+  background-color: var(--ds-color-bg-white);
+  border-bottom-left-radius: var(--ds-border-radius-2xl);
+  border-bottom-right-radius: var(--ds-border-radius-2xl);
+  border-top: 1px solid var(--ds-color-border-quintary);
+  height: var(--ds-size-64);
+  padding: 0 var(--ds-space-24);
+  z-index: 1;
+}
+
+.advanced-table__inner {
+  height: calc(100% - var(--ds-size-72) - var(--ds-size-64));
+  overflow-x: auto;
+  transition: height 0.3s ease-in-out;
+}
+
+.advanced-table__inner.is-collapsed {
+  height: 0;
+  overflow: hidden;
+}
+
+.advanced-table__thead {
+  background: var(--ds-color-bg-white);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+}
+
+.advanced-table .draggable-col {
+  background-color: var(--ds-color-bg-white);
+  border-radius: var(--ds-border-radius-md);
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  text-align: left;
+}
+
+.advanced-table .resize-icon {
+  cursor: col-resize;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 20px;
+}
+
+.advanced-table .border {
+  border-width: 1px;
+}
+
+.advanced-table .w-fit {
+  width: fit-content;
+}
+
+.advanced-table .select-none {
+  user-select: none;
+}
+
+.advanced-table .touch-none {
+  touch-action: none;
+}
+
+.advanced-table .hidden {
+  display: none;
+}
+
+.advanced-table .z-10 {
+  z-index: 10;
+}
+
+.advanced-table .column-menu {
+  width: 140px;
+}
+
+.advanced-table .column-menu div {
+  padding: 5px 12px;
+}
+
+.advanced-table .column-menu input {
+  margin-right: 8px;
+}
+
+.advanced-table table {
+  border-collapse: separate;
+  border-spacing: 0;
+  max-height: 100%;
+  width: 100%;
+}
+
+.advanced-table table thead tr th {
+  border-bottom: 1px solid var(--ds-table-th-border-color);
+  height: var(--ds-table-th-height);
+  padding: var(--ds-table-th-padding);
+  vertical-align: middle;
+}
+
+.advanced-table table thead tr th.with-checkbox {
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-8) 22px;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table table thead tr th.actions-header .resize-icon, .advanced-table table thead tr th.with-checkbox .resize-icon {
+  display: none;
+}
+
+.advanced-table table tbody tr td {
+  border-bottom: 1px solid var(--ds-table-td-border-color);
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding);
+  vertical-align: middle;
+}
+
+.advanced-table table tbody tr td.with-checkbox {
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-6) var(--ds-space-8) 22px;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table table tbody tr td.with-checkbox .actions-list__checkbox {
+  display: none;
+}
+
+.advanced-table table tbody tr td.with-checkbox .actions-list__checkbox.active-checkbox {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table table tbody tr td:not(.with-checkbox, .action-column) {
+  box-sizing: border-box;
+  padding: var(--ds-space-8) var(--ds-space-16) !important;
+}
+
+.advanced-table table tbody tr .action-column {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  min-width: auto !important;
+  padding: var(--ds-space-0);
+  width: 0 !important;
+}
+
+.advanced-table table tbody tr:hover td {
+  background-color: var(--ds-table-td-bg-hover);
+  cursor: pointer;
+}
+
+.advanced-table table tbody tr:hover .action-column, .advanced-table table tbody tr:hover td .actions-list__checkbox, .advanced-table table tbody tr:hover td .actions-list__right {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table table tbody tr:hover .action-column {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  padding: var(--ds-space-0);
+}
+
+.advanced-table table tbody tr:hover .pinned-cell {
+  background-color: var(--ds-table-td-bg-hover) !important;
+}
+
+.advanced-table table tbody tr.selected td, .advanced-table table tbody tr.selected + .advanced-table__expanded-row td {
+  background-color: var(--ds-table-td-bg-selected);
+}
+
+.advanced-table table tbody tr.selected .pinned-cell {
+  background-color: var(--ds-table-td-bg-hover) !important;
+}
+
+.advanced-table table tbody tr:last-child td {
+  border-bottom: 0;
+}
+
+.advanced-table__pagination {
+  -webkit-box-pack: justify;
+  -moz-box-pack: justify;
+  -ms-flex-pack: justify;
+  height: 100%;
+  -webkit-justify-content: space-between;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.advanced-table__pagination, .advanced-table__pagination__right {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+}
+
+.advanced-table__pagination__right {
+  gap: var(--ds-space-24);
+}
+
+.advanced-table__pagination__right__input {
+  width: var(--ds-size-48);
+}
+
+.advanced-table__pagination__right__input input {
+  text-align: center;
+}
+
+.advanced-table__pagination .select {
+  width: 140px;
+}
+
+.advanced-table__pagination .select.no-border input {
+  border: 0;
+}
+
+.advanced-table__expand-button {
+  flex-shrink: 0;
+  height: var(--ds-size-32);
+  min-width: auto;
+  padding: var(--ds-space-4);
+  width: var(--ds-size-32);
+}
+
+.advanced-table__expanded-row td {
+  background-color: inherit;
+  border-bottom: 1px solid var(--ds-table-td-border-color);
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding) !important;
+  transition: background-color 0.2s ease;
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content {
+  background-color: transparent;
+  padding: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table {
+  border-collapse: separate;
+  border-spacing: 0;
+  width: 100%;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td {
+  background-color: transparent;
+  border-bottom: none;
+  height: var(--ds-table-td-height);
+  padding: var(--ds-table-td-padding);
+  vertical-align: middle;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: inherit;
+  max-width: var(--ds-space-48);
+  min-width: auto !important;
+  padding: var(--ds-space-8) var(--ds-space-40) var(--ds-space-8) 55px !important;
+  width: var(--ds-space-48) !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .actions-list__checkbox {
+  display: flex !important;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox .indeterminate-checkbox {
+  margin: 0;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.pinned-cell {
+  background-color: inherit;
+  position: sticky;
+  z-index: 1;
+}
+
+.advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.expand-column {
+  box-sizing: border-box !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+}
+
+.advanced-table__expanded-row:hover td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td, .advanced-table__expanded-row:hover td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-hover);
+}
+
+tr.selected .advanced-table__expanded-row td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td, tr.selected .advanced-table__expanded-row td .advanced-table__expanded-content table tbody tr td.with-checkbox {
+  background-color: var(--ds-table-td-bg-selected);
+}
+
+.advanced-table .expand-column {
+  box-sizing: border-box !important;
+  flex: 0 0 50px !important;
+  overflow: hidden !important;
+  padding: var(--ds-space-8) var(--ds-space-6) !important;
+  white-space: nowrap !important;
+}
+
+.with-border {
+  border: 1px solid var(--ds-color-border-quintary);
+}
+
+.actions-list {
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  height: 100%;
+}
+
+.actions-list, .actions-list__right {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+}
+
+.actions-list__right {
+  background-color: var(--ds-color-bg-container-lighter);
+  bottom: 0;
+  display: none;
+  gap: var(--ds-space-8);
+  left: unset;
+  padding: var(--ds-space-2) var(--ds-space-16);
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.actions-list__right:before {
+  background: linear-gradient(90deg, hsla(0, 0%, 97%, 0), #f8f8f8 92.6%);
+  content: "";
+  height: 100%;
+  left: -24px;
+  position: absolute;
+  width: 24px;
+}
+
+.settings-menu {
+  border-radius: var(--ds-border-radius-lg);
+  box-shadow: var(--shadow-2);
+  width: 260px;
+}
+
+.settings-menu__dropdown {
+  padding: var(--ds-space-6) 0;
+}
+
+.settings-menu__dropdown .relative {
+  position: relative;
+}
+
+.settings-menu__dropdown .sticky {
+  background: #fff;
+  border-bottom: 1px solid var(--ds-color-border-tertiary) !important;
+  padding: 0 var(--ds-space-16);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.settings-menu__dropdown .scrollbar--content {
+  box-sizing: border-box;
+  max-height: 300px;
+  overflow-y: auto;
+  padding: 0 var(--ds-space-16);
+}
+
+.settings-menu__dropdown .scrollbar--content::-webkit-scrollbar {
+  display: none;
+}
+
+.settings-menu__dropdown__option {
+  border-bottom: 1px solid var(--ds-color-border-tertiary);
+  margin-bottom: var(--ds-space-4);
+}
+
+.settings-menu__dropdown__option:last-child {
+  border-bottom: 0;
+  margin-bottom: 0;
+}
+
+.settings-menu__dropdown__option .switcher {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  height: 36px;
+}
+
+.settings-menu__dropdown__option .switcher__label {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-400);
+  text-transform: capitalize;
+}
+
+@keyframes react-loading-skeleton {
+  to {
+    transform: translateX(100%);
+  }
+}
+.react-loading-skeleton {
+  --base-color:#ebebeb;
+  --highlight-color:#f5f5f5;
+  --animation-duration:1.5s;
+  --animation-direction:normal;
+  --pseudo-element-display:block;
+  background-color: var(--base-color);
+  border-radius: 0.25rem;
+  display: inline-flex;
+  line-height: 1;
+  overflow: hidden;
+  position: relative;
+  user-select: none;
+  width: 100%;
+}
+
+.react-loading-skeleton:after {
+  animation-direction: var(--animation-direction);
+  animation-duration: var(--animation-duration);
+  animation-iteration-count: infinite;
+  animation-name: react-loading-skeleton;
+  animation-timing-function: ease-in-out;
+  background-image: var(--custom-highlight-background, linear-gradient(90deg, var(--base-color) 0, var(--highlight-color) 50%, var(--base-color) 100%));
+  background-repeat: no-repeat;
+  content: " ";
+  display: var(--pseudo-element-display);
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  transform: translateX(-100%);
+}
+
+@media (prefers-reduced-motion) {
+  .react-loading-skeleton {
+    --pseudo-element-display:none;
+  }
+}
 [data-rwp-wrapper] {
   align-items: stretch;
   display: flex;