chrv-components 1.12.74 → 1.12.76
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
Binary file
|
|
@@ -4801,15 +4801,14 @@ class ChrButtonComponent {
|
|
|
4801
4801
|
* If the value is not a function, the value will be directly returned.
|
|
4802
4802
|
* @param The function the value to be handled on click
|
|
4803
4803
|
*/
|
|
4804
|
-
this.
|
|
4804
|
+
this.action = input(...(ngDevMode ? [undefined, { debugName: "action" }] : []));
|
|
4805
4805
|
/**
|
|
4806
4806
|
* The event that will be thrown when the button is clicked
|
|
4807
4807
|
*/
|
|
4808
|
-
this.
|
|
4809
|
-
this.clickChange = onclick;
|
|
4808
|
+
this.onAction = output();
|
|
4810
4809
|
this.loading = model(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
4811
4810
|
this.handleClick = (event) => {
|
|
4812
|
-
const click = this.
|
|
4811
|
+
const click = this.action();
|
|
4813
4812
|
const result = typeof click === 'function' ? click() : click;
|
|
4814
4813
|
const obs = result instanceof Promise || (result && typeof result.then === 'function')
|
|
4815
4814
|
? from(result)
|
|
@@ -4825,20 +4824,15 @@ class ChrButtonComponent {
|
|
|
4825
4824
|
});
|
|
4826
4825
|
return { event: event, value: obs };
|
|
4827
4826
|
};
|
|
4828
|
-
this.log = (value) => {
|
|
4829
|
-
console.log(value);
|
|
4830
|
-
};
|
|
4831
4827
|
}
|
|
4832
4828
|
ngOnInit() { }
|
|
4833
4829
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4834
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ChrButtonComponent, isStandalone: true, selector: "chr-button", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null },
|
|
4830
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.8", type: ChrButtonComponent, isStandalone: true, selector: "chr-button", inputs: { display: { classPropertyName: "display", publicName: "display", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, padding: { classPropertyName: "padding", publicName: "padding", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, fixed: { classPropertyName: "fixed", publicName: "fixed", isSignal: true, isRequired: false, transformFunction: null }, action: { classPropertyName: "action", publicName: "action", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onAction: "onAction", loading: "loadingChange" }, ngImport: i0, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4835
4831
|
}
|
|
4836
4832
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrButtonComponent, decorators: [{
|
|
4837
4833
|
type: Component,
|
|
4838
|
-
args: [{ selector: 'chr-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
4839
|
-
|
|
4840
|
-
}, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"] }]
|
|
4841
|
-
}], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], click: [{ type: i0.Input, args: [{ isSignal: true, alias: "click", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }] } });
|
|
4834
|
+
args: [{ selector: 'chr-button', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button [type]=\"type()\" class=\"btn btn-{{color()}}\" [class.btn-outlined]=\"variant() == 'outlined'\"\n [class.btn-ghost]=\"variant() == 'ghost'\" [class.btn-med-pdg]=\"padding() == 'medium'\"\n [class.btn-min-pdg]=\"padding() == 'none'\" [disabled]=\"disabled()\" [style.width.rem]=\"fixed()\"\n (click)=\"handleClick($event)\">\n @if(loading()){\n <div class=\"spinner-wrapper\" [attr.data-size]=\"iconSize()\">\n <div class=\"spinner\"></div>\n </div>\n } @else {\n @let text = display();\n @if(text){\n <span>{{text}}</span>\n } @else {\n <ng-content></ng-content>\n }\n @if(icon()){\n <span [attr.data-size]=\"iconSize()\" class=\"material-symbols\">{{icon()}}</span>\n }\n }\n</button>", styles: [":host{display:block}button{font-size:inherit;display:flex;align-items:center;justify-content:center;gap:.5rem;text-align:center}button .material-symbols{font-size:inherit}button .material-symbols[data-size=small]{font-size:.85rem}button .material-symbols[data-size=medium]{font-size:1rem}button .material-symbols[data-size=large]{font-size:1.25rem}button .material-symbols[data-size=inherit]{font-size:inherit}button .spinner-wrapper{display:flex;flex:1 1 auto;justify-content:center;align-items:center;height:var(--btn-spinner-size);width:var(--btn-spinner-size)}button .spinner-wrapper[data-size=medium]{--btn-spinner-size: 1rem}button .spinner-wrapper[data-size=large]{--btn-spinner-size: 1.25rem}button .spinner-wrapper[data-size=inherit]{--btn-spinner-size: inherit}button .spinner-wrapper .spinner{aspect-ratio:1 / 1;height:var(--btn-spinner-size);width:var(--btn-spinner-size);border:.125rem solid color-mix(in srgb,var(--btn-bg-color) 60%,var(--background-color) 40%);border-top:.125rem solid var(--btn-bg-contrast-color);border-radius:50%;animation:spin .7s linear infinite}button:hover .spinner{border-color:var(--btn-bg-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.btn{display:inline-flex;align-items:center;gap:.25rem;border:none;border-radius:.5rem;cursor:pointer;-webkit-user-select:none;user-select:none;padding:.5rem 1rem;background:var(--btn-bg-color, var(--background-color));color:var(--btn-bg-contrast-color, var(--text-color));transition:background .2s,color .2s}.btn:hover{background:color-mix(in srgb,var(--btn-bg-contrast-color, var(--background-color)) 10%,var(--btn-bg-color, var(--neutral-color)) 90%);color:color-mix(in srgb,var(--btn-bg-color, var(--background-color)) 10%,var(--btn-bg-contrast-color, var(--text-color)) 90%);cursor:pointer}.btn-outlined{background:none;border:1px solid var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-color, var(--text-color))}.btn-outlined:hover{background:var(--btn-bg-color, var(--neutral-color));color:var(--btn-bg-contrast-color, var(--text-color))}.btn-ghost{background:none;color:var(--btn-bg-color, var(--text-color))}.btn-ghost:hover{background:color-mix(in srgb,var(--btn-bg-color, var(--text-color)) 10%,transparent 90%)}.btn-min-pdg{padding:.125rem}.btn-med-pdg{padding:.375rem .75rem}.btn-fixed{width:8rem;text-align:center}.btn-primary{--btn-bg-color: var(--primary-color);--btn-bg-contrast-color: var(--primary-contrast-color)}.btn-secondary{--btn-bg-color: var(--secondary-color);--btn-bg-contrast-color: var(--secondary-contrast-color)}.btn-tertiary{--btn-bg-color: var(--tertiary-color);--btn-bg-contrast-color: var(--tertiary-contrast-color)}.btn-warning{--btn-bg-color: var(--warn-color);--btn-bg-contrast-color: var(--warn-contrast-color)}.btn-error{--btn-bg-color: var(--error-color);--btn-bg-contrast-color: var(--error-contrast-color)}.btn-success{--btn-bg-color: var(--success-color);--btn-bg-contrast-color: var(--success-contrast-color)}.btn-disabled,.btn[disabled]{--btn-bg-color: color-mix(in srgb, var(--neutral-color) 50%, var(--btn-bg-color) 50%);--btn-bg-contrast-color: color-mix(in srgb, var(--text-color) 50%, var(--btn-bg-contrast-color) 50%);cursor:not-allowed;opacity:.6}.btn-link{background:none;border:none;color:var(--link-color);text-decoration:underline;padding:0}.btn-link:hover{color:var(--link-hover-color);cursor:pointer}\n"] }]
|
|
4835
|
+
}], propDecorators: { display: [{ type: i0.Input, args: [{ isSignal: true, alias: "display", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], padding: [{ type: i0.Input, args: [{ isSignal: true, alias: "padding", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], fixed: [{ type: i0.Input, args: [{ isSignal: true, alias: "fixed", required: false }] }], action: [{ type: i0.Input, args: [{ isSignal: true, alias: "action", required: false }] }], onAction: [{ type: i0.Output, args: ["onAction"] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }, { type: i0.Output, args: ["loadingChange"] }] } });
|
|
4842
4836
|
|
|
4843
4837
|
class ChrDropdownComponent {
|
|
4844
4838
|
constructor() {
|
|
@@ -6771,6 +6765,9 @@ class ChrHoverDirective {
|
|
|
6771
6765
|
this.chrHoverContext = input({}, ...(ngDevMode ? [{ debugName: "chrHoverContext" }] : []));
|
|
6772
6766
|
this.chrHoverSnap = input(false, ...(ngDevMode ? [{ debugName: "chrHoverSnap" }] : []));
|
|
6773
6767
|
this.chrHoverPosition = input('right', ...(ngDevMode ? [{ debugName: "chrHoverPosition" }] : []));
|
|
6768
|
+
this.chrHoverCloseDelay = input(100, ...(ngDevMode ? [{ debugName: "chrHoverCloseDelay" }] : []));
|
|
6769
|
+
this.closeTimeout = null;
|
|
6770
|
+
this.overlayEventListeners = [];
|
|
6774
6771
|
this.mousePositionStrategy = (mousemove) => {
|
|
6775
6772
|
const positionOffset = { left: mousemove.clientX, top: mousemove.clientY };
|
|
6776
6773
|
const componentSize = this.overlayRef?.overlayElement.getBoundingClientRect();
|
|
@@ -6878,11 +6875,12 @@ class ChrHoverDirective {
|
|
|
6878
6875
|
});
|
|
6879
6876
|
}
|
|
6880
6877
|
ngOnInit() {
|
|
6881
|
-
this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', (
|
|
6878
|
+
this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseenter', () => {
|
|
6879
|
+
this.clearCloseTimeout();
|
|
6882
6880
|
this.open();
|
|
6883
6881
|
}));
|
|
6884
|
-
this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', (
|
|
6885
|
-
this.
|
|
6882
|
+
this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mouseleave', () => {
|
|
6883
|
+
this.startCloseTimeout();
|
|
6886
6884
|
}));
|
|
6887
6885
|
this.eventListeners.push(this.renderer.listen(this.el.nativeElement, 'mousemove', (event) => {
|
|
6888
6886
|
if (!this.chrHoverSnap()) {
|
|
@@ -6892,6 +6890,8 @@ class ChrHoverDirective {
|
|
|
6892
6890
|
}));
|
|
6893
6891
|
}
|
|
6894
6892
|
ngOnDestroy() {
|
|
6893
|
+
this.clearCloseTimeout();
|
|
6894
|
+
this.clearOverlayListeners();
|
|
6895
6895
|
this.overlayRef.dispose();
|
|
6896
6896
|
this.removeEventListeners();
|
|
6897
6897
|
}
|
|
@@ -6899,19 +6899,44 @@ class ChrHoverDirective {
|
|
|
6899
6899
|
this.eventListeners.forEach((unlisten) => unlisten());
|
|
6900
6900
|
this.eventListeners = [];
|
|
6901
6901
|
}
|
|
6902
|
+
startCloseTimeout() {
|
|
6903
|
+
this.clearCloseTimeout();
|
|
6904
|
+
this.closeTimeout = window.setTimeout(() => this.close(), this.chrHoverCloseDelay());
|
|
6905
|
+
}
|
|
6906
|
+
clearCloseTimeout() {
|
|
6907
|
+
if (this.closeTimeout != null) {
|
|
6908
|
+
clearTimeout(this.closeTimeout);
|
|
6909
|
+
this.closeTimeout = null;
|
|
6910
|
+
}
|
|
6911
|
+
}
|
|
6912
|
+
clearOverlayListeners() {
|
|
6913
|
+
this.overlayEventListeners.forEach((u) => u());
|
|
6914
|
+
this.overlayEventListeners = [];
|
|
6915
|
+
}
|
|
6902
6916
|
open() {
|
|
6903
6917
|
if (!this.overlayRef.hasAttached()) {
|
|
6904
6918
|
if (!this.portal) {
|
|
6905
6919
|
this.portal = new TemplatePortal(this.template, this.vcr, this.chrHoverContext());
|
|
6906
6920
|
}
|
|
6907
6921
|
const ref = this.overlayRef.attach(this.portal);
|
|
6922
|
+
// keep overlay open when overlay itself is hovered
|
|
6923
|
+
const overlayEl = this.overlayRef.overlayElement;
|
|
6924
|
+
this.clearOverlayListeners();
|
|
6925
|
+
this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseenter', () => {
|
|
6926
|
+
this.clearCloseTimeout();
|
|
6927
|
+
}));
|
|
6928
|
+
this.overlayEventListeners.push(this.renderer.listen(overlayEl, 'mouseleave', () => {
|
|
6929
|
+
this.startCloseTimeout();
|
|
6930
|
+
}));
|
|
6908
6931
|
}
|
|
6909
6932
|
}
|
|
6910
6933
|
close() {
|
|
6934
|
+
this.clearCloseTimeout();
|
|
6935
|
+
this.clearOverlayListeners();
|
|
6911
6936
|
this.overlayRef.detach();
|
|
6912
6937
|
}
|
|
6913
6938
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
6914
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
6939
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.8", type: ChrHoverDirective, isStandalone: true, selector: "[chrHover]", inputs: { template: { classPropertyName: "template", publicName: "chrHover", isSignal: false, isRequired: false, transformFunction: null }, chrHoverContext: { classPropertyName: "chrHoverContext", publicName: "chrHoverContext", isSignal: true, isRequired: false, transformFunction: null }, chrHoverSnap: { classPropertyName: "chrHoverSnap", publicName: "chrHoverSnap", isSignal: true, isRequired: false, transformFunction: null }, chrHoverPosition: { classPropertyName: "chrHoverPosition", publicName: "chrHoverPosition", isSignal: true, isRequired: false, transformFunction: null }, chrHoverCloseDelay: { classPropertyName: "chrHoverCloseDelay", publicName: "chrHoverCloseDelay", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
6915
6940
|
}
|
|
6916
6941
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImport: i0, type: ChrHoverDirective, decorators: [{
|
|
6917
6942
|
type: Directive,
|
|
@@ -6921,7 +6946,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.8", ngImpor
|
|
|
6921
6946
|
}], ctorParameters: () => [], propDecorators: { template: [{
|
|
6922
6947
|
type: Input,
|
|
6923
6948
|
args: ['chrHover']
|
|
6924
|
-
}], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }] } });
|
|
6949
|
+
}], chrHoverContext: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverContext", required: false }] }], chrHoverSnap: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverSnap", required: false }] }], chrHoverPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverPosition", required: false }] }], chrHoverCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "chrHoverCloseDelay", required: false }] }] } });
|
|
6925
6950
|
|
|
6926
6951
|
class CsvExporter {
|
|
6927
6952
|
export(data, columns) {
|