@itfin/components 1.2.33 → 1.2.34

package/src/assets/scss/components/_form.scss

@@ -0,0 +1,22 @@
+@import '../variables';
+
+.itf-label {
+  &.no-details {
+    margin-bottom: .5rem;
+  }
+  &__label {
+    .star {
+      color: $danger;
+    }
+  }
+  &__errors {
+    min-height: 21px;
+    margin-top: 4px;
+    font-size: 0.75rem;
+    opacity: .5;
+
+    &.valid-feedback, &.invalid-feedback {
+      opacity: 1;
+    }
+  }
+}

package/src/assets/scss/components/_icon.scss

@@ -0,0 +1,5 @@
+@import '../variables';
+
+.itf-icon {
+  display: inline-block;
+}

package/src/assets/scss/components/_modal.scss

@@ -0,0 +1,9 @@
+@import '../variables';
+
+.itf-modal {
+  .modal-header {
+    .btn-close {
+      margin-right: 0;
+    }
+  }
+}

package/src/assets/scss/components/_pagination.scss

@@ -0,0 +1,12 @@
+@import '../variables';
+
+.itf-pagination.pagination {
+  padding-left: 0;
+
+  .page-item {
+    margin-right: 3px;
+    .page-link {
+      border-radius: .5rem;
+    }
+  }
+}

package/src/assets/scss/components/_pdf-viewer.scss

@@ -0,0 +1,4 @@
+@import "pdf-viewer/text_layer_builder.scss";
+@import "pdf-viewer/annotation_layer_builder.scss";
+@import "pdf-viewer/pdf_viewer.scss";
+@import "pdf-viewer/viewer.scss";

package/src/assets/scss/components/_popover.scss

@@ -0,0 +1,37 @@
+@import '../variables';
+
+.itf-popover {
+  display: none;
+
+  .popover-body > & {
+    display: block;
+  }
+  .border-right {
+    border-right: 1px solid #eee;
+  }
+}
+.itf-popover-container {
+  display: inline-block;
+}
+
+[data-theme="dark"] {
+  .itf-popover {
+    .border-right {
+      border-color: $dark-border-color;
+    }
+  }
+  .popover {
+    background-color: $dark-body-bg;
+    border-color: $dark-border-color;
+  }
+  .bs-popover-bottom > .popover-arrow::after, .bs-popover-auto[data-popper-placement^=bottom] > .popover-arrow::after {
+    border-bottom-color: $dark-border-color;
+  }
+  .popover-body {
+    color: $dark-body-color;
+  }
+}
+
+.nopadding .popover-body {
+  padding: 0;
+}

package/src/assets/scss/components/_segmeneted-control.scss

@@ -0,0 +1,138 @@
+@import '../variables';
+
+.itf-segmeneted-control {
+  --itf-segmeneted-control--background: #{$input-bg};
+  --itf-segmeneted-control--border-radius: #{$border-radius};
+  --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
+
+  cursor: pointer;
+  background: var(--itf-segmeneted-control--background);
+  border-radius: var(--itf-segmeneted-control--border-radius);
+  margin: 0;
+  padding: 2px;
+  border: none;
+  outline: none;
+  display: inline-grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  overflow: hidden;
+
+  .option {
+    position: relative;
+    cursor: pointer;
+
+    &:hover input:not(:checked) + label span,
+    &:active input:not(:checked) + label span,
+    &:focus input:not(:checked) + label span {
+      /*opacity: .2;*/
+      color: var(--v-primary-base);
+    }
+    &:active input:not(:checked) + label span {
+      transform: scale(.95);
+    }
+    &:first-of-type {
+      grid-column: 1;
+      grid-row: 1;
+      box-shadow: none;
+
+      label::before {
+        opacity: 0;
+      }
+      label::after {
+        opacity: 0;
+      }
+    }
+    &:last-of-type {
+      label::after {
+        opacity: 0;
+      }
+    }
+    label {
+      justify-content: center;
+      height: 100%;
+      align-items: center;
+      display: flex;
+      cursor: pointer;
+      position: relative;
+      text-align: center;
+      padding: .25rem 1.5rem;
+      background: rgba(255, 255, 255, 0);
+      color: rgba(0, 0, 0, 1);
+
+      &::before,
+      &::after {
+        content: '';
+        width: 1px;
+        background: rgba(142, 142, 147, .15);
+        position: absolute;
+        top: 14%;
+        bottom: 14%;
+        border-radius: var(--itf-segmeneted-control--border-radius);
+        will-change: background;
+        -webkit-transition: background .2s ease;
+        transition: background .2s ease;
+      }
+      &::before {
+        left: 0;
+        transform: translateX(-.5px);
+      }
+      &::after {
+        right: 0;
+        transform: translateX(.5px);
+      }
+      span {
+        display: block;
+        position: relative;
+        z-index: 2;
+        -webkit-transition: all .2s ease;
+        transition: all .2s ease;
+        will-change: transform;
+      }
+    }
+
+    input {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: 100%;
+      padding: 0;
+      margin: 0;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      outline: none;
+      border: none;
+      opacity: 0;
+
+      &:checked + label {
+        cursor: default;
+      }
+      &:checked + label::before,
+      &:checked + label::after {
+        background: var(--itf-segmeneted-control--background);
+        z-index: 1;
+      }
+    }
+  }
+  .selection {
+    margin-right: 1px;
+    background: rgba(255, 255, 255, 1);
+    border: .5px solid rgba(0, 0, 0, 0.04);
+    box-shadow: var(--itf-segmeneted-control--shadow);
+    /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
+    border-radius: var(--itf-segmeneted-control--border-radius);
+    grid-column: 1;
+    grid-row: 1;
+    z-index: 2;
+    will-change: transform;
+    -webkit-transition: transform .2s ease;
+    transition: transform .2s ease;
+  }
+}

package/src/assets/scss/components/_select.scss

@@ -0,0 +1,76 @@
+@import '../variables';
+@import '../directives/loading';
+@import './select/variables';
+@import './select/component';
+@import './select/animations';
+@import './select/states';
+
+@import './select/dropdown-toggle';
+@import './select/open-indicator';
+@import './select/clear';
+@import './select/dropdown-menu';
+@import './select/dropdown-option';
+@import './select/selected';
+@import './select/search-input';
+@import './select/spinner';
+
+[data-theme="dark"] {
+  .itf-select {
+    &.vs--open .form-control {
+      box-shadow: 0 0 0 0.125rem $dark-input-focus-border;
+      border-color: $dark-input-focus-border-color;
+      background: $dark-input-focus-border-color;
+    }
+    &__dropdown-menu {
+      background-color: $dark-body-bg;
+      border-color: $dark-input-focus-border;
+
+      .dropdown-item {
+        color: $dark-body-color;
+
+        &.active, &:active {
+          background-color: $dark-primary;
+          color: $dark-body-bg;
+        }
+      }
+    }
+  }
+}
+
+.itf-select {
+  cursor: pointer;
+
+  .form-control {
+    padding: 0.3125rem 0.75rem;
+
+    &.is-valid, &.is-invalid {
+      background-image: none;
+    }
+    &.is-invalid .vs__open-indicator {
+      color: $danger;
+    }
+    &.is-valid .vs__open-indicator {
+      color: $success;
+    }
+  }
+  &.vs--multiple .form-control {
+    padding-top: 0.125rem;
+    padding-bottom: 0.125rem;
+  }
+  &.vs--open .form-control {
+    box-shadow: 0 0 0 0.125rem $input-focus-border;
+    border-color: $body-bg;
+    background: $body-bg;
+  }
+  &__dropdown-menu {
+    background-color: $body-bg;
+    //border: 2px solid $input-focus-border;
+    border: 0 none;
+    padding-left: 0.125rem !important;
+    padding-right: 0.125rem !important;
+    left: -2px;
+    right: -2px;
+    width: auto;
+    box-shadow: rgb(9 30 66 / 25%) 0px 4px 8px -2px, rgb(9 30 66 / 31%) 0px 0px 1px;
+  }
+}

package/src/assets/scss/components/_table.scss

@@ -0,0 +1,278 @@
+@import '../variables';
+
+:root {
+  --itf-table-background-color: #fff;
+  --itf-table-sticky-top: 0;
+  --itf-table-border-color: #e1e4e7;
+  --itf-table-hover-color: #f0f0f0;
+  --itf-table-strip-color: #f8f8f8;//#dadce033;
+  --itf-table-sorted-color: #f8f8f8;//#dadce033;
+  --itf-table-shadow-width: 3px;
+  --itf-table-row-cursor: default;
+  --itf-table-sticky-shadow1: rgb(0 0 0 / 16%);
+  --itf-table-sticky-shadow2: rgb(0 0 0 / 23%);
+}
+
+[data-theme="dark"] {
+  --itf-table-background-color: #{$dark-body-bg};
+  --itf-table-border-color: #666;
+  --itf-table-hover-color: #111;
+  --itf-table-strip-color: #222;
+  --itf-table-sorted-color: #444;
+  --itf-table-sticky-shadow1: rgb(255 255 255 / 16%);
+  --itf-table-sticky-shadow2: rgb(255 255 255 / 23%);
+}
+
+.itf-table {
+  width: 100%;
+  grid-template-columns: [col-start] auto [col-end];
+  grid-template-rows: [header-start] 56px [header-end row-start] auto [row-end];
+
+  &__wrapper {
+    margin-top: 10px;
+    margin-right: -30px;
+    background-color: var(--itf-table-background-color);
+    padding-right: 0;
+    //overflow: hidden;
+    width: 100%;
+  }
+
+  &__headers {
+    .scroller {
+      overflow-x: hidden;
+      overflow-y: visible;
+      padding-bottom: 1px;
+    }
+    .itf-table__header-row {
+      display: grid;
+      grid-template-columns: var(--itf-table-template);
+    }
+    .itf-table__header.align-left > span {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+  &__rows {
+    display: grid;
+    overflow: auto;
+    grid-template-columns: var(--itf-table-template);
+    padding-bottom: 10px;
+
+    & > .itf-table__row {
+      display: contents;
+
+      &:not(.itf-table__summary-row) {
+        cursor: var(--itf-table-row-cursor);
+      }
+    }
+  }
+
+  &--striped &__row:nth-child(even) &__cell {
+    background-color: var(--itf-table-strip-color);
+  }
+
+  &__cell.itf-table__cell--sorted {
+    background-color: var(--itf-table-sorted-color);
+  }
+  &--hoverable &__rows{
+    & > .itf-table__row:not(.itf-table__summary-row) {
+      &:hover > .itf-table__cell,
+      &:hover > .itf-table__cell--sorted {
+        background-color: var(--itf-table-hover-color);
+      }
+    }
+  }
+
+  .itf-table__sticky-header &__headers {
+    position: sticky;
+    top: var(--itf-table-sticky-top);
+    z-index: 4;
+
+    .itf-table__header-row:last-child .itf-table__header {
+      &:after {
+        display: block;
+        content: ' ';
+        border-top: 1px solid var(--itf-table-border-color);
+        left: 0;
+        bottom: 0;
+        right: 0;
+        height: 0;
+      }
+    }
+  }
+
+  &__header {
+    background-color: var(--itf-table-background-color);
+    grid-row: header;
+    font-weight: 500;
+    &--sortable {
+      cursor: pointer;
+    }
+    &--sorted {
+      background-color: var(--itf-table-sorted-color);
+    }
+
+    & > span {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      height: 100%;
+      display: block;
+      padding: 8px 10px;
+      text-align: right;
+
+      &:hover .com-table-sort-btn {
+        opacity: 1;
+      }
+    }
+
+    &:first-child > span {
+      text-align: left;
+    }
+  }
+
+  &__small &__header span, &__small &__cell {
+    padding: 4px 5px;
+  }
+
+  &__summary-row &__cell {
+    padding-top: 2rem;
+    border-bottom: 1px solid var(--itf-table-border-color);
+
+    &:first-child {
+      font-weight: 500;
+    }
+  }
+
+  &--borders &__cell {
+    border-bottom: 1px solid var(--itf-table-border-color);
+  }
+
+  &__cell {
+    background-color: var(--itf-table-background-color);
+    padding: 8px 10px;
+    //border-left: 1px solid var(--itf-table-border-color);
+    align-items: center;
+    display: flex;
+    justify-content: end;
+    text-align: right;
+    word-break: break-word;
+
+    &:first-child, &.align-left {
+      justify-content: flex-start;
+      text-align: left;
+    }
+  }
+
+  // First column sticky
+  &__sticky-column & {
+    .itf-table__header:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 5;
+      border-right: solid 1px var(--itf-table-border-color);
+    }
+    .itf-table__cell:nth-child(1) {
+      position: sticky;
+      left: 0;
+      z-index: 3;
+      border-right: solid 1px var(--itf-table-border-color);
+    }
+  }
+  &__sticky-column &__header, &__sticky-column &__cell {
+    &:first-child {
+      &:before {
+        content: " ";
+        display: block;
+        //background: rgba(0, 0, 0, .1);
+        top: 0;
+        left: 100%;
+        width: 1px;
+        box-shadow: var(--itf-table-sticky-shadow1) 2px 0px 3px, var(--itf-table-sticky-shadow2) 2px 0px 3px;
+        height: 100%;
+        bottom: 0;
+        position: absolute;
+        opacity: 0;
+        transition: opacity .25s ease-in-out;
+      }
+    }
+  }
+  .scrolled-x & {
+    .itf-table__header, .itf-table__cell {
+      &:first-child {
+        &:before {
+          opacity: 1;
+        }
+      }
+    }
+  }
+
+  // Last column sticky
+  &__sticky-last-column & {
+    .itf-table__header:last-child {
+      position: sticky;
+      right: 0;
+      z-index: 5;
+      border-left: solid 1px var(--itf-table-border-color);
+    }
+    .itf-table__cell:last-child {
+      position: sticky;
+      right: 0;
+      z-index: 3;
+      border-left: solid 1px var(--itf-table-border-color);
+    }
+  }
+  &__sticky-last-column &__header, &__sticky-column &__cell {
+    &:last-child {
+      &:before {
+        content: " ";
+        display: block;
+        //background: rgba(0, 0, 0, .1);
+        top: 0;
+        left: 0;
+        width: 1px;
+        box-shadow: var(--itf-table-sticky-shadow1) -2px 0px 3px, var(--itf-table-sticky-shadow2) -2px 0px 3px;
+        height: 100%;
+        bottom: 0;
+        position: absolute;
+        opacity: 1;
+        transition: opacity .25s ease-in-out;
+      }
+    }
+  }
+  .scrolled-right & {
+    .itf-table__header, .itf-table__cell {
+      &:last-child {
+        &:before {
+          opacity: 0;
+        }
+      }
+    }
+  }
+
+  .scrolled-y & {
+    .scroller {
+      .itf-table__header {
+        border-top: 1px solid var(--itf-table-border-color);
+      }
+      &:after {
+        content: " ";
+        display: block;
+        left: 0;
+        right: 0;
+        background: rgba(0, 0, 0, .1);
+        height: calc(var(--itf-table-shadow-width) - 1px); // subtract 1px border-top
+        top: 100%;
+        position: absolute;
+      }
+    }
+  }
+}
+
+.table2.table-retrieve tbody tr td.value {
+  border: solid 1px transparent; }
+
+.table2.table-border-hover tbody tr:hover td.value:hover,
+.table2.table-retrieve tbody tr:hover td.value:hover {
+  border: solid 1px #64abdc !important;
+  cursor: pointer; 
+}

package/src/{components/tabs/tabs.scss → assets/scss/components/_tabs.scss}

@@ -1,4 +1,4 @@
-@import '../../assets/scss/variables';
+@import '../variables';
 
 :root {
   --itf-tabs-active-bg: #fff;

package/src/assets/scss/components/_text-field.scss

@@ -0,0 +1,36 @@
+@import '../variables';
+
+.itf-text-field {
+  &__input {
+    border-radius: $input-border-radius !important;
+  }
+  .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
+}
+
+.itf-textarea {
+  position: relative;
+
+  &__input {
+    border-radius: $input-border-radius !important;
+    resize: none;
+  }
+  &__autogrow &__input {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 100%;
+    width: 100%;
+  }
+  &__autogrow &__autogrow-text {
+    white-space: pre-line;
+    visibility: hidden;
+    min-height: 4rem;
+    max-height: 75vh; // жалувались, що коли багато тексту,
+    // то поле за межі вікна виходить і не зручно
+  }
+}