@colijnit/corecomponents_v12 261.20.18 → 261.20.20

package/index.d.ts

@@ -3421,19 +3421,28 @@ declare class TooltipDirective implements OnDestroy, OnInit {
     private _injector;
     private _sanitizer;
     set tooltip(str: string);
+    orientation: CoDirection;
     private _elementRef;
     private _tooltipMessage;
     private _componentRef;
+    private _showTimeoutId;
+    private _autoHideTimeoutId;
+    private readonly _mouseEnterHandler;
+    private readonly _mouseLeaveHandler;
+    private readonly _scrollHandler;
     constructor(elementRef: ElementRef, _compFactoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector, _sanitizer: DomSanitizer);
     ngOnDestroy(): void;
     ngOnInit(): void;
     private _handleScroll;
-    private _handleMouseMove;
-    private _showTooltip;
+    private _startShowTimeout;
+    private _resolveDelay;
+    private _clearShowTimeout;
     private _removeTooltip;
+    private _startAutoHideTimeout;
+    private _clearAutoHideTimeout;
     private _createTooltipComponent;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[tooltip]", never, { "tooltip": { "alias": "tooltip"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[tooltip]", never, { "tooltip": { "alias": "tooltip"; "required": false; }; "orientation": { "alias": "tooltipOrientation"; "required": false; }; }, {}, never, never, false, never>;
 }
 
 declare class TooltipComponent implements AfterViewInit, OnDestroy {
@@ -3443,21 +3452,32 @@ declare class TooltipComponent implements AfterViewInit, OnDestroy {
     set hostElement(value: HTMLElement);
     get hostElement(): HTMLElement;
     toolTip: SafeHtml | string;
+    orientation: CoDirection;
     tooltipClosed: EventEmitter<void>;
     showClass(): boolean;
     top: number;
     left: number;
-    bottom: boolean;
+    get isTop(): boolean;
+    get isBottom(): boolean;
+    get isLeft(): boolean;
+    get isRight(): boolean;
     animate: boolean;
+    private _resolvedOrientation;
     private _hostElement;
     private _documentClickListener;
     constructor(_elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _renderer: Renderer2);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private _positionTooltip;
+    private _resolveOrientation;
+    private _fits;
+    private _availableSpace;
+    private _calculateLeft;
+    private _calculateTop;
+    private _positionArrow;
     private closeTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<TooltipComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "co-tooltip", never, { "hostElement": { "alias": "hostElement"; "required": false; }; "toolTip": { "alias": "toolTip"; "required": false; }; }, { "tooltipClosed": "tooltipClosed"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TooltipComponent, "co-tooltip", never, { "hostElement": { "alias": "hostElement"; "required": false; }; "toolTip": { "alias": "toolTip"; "required": false; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "tooltipClosed": "tooltipClosed"; }, never, never, false, never>;
 }
 
 declare class TooltipModule {

package/lib/components/tooltip/style/_layout.scss

@@ -10,7 +10,7 @@
     align-items: center;
     column-gap: 10px;
     padding: $co-tooltip-padding;
-    z-index: 999999;
+    z-index: $co-tooltip-z-index;
     border-radius: $co-tooltip-border-radius;
     border: $co-tooltip-border;
 
@@ -23,30 +23,73 @@
       pointer-events: none;
       position: absolute;
       width: 0;
-      bottom: -20px;
     }
 
     &::after {
-      left: 20px;
-      border-width: 10px;
+      border-width: $co-tooltip-arrow-size;
     }
 
     &::before {
-      margin-left: 12px;
-      border-width: 8px;
+      border-width: $co-tooltip-arrow-inner-size;
       z-index: 1;
-      bottom: -16px;
     }
+
+    @if not $co-tooltip-has-border {
+      &::after {
+        display: none;
+      }
+    }
+
+    // The arrow sits on the edge facing the host: --co-tooltip-arrow-center is the offset along that edge.
+    &.top {
+      &::after {
+        left: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-size});
+        bottom: calc(-2 * #{$co-tooltip-arrow-size});
+      }
+
+      &::before {
+        left: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-inner-size});
+        bottom: calc(-2 * #{$co-tooltip-arrow-inner-size});
+      }
+    }
+
     &.bottom {
-      &::after,
+      &::after {
+        left: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-size});
+        top: calc(-2 * #{$co-tooltip-arrow-size});
+      }
+
       &::before {
-        bottom: 100%;
+        left: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-inner-size});
+        top: calc(-2 * #{$co-tooltip-arrow-inner-size});
       }
     }
+
+    &.left {
+      &::after {
+        top: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-size});
+        right: calc(-2 * #{$co-tooltip-arrow-size});
+      }
+
+      &::before {
+        top: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-inner-size});
+        right: calc(-2 * #{$co-tooltip-arrow-inner-size});
+      }
+    }
+
+    &.right {
+      &::after {
+        top: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-size});
+        left: calc(-2 * #{$co-tooltip-arrow-size});
+      }
+
+      &::before {
+        top: calc(#{$co-tooltip-arrow-center} - #{$co-tooltip-arrow-inner-size});
+        left: calc(-2 * #{$co-tooltip-arrow-inner-size});
+      }
+    }
+    .title {
+      font-weight: $co-tooltip-title-font-weight;
+    }
   }
-  //.validation-error-content {
-  //  display: flex;
-  //  flex-direction: row;
-  //  align-items: center;
-  //}
 }

package/lib/components/tooltip/style/_material-definition.scss

@@ -1,8 +1,34 @@
+@use "sass:list";
+@use "sass:meta";
+
+:root {
+  --co-tooltip-arrow-size: 10px;
+  --co-tooltip-arrow-inner-size: 8px;
+  --co-tooltip-arrow-center: 30px;
+  --co-tooltip-z-index: 9999999999;
+  // Read by TooltipDirective (getComputedStyle), not applied by CSS.
+  --co-tooltip-show-delay: 400ms;
+  --co-tooltip-auto-hide-delay: 10000ms; // 0 disables the auto-hide guard
+}
+
 $co-tooltip-font-family: $cc-font-family !default;
 $co-tooltip-font-size: $cc-font-size-default !default;
 $co-tooltip-padding: 10px !default;
-$co-tooltip-background-color: $cc-color-form-input-background-focus !default;
-$co-tooltip-color: $cc-color-font !default;
-$co-tooltip-border: 2px solid !default;
-$co-tooltip-border-color: black !default;
+$co-tooltip-background-color: $cc-color-tooltip-default !default;
+$co-tooltip-color: white !default;
+$co-tooltip-border: 1px solid !default;
+$co-tooltip-border-color: gray !default;
 $co-tooltip-border-radius: 5px !default;
+$co-tooltip-arrow-size: var(--co-tooltip-arrow-size) !default;
+$co-tooltip-arrow-inner-size: var(--co-tooltip-arrow-inner-size) !default;
+$co-tooltip-arrow-center: var(--co-tooltip-arrow-center) !default;
+$co-tooltip-z-index: var(--co-tooltip-z-index) !default;
+
+// Derived from the border shorthand so the arrow rim follows whatever the consumer sets.
+$co-tooltip-border-width: if(meta.type-of($co-tooltip-border) == list, list.nth($co-tooltip-border, 1), $co-tooltip-border) !default;
+$co-tooltip-has-border: meta.type-of($co-tooltip-border-width) == number and $co-tooltip-border-width > 0 !default;
+
+$co-tooltip-title-font-family: $cc-font-family !default;
+$co-tooltip-title-font-size: $cc-font-size-default !default;
+$co-tooltip-title-font-color: $co-tooltip-color !default;
+$co-tooltip-title-font-weight: bold !default;

package/lib/components/tooltip/style/_theme.scss

@@ -4,30 +4,49 @@
     color: $co-tooltip-color;
     border-color: $co-tooltip-border-color;
 
-    &::after {
-      border-bottom-color: transparent;
-      border-top-color: $co-tooltip-border-color;
+    // Each orientation colours the border edge that forms the visible triangle.
+    &.top {
+      &::after {
+        border-top-color: $co-tooltip-border-color;
+      }
+
+      &::before {
+        border-top-color: $co-tooltip-background-color;
+      }
     }
 
-    &::before {
-      border-bottom-color: transparent;
-      border-top-color: $co-tooltip-background-color;
+    &.bottom {
+      &::after {
+        border-bottom-color: $co-tooltip-border-color;
+      }
+
+      &::before {
+        border-bottom-color: $co-tooltip-background-color;
+      }
     }
 
-    @if $co-tooltip-border == "none" {
+    &.left {
       &::after {
-        display: none;
+        border-left-color: $co-tooltip-border-color;
+      }
+
+      &::before {
+        border-left-color: $co-tooltip-background-color;
       }
     }
-    &.bottom {
+
+    &.right {
       &::after {
-        border-top-color: transparent;
-        border-bottom-color: $co-tooltip-border-color;
+        border-right-color: $co-tooltip-border-color;
       }
+
       &::before {
-        border-top-color: transparent;
-        border-bottom-color: $co-tooltip-background-color;
+        border-right-color: $co-tooltip-background-color;
       }
     }
+
+    .title {
+      color: $co-tooltip-title-font-color;
+    }
   }
 }

package/lib/style/_variables.scss

@@ -48,6 +48,7 @@ $cc-color-text-main: #22313C !default;
 $cc-color-input-positive: #d7ead7 !default;
 $cc-color-input-important: $cc-color-light !default;
 $cc-color-input-info: #e4e6eb !default;
+$cc-color-tooltip-default: #2e3350 !default;
 $cc-color-active-accent: #8faba6 !default;
 $cc-color-less-light: #F7FAFA !default;
 $cc-color-border: #CCCCCC !default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colijnit/corecomponents_v12",
-  "version": "261.20.18",
+  "version": "261.20.20",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {