@testgorilla/tgo-ui 2.31.1 → 2.31.3-beta.0

package/projects/tgo-canopy-ui/components/autocomplete/autocomplete.component.scss

@@ -1,338 +0,0 @@
-@use "../../theme/variables" as *;
-
-:host {
-  width: 320px;
-  display: block;
-
-  &.full-width {
-    width: 100%;
-  }
-
-  ui-tag {
-    height: 32px;
-    margin: 4px;
-
-    ::ng-deep.tag-container {
-      margin: 0!important;
-    }
-
-    ::ng-deep.tag-wrapper {
-      max-width: fit-content;
-    }
-  }
-}
-
-.large-size {
-  input {
-    margin: 10px 0;
-  }
-
-  .selected-items {
-    margin: 5px 0;
-    flex-wrap: wrap;
-  }
-
-  .input-container {
-    display: flex;
-    flex-direction: column-reverse;
-  }
-
-  ::ng-deep .mat-mdc-form-field-infix, .mat-mdc-form-field-flex {
-    align-items: unset !important;
-  }
-}
-
-.disabled {
-  * {
-    pointer-events: none;
-  }
-}
-
-.input-container {
-  width: 100%;
-  margin: auto;
-  display: flex;
-  flex-direction: row-reverse;
-
-
-  .selected-items {
-    display: flex;
-    padding-left: 4px;
-
-    .selected-count {
-      white-space: nowrap;
-    }
-
-    .value-tag {
-      max-width: var(--tag-max-width);
-
-      ::ng-deep {
-        .tag-container {
-          max-width: var(--tag-max-width);
-        }
-      }
-    }
-
-    .overlap-count {
-      font-size: 14px;
-      line-height: 20px;
-
-      ui-tag {
-        display: block;
-      }
-    }
-
-    .overlap-tag {
-      position: absolute;
-      opacity: 0;
-    }
-  }
-
-  input {
-    margin-left: 6px;
-
-    &.unset-margin {
-      margin-top: unset;
-    }
-
-    &.no-caret {
-      cursor: pointer;
-      caret-color: transparent!important;
-    }
-  }
-}
-
-
-.add-suggestion {
-  margin: 0 5px;
-  color: black;
-  font-weight: 700;
-}
-
-.remove-selected {
-  cursor: pointer;
-  margin-right: 2px;
-  border-radius: 50px;
-  height: fit-content;
-
-  &.large-input-icon {
-    margin-top: 10px;
-  }
-}
-
-
-.arrow-state {
-  height: 24px;
-  cursor: pointer;
-
-  &.large-input-icon {
-    margin-top: 10px;
-  }
-
-  &.opened {
-    transform: rotateX(180deg);
-  }
-}
-
-::ng-deep.autocomplete-wrapper {
-  .mat-mdc-form-field {
-    width: 100%;
-
-    .mat-mdc-form-field-hint.error,
-    .mat-mdc-form-field-hint.error svg {
-      color: $tgo-error-default;
-    }
-
-    .mat-mdc-form-field-hint.error {
-      display: flex;
-    }
-
-    .mat-mdc-form-field-hint.error {
-      display: flex;
-      flex-flow: column;
-      row-gap: 4px;
-
-      .errors {
-        ui-icon {
-          margin-right: 8px;
-        }
-
-        display: flex;
-      }
-    }
-
-    .mat-mdc-form-field-hint.error {
-      color: $error-50 !important;
-
-      svg {
-        color: $error-50 !important;
-      }
-    }
-
-    .mat-mdc-form-field-bottom-align::before {
-      height: 0;
-    }
-
-    .mat-mdc-form-field-hint-wrapper {
-      padding: 0 0 12px 0;
-      font-size: 12px;
-      line-height: 16px;
-      position: relative;
-
-      .mat-form-field-hint-spacer {
-        display: none;
-      }
-    }
-
-    &.hide-bottom-content {
-      .mat-mdc-form-field-subscript-wrapper {
-        display: none;
-      }
-    }
-
-    .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
-      top: 28px !important;
-    }
-
-    .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-      top: 22px !important;
-    }
-
-    .mat-mdc-text-field-wrapper {
-      padding-left: 12px !important;
-      height: unset !important;
-      max-height: unset !important;
-    }
-
-    .mat-focused {
-      .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
-        color: $tgo-petrol-default !important;
-      }
-    }
-
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch {
-      border-bottom: 2px solid $tgo-petrol-default !important;
-    }
-
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading {
-      border-left: 2px solid $tgo-petrol-default !important;
-      border-bottom: 2px solid $tgo-petrol-default !important;
-      border-top: 2px solid $tgo-petrol-default !important;
-    }
-
-    .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
-      border: 2px solid $tgo-petrol-default !important;
-      border-left: unset !important;
-    }
-
-    .mat-mdc-form-field-infix, .mat-mdc-form-field-flex {
-      min-height: 48px !important;
-      max-height: 184px !important;
-      overflow-y: auto;
-      overflow-x: hidden;
-      padding: 0 !important;
-      display: flex;
-      justify-content: center;
-      text-align: center;
-      align-items: center;
-      flex-direction: row;
-      width: 100%
-    }
-
-    .mdc-line-ripple {
-      display: none !important;
-    }
-  }
-}
-
-::ng-deep.mat-mdc-autocomplete-panel {
-  box-shadow: 0 8px 24px 4px $box-shadow;
-  max-height: 312px !important;
-
-  .mat-mdc-option:hover:not(.mdc-list-item--disabled),
-  .mat-mdc-option:focus:not(.mdc-list-item--disabled),
-  .mat-mdc-option.mat-mdc-option-active,
-  .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled) {
-    background: $tgo-petrol-90w !important;
-  }
-
-  .mat-mdc-option {
-    padding-right: 32px;
-    padding-left: 12px !important;
-
-    ui-icon {
-      display: none;
-      position: absolute;
-      right: 0;
-      bottom: calc(50% - 8px);
-      margin: 0 10px;
-    }
-
-    &.selected-option {
-      background: $tgo-petrol-90w;
-
-      ui-icon {
-        display: block;
-      }
-    }
-
-    &.mdc-list-item--selected .mdc-list-item__primary-text,
-    .mdc-list-item--activated .mdc-list-item__primary-text {
-      color: $tgo-black !important;
-    }
-
-    .mat-pseudo-checkbox {
-      display: none;
-    }
-  }
-
-  .mat-mdc-optgroup {
-    .mat-mdc-optgroup-label {
-      font-weight: 700 !important;
-    }
-
-    .mdc-list-item {
-      &__primary-text {
-        color: $tgo-black;
-        font-size: 12px;
-        line-height: 16px;
-        font-weight: 700;
-      }
-    }
-  }
-}
-
-
-.active-field {
-  .mdc-notched-outline__leading {
-    border-left-width: 2px;
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__notch {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-  }
-
-  .mdc-notched-outline__trailing {
-    border-top-width: 2px;
-    border-bottom-width: 2px;
-    border-right-width: 2px;
-  }
-}
-
-.loading-option {
-  display: flex;
-
-  .loading-container {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-}