@colijnit/corecomponents_v12 260.1.18 → 261.1.1

package/lib/components/input-text/input-text.component.d.ts

@@ -51,7 +51,7 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     get hasLeftIcon(): boolean;
     get hasRightIcon(): boolean;
     hasOwnLabel: boolean;
-    handleDocumentMouseUp(event: MouseEvent): void;
+    handleDocumentPointerUp(event: PointerEvent): void;
     set model(value: any);
     get model(): any;
     get pipedModel(): any;
@@ -67,6 +67,8 @@ export declare class InputTextComponent extends BaseInputComponent<any> implemen
     handleRightIconClick(event: MouseEvent): void;
     handleRightIconMouseDown(event: MouseEvent): void;
     handleRightIconMouseUp(event: MouseEvent): void;
+    handleRightIconPointerDown(event: PointerEvent): void;
+    handleRightIconPointerUp(event: PointerEvent): void;
     handleInputFocus(event: FocusEvent): void;
     handleBlur(event: FocusEvent): void;
     handleDoFocus(event: MouseEvent): void;

package/lib/components/list-of-values/list-of-values-popup.component.d.ts

@@ -26,6 +26,8 @@ export declare class ListOfValuesPopupComponent implements OnInit {
     closePopup: EventEmitter<Event>;
     keyDown: EventEmitter<KeyboardEvent>;
     showClass(): boolean;
+    animBase: boolean;
+    isOpen: boolean;
     set searchTerm(value: string);
     get searchTerm(): string;
     viewModels: lovViewModel[];
@@ -47,6 +49,8 @@ export declare class ListOfValuesPopupComponent implements OnInit {
     selectNextOption(back?: boolean): void;
     selectAll(): void;
     toggleAll(): void;
+    startCloseAnimation(): void;
+    isActive(vm: lovViewModel): boolean;
     private _prepareViewModelsMain;
     private _prepareViewModels;
     private _scrollIntoView;

package/lib/components/list-of-values/style/_layout.scss

@@ -100,6 +100,33 @@
   .co-list-of-values-popup {
     font-family: $cc-co-list-of-values-font-family;
     font-size: $cc-co-list-of-values-font-size;
+    &.lov-anim {
+      .lov-options {
+        transform-origin: top;
+        overflow: hidden;
+        transform: translateY(-6px) scaleY(0.85);
+        opacity: 0;
+        max-height: 0;
+        transition-property: transform, opacity, max-height, filter;
+        transition-duration: 180ms, 120ms, 180ms, 180ms;
+        transition-timing-function: cubic-bezier(.2,.9,.2,1), ease, cubic-bezier(.2,.9,.2,1), ease;
+        will-change: transform, opacity, max-height;
+        margin: 5px 0;
+      }
+      &.lov-anim--open {
+        .lov-options {
+          transform: translateY(0) scaleY(1);
+          opacity: 1;
+          filter: drop-shadow(0 12px 18px rgba(0,0,0,0.16));
+          max-height: $cc-co-list-of-values-lov-options-max-height;
+        }
+      }
+      &:not(.love-anim--open) {
+        .lov-options {
+          transition-timing-function: cubic-bezier(.4,0,.6,1), ease, cubic-bezier(.4,0,.6,1), ease;
+        }
+      }
+    }
     .lov-options {
       display: flex;
       flex-direction: column;
@@ -146,11 +173,11 @@
     }
 
     .lov-options li:hover {
-      color: $cc-co-list-of-values-lov-options-li-hover-text-color;
+      //color: $cc-co-list-of-values-lov-options-li-hover-text-color;
       background-color: $cc-co-list-of-values-lov-options-li-hover;
     }
 
-    .lov-options li.selected {
+    .lov-options li.selected,  .lov-options li.active {
       background-color: $cc-co-list-of-values-lov-options-li-selected;
       color: $cc-co-list-of-values-lov-options-li-selected-text-color;
     }
@@ -162,4 +189,9 @@
       padding: 0.25em;
     }
   }
+  @media (prefers-reduced-motion: reduce) {
+    co-list-of-values-popup.lov-anim .lov-options {
+      transition: none;
+    }
+  }
 }

package/lib/components/list-of-values/style/_material-definition.scss

@@ -18,7 +18,7 @@ $cc-co-list-of-values-lov-options-li-border-bottom: 1px solid #ccc !default;
 $cc-co-list-of-values-lov-options-li-padding: 8px !default;
 $cc-co-list-of-values-lov-options-li-border-radius: 5px !default;
 $cc-co-list-of-values-lov-options-li-margin: 5px !default;
-$cc-co-list-of-values-lov-options-li-hover: $cc-color-hover !default;
+$cc-co-list-of-values-lov-options-li-hover: $cc-color-grey !default;
 $cc-co-list-of-values-lov-options-li-hover-text-color: $cc-color-input-lov !default;
 $cc-co-list-of-values-lov-options-li-selected: $cc-color-grey !default;
 $cc-co-list-of-values-lov-options-li-selected-text-color: $cc-color-input-lov !default;

package/lib/style/_variables.scss

@@ -35,7 +35,7 @@ $cc-color-error: #C1002A !default;
 $cc-color-valid: #429777 !default;
 $cc-color-input-search-triangle: #e26bcd !default;
 $cc-color-input-sequence: #B00060 !default;
-$cc-color-input-lov: #009EE0 !default;
+$cc-color-input-lov: #1A73E8 !default;
 $cc-color-code: #00628D !default;
 $cc-color-input-focus: #BBD9E6 !default;
 $cc-color-label-active: #525E64 !default;

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "260.1.18",
+  "version": "261.1.1",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {
     "@angular/common": ">=12.2.0",
     "@angular/core": ">=12.2.0",
-    "@colijnit/ioneconnector": ">=260.1.0",
+    "@colijnit/ioneconnector": ">=261.1.0",
     "@types/hammerjs": "2.0.35",
     "@types/three": ">=0.166.0",
     "@tweenjs/tween.js": ">=17.2.0",