@itfin/components 1.2.33 → 1.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itfin/components",
-  "version": "1.2.33",
+  "version": "1.2.35",
   "author": "Vitalii Savchuk <esvit666@gmail.com>",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/assets/images/pdf-viewer/loading-icon.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?><svg
+  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink" version="1.0" width="50px"
+  height="50px" viewBox="-3 -3 54 54" xml:space="preserve">
+  <g>
+    <path d="M25 0 A 26 26 0 0 0 0 25" stroke="#606c88" stroke-width="3"
+      fill="transparent">
+      <animateTransform attributeName="transform" type="rotate" from="0 25 25"
+        to="360 25 25" dur="1s" repeatCount="indefinite">
+      </animateTransform>
+    </path>
+    <path d="M25 8 A 18 18 0 0 0 8 25" stroke="#11ece5" stroke-width="3"
+      fill="transparent">
+      <animateTransform attributeName="transform" type="rotate" from="0 25 25"
+        to="360 25 25" dur="1.5s" repeatCount="indefinite">
+      </animateTransform>
+    </path>
+    <path d="M25 16 A 10 10 0 0 0 16 25" stroke="#606c88" stroke-width="3"
+      fill="transparent">
+      <animateTransform attributeName="transform" type="rotate" from="0 25 25"
+        to="360 25 25" dur="0.5s" repeatCount="indefinite">
+      </animateTransform>
+    </path>
+
+  </g>
+</svg>

package/src/assets/scss/components/_air-select.scss

@@ -0,0 +1,111 @@
+@import '../variables';
+
+.select {
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  transition: background 0.1s;
+  &:focus {
+    outline: none;
+  }
+}
+.valueContainer {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 32px;
+  justify-content: space-between;
+}
+.valueMulti {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  // padding-top: 5px;
+}
+.valueMultiItem {
+  height: 22px;
+  overflow: hidden;
+  border-radius: 3px;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  background: #f0f0f0;
+  font-size: 14px;
+  .valueMultiItemLabel {
+    flex: auto;
+    padding: 0 4px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    border-right: 1px solid #ddd;
+  }
+  .valueMultiItemClose {
+    border-left: none;
+    overflow: hidden;
+    padding: 0 2px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    &:hover {
+      background: #ff4757;
+      color: white;
+    }
+    .icon {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+  }
+}
+.addMore {
+  font-size: 12.5px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  color: #0052cc;
+  &:hover,
+  &:visited,
+  &:active {
+    color: #0052cc;
+  }
+  &:hover {
+    text-decoration: underline;
+  }
+  .icon {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    margin-right: 2px;
+  }
+}
+
+[data-theme="dark"] .select.normal {
+  border-color: $dark-input-focus-border-color;
+  background: $dark-input-focus-border-color;
+}
+.select.normal {
+  width: 100%;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+  border-width: 1px;
+  border-color: #dfe1e6;
+  background-color: #f4f5f7;
+  position: relative;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 14px;
+  -webkit-transition: background .1s;
+  transition: background .1s;
+}
+.select.normal:hover {
+  @apply bg-backgroundLight;
+}
+.select.normal:focus {
+  @apply border border-borderInputFocus bg-white text-borderInputFocus;
+  box-shadow: 0 0 0 1px currentColor;
+}
+.select.empty {
+  display: inline-block;
+}

package/src/assets/scss/components/_avatar.scss

@@ -0,0 +1,36 @@
+@import '../variables';
+
+.itf-avatar {
+  --positive: #{$green};
+
+  position: relative;
+  display: inline-block;
+  font-size: 0;
+  line-height: 0;
+  vertical-align: middle;
+
+  .shadow {
+    stroke-width: 2;
+    stroke: rgba(0, 0, 0, 0.1);
+    fill: none;
+  }
+
+  .status-badge {
+    position: absolute;
+    pointer-events: none;
+    border-radius: 50%;
+    background-color: var(--positive);
+  }
+
+  .feature-icon {
+    width: 3rem;
+    height: 3rem;
+    border-radius: 0.5rem;
+    overflow: hidden;
+
+    img {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}

package/src/assets/scss/components/_button.scss

@@ -0,0 +1,110 @@
+@import '../variables';
+
+:root {
+  --itf-button-basic-bg-color: rgba(9, 30, 66, 0.08);
+}
+
+[data-theme="dark"] {
+  --itf-button-basic-bg-color: rgba(246, 225, 189, 0.08);
+
+  .itf-button.btn {
+    &.btn-secondary {
+      &, &.disabled {
+        background-color: $dark-btn-secondary-color;
+        border-color: $dark-btn-secondary-color;
+      }
+
+      &:active, &:focus {
+        background-color: lighten($dark-btn-secondary-color, 5%);
+        border-color: lighten($dark-btn-secondary-color, 5%);
+      }
+      &:hover {
+        background-color: lighten($dark-btn-secondary-color, 10%);
+        border-color: lighten($dark-btn-secondary-color, 10%);
+      }
+    }
+    &.btn-primary {
+      &, &.disabled {
+        background-color: $dark-btn-primary-color;
+        border-color: $dark-btn-primary-color;
+        color: $body-color;
+      }
+
+      &:active, &:focus {
+        color: $body-color;
+        background-color: darken($dark-btn-primary-color, 5%);
+        border-color: darken($dark-btn-primary-color, 5%);
+        box-shadow: 0 0 0 0.125rem mix($dark-btn-primary-color, $dark-body-bg, 50%);
+      }
+      &:hover {
+        color: $body-color;
+        background-color: darken($dark-btn-primary-color, 10%);
+        border-color: darken($dark-btn-primary-color, 10%);
+      }
+    }
+  }
+}
+
+.itf-button.btn {
+  display: inline-flex;
+  align-items: center;
+  position: relative;
+
+  &.btn-primary {
+    color: #fff; // @todo remove when remove vuetify
+  }
+  &.itf-button__block {
+    display: block;
+    width: 100%;
+  }
+  & > div {
+    pointer-events: none;
+  }
+  .itf-spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin: -0.75rem;
+  }
+
+  &.loading {
+    cursor: progress;
+    pointer-events: none;
+    color: transparent;
+
+    &.btn-sm .itf-spinner {
+      width: 1rem;
+      height: 1rem;
+      margin: -0.5rem;
+    }
+    &.btn-lg .itf-spinner {
+      width: 1.75rem;
+      height: 1.75rem;
+      margin: -0.875rem;
+    }
+  }
+  &.btn-basic {
+    &:hover, &.active {
+      background-color: var(--itf-button-basic-bg-color);
+    }
+  }
+  &.btn-icon {
+    padding: 0.25rem;
+    svg {
+      width: 1.5rem;
+      height: 1.5rem;
+    }
+    &.btn-sm {
+      svg {
+        width: 1.3125rem;
+        height: 1.3125rem;
+      }
+    }
+    &.btn-lg {
+      svg {
+        width: 1.875rem;
+        height: 1.875rem;
+      }
+    }
+  }
+}

package/src/assets/scss/components/_card.scss

@@ -0,0 +1,7 @@
+@import '../variables';
+
+.card {
+  & > .itf-loading {
+    border-radius: $card-border-radius;
+  }
+}

package/src/assets/scss/components/_checkbox.scss

@@ -0,0 +1,83 @@
+@import '../variables';
+
+.itf-checkbox {
+  .form-check-input, .form-check-label {
+    cursor: pointer;
+  }
+  &__large.form-check {
+    padding-left: $form-check-padding-start * 2;
+    min-height: 2.5rem;
+
+    .form-check-label {
+      padding-top: 0.25rem;
+    }
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 2;
+      height: $form-check-input-width * 2;
+      margin-left: -$form-check-padding-start * 2;
+      border-radius: 0.75rem;
+    }
+    &.form-switch {
+      padding-left: $form-switch-padding-start * 2;
+
+      .form-check-input {
+        width: $form-switch-width * 2;
+        margin-left: -$form-switch-padding-start * 2;
+        border-radius: 100px;
+      }
+    }
+  }
+  &__medium.form-check {
+    padding-left: $form-check-padding-start * 1.5;
+    min-height: 2rem;
+
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 1.5;
+      height: $form-check-input-width * 1.5;
+      margin-left: -$form-check-padding-start * 1.5;
+      border-radius: 0.5rem;
+    }
+    &.form-switch {
+      padding-left: $form-switch-padding-start * 1.5;
+
+      .form-check-input {
+        width: $form-switch-width * 1.5;
+        margin-left: -$form-switch-padding-start * 1.5;
+        border-radius: 100px;
+      }
+    }
+  }
+}
+
+.itf-radio {
+  .form-check-input, .form-check-label {
+    cursor: pointer;
+  }
+  &__large.form-check {
+    padding-left: $form-check-padding-start * 2;
+    min-height: 2.5rem;
+
+    .form-check-label {
+      padding-top: 0.25rem;
+    }
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 2;
+      height: $form-check-input-width * 2;
+      margin-left: -$form-check-padding-start * 2;
+    }
+  }
+  &__medium.form-check {
+    padding-left: $form-check-padding-start * 1.5;
+    min-height: 2rem;
+
+    .form-check-input {
+      margin-top: 0;
+      width: $form-check-input-width * 1.5;
+      height: $form-check-input-width * 1.5;
+      margin-left: -$form-check-padding-start * 1.5;
+    }
+  }
+}

package/src/{components/datepicker/datepicker.scss → assets/scss/components/_datepicker.scss}

@@ -1,4 +1,6 @@
-@import '../../assets/scss/variables';
+@import '../variables';
+@import '../directives/tooltip';
+@import '../input-addon';
 
 .air-datepicker-cell {
   &.-range-from-:not(.-range-to-),
@@ -917,4 +919,218 @@ $rangeThumbSize: 12px;
   }
 }
 
+[data-theme="dark"] {
+  .itf-datepicker {
+    &__dropdown {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+  }
+}
+
+.itf-datepicker {
+  &.with-addon .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
+  .form-control {
+    border-radius: $input-border-radius !important;
+  }
+
+  &__dropdown {
+    width: max-content;
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $body-bg;
+    overflow: hidden;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+  }
+}
+
+
+// range picker
+
+.itf-daterange-picker {
+  display: flex;
+  .input-group-text.hidden {
+    visibility: hidden;
+  }
+
+  &.with-addon .addon-end {
+    pointer-events: all;
+    padding-right: 0.25rem;
+  }
+  &__dropdown {
+    width: max-content;
+    overflow: hidden;
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $body-bg;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+  }
+
+  .form-control.focused, .form-control.focused input.form-control {
+    background-color: $input-focus-border-color;
+  }
+  [data-theme="dark"] & {
+    &__dropdown {
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+    .form-control.focused, .form-control.focused input.form-control {
+      background-color: $dark-input-focus-border-color;
+    }
+    .input-group-text {
+      color: #fff;
+    }
+  }
+  .form-control input.form-control {
+    border: 0 none;
+    padding: 0;
+    max-width: 100px;
+
+    &:focus, &:active {
+      border: 0;
+      box-shadow: none;
+    }
+  }
+  .input-group-text {
+    border: 0 none;
+    background: transparent;
+  }
+}
+
+
+.itf-monthpicker {
+  .form-control {
+    background-color: $input-bg;
+
+    &:focus {
+      background-color: $body-bg;
+    }
+  }
+  &__dropdown {
+    width: max-content;
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $body-bg;
+    overflow: hidden;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+
+    [data-theme="dark"] & {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+  }
+}
+
+
+.itf-periodpicker {
+  .form-control {
+    background-color: $input-bg;
+
+    &:focus {
+      background-color: $body-bg;
+    }
+  }
+
+  .air-datepicker {
+    --adp-font-family: #{$font-family-base};
+    --adp-color-current-date: #{$primary};
+    --adp-cell-background-color-selected: #{$primary};
+    --adp-cell-background-color-selected-hover: #{lighten($primary, 10%)};
+    --adp-day-name-color: #{$secondary};
+  }
+
+  &__quarters {
+    gap: 5px;
+  }
+  &__quarters, &__months {
+    display: flex;
+  }
+
+  &__month {
+    flex: 1 1 auto;
+    border-radius: 0;
+    justify-content: center;
+    padding-left: 0;
+    padding-right: 0;
+    font-size: 14px;
+  }
+
+  &__quarter {
+    flex: 1 1 33.3%;
+    cursor: pointer;
+    color: var(--grey);
+    background-color: rgba(0, 0, 0, 0.04);
+    height: 125px;
+    width: 125px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border-radius: $input-border-radius;
+    overflow: hidden;
+    text-align: right;
+
+    &:hover {
+      background-color: rgba(9, 30, 66, 0.08);
+    }
+    &.active-inside {
+      background-color: rgba(9, 30, 66, 0.08);
+    }
+    &.active {
+      background-color: $primary;
+      color: #fff;
+
+      .itf-periodpicker__month {
+        color: #fff;
+      }
+    }
 
+    .quarter-number {
+      font-size: 36px;
+    }
+  }
+
+  &__dropdown {
+    padding: 10px 15px;
+    min-width: 400px;
+    width: max-content;
+    border: $input-border-width solid $input-border-color;
+    border-radius: $input-border-radius;
+    background-color: $body-bg;
+    overflow: hidden;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-btn-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-btn-focus-box-shadow;
+    }
+
+    [data-theme="dark"] & {
+      background-color: $dark-body-bg;
+      border-color: $dark-border-color;
+      box-shadow: 0 0 0 2px $dark-input-focus-border;
+    }
+
+    .btn-whole {
+      background-color: rgba(0, 0, 0, 0.04);
+    }
+  }
+}

package/src/assets/scss/components/_dropdown.scss

@@ -0,0 +1,79 @@
+@import '../variables';
+
+.itf-dropdown {
+  display: inline-block;
+
+  &__menu.dropdown-menu {
+    border: 0 none;
+    padding: 0;
+  }
+}
+
+
+.air-dropdown {
+  z-index: 101;
+  position: absolute;
+  top: calc(100% + 4px);
+  left: -1px;
+  border-radius: 0 0 4px 4px;
+  background: #fff;
+  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
+  rgba(9, 30, 66, 0.31) 0px 0px 1px;
+  width: 100%;
+
+  .dropdownInput {
+    padding: 10px 14px 8px;
+    width: 100%;
+    border: none;
+    color: #172b4d;
+    background: none;
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .options {
+    padding: 5px 0;
+    max-height: 200px;
+    overflow-x: hidden;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    // &::-webkit-scrollbar {
+    //   width: 7px;
+    // }
+    // &::-webkit-scrollbar-track {
+    //   background: none;
+    // }
+    // &::-webkit-scrollbar-thumb {
+    //   // border-radius: 99px;
+    //   background: #d1d1d1;
+    // }
+  }
+
+  .option {
+    padding: 8px 14px;
+    word-break: break-word;
+    cursor: pointer;
+
+    &.select-option-is-active {
+      background: #e8ecee;
+    }
+  }
+
+  .optionsNoResults {
+    padding: 0px 15px 10px;
+    color: #8993a4;
+  }
+
+}
+
+[data-theme="dark"] .air-dropdown {
+  background: $dark-input-focus-border-color;
+
+  .option {
+    &.select-option-is-active {
+      background: $dark-border-color;
+    }
+  }
+}