Merge branch 'release/v3.15'

TemainfoSoftware · Apr 29, 2019 · 31c46c3 · 31c46c3
2 parents 079a771 + 7007ed5
commit 31c46c3
Show file tree

Hide file tree

Showing 142 changed files with 3,131 additions and 1,648 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/projects/truly-ui/src/components/autocomplete/autocomplete-theme.scss b/projects/truly-ui/src/components/autocomplete/autocomplete-theme.scss
@@ -7,72 +7,7 @@
   $danger: map-deep-get($theme, 'danger');
   $success: map-deep-get($theme, 'success');
   $warning: map-deep-get($theme, 'warning');
-  $blueBorder: #40a9ff;
 
-  .ui-wrapper-filter {
-    background-color: map-deep-get($basic, "lighter", "background");
-    color: map-deep-get($basic, "lighter", "foreground");
-    -webkit-box-shadow: inset 0px 5px 7px -5px rgba(0, 0, 0, 0.10);
-    -moz-box-shadow: inset 0px 5px 7px -5px rgba(0, 0, 0, 0.10);
-    box-shadow: inset 0px 5px 7px -5px rgba(0, 0, 0, 0.10);
-    border: 1px solid map-deep-get($basic, "default", "border");
-
-    &.disabled {
-      opacity: 0.35;
-      filter: Alpha(Opacity=70);
-      cursor: default !important;
-      background-color: map-deep-get($basic, "default", "background");
-      color: map-deep-get($basic, "default", "foreground");
-    }
-
-    &.withBorder {
-      border: 1px solid map-deep-get($basic, "default", "border");
-    }
-
-    &.withoutBorder {
-      border: none !important;
-    }
-
-    &.opened {
-      border-color: $blueBorder !important;
-    }
-
-    &.ui-input {
-      background: transparent;
-
-      &::placeholder {
-        color: map-deep-get($basic, "lighter", "foreground");
-        opacity: 0.6;
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      &:focus:not(.ng-dirty) {
-        background-color: rgba(map-deep-get($warning, "lighter", "background"), 0.25);
-        outline: none;
-        border: 1px solid map-deep-get($warning, "default", "border");
-      }
-
-      &:read-only {
-        background-color: map-deep-get($basic, "default", "background");
-        color: map-deep-get($basic, "default", "foreground");
-      }
-    }
-  }
-
-  .scrollOpenedAbove {
-    border-top: 1px solid $blueBorder !important;
-  }
-
-  .openedAbove {
-    border: 1px solid $blueBorder;
-  }
-
-  .ui-selected-wrapper {
-    background: rgba(map-deep-get($basic, "darker", "foreground"), 0.3);
-  }
 }
 
 @mixin tl-autocomplete-theme( $theme ) {

diff --git a/projects/truly-ui/src/components/autocomplete/autocomplete.html b/projects/truly-ui/src/components/autocomplete/autocomplete.html
@@ -3,6 +3,7 @@
   <tl-label *ngIf="label" [labelTitle]="label" [labelPlacement]="labelPlacement" [labelSize]="labelSize"></tl-label>
   <div [class]="'ui-autocomplete-wrapper ' + color">
     <div class="ui-wrapper-filter"
+         #wrapper
          [class.disabled]="disabled || isDisabled"
          [style.height]="height"
          [class.opened]="isOpen && positionOverlay !== 'top'"
@@ -13,26 +14,28 @@
       <div *ngIf="selected && !loading" class="ui-close" (click)="onClickClose()" (mouseover)="onHoverClose()" (mouseleave)="onLeaveClose()">
         <i [class]="!closeHover ? 'ion ion-ios-close-circle-outline' : 'ion ion-ios-close-circle'"></i>
       </div>
-      <input #input
-             #trigger="cdkOverlayOrigin"
-             cdkOverlayOrigin
-             [attr.disabled]="disabled || isDisabled ? true : null"
-             (click)="toggleIsOpen()"
-             [attr.placeholder]="placeholder"
-             [formControl]="searchControl"
-             (keydown.ArrowUp)="handleKeyArrowUp($event)"
-             (keydown.ArrowDown)="handleKeyArrowDown($event)"
-             (keydown.escape)="handleKeyEscape($event)"
-             (keydown.enter)="handleKeyEnter()"
-             (keydown.shift.tab)="isOpen = false"
-             (keydown.tab)="isOpen = false"
-             (focus)="handleFocus()"
-             (focusout)="focused = false"
-             (input)="onInput()"
-             class="ui-input">
+
+      <tl-input
+        (overlayOrigin)="trigger = $event"
+        [disabled]="disabled || isDisabled"
+        [placeholder]="placeholder"
+        (click)="toggleIsOpen()"
+        (keydown.ArrowUp)="handleKeyArrowUp($event)"
+        (keydown.ArrowDown)="handleKeyArrowDown($event)"
+        (keydown.escape)="handleKeyEscape($event)"
+        class="ui-input"
+        [control]="control"
+        [(ngModel)]="description"
+        (keydown.enter)="handleKeyEnter()"
+        (keydown.shift.tab)="isOpen = false"
+        (keydown.tab)="isOpen = false"
+        (focus)="handleFocus()"
+        (focusout)="focused = false"
+        (input)="onInput()">
+      </tl-input>
       <input readonly notform class="ui-model-input" [(ngModel)]="value">
     </div>
-    <tl-filter-container [searchTerm]="searchControl.value"
+    <tl-filter-container [searchTerm]="description"
                          [debounceTime]="debounceTime"
                          [lazyMode]="lazyMode"
                          [source]="data"
@@ -47,7 +50,7 @@
                    [cdkConnectedOverlayOpen]="isOpen">
         <cdk-virtual-scroll-viewport class="ui-scroll-view"
                                      [itemSize]="rowHeight"
-                                     [style.width]="input.offsetWidth + 'px'"
+                                     [style.width]="wrapper.offsetWidth - 2 + 'px'"
                                      (scrolledIndexChange)="onScrollIndexChange($event)"
                                      [tlBlockui]="nothingFound"
                                      [blockuiConfig]="{ 'message': nothingFoundMessage }"

diff --git a/projects/truly-ui/src/components/autocomplete/autocomplete.scss b/projects/truly-ui/src/components/autocomplete/autocomplete.scss
@@ -18,6 +18,7 @@
   place-content: center;
   font-size: 1.6em;
   opacity: 0.3;
+  z-index: 1;
   &:hover {
     cursor: pointer;
   }
@@ -43,14 +44,15 @@
   width: 100%;
   outline: none;
   height: 200px;
-  border: 1px solid #40a9ff;
+  border: 1px solid #ccc;
   border-top: 0;
-  -webkit-border-radius: 0 0 3px 3px;
   border-radius: 0 0 3px 3px;
+  box-sizing: border-box;
   outline: 0;
-  left: -1px;
+  top: -3px;
   box-sizing: content-box;
   background: #ffffff;
+
   &::-webkit-scrollbar {
     background: #fff;
     width: 8px;
@@ -97,30 +99,12 @@
   position: relative;
   display: flex;
   align-items: center;
-  .ui-clearbutton {
-    right: 10px;
-    position: absolute;
-    top: calc(50% - 10.6px);
-    color: #606060;
-    -webkit-transition: -webkit-transform .2s ease-in-out;
-    transition: transform .2s ease-in-out;
-    transform-origin: center center;
-    cursor: pointer;
-    &:hover {
-      -webkit-transform: rotate(180deg);
-      transform: rotate(180deg);
-    }
-  }
+
   .ui-input {
-    font-family: "Segoe UI", Lato, 'sans-serif', "Arial";
-    font-size: 12px;
     border: 0;
     outline: none;
     height: 100%;
     width: 100%;
-    padding-left: 6px;
-    border-radius: 3px;
-    background: transparent;
   }
   .ui-model-input {
     left: 0;