@tedi-design-system/angular 7.2.0-rc.1 → 7.2.0-rc.2
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.
|
@@ -5514,6 +5514,20 @@ class TooltipTriggerComponent {
|
|
|
5514
5514
|
onEscape() {
|
|
5515
5515
|
this.tooltip.hideTooltip();
|
|
5516
5516
|
}
|
|
5517
|
+
onActivateKey(event) {
|
|
5518
|
+
const element = this.interactiveElement();
|
|
5519
|
+
// Native buttons/anchors already synthesize a `click` from Enter/Space, so
|
|
5520
|
+
// handling the key here as well would toggle twice. Only the non-native
|
|
5521
|
+
// elements we made focusable ourselves (a `role="button"` span/wrapper)
|
|
5522
|
+
// need explicit keyboard activation.
|
|
5523
|
+
if (!element || this.isFocusable(element))
|
|
5524
|
+
return;
|
|
5525
|
+
if (this.tooltip.openWith() === "both" ||
|
|
5526
|
+
this.tooltip.openWith() === "click") {
|
|
5527
|
+
event.preventDefault();
|
|
5528
|
+
this.tooltip.toggleTooltip();
|
|
5529
|
+
}
|
|
5530
|
+
}
|
|
5517
5531
|
ngAfterContentChecked() {
|
|
5518
5532
|
if (!this.interactive())
|
|
5519
5533
|
return;
|
|
@@ -5528,6 +5542,7 @@ class TooltipTriggerComponent {
|
|
|
5528
5542
|
this.renderer.addClass(span, "tedi-tooltip-trigger__text");
|
|
5529
5543
|
this.renderer.addClass(span, "tedi-tooltip-trigger--focus");
|
|
5530
5544
|
this.renderer.setAttribute(span, "tabindex", "0");
|
|
5545
|
+
this.renderer.setAttribute(span, "role", "button");
|
|
5531
5546
|
this.renderer.insertBefore(element, span, firstChild);
|
|
5532
5547
|
this.renderer.appendChild(span, firstChild);
|
|
5533
5548
|
this.interactiveElement.set(span);
|
|
@@ -5543,6 +5558,9 @@ class TooltipTriggerComponent {
|
|
|
5543
5558
|
// focusable in their own right.
|
|
5544
5559
|
if (!this.isFocusable(interactive)) {
|
|
5545
5560
|
this.renderer.addClass(interactive, "tedi-tooltip-trigger--focus");
|
|
5561
|
+
if (!interactive.getAttribute("role")) {
|
|
5562
|
+
this.renderer.setAttribute(interactive, "role", "button");
|
|
5563
|
+
}
|
|
5546
5564
|
}
|
|
5547
5565
|
if (!interactive.getAttribute("tabindex")) {
|
|
5548
5566
|
this.renderer.setAttribute(interactive, "tabindex", "0");
|
|
@@ -5567,13 +5585,13 @@ class TooltipTriggerComponent {
|
|
|
5567
5585
|
return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
|
|
5568
5586
|
}
|
|
5569
5587
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5570
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()" }, properties: { "class.tedi-tooltip-trigger--clickable": "tooltip.openWith() === 'click'" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5588
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipTriggerComponent, isStandalone: true, selector: "tedi-tooltip-trigger", inputs: { interactive: { classPropertyName: "interactive", publicName: "interactive", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "touchstart": "onTouchStart()", "touchend": "onTouchEnd()", "click": "onClick()", "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocusIn()", "focusout": "onFocusOut()", "keydown.escape": "onEscape()", "keydown.enter": "onActivateKey($event)", "keydown.space": "onActivateKey($event)" }, properties: { "class.tedi-tooltip-trigger--clickable": "tooltip.openWith() === 'click'" } }, hostDirectives: [{ directive: i1.CdkOverlayOrigin }], ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5571
5589
|
}
|
|
5572
5590
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
|
|
5573
5591
|
type: Component,
|
|
5574
5592
|
args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkOverlayOrigin], host: {
|
|
5575
5593
|
"[class.tedi-tooltip-trigger--clickable]": "tooltip.openWith() === 'click'",
|
|
5576
|
-
}, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5594
|
+
}, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5577
5595
|
}], ctorParameters: () => [], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], onTouchStart: [{
|
|
5578
5596
|
type: HostListener,
|
|
5579
5597
|
args: ["touchstart"]
|
|
@@ -5598,6 +5616,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
5598
5616
|
}], onEscape: [{
|
|
5599
5617
|
type: HostListener,
|
|
5600
5618
|
args: ["keydown.escape"]
|
|
5619
|
+
}], onActivateKey: [{
|
|
5620
|
+
type: HostListener,
|
|
5621
|
+
args: ["keydown.enter", ["$event"]]
|
|
5622
|
+
}, {
|
|
5623
|
+
type: HostListener,
|
|
5624
|
+
args: ["keydown.space", ["$event"]]
|
|
5601
5625
|
}] } });
|
|
5602
5626
|
|
|
5603
5627
|
class TooltipContentComponent {
|
|
@@ -5622,14 +5646,15 @@ class TooltipContentComponent {
|
|
|
5622
5646
|
this.tooltip.isContentHovered.set(false);
|
|
5623
5647
|
}
|
|
5624
5648
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5625
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "
|
|
5649
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TooltipContentComponent, isStandalone: true, selector: "tedi-tooltip-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "tooltip" }, listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" }, properties: { "class": "classes()", "id": "tooltip.descriptionId" } }, ngImport: i0, template: "<ng-content />", isInline: true, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5626
5650
|
}
|
|
5627
5651
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipContentComponent, decorators: [{
|
|
5628
5652
|
type: Component,
|
|
5629
5653
|
args: [{ standalone: true, selector: "tedi-tooltip-content", template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5630
5654
|
"[class]": "classes()",
|
|
5631
|
-
"
|
|
5632
|
-
|
|
5655
|
+
"[id]": "tooltip.descriptionId",
|
|
5656
|
+
role: "tooltip",
|
|
5657
|
+
}, styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5633
5658
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], onMouseEnter: [{
|
|
5634
5659
|
type: HostListener,
|
|
5635
5660
|
args: ["mouseenter"]
|
|
@@ -5688,7 +5713,6 @@ class TooltipComponent {
|
|
|
5688
5713
|
});
|
|
5689
5714
|
connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
|
|
5690
5715
|
descriptionId = `tedi-tooltip-${++tooltipIdCounter}`;
|
|
5691
|
-
contentText = signal("", ...(ngDevMode ? [{ debugName: "contentText" }] : []));
|
|
5692
5716
|
internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
|
|
5693
5717
|
isOpen = computed(() => this.open() !== undefined ? Boolean(this.open()) : this.internalOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5694
5718
|
currentPlacement = signal("top", ...(ngDevMode ? [{ debugName: "currentPlacement" }] : []));
|
|
@@ -5699,13 +5723,20 @@ class TooltipComponent {
|
|
|
5699
5723
|
isContentHovered = signal(false, ...(ngDevMode ? [{ debugName: "isContentHovered" }] : []));
|
|
5700
5724
|
hideTimeout;
|
|
5701
5725
|
ngZone = inject(NgZone);
|
|
5726
|
+
document = inject(DOCUMENT);
|
|
5702
5727
|
trackRafId = null;
|
|
5728
|
+
onDocumentKeydown = (event) => {
|
|
5729
|
+
if (event.key === "Escape") {
|
|
5730
|
+
this.hideTooltip();
|
|
5731
|
+
}
|
|
5732
|
+
};
|
|
5703
5733
|
horizontalPush = new HorizontalPushHandler(() => this.connectedOverlay()?.overlayRef?.overlayElement, () => this.updateArrowPosition());
|
|
5704
5734
|
constructor() {
|
|
5705
5735
|
inject(DestroyRef).onDestroy(() => {
|
|
5706
5736
|
clearTimeout(this.hideTimeout);
|
|
5707
5737
|
this.horizontalPush.detach();
|
|
5708
5738
|
this.stopTracking();
|
|
5739
|
+
this.document.removeEventListener("keydown", this.onDocumentKeydown);
|
|
5709
5740
|
});
|
|
5710
5741
|
effect(() => {
|
|
5711
5742
|
if (this.isOpen() && this.trackPosition()) {
|
|
@@ -5715,6 +5746,14 @@ class TooltipComponent {
|
|
|
5715
5746
|
this.stopTracking();
|
|
5716
5747
|
}
|
|
5717
5748
|
});
|
|
5749
|
+
effect(() => {
|
|
5750
|
+
if (this.isOpen()) {
|
|
5751
|
+
this.document.addEventListener("keydown", this.onDocumentKeydown);
|
|
5752
|
+
}
|
|
5753
|
+
else {
|
|
5754
|
+
this.document.removeEventListener("keydown", this.onDocumentKeydown);
|
|
5755
|
+
}
|
|
5756
|
+
});
|
|
5718
5757
|
}
|
|
5719
5758
|
showTooltip() {
|
|
5720
5759
|
if (this.open() !== undefined)
|
|
@@ -5773,7 +5812,6 @@ class TooltipComponent {
|
|
|
5773
5812
|
this.updateArrowPosition();
|
|
5774
5813
|
}
|
|
5775
5814
|
onOverlayAttach() {
|
|
5776
|
-
this.syncContentText();
|
|
5777
5815
|
this.horizontalPush.attach();
|
|
5778
5816
|
this.updateArrowPosition();
|
|
5779
5817
|
}
|
|
@@ -5786,24 +5824,12 @@ class TooltipComponent {
|
|
|
5786
5824
|
this.arrowLeft.set(offset.left);
|
|
5787
5825
|
this.arrowTop.set(offset.top);
|
|
5788
5826
|
}
|
|
5789
|
-
ngAfterContentChecked() {
|
|
5790
|
-
this.syncContentText();
|
|
5791
|
-
}
|
|
5792
|
-
syncContentText() {
|
|
5793
|
-
const contentEl = this.tooltipContent()?.nativeElement;
|
|
5794
|
-
if (contentEl) {
|
|
5795
|
-
const text = contentEl.textContent?.trim() ?? "";
|
|
5796
|
-
if (text !== this.contentText()) {
|
|
5797
|
-
this.contentText.set(text);
|
|
5798
|
-
}
|
|
5799
|
-
}
|
|
5800
|
-
}
|
|
5801
5827
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5802
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
5828
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TooltipComponent, isStandalone: true, selector: "tedi-tooltip", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, openWith: { classPropertyName: "openWith", publicName: "openWith", isSignal: true, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, trackPosition: { classPropertyName: "trackPosition", publicName: "trackPosition", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, queries: [{ propertyName: "tooltipTrigger", first: true, predicate: TooltipTriggerComponent, descendants: true, isSignal: true }, { propertyName: "tooltipContent", first: true, predicate: TooltipContentComponent, descendants: true, read: ElementRef, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\">\n <div\n class=\"tedi-tooltip__arrow\"\n aria-hidden=\"true\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n <ng-content select=\"tedi-tooltip-content\" />\n </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"], dependencies: [{ kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i1.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5803
5829
|
}
|
|
5804
5830
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
5805
5831
|
type: Component,
|
|
5806
|
-
args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n
|
|
5832
|
+
args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"overlayOrigin()\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"overlayPositions()\"\n (positionChange)=\"onPositionChange($event)\"\n (attach)=\"onOverlayAttach()\"\n>\n <div class=\"tedi-tooltip__container\" [attr.data-placement]=\"currentPlacement()\">\n <div\n class=\"tedi-tooltip__arrow\"\n aria-hidden=\"true\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n <ng-content select=\"tedi-tooltip-content\" />\n </div>\n</ng-template>\n", styles: ["tedi-tooltip{display:contents}.tedi-tooltip__container{position:relative;z-index:var(--z-index-tooltip);width:max-content;max-width:calc(100dvw - 1rem);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip__container .tedi-tooltip__arrow{position:absolute;width:8px;height:8px;background:var(--tooltip-background);clip-path:inset(0 -5px -5px 0)}.tedi-tooltip__container[data-placement=top] .tedi-tooltip__arrow{bottom:0;transform:translate(-50%) translateY(50%) rotate(45deg)}.tedi-tooltip__container[data-placement=bottom] .tedi-tooltip__arrow{top:0;transform:translate(-50%) translateY(-50%) rotate(-135deg)}.tedi-tooltip__container[data-placement=left] .tedi-tooltip__arrow{right:0;transform:translateY(-50%) translate(50%) rotate(-45deg)}.tedi-tooltip__container[data-placement=right] .tedi-tooltip__arrow{left:0;transform:translateY(-50%) translate(-50%) rotate(135deg)}tedi-tooltip-trigger{display:inline-flex}tedi-tooltip-trigger .tedi-tooltip-trigger--focus:focus-visible{outline:2px solid var(--tedi-primary-500);outline-offset:2px}tedi-tooltip-trigger .tedi-tooltip-trigger__text{-webkit-text-decoration:underline dashed var(--general-border-secondary);text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em;cursor:default}tedi-tooltip-trigger .tedi-tooltip-trigger__text:hover{color:var(--link-primary-default);-webkit-text-decoration-color:var(--general-border-brand);text-decoration-color:var(--general-border-brand)}tedi-tooltip-trigger.tedi-tooltip-trigger--clickable .tedi-tooltip-trigger__text{cursor:pointer}.tedi-tooltip-content{position:relative;display:block;max-width:var(--tooltip-max-width);padding:var(--tooltip-padding-y) var(--tooltip-padding-x);color:var(--tooltip-text);overflow-wrap:break-word;background:var(--tooltip-background);border-radius:var(--tooltip-radius);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-tooltip-content--none{max-width:none}.tedi-tooltip-content--small{max-width:10rem}.tedi-tooltip-content--medium{max-width:15rem}.tedi-tooltip-content--large{max-width:30rem}\n"] }]
|
|
5807
5833
|
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], openWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "openWith", required: false }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], trackPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "trackPosition", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], tooltipTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipTriggerComponent), { isSignal: true }] }], tooltipContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipContentComponent), { ...{
|
|
5808
5834
|
read: ElementRef,
|
|
5809
5835
|
}, isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|