cax-design-system 2.8.4 → 3.0.0

package/fesm2022/cax-design-system-toggleswitch.mjs

@@ -12,16 +12,34 @@ class ToggleSwitchComponent {
     onChange = new EventEmitter();
     label;
     events;
+    focused = false;
+    isFocusVisible = true;
     toggleChecked(event) {
         this.checked = event.target.checked;
         this.onChange.emit(this.checked);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: ToggleSwitchComponent, isStandalone: false, selector: "cax-toggleswitch", inputs: { size: "size", checked: "checked", disabled: "disabled", iconClass: "iconClass", label: "label", events: "events" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\r\n    class=\"cax-toggleswitch-container\"\r\n    [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n    <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\">\r\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" class=\"cax-toggleswitch\" />\r\n        <div class=\"cax-toggleswitch-track\"></div>\r\n        <div\r\n            class=\"cax-toggle-thumb\"\r\n            [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n        >\r\n            <ng-container *ngIf=\"checked\">\r\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\r\n                    <path\r\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n                        fill=\"var(--primary-500)\"\r\n                        stroke=\"var(--primary-500)\"\r\n                        stroke-width=\"0.4\"\r\n                    />\r\n                </svg>\r\n            </ng-container>\r\n        </div>\r\n    </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;justify-content:space-between}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    onInputFocus() {
+        if (this.isFocusVisible) {
+            this.focused = true;
+        }
+    }
+    onInputBlur() {
+        this.focused = false;
+    }
+    onMouseDown() {
+        this.isFocusVisible = false;
+        this.focused = false;
+        // Reset isFocusVisible after a short delay to catch the focus event
+        setTimeout(() => {
+            this.isFocusVisible = true;
+        }, 150);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: ToggleSwitchComponent, isStandalone: false, selector: "cax-toggleswitch", inputs: { size: "size", checked: "checked", disabled: "disabled", iconClass: "iconClass", label: "label", events: "events" }, outputs: { onChange: "onChange" }, ngImport: i0, template: "<div\n    class=\"cax-toggleswitch-container\"\n    [ngClass]=\"{\n    'cax-toggleswitch-container-disabled': disabled,\n    'cax-toggleswitch-size-sm': size === 'sm',\n    'cax-toggleswitch-size-md': size === 'md' || !size,\n    'cax-toggleswitch-size-lg': size === 'lg'\n  }\"\n    (mousedown)=\"onMouseDown()\"\n>\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\" (mousedown)=\"onMouseDown()\">\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" class=\"cax-toggleswitch\" />\n        <div class=\"cax-toggleswitch-track\" [ngClass]=\"{ 'cax-focus': focused }\"></div>\n        <div\n            class=\"cax-toggle-thumb\"\n            [ngClass]=\"{\n                'cax-toggle-thumb-checked': checked,\n                'cax-focus': focused\n            }\"\n        >\n            <!-- <ng-container *ngIf=\"checked\">\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\n                    <path\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\n                        fill=\"var(--primary-500)\"\n                        stroke=\"var(--primary-500)\"\n                        stroke-width=\"0.4\"\n                    />\n                </svg>\n            </ng-container> -->\n        </div>\n    </label>\n    <span class=\"cax-toggle-label\" [ngClass]=\"{ 'cax-text-action-md-semibold': size === 'md' || !size, 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\" *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:1}.cax-toggleswitch{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cax-toggle-icon-active{display:flex;width:8px;height:8px}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cax-toggleswitch', standalone: false, template: "<div\r\n    class=\"cax-toggleswitch-container\"\r\n    [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n    <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\">\r\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" class=\"cax-toggleswitch\" />\r\n        <div class=\"cax-toggleswitch-track\"></div>\r\n        <div\r\n            class=\"cax-toggle-thumb\"\r\n            [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n        >\r\n            <ng-container *ngIf=\"checked\">\r\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\r\n                    <path\r\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n                        fill=\"var(--primary-500)\"\r\n                        stroke=\"var(--primary-500)\"\r\n                        stroke-width=\"0.4\"\r\n                    />\r\n                </svg>\r\n            </ng-container>\r\n        </div>\r\n    </label>\r\n</div>\r\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center;justify-content:space-between}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:.6}.cax-toggleswitch{display:none}.cax-toggle-icon-active{display:flex}}\n"] }]
+            args: [{ selector: 'cax-toggleswitch', standalone: false, template: "<div\n    class=\"cax-toggleswitch-container\"\n    [ngClass]=\"{\n    'cax-toggleswitch-container-disabled': disabled,\n    'cax-toggleswitch-size-sm': size === 'sm',\n    'cax-toggleswitch-size-md': size === 'md' || !size,\n    'cax-toggleswitch-size-lg': size === 'lg'\n  }\"\n    (mousedown)=\"onMouseDown()\"\n>\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\" (mousedown)=\"onMouseDown()\">\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" class=\"cax-toggleswitch\" />\n        <div class=\"cax-toggleswitch-track\" [ngClass]=\"{ 'cax-focus': focused }\"></div>\n        <div\n            class=\"cax-toggle-thumb\"\n            [ngClass]=\"{\n                'cax-toggle-thumb-checked': checked,\n                'cax-focus': focused\n            }\"\n        >\n            <!-- <ng-container *ngIf=\"checked\">\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\n                    <path\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\n                        fill=\"var(--primary-500)\"\n                        stroke=\"var(--primary-500)\"\n                        stroke-width=\"0.4\"\n                    />\n                </svg>\n            </ng-container> -->\n        </div>\n    </label>\n    <span class=\"cax-toggle-label\" [ngClass]=\"{ 'cax-text-action-md-semibold': size === 'md' || !size, 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\" *ngIf=\"label\">{{ label }}</span>\n</div>\n", styles: ["@layer cax{.cax-toggleswitch-container{display:flex;align-items:center}.cax-toggleswitch-container-disabled{opacity:.6;pointer-events:none}.cax-toggleswitchmaindiv{display:inline-flex;align-items:center;position:relative;cursor:pointer}.cax-toggleswitchmaindiv:hover,.cax-toggleswitchmaindiv:has(.cax-toggle-thumb:hover),.cax-toggleswitchmaindiv:has(.cax-toggleswitch-track:hover){opacity:.9}.cax-toggleswitchmaindiv-disabled{opacity:1}.cax-toggleswitch{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.cax-toggle-icon-active{display:flex;width:8px;height:8px}}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], checked: [{
@@ -39,11 +57,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
             }] } });
 
 class ToggleSwitchModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchModule, declarations: [ToggleSwitchComponent], imports: [CommonModule, FormsModule], exports: [ToggleSwitchComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchModule, imports: [CommonModule, FormsModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchModule, declarations: [ToggleSwitchComponent], imports: [CommonModule, FormsModule], exports: [ToggleSwitchComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchModule, imports: [CommonModule, FormsModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToggleSwitchModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToggleSwitchModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ToggleSwitchComponent],

package/fesm2022/cax-design-system-toggleswitch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-toggleswitch.mjs","sources":["../../src/app/components/toggleswitch/toggleswitch.ts","../../src/app/components/toggleswitch/toggleswitch.html","../../src/app/components/toggleswitch/toggleswitch.module.ts","../../src/app/components/toggleswitch/cax-design-system-toggleswitch.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n    selector: 'cax-toggleswitch',\n    templateUrl: './toggleswitch.html',\n    styleUrls: ['./toggleswitch.scss'],\n    standalone: false\n})\nexport class ToggleSwitchComponent {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() checked = false;\n    @Input() disabled = false;\n    @Input() iconClass: string = 'cax cax-check';\n    @Output() onChange = new EventEmitter<boolean>();\n    @Input() label: string | undefined;\n    @Input() events: {};\n\n    toggleChecked(event: Event) {\n        this.checked = (event.target as HTMLInputElement).checked;\n        this.onChange.emit(this.checked);\n    }\n}\n","<div\r\n    class=\"cax-toggleswitch-container\"\r\n    [ngClass]=\"{\r\n    'cax-toggleswitch-container-disabled': disabled,\r\n    'cax-toggleswitch-size-sm': size === 'sm',\r\n    'cax-toggleswitch-size-md': size === 'md',\r\n    'cax-toggleswitch-size-lg': size === 'lg'\r\n  }\"\r\n>\r\n    <span class=\"cax-toggle-label\" *ngIf=\"label\">{{ label }}</span>\r\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\">\r\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" class=\"cax-toggleswitch\" />\r\n        <div class=\"cax-toggleswitch-track\"></div>\r\n        <div\r\n            class=\"cax-toggle-thumb\"\r\n            [ngClass]=\"{\r\n        'cax-toggle-thumb-checked': checked\r\n      }\"\r\n        >\r\n            <ng-container *ngIf=\"checked\">\r\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\r\n                    <path\r\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\r\n                        fill=\"var(--primary-500)\"\r\n                        stroke=\"var(--primary-500)\"\r\n                        stroke-width=\"0.4\"\r\n                    />\r\n                </svg>\r\n            </ng-container>\r\n        </div>\r\n    </label>\r\n</div>\r\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ToggleSwitchComponent } from './toggleswitch';\n\n@NgModule({\n    declarations: [ToggleSwitchComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [ToggleSwitchComponent]\n})\nexport class ToggleSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;MAQa,qBAAqB,CAAA;IACrB,IAAI,GAAuB,IAAI;IAC/B,OAAO,GAAG,KAAK;IACf,QAAQ,GAAG,KAAK;IAChB,SAAS,GAAW,eAAe;AAClC,IAAA,QAAQ,GAAG,IAAI,YAAY,EAAW;AACvC,IAAA,KAAK;AACL,IAAA,MAAM;AAEf,IAAA,aAAa,CAAC,KAAY,EAAA;QACtB,IAAI,CAAC,OAAO,GAAI,KAAK,CAAC,MAA2B,CAAC,OAAO;QACzD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;;wGAX3B,qBAAqB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAArB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,qBAAqB,8OCRlC,i4DAgCA,EAAA,MAAA,EAAA,CAAA,4hBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,IAAA,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,CAAA;;4FDxBa,qBAAqB,EAAA,UAAA,EAAA,CAAA;kBANjC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,kBAAkB,cAGhB,KAAK,EAAA,QAAA,EAAA,i4DAAA,EAAA,MAAA,EAAA,CAAA,4hBAAA,CAAA,EAAA;8BAGR,IAAI,EAAA,CAAA;sBAAZ;gBACQ,OAAO,EAAA,CAAA;sBAAf;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACS,QAAQ,EAAA,CAAA;sBAAjB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,MAAM,EAAA,CAAA;sBAAd;;;MELQ,kBAAkB,CAAA;wGAAlB,kBAAkB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,QAAA,EAAA,CAAA;AAAlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,mBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kBAAkB,iBAJZ,qBAAqB,CAAA,EAAA,OAAA,EAAA,CAC1B,YAAY,EAAE,WAAW,aACzB,qBAAqB,CAAA,EAAA,CAAA;yGAEtB,kBAAkB,EAAA,OAAA,EAAA,CAHjB,YAAY,EAAE,WAAW,CAAA,EAAA,CAAA;;4FAG1B,kBAAkB,EAAA,UAAA,EAAA,CAAA;kBAL9B,QAAQ;AAAC,YAAA,IAAA,EAAA,CAAA;oBACN,YAAY,EAAE,CAAC,qBAAqB,CAAC;AACrC,oBAAA,OAAO,EAAE,CAAC,YAAY,EAAE,WAAW,CAAC;oBACpC,OAAO,EAAE,CAAC,qBAAqB;AAClC,iBAAA;;;ACTD;;AAEG;;;;"}
+{"version":3,"file":"cax-design-system-toggleswitch.mjs","sources":["../../src/app/components/toggleswitch/toggleswitch.ts","../../src/app/components/toggleswitch/toggleswitch.html","../../src/app/components/toggleswitch/toggleswitch.module.ts","../../src/app/components/toggleswitch/cax-design-system-toggleswitch.ts"],"sourcesContent":["import { Component, Input, Output, EventEmitter } from '@angular/core';\n\n@Component({\n    selector: 'cax-toggleswitch',\n    templateUrl: './toggleswitch.html',\n    styleUrls: ['./toggleswitch.scss'],\n    standalone: false\n})\nexport class ToggleSwitchComponent {\n    @Input() size: 'sm' | 'md' | 'lg' = 'md';\n    @Input() checked = false;\n    @Input() disabled = false;\n    @Input() iconClass: string = 'cax cax-check';\n    @Output() onChange = new EventEmitter<boolean>();\n    @Input() label: string | undefined;\n    @Input() events: {};\n\n    focused = false;\n    isFocusVisible = true;\n\n    toggleChecked(event: Event) {\n        this.checked = (event.target as HTMLInputElement).checked;\n        this.onChange.emit(this.checked);\n    }\n\n    onInputFocus() {\n        if (this.isFocusVisible) {\n            this.focused = true;\n        }\n    }\n\n    onInputBlur() {\n        this.focused = false;\n    }\n\n    onMouseDown() {\n        this.isFocusVisible = false;\n        this.focused = false;\n        // Reset isFocusVisible after a short delay to catch the focus event\n        setTimeout(() => {\n            this.isFocusVisible = true;\n        }, 150);\n    }\n}\n","<div\n    class=\"cax-toggleswitch-container\"\n    [ngClass]=\"{\n    'cax-toggleswitch-container-disabled': disabled,\n    'cax-toggleswitch-size-sm': size === 'sm',\n    'cax-toggleswitch-size-md': size === 'md' || !size,\n    'cax-toggleswitch-size-lg': size === 'lg'\n  }\"\n    (mousedown)=\"onMouseDown()\"\n>\n    <label class=\"cax-toggleswitchmaindiv\" [ngClass]=\"{ 'cax-toggleswitchmaindiv-disabled': disabled }\" (mousedown)=\"onMouseDown()\">\n        <input type=\"checkbox\" [checked]=\"checked\" [disabled]=\"disabled\" (change)=\"toggleChecked($event)\" (focus)=\"onInputFocus()\" (blur)=\"onInputBlur()\" class=\"cax-toggleswitch\" />\n        <div class=\"cax-toggleswitch-track\" [ngClass]=\"{ 'cax-focus': focused }\"></div>\n        <div\n            class=\"cax-toggle-thumb\"\n            [ngClass]=\"{\n                'cax-toggle-thumb-checked': checked,\n                'cax-focus': focused\n            }\"\n        >\n            <!-- <ng-container *ngIf=\"checked\">\n                <svg width=\"11\" height=\"7\" viewBox=\"0 0 11 8\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class=\"cax-toggle-icon-active\">\n                    <path\n                        d=\"M10.0915 0.951972L10.0867 0.946075L10.0813 0.940568C9.90076 0.753564 9.61034 0.753146 9.42927 0.939309L4.16201 6.22962L1.58507 3.63469C1.40401 3.44841 1.11351 3.44879 0.932892 3.63584C0.755703 3.81933 0.755703 4.10875 0.932892 4.29224L0.932878 4.29225L0.934851 4.29424L3.58046 6.95832C3.73676 7.11955 3.94983 7.2 4.1473 7.2C4.36196 7.2 4.55963 7.11773 4.71406 6.9584L10.0468 1.60234C10.2436 1.4199 10.2421 1.1339 10.0915 0.951972ZM4.2327 6.30081L4.2317 6.2998C4.23206 6.30015 4.23237 6.30049 4.23269 6.30082L4.2327 6.30081Z\"\n                        fill=\"var(--primary-500)\"\n                        stroke=\"var(--primary-500)\"\n                        stroke-width=\"0.4\"\n                    />\n                </svg>\n            </ng-container> -->\n        </div>\n    </label>\n    <span class=\"cax-toggle-label\" [ngClass]=\"{ 'cax-text-action-md-semibold': size === 'md' || !size, 'cax-text-action-sm-semibold': size === 'sm', 'cax-text-action-lg-semibold': size === 'lg' }\" *ngIf=\"label\">{{ label }}</span>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormsModule } from '@angular/forms';\nimport { ToggleSwitchComponent } from './toggleswitch';\n\n@NgModule({\n    declarations: [ToggleSwitchComponent],\n    imports: [CommonModule, FormsModule],\n    exports: [ToggleSwitchComponent]\n})\nexport class ToggleSwitchModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-toolbar.mjs

@@ -52,8 +52,8 @@ class Toolbar {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Toolbar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.16", type: Toolbar, isStandalone: false, selector: "p-toolbar", inputs: { style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Toolbar, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.21", type: Toolbar, isStandalone: false, selector: "p-toolbar", inputs: { style: "style", styleClass: "styleClass", ariaLabelledBy: "ariaLabelledBy" }, host: { classAttribute: "cax-element" }, queries: [{ propertyName: "templates", predicate: CaxTemplate }], ngImport: i0, template: `
         <div [ngClass]="'p-toolbar p-component'" [attr.aria-labelledby]="ariaLabelledBy" [ngStyle]="style" [class]="styleClass" role="toolbar" [attr.data-pc-name]="'toolbar'">
             <ng-content></ng-content>
             <div class="p-toolbar-group-left p-toolbar-group-start" *ngIf="startTemplate" [attr.data-pc-section]="'start'">
@@ -68,7 +68,7 @@ class Toolbar {
         </div>
     `, isInline: true, styles: ["@layer cax{.p-toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap}.p-toolbar-group-start,.p-toolbar-group-center,.p-toolbar-group-end,.p-toolbar-group-left,.p-toolbar-group-right{display:flex;align-items:center}}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Toolbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Toolbar, decorators: [{
             type: Component,
             args: [{ selector: 'p-toolbar', template: `
         <div [ngClass]="'p-toolbar p-component'" [attr.aria-labelledby]="ariaLabelledBy" [ngStyle]="style" [class]="styleClass" role="toolbar" [attr.data-pc-name]="'toolbar'">
@@ -97,11 +97,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 args: [CaxTemplate]
             }] } });
 class ToolbarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: ToolbarModule, declarations: [Toolbar], imports: [CommonModule, SharedModule], exports: [Toolbar, SharedModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToolbarModule, imports: [CommonModule, SharedModule, SharedModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToolbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: ToolbarModule, declarations: [Toolbar], imports: [CommonModule, SharedModule], exports: [Toolbar, SharedModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToolbarModule, imports: [CommonModule, SharedModule, SharedModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: ToolbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: ToolbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, SharedModule],

package/fesm2022/cax-design-system-toolbar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"cax-design-system-toolbar.mjs","sources":["../../src/app/components/toolbar/toolbar.ts","../../src/app/components/toolbar/cax-design-system-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\n/**\n * Toolbar is a grouping component for buttons and other content.\n * @group Components\n */\n@Component({\n    selector: 'p-toolbar',\n    template: `\n        <div [ngClass]=\"'p-toolbar p-component'\" [attr.aria-labelledby]=\"ariaLabelledBy\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"toolbar\" [attr.data-pc-name]=\"'toolbar'\">\n            <ng-content></ng-content>\n            <div class=\"p-toolbar-group-left p-toolbar-group-start\" *ngIf=\"startTemplate\" [attr.data-pc-section]=\"'start'\">\n                <ng-container *ngTemplateOutlet=\"startTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-group-center\" *ngIf=\"centerTemplate\" [attr.data-pc-section]=\"'center'\">\n                <ng-container *ngTemplateOutlet=\"centerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-group-right p-toolbar-group-end\" *ngIf=\"endTemplate\" [attr.data-pc-section]=\"'end'\">\n                <ng-container *ngTemplateOutlet=\"endTemplate\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./toolbar.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Toolbar implements AfterContentInit, BlockableUI {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Defines a string value that labels an interactive element.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    startTemplate: TemplateRef<any> | undefined;\n\n    endTemplate: TemplateRef<any> | undefined;\n\n    centerTemplate: TemplateRef<any> | undefined;\n\n    constructor(private el: ElementRef) {}\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'start':\n                case 'left':\n                    this.startTemplate = item.template;\n                    break;\n\n                case 'end':\n                case 'right':\n                    this.endTemplate = item.template;\n                    break;\n\n                case 'center':\n                    this.centerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Toolbar, SharedModule],\n    declarations: [Toolbar]\n})\nexport class ToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"cax-design-system-toolbar.mjs","sources":["../../src/app/components/toolbar/toolbar.ts","../../src/app/components/toolbar/cax-design-system-toolbar.ts"],"sourcesContent":["import { CommonModule } from '@angular/common';\nimport { AfterContentInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, NgModule, QueryList, TemplateRef, ViewEncapsulation } from '@angular/core';\nimport { BlockableUI, CaxTemplate, SharedModule } from 'cax-design-system/api';\n/**\n * Toolbar is a grouping component for buttons and other content.\n * @group Components\n */\n@Component({\n    selector: 'p-toolbar',\n    template: `\n        <div [ngClass]=\"'p-toolbar p-component'\" [attr.aria-labelledby]=\"ariaLabelledBy\" [ngStyle]=\"style\" [class]=\"styleClass\" role=\"toolbar\" [attr.data-pc-name]=\"'toolbar'\">\n            <ng-content></ng-content>\n            <div class=\"p-toolbar-group-left p-toolbar-group-start\" *ngIf=\"startTemplate\" [attr.data-pc-section]=\"'start'\">\n                <ng-container *ngTemplateOutlet=\"startTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-group-center\" *ngIf=\"centerTemplate\" [attr.data-pc-section]=\"'center'\">\n                <ng-container *ngTemplateOutlet=\"centerTemplate\"></ng-container>\n            </div>\n            <div class=\"p-toolbar-group-right p-toolbar-group-end\" *ngIf=\"endTemplate\" [attr.data-pc-section]=\"'end'\">\n                <ng-container *ngTemplateOutlet=\"endTemplate\"></ng-container>\n            </div>\n        </div>\n    `,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    styleUrls: ['./toolbar.css'],\n    standalone: false,\n    host: {\n        class: 'cax-element'\n    }\n})\nexport class Toolbar implements AfterContentInit, BlockableUI {\n    /**\n     * Inline style of the component.\n     * @group Props\n     */\n    @Input() style: { [klass: string]: any } | null | undefined;\n    /**\n     * Style class of the component.\n     * @group Props\n     */\n    @Input() styleClass: string | undefined;\n    /**\n     * Defines a string value that labels an interactive element.\n     * @group Props\n     */\n    @Input() ariaLabelledBy: string | undefined;\n\n    @ContentChildren(CaxTemplate) templates: QueryList<CaxTemplate> | undefined;\n\n    startTemplate: TemplateRef<any> | undefined;\n\n    endTemplate: TemplateRef<any> | undefined;\n\n    centerTemplate: TemplateRef<any> | undefined;\n\n    constructor(private el: ElementRef) {}\n\n    getBlockableElement(): HTMLElement {\n        return this.el.nativeElement.children[0];\n    }\n\n    ngAfterContentInit() {\n        (this.templates as QueryList<CaxTemplate>).forEach((item) => {\n            switch (item.getType()) {\n                case 'start':\n                case 'left':\n                    this.startTemplate = item.template;\n                    break;\n\n                case 'end':\n                case 'right':\n                    this.endTemplate = item.template;\n                    break;\n\n                case 'center':\n                    this.centerTemplate = item.template;\n                    break;\n            }\n        });\n    }\n}\n\n@NgModule({\n    imports: [CommonModule, SharedModule],\n    exports: [Toolbar, SharedModule],\n    declarations: [Toolbar]\n})\nexport class ToolbarModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/cax-design-system-tooltip.mjs

@@ -343,18 +343,21 @@ class Tooltip {
         tooltipArrow.className = 'cax-tooltip-arrow';
         this.container.appendChild(tooltipArrow);
         this.tooltipText = document.createElement('div');
-        this.tooltipText.className = 'cax-tooltip-text';
+        this.tooltipText.className = 'cax-tooltip-text cax-text-body-xsm-regular';
         this.updateText();
         if (this.getOption('positionStyle')) {
             this.container.style.position = this.getOption('positionStyle');
         }
-        const linkHtml = this.linkUrl && this.linkText
-            ? `<span>${this.content || ''}</span>
+        if (this.linkUrl && this.linkText) {
+            this.tooltipText.innerHTML = `<span>${this.content || ''}</span>
        <div class="cax-tooltip-link">
-           <a href="${this.linkUrl}" target="_blank" rel="noopener noreferrer">${this.linkText}</a>
-       </div>`
-            : `<span>${this.content || ''}</span>`;
-        this.tooltipText.innerHTML = linkHtml;
+           <a href="${this.linkUrl}" target="_blank" rel="noopener noreferrer" class="cax-text-action-xsm-link-semibold">${this.linkText}</a>
+       </div>`;
+        }
+        else if (!this.tooltipText.innerHTML) {
+            // Only set default span if updateText() didn't already populate it (e.g. via TemplateRef)
+            this.tooltipText.innerHTML = `<span>${this.content || ''}</span>`;
+        }
         this.container.appendChild(this.tooltipText);
         if (this.getOption('appendTo') === 'body')
             document.body.appendChild(this.container);
@@ -384,7 +387,7 @@ class Tooltip {
     }
     unbindContainerMouseleaveListener() {
         if (this.containerMouseleaveListener) {
-            this.bindContainerMouseleaveListener();
+            this.containerMouseleaveListener();
             this.containerMouseleaveListener = null;
         }
     }
@@ -419,17 +422,34 @@ class Tooltip {
     }
     updateText() {
         const content = this.getOption('tooltipLabel');
-        if (content instanceof TemplateRef) {
+        // console.log('Tooltip content:', content, typeof content, content?.constructor?.name);
+        if (content instanceof TemplateRef || (content && !!content.createEmbeddedView)) {
+            this.tooltipText.innerHTML = '';
             const embeddedViewRef = this.viewContainer.createEmbeddedView(content);
             embeddedViewRef.detectChanges();
             embeddedViewRef.rootNodes.forEach((node) => this.tooltipText.appendChild(node));
         }
-        else if (this.getOption('escape')) {
+        else if (typeof content === 'string') {
+            if (this.getOption('escape')) {
+                this.tooltipText.innerHTML = '';
+                this.tooltipText.appendChild(document.createTextNode(content));
+            }
+            else {
+                this.tooltipText.innerHTML = content;
+            }
+        }
+        else if (content instanceof HTMLElement) {
             this.tooltipText.innerHTML = '';
-            this.tooltipText.appendChild(document.createTextNode(content));
+            this.tooltipText.appendChild(content);
         }
         else {
-            this.tooltipText.innerHTML = content;
+            if (this.getOption('escape')) {
+                this.tooltipText.innerHTML = '';
+                this.tooltipText.appendChild(document.createTextNode(String(content)));
+            }
+            else {
+                this.tooltipText.innerHTML = String(content);
+            }
         }
     }
     align() {
@@ -820,10 +840,10 @@ class Tooltip {
             this.scrollHandler = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Tooltip, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.16", type: Tooltip, isStandalone: false, selector: "[caxTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: ["escape", "escape", booleanAttribute], showDelay: ["showDelay", "showDelay", numberAttribute], hideDelay: ["hideDelay", "hideDelay", numberAttribute], life: ["life", "life", numberAttribute], positionTop: ["positionTop", "positionTop", numberAttribute], positionLeft: ["positionLeft", "positionLeft", numberAttribute], autoHide: ["autoHide", "autoHide", booleanAttribute], fitContent: ["fitContent", "fitContent", booleanAttribute], hideOnEscape: ["hideOnEscape", "hideOnEscape", booleanAttribute], content: ["caxTooltip", "content"], disabled: ["tooltipDisabled", "disabled"], tooltipOptions: "tooltipOptions", linkUrl: "linkUrl", linkText: "linkText" }, host: { listeners: { "document:keydown.escape": "onPressEscape($event)" }, classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Tooltip, deps: [{ token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i1.caxConfig }, { token: i0.Renderer2 }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", type: Tooltip, isStandalone: false, selector: "[caxTooltip]", inputs: { tooltipPosition: "tooltipPosition", tooltipEvent: "tooltipEvent", appendTo: "appendTo", positionStyle: "positionStyle", tooltipStyleClass: "tooltipStyleClass", tooltipZIndex: "tooltipZIndex", escape: ["escape", "escape", booleanAttribute], showDelay: ["showDelay", "showDelay", numberAttribute], hideDelay: ["hideDelay", "hideDelay", numberAttribute], life: ["life", "life", numberAttribute], positionTop: ["positionTop", "positionTop", numberAttribute], positionLeft: ["positionLeft", "positionLeft", numberAttribute], autoHide: ["autoHide", "autoHide", booleanAttribute], fitContent: ["fitContent", "fitContent", booleanAttribute], hideOnEscape: ["hideOnEscape", "hideOnEscape", booleanAttribute], content: ["caxTooltip", "content"], disabled: ["tooltipDisabled", "disabled"], tooltipOptions: "tooltipOptions", linkUrl: "linkUrl", linkText: "linkText" }, host: { listeners: { "document:keydown.escape": "onPressEscape()" }, classAttribute: "cax-element" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: Tooltip, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: Tooltip, decorators: [{
             type: Directive,
             args: [{
                     selector: '[caxTooltip]',
@@ -888,15 +908,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImpo
                 type: Input
             }], onPressEscape: [{
                 type: HostListener,
-                args: ['document:keydown.escape', ['$event']]
+                args: ['document:keydown.escape']
             }] } });
 
 class TooltipModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.16", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule, InputTextModule, ButtonModule], exports: [Tooltip] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TooltipModule, imports: [CommonModule, InputTextModule, ButtonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TooltipModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: TooltipModule, declarations: [Tooltip], imports: [CommonModule, InputTextModule, ButtonModule], exports: [Tooltip] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TooltipModule, imports: [CommonModule, InputTextModule, ButtonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.16", ngImport: i0, type: TooltipModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TooltipModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, InputTextModule, ButtonModule],