@colijnit/corecomponents_v12 300.1.5 → 300.1.7

package/index.d.ts

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { OnDestroy, NgZone, AfterViewInit, OnInit, EventEmitter, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, ChangeDetectorRef, ElementRef, ViewContainerRef, OnChanges, SimpleChanges, PipeTransform, TemplateRef, ModuleWithProviders, QueryList, Renderer2, ComponentFactory, AfterContentInit, DoCheck, IterableDiffers, StaticProvider, InjectionToken } from '@angular/core';
+import { OnDestroy, NgZone, AfterViewInit, OnInit, EventEmitter, ComponentFactoryResolver, ApplicationRef, Injector, ComponentRef, ChangeDetectorRef, ElementRef, ViewContainerRef, OnChanges, SimpleChanges, PipeTransform, TemplateRef, ModuleWithProviders, QueryList, Renderer2, ComponentFactory, AfterContentInit, DoCheck, IterableDiffers, Signal, StaticProvider, InjectionToken } from '@angular/core';
 import * as i4$1 from '@angular/forms';
 import { UntypedFormControl, UntypedFormGroup, NgModel, ValidatorFn, AsyncValidatorFn, AbstractControl, ValidationErrors } from '@angular/forms';
 import { Subject, Observable, Subscription, BehaviorSubject } from 'rxjs';
@@ -2408,6 +2408,8 @@ declare abstract class BaseSimpleGridComponent implements DoCheck {
     singleColumnIndex(row: Object): number;
     protected dataHasChanged(): void;
     protected prepareDataRow(row: any, index: number): Promise<void>;
+    protected repeatSortOnDataChange(): void;
+    protected setData(value: Object[]): void;
     private _setColumns;
     private _prepareData;
     private _prepareDataRows;
@@ -2429,6 +2431,7 @@ declare class SimpleGridComponent extends BaseSimpleGridComponent {
     private _formMaster;
     readonly defaultTextAlign: ColumnAlign;
     readonly scrollDirections: typeof ScrollDirection;
+    private _previouslySortedColumn;
     set headerCells(cells: any);
     rowElements: QueryList<ElementRef>;
     showAdd: boolean;
@@ -2486,7 +2489,8 @@ declare class SimpleGridComponent extends BaseSimpleGridComponent {
     toggleSettingsMenu(): void;
     toggleColumnMenu(col: any): void;
     hideColumn(col: any): void;
-    sortColumn(col: any, columnValue: string): void;
+    sortColumn(col: any, columnValue: string, preserveSortDirection?: boolean): void;
+    protected repeatSortOnDataChange(): void;
     showAllColumns(): void;
     exportToExcel(): void;
     goToPreviousPage(): void;
@@ -2922,31 +2926,130 @@ interface IconListItem {
     children?: IconListItem[];
 }
 
-declare class ListOfIconsComponent implements OnInit {
+declare class ListOfIconsComponent implements OnInit, OnDestroy {
     icons: IconCacheService;
+    private _overlayService;
+    private _elementRef;
     set collection(value: IconListItem[]);
     get collection(): IconListItem[];
-    iconSize: number;
-    activeItem?: IconListItem;
+    activeItem: IconListItem;
+    showLabels: boolean;
+    customCssClass: string;
     itemSelected: EventEmitter<IconListItem>;
     showClass(): boolean;
     readonly Icon: any;
     showMenu: boolean;
-    showSubCategories: boolean;
     private _collection;
-    constructor(icons: IconCacheService);
+    private _popupComponentRef;
+    constructor(icons: IconCacheService, _overlayService: OverlayService, _elementRef: ElementRef);
     ngOnInit(): void;
+    ngOnDestroy(): void;
     toggleMenu(): void;
+    openPopup(): void;
+    closePopup(): void;
     selectItem(item: IconListItem): void;
-    handlePickingCategoryClicked(subCategory: IconListItem): void;
-    onClickOutside(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ListOfIconsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ListOfIconsComponent, "co-list-of-icons", never, { "collection": { "alias": "collection"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; }, { "itemSelected": "itemSelected"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListOfIconsComponent, "co-list-of-icons", never, { "collection": { "alias": "collection"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; "customCssClass": { "alias": "customCssClass"; "required": false; }; }, { "itemSelected": "itemSelected"; }, never, never, false, never>;
+}
+
+declare class ListOfIconsPopupComponent {
+    collection: IconListItem[];
+    activeItem?: IconListItem;
+    parentForOverlay: ElementRef;
+    customCssClass: string;
+    showLabels: boolean;
+    itemSelected: EventEmitter<IconListItem>;
+    closePopup: EventEmitter<Event>;
+    showClass(): boolean;
+    readonly showSubCategories: Signal<boolean>;
+    private readonly _showSubCategories;
+    selectItem(item: IconListItem): void;
+    handlePickingCategoryClicked(subCategory: IconListItem, event: Event): void;
+    protected readonly CoDirection: typeof CoDirection;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ListOfIconsPopupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ListOfIconsPopupComponent, "co-list-of-icons-popup", never, { "collection": { "alias": "collection"; "required": false; }; "activeItem": { "alias": "activeItem"; "required": false; }; "parentForOverlay": { "alias": "parentForOverlay"; "required": false; }; "customCssClass": { "alias": "customCssClass"; "required": false; }; "showLabels": { "alias": "showLabels"; "required": false; }; }, { "itemSelected": "itemSelected"; "closePopup": "closePopup"; }, never, never, false, never>;
+}
+
+declare class TooltipDirective implements OnDestroy, OnInit {
+    private _compFactoryResolver;
+    private _appRef;
+    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 _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; }; "orientation": { "alias": "tooltipOrientation"; "required": false; }; }, {}, never, never, false, never>;
+}
+
+declare class TooltipComponent implements AfterViewInit, OnDestroy {
+    private _elementRef;
+    private _changeDetector;
+    private _renderer;
+    set hostElement(value: HTMLElement);
+    get hostElement(): HTMLElement;
+    toolTip: SafeHtml | string;
+    orientation: CoDirection;
+    tooltipClosed: EventEmitter<void>;
+    showClass(): boolean;
+    top: number;
+    left: number;
+    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; }; "orientation": { "alias": "orientation"; "required": false; }; }, { "tooltipClosed": "tooltipClosed"; }, never, never, false, never>;
+}
+
+declare class TooltipModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipModule, [typeof TooltipComponent], [typeof i2.CommonModule], [typeof TooltipComponent]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TooltipModule>;
+}
+
+declare class TooltipDirectiveModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirectiveModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipDirectiveModule, [typeof TooltipDirective], [typeof TooltipModule], [typeof TooltipDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<TooltipDirectiveModule>;
 }
 
 declare class ListOfIconsModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<ListOfIconsModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ListOfIconsModule, [typeof ListOfIconsComponent], [typeof i2.CommonModule, typeof i4$1.FormsModule, typeof IconModule, typeof ClickoutsideModule, typeof CoreComponentsTranslationModule], [typeof ListOfIconsComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ListOfIconsModule, [typeof ListOfIconsComponent, typeof ListOfIconsPopupComponent], [typeof i2.CommonModule, typeof i4$1.FormsModule, typeof IconModule, typeof ClickoutsideModule, typeof OverlayModule, typeof CoreComponentsTranslationModule, typeof TooltipDirectiveModule], [typeof ListOfIconsComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<ListOfIconsModule>;
 }
 
@@ -3430,63 +3533,6 @@ declare class AlignWithModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<AlignWithModule>;
 }
 
-declare class TooltipDirective implements OnDestroy, OnInit {
-    private _compFactoryResolver;
-    private _appRef;
-    private _injector;
-    private _sanitizer;
-    set tooltip(str: string);
-    private _elementRef;
-    private _tooltipMessage;
-    private _componentRef;
-    constructor(elementRef: ElementRef, _compFactoryResolver: ComponentFactoryResolver, _appRef: ApplicationRef, _injector: Injector, _sanitizer: DomSanitizer);
-    ngOnDestroy(): void;
-    ngOnInit(): void;
-    private _handleScroll;
-    private _handleMouseMove;
-    private _showTooltip;
-    private _removeTooltip;
-    private _createTooltipComponent;
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TooltipDirective, "[tooltip]", never, { "tooltip": { "alias": "tooltip"; "required": false; }; }, {}, never, never, false, never>;
-}
-
-declare class TooltipComponent implements AfterViewInit, OnDestroy {
-    private _elementRef;
-    private _changeDetector;
-    private _renderer;
-    set hostElement(value: HTMLElement);
-    get hostElement(): HTMLElement;
-    toolTip: SafeHtml | string;
-    tooltipClosed: EventEmitter<void>;
-    showClass(): boolean;
-    top: number;
-    left: number;
-    bottom: boolean;
-    animate: boolean;
-    private _hostElement;
-    private _documentClickListener;
-    constructor(_elementRef: ElementRef, _changeDetector: ChangeDetectorRef, _renderer: Renderer2);
-    ngAfterViewInit(): void;
-    ngOnDestroy(): void;
-    private _positionTooltip;
-    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>;
-}
-
-declare class TooltipModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipModule, [typeof TooltipComponent], [typeof i2.CommonModule], [typeof TooltipComponent]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<TooltipModule>;
-}
-
-declare class TooltipDirectiveModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<TooltipDirectiveModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<TooltipDirectiveModule, [typeof TooltipDirective], [typeof TooltipModule], [typeof TooltipDirective]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<TooltipDirectiveModule>;
-}
-
 declare abstract class BaseModuleScreenConfigService {
     abstract screenModuleName: string;
     readonly configSet: BehaviorSubject<ObjectConfiguration[]>;

package/lib/components/hour-scheduling-expandable/style/_layout.scss

@@ -97,7 +97,7 @@
 
       .first-half-hour,
       .second-half-hour {
-        background: none;
+
 
         &.selected {
           background-color: rgba(26, 115, 232, 0.2);

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

@@ -4,9 +4,9 @@
     display: block;
     height: fit-content;
     margin-right: -10px;
-    font-family: $cc-co-input-text-font-family;
-    font-size: $cc-co-input-text-font-size;
-    background: $cc-co-list-of-values-background-color;
+    font-family: $cc-co-list-of-icons-font-family;
+    font-size: $cc-co-list-of-icons-font-size;
+    background: $cc-co-list-of-icons-background-color;
     z-index: 1;
 
     .icon-item {
@@ -16,6 +16,12 @@
       align-items: center;
       cursor: pointer;
 
+      .co-icon {
+        width: $cc-co-list-of-icons-icon-size;
+        height: $cc-co-list-of-icons-icon-size;
+        padding: $cc-co-list-of-icons-icon-padding;
+      }
+
       .label {
         margin-top: 2px;
         text-align: center;
@@ -35,40 +41,44 @@
       &.menu-opened {
         .co-icon svg,
         .co-icon svg * {
-          fill: $color-action;
+          fill: $cc-color-action;
         }
 
         .label {
-          color: $color-action;
+          color: $cc-color-action;
         }
       }
     }
+  }
+
+  .co-list-of-icons-popup {
+    font-family: $cc-co-list-of-icons-font-family;
+    font-size: $cc-co-list-of-icons-font-size;
 
     .dropdown-menu {
-      position: absolute;
-      top: 100%;
-      left: 0;
-      width: 65px;
-      padding-top: 10px;
-      box-shadow: -3px 0px 16px 1px rgba(0, 0, 0, 0.2);
-      border-radius: 5px;
-      background: #FFF;
+      position: fixed;
+      width: auto;
+      padding: $cc-co-list-of-icons-popup-padding;
+      border-radius: $cc-co-list-of-icons-popup-border-radius;
+      z-index: $cc-co-list-of-icons-popup-z-index;
 
       .icon-item {
         position: relative;
-        margin-bottom: 12px;
-
-        &.active {
-          flex-direction: column;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        margin-bottom: $cc-co-list-of-icons-popup-item-margin-bottom;
+        cursor: pointer;
 
-          .co-icon svg,
-          .co-icon svg * {
-            fill: $color-action;
-          }
+        .co-icon {
+          width: $cc-co-list-of-icons-icon-size;
+          height: $cc-co-list-of-icons-icon-size;
+          padding: $cc-co-list-of-icons-icon-padding;
+        }
 
-          .label {
-            color: $color-action;
-          }
+        .label {
+          margin-top: 2px;
+          text-align: center;
         }
       }
     }
@@ -79,9 +89,7 @@
       left: 106%;
       z-index: 1;
       padding: 8px 6px 0;
-      border-radius: 3px;
-      background: #f8f8fa;
-      box-shadow: 1px 1px 3px 1px #9d9d9d6e;
+      border-radius: $cc-co-list-of-icons-popup-sub-category-border-radius;
 
       .button-wrapper {
         display: flex;
@@ -92,14 +100,6 @@
         text-align: center;
         cursor: pointer;
 
-        &:hover {
-          co-icon svg *,
-          span {
-            fill: $color-action;
-            color: $color-action;
-          }
-        }
-
         .button-title {
           margin-top: 2px;
           font-size: 9px;
@@ -108,4 +108,3 @@
     }
   }
 }
-

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

@@ -1,19 +1,17 @@
-$cc-co-input-text-font-family: $cc-font-family !default;
-$cc-co-input-text-font-size: $cc-font-size-default !default;
-$cc-co-input-text-font-color: $cc-color-dark !default;
-$cc-co-input-text-background-color: white !default;
-$cc-co-input-text-border-color: $cc-color-border !default;
-$cc-co-input-placeholder-color: $cc-color-border !default;
-$cc-co-input-placeholder-font-style: italic !default;
-$cc-co-input-text-small-height: 45px !default;
-$cc-co-input-text-icon-max-height: $cc-item-size !default;
-$cc-co-input-text-icon-size: 50% !default;
-$cc-co-input-text-icon-margin-number: 0 !default;
-$cc-co-input-text-spacer-width: $cc-input-border-width !default;
-$cc-co-input-text-right-spacer-width: 0 !default;
-$cc-co-input-text-spacer-color: $cc-input-border-color !default;
-$cc-co-list-of-values-background-color: white !default;
-$cc-co-list-of-values-lov-options-border: 1px solid $cc-input-border-color !default;
-$color-menu: #6b6e8a;
-$color-action: #1A73E8;
-$cc-color-validation-error-background: $cc-color-validation-error-background !default;
+$cc-co-list-of-icons-font-family: $cc-font-family !default;
+$cc-co-list-of-icons-font-size: $cc-font-size-default !default;
+$cc-co-list-of-icons-background-color: white !default;
+$cc-co-list-of-icons-icon-size: 25px !default;
+$cc-co-list-of-icons-icon-padding: 2px !default;
+
+//Popup (portaled to the document body by the OverlayService) variables
+$cc-co-list-of-icons-popup-padding: 10px 5px 0 5px !default;
+$cc-co-list-of-icons-popup-border-radius: 5px !default;
+$cc-co-list-of-icons-popup-z-index: 99999999 !default;
+$cc-co-list-of-icons-popup-background-color: #fff !default;
+$cc-co-list-of-icons-popup-box-shadow: -3px 0 16px 1px rgba(0, 0, 0, 0.2) !default;
+$cc-co-list-of-icons-popup-active-color: $cc-color-action !default;
+$cc-co-list-of-icons-popup-item-margin-bottom: 12px !default;
+$cc-co-list-of-icons-popup-sub-category-background-color: #f8f8fa !default;
+$cc-co-list-of-icons-popup-sub-category-box-shadow: 1px 1px 3px 1px #9d9d9d6e !default;
+$cc-co-list-of-icons-popup-sub-category-border-radius: 3px !default;

package/lib/components/list-of-icons/style/_theme.scss

@@ -0,0 +1,35 @@
+@include export-module('co-list-of-icons-theme') {
+  .co-list-of-icons-popup {
+    .dropdown-menu {
+      background: $cc-co-list-of-icons-popup-background-color;
+      box-shadow: $cc-co-list-of-icons-popup-box-shadow;
+
+      .icon-item {
+        &:hover,
+        &.active {
+          .co-icon svg,
+          .co-icon svg * {
+            fill: $cc-co-list-of-icons-popup-active-color;
+          }
+
+          .label {
+            color: $cc-co-list-of-icons-popup-active-color;
+          }
+        }
+      }
+    }
+
+    .picking-type-wrapper {
+      background: $cc-co-list-of-icons-popup-sub-category-background-color;
+      box-shadow: $cc-co-list-of-icons-popup-sub-category-box-shadow;
+
+      .button-wrapper:hover {
+        co-icon svg *,
+        span {
+          fill: $cc-co-list-of-icons-popup-active-color;
+          color: $cc-co-list-of-icons-popup-active-color;
+        }
+      }
+    }
+  }
+}

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": "300.1.5",
+  "version": "300.1.7",
   "description": "Colijn IT core components for Angular 12",
   "private": false,
   "peerDependencies": {