@tedi-design-system/angular 7.1.0 → 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.
- package/community/index.d.ts +8 -0
- package/community/index.d.ts.map +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs +8 -0
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +294 -44
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/index.d.ts +107 -8
- package/tedi/index.d.ts.map +1 -1
|
@@ -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 }] }] } });
|
|
@@ -10567,6 +10593,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10567
10593
|
args: ["inputElement"]
|
|
10568
10594
|
}] } });
|
|
10569
10595
|
|
|
10596
|
+
let formFieldIdCounter = 0;
|
|
10570
10597
|
class FormFieldComponent {
|
|
10571
10598
|
/**
|
|
10572
10599
|
* The size of the form field.
|
|
@@ -10586,53 +10613,115 @@ class FormFieldComponent {
|
|
|
10586
10613
|
* Custom CSS classes for the input.
|
|
10587
10614
|
*/
|
|
10588
10615
|
inputClass = input(null, ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
|
|
10589
|
-
|
|
10616
|
+
/**
|
|
10617
|
+
* Maximum number of characters the control should hold. When set, a live
|
|
10618
|
+
* character counter (`current/limit`) is shown in the feedback row and the
|
|
10619
|
+
* field enters an error state once the limit is exceeded.
|
|
10620
|
+
*/
|
|
10621
|
+
characterLimit = input(...(ngDevMode ? [undefined, { debugName: "characterLimit" }] : []));
|
|
10622
|
+
control = contentChild(TEDI_FORM_FIELD_CONTROL, ...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
10623
|
+
controlElement = contentChild(TEDI_FORM_FIELD_CONTROL, ...(ngDevMode ? [{ debugName: "controlElement", read: ElementRef }] : [{
|
|
10624
|
+
read: ElementRef,
|
|
10625
|
+
}]));
|
|
10590
10626
|
ngControl;
|
|
10591
10627
|
feedback;
|
|
10628
|
+
feedbackElement;
|
|
10592
10629
|
destroyRef = inject(DestroyRef);
|
|
10593
10630
|
inputGroup = inject(TEDI_INPUT_GROUP, { optional: true });
|
|
10631
|
+
fallbackId = `tedi-form-field-${formFieldIdCounter++}`;
|
|
10594
10632
|
constructor() {
|
|
10595
10633
|
effect(() => {
|
|
10596
10634
|
const invalid = this.computeInvalid();
|
|
10597
|
-
this.control?.setInvalidState(invalid);
|
|
10635
|
+
this.control()?.setInvalidState(invalid);
|
|
10598
10636
|
});
|
|
10637
|
+
effect(() => this.syncAriaDescribedBy());
|
|
10599
10638
|
}
|
|
10639
|
+
/**
|
|
10640
|
+
* A textarea has no room for the trailing clear button / icon (per design),
|
|
10641
|
+
* so the form field suppresses both when it wraps one.
|
|
10642
|
+
*/
|
|
10643
|
+
isTextarea = signal(false, ...(ngDevMode ? [{ debugName: "isTextarea" }] : []));
|
|
10600
10644
|
ngAfterContentInit() {
|
|
10645
|
+
this.isTextarea.set(this.controlElement()?.nativeElement.tagName === "TEXTAREA");
|
|
10646
|
+
if (isDevMode() && this.isTextarea() && (this.clearable() || !!this.icon())) {
|
|
10647
|
+
console.warn("[tedi-form-field] `clearable` and `icon` are not supported with a textarea and are ignored.");
|
|
10648
|
+
}
|
|
10601
10649
|
this.ngControl?.control?.events
|
|
10602
10650
|
?.pipe(takeUntilDestroyed(this.destroyRef))
|
|
10603
10651
|
.subscribe(() => this.updateValidationState());
|
|
10604
10652
|
this.updateValidationState();
|
|
10653
|
+
this.syncAriaDescribedBy();
|
|
10605
10654
|
}
|
|
10606
10655
|
updateValidationState() {
|
|
10607
|
-
this.control?.setInvalidState(this.computeInvalid());
|
|
10656
|
+
this.control()?.setInvalidState(this.computeInvalid());
|
|
10608
10657
|
}
|
|
10609
10658
|
computeInvalid() {
|
|
10610
10659
|
const invalid = !!this.ngControl?.invalid;
|
|
10611
10660
|
const touched = !!this.ngControl?.touched;
|
|
10612
10661
|
const dirty = !!this.ngControl?.dirty;
|
|
10613
|
-
const fieldInvalid = invalid && (touched || dirty);
|
|
10662
|
+
const fieldInvalid = (invalid && (touched || dirty)) || this.characterCountExceeded();
|
|
10614
10663
|
return fieldInvalid || (this.inputGroup?.invalid() ?? false);
|
|
10615
10664
|
}
|
|
10616
10665
|
resolvedIcon = computed(() => {
|
|
10617
10666
|
const icon = this.icon();
|
|
10618
|
-
if (!icon)
|
|
10667
|
+
if (!icon || this.isTextarea())
|
|
10619
10668
|
return undefined;
|
|
10620
10669
|
return typeof icon === "string" ? { name: icon } : icon;
|
|
10621
10670
|
}, ...(ngDevMode ? [{ debugName: "resolvedIcon" }] : []));
|
|
10671
|
+
characterCount = computed(() => this.control()?.value()?.toString().length ?? 0, ...(ngDevMode ? [{ debugName: "characterCount" }] : []));
|
|
10672
|
+
characterCountExceeded = computed(() => {
|
|
10673
|
+
const limit = this.characterLimit();
|
|
10674
|
+
return limit != null && this.characterCount() > limit;
|
|
10675
|
+
}, ...(ngDevMode ? [{ debugName: "characterCountExceeded" }] : []));
|
|
10676
|
+
/** Base for the generated feedback / counter ids — the control's own id, or a fallback. */
|
|
10677
|
+
get baseId() {
|
|
10678
|
+
return this.controlElement()?.nativeElement.id || this.fallbackId;
|
|
10679
|
+
}
|
|
10680
|
+
characterCountId = computed(() => this.characterLimit() != null ? `${this.baseId}-character-count` : null, ...(ngDevMode ? [{ debugName: "characterCountId" }] : []));
|
|
10681
|
+
syncAriaDescribedBy() {
|
|
10682
|
+
const control = this.controlElement()?.nativeElement;
|
|
10683
|
+
// Only manage `aria-describedby` for the native inputs — composite controls
|
|
10684
|
+
// (date/time fields) own their internal descriptions.
|
|
10685
|
+
if (!control ||
|
|
10686
|
+
(control.tagName !== "INPUT" && control.tagName !== "TEXTAREA")) {
|
|
10687
|
+
return;
|
|
10688
|
+
}
|
|
10689
|
+
const feedbackEl = this.feedbackElement?.nativeElement;
|
|
10690
|
+
if (feedbackEl && !feedbackEl.id)
|
|
10691
|
+
feedbackEl.id = `${this.baseId}-feedback`;
|
|
10692
|
+
const feedbackId = feedbackEl?.id ?? null;
|
|
10693
|
+
const countId = this.characterCountId();
|
|
10694
|
+
const managed = new Set([
|
|
10695
|
+
`${this.baseId}-feedback`,
|
|
10696
|
+
`${this.baseId}-character-count`,
|
|
10697
|
+
]);
|
|
10698
|
+
const ids = (control.getAttribute("aria-describedby") ?? "")
|
|
10699
|
+
.split(/\s+/)
|
|
10700
|
+
.filter((id) => id && !managed.has(id) && id !== feedbackId && id !== countId);
|
|
10701
|
+
if (feedbackId)
|
|
10702
|
+
ids.push(feedbackId);
|
|
10703
|
+
if (countId)
|
|
10704
|
+
ids.push(countId);
|
|
10705
|
+
if (ids.length)
|
|
10706
|
+
control.setAttribute("aria-describedby", ids.join(" "));
|
|
10707
|
+
else
|
|
10708
|
+
control.removeAttribute("aria-describedby");
|
|
10709
|
+
}
|
|
10622
10710
|
validationState = computed(() => {
|
|
10623
10711
|
const feedbackType = this.feedback?.type();
|
|
10624
|
-
const fieldInvalid = this.control?.invalid?.() ?? false;
|
|
10625
|
-
if (fieldInvalid || feedbackType === "error")
|
|
10712
|
+
const fieldInvalid = this.control()?.invalid?.() ?? false;
|
|
10713
|
+
if (fieldInvalid || feedbackType === "error" || this.characterCountExceeded())
|
|
10626
10714
|
return "invalid";
|
|
10627
10715
|
if (feedbackType === "valid")
|
|
10628
10716
|
return "valid";
|
|
10629
10717
|
return "neutral";
|
|
10630
10718
|
}, ...(ngDevMode ? [{ debugName: "validationState" }] : []));
|
|
10631
10719
|
showClearButton = computed(() => {
|
|
10632
|
-
const value = this.control?.value();
|
|
10633
|
-
return this.clearable() && !!value;
|
|
10720
|
+
const value = this.control()?.value();
|
|
10721
|
+
return this.clearable() && !!value && !this.isTextarea();
|
|
10634
10722
|
}, ...(ngDevMode ? [{ debugName: "showClearButton" }] : []));
|
|
10635
|
-
isDisabled = computed(() => (this.control
|
|
10723
|
+
isDisabled = computed(() => (this.control()?.disabled() ?? false) ||
|
|
10724
|
+
(this.inputGroup?.disabled() ?? false), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
10636
10725
|
hostClasses = computed(() => {
|
|
10637
10726
|
return {
|
|
10638
10727
|
"tedi-form-field": true,
|
|
@@ -10641,7 +10730,7 @@ class FormFieldComponent {
|
|
|
10641
10730
|
"tedi-form-field--disabled": this.isDisabled(),
|
|
10642
10731
|
"tedi-form-field--small": this.size() === "small",
|
|
10643
10732
|
"tedi-form-field--large": this.size() === "large",
|
|
10644
|
-
"tedi-form-field--with-icon": this.clearable() || !!this.icon(),
|
|
10733
|
+
"tedi-form-field--with-icon": !this.isTextarea() && (this.clearable() || !!this.icon()),
|
|
10645
10734
|
};
|
|
10646
10735
|
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
10647
10736
|
inputClasses = computed(() => {
|
|
@@ -10652,7 +10741,7 @@ class FormFieldComponent {
|
|
|
10652
10741
|
};
|
|
10653
10742
|
}, ...(ngDevMode ? [{ debugName: "inputClasses" }] : []));
|
|
10654
10743
|
clear() {
|
|
10655
|
-
this.control?.clearField?.();
|
|
10744
|
+
this.control()?.clearField?.();
|
|
10656
10745
|
}
|
|
10657
10746
|
/**
|
|
10658
10747
|
* The control never fills the whole box — the box padding and the layout
|
|
@@ -10669,10 +10758,10 @@ class FormFieldComponent {
|
|
|
10669
10758
|
return;
|
|
10670
10759
|
// Keep the browser from moving focus off the control we are about to focus.
|
|
10671
10760
|
event.preventDefault();
|
|
10672
|
-
this.control?.focus?.();
|
|
10761
|
+
this.control()?.focus?.();
|
|
10673
10762
|
}
|
|
10674
10763
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10675
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content
|
|
10764
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: FormFieldComponent, isStandalone: true, selector: "tedi-form-field", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null }, characterLimit: { classPropertyName: "characterLimit", publicName: "characterLimit", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()" } }, queries: [{ propertyName: "control", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, isSignal: true }, { propertyName: "controlElement", first: true, predicate: TEDI_FORM_FIELD_CONTROL, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "ngControl", first: true, predicate: NgControl, descendants: true }, { propertyName: "feedback", first: true, predicate: FeedbackTextComponent, descendants: true }, { propertyName: "feedbackElement", first: true, predicate: FeedbackTextComponent, descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content\n select=\"input[tedi-text-field], textarea[tedi-textarea], tedi-time-field, tedi-date-field\"\n ></ng-content>\n\n @if (clearable() && !isTextarea()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"\n icon.size ?? (size() === 'small' ? 16 : size() === 'large' ? 24 : 18)\n \"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n [attr.aria-live]=\"characterCountExceeded() ? 'assertive' : 'polite'\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field__input:has(.tedi-textarea){align-items:stretch;height:auto;min-height:var(--form-textarea-min-height);padding:0}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input:not(:has(.tedi-textarea)){--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:not(:has(.tedi-textarea)){--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled),.tedi-form-field__input:has(.tedi-textarea:disabled){cursor:not-allowed;resize:none;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:hover,.tedi-textarea:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:active,.tedi-textarea:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:focus-visible,.tedi-textarea:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10676
10765
|
}
|
|
10677
10766
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
10678
10767
|
type: Component,
|
|
@@ -10684,16 +10773,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
10684
10773
|
TediTranslationPipe,
|
|
10685
10774
|
], host: {
|
|
10686
10775
|
"[class]": "hostClasses()",
|
|
10687
|
-
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content
|
|
10688
|
-
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], control: [{
|
|
10689
|
-
|
|
10690
|
-
|
|
10691
|
-
}], ngControl: [{
|
|
10776
|
+
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div [ngClass]=\"inputClasses()\" (mousedown)=\"handleBoxMouseDown($event)\">\n <ng-content\n select=\"input[tedi-text-field], textarea[tedi-textarea], tedi-time-field, tedi-date-field\"\n ></ng-content>\n\n @if (clearable() && !isTextarea()) {\n <div\n class=\"tedi-form-field__buttons\"\n [class.tedi-form-field__buttons--hidden]=\"!showClearButton()\"\n [attr.aria-hidden]=\"!showClearButton() || null\"\n >\n <button\n class=\"tedi-form-field__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n [iconSize]=\"18\"\n [tabIndex]=\"showClearButton() ? 0 : -1\"\n [disabled]=\"isDisabled() || !showClearButton()\"\n (click)=\"clear()\"\n ></button>\n\n @if (icon()) {\n <tedi-separator axis=\"vertical\" size=\"1rem\" />\n }\n </div>\n }\n\n @if (resolvedIcon(); as icon) {\n <div class=\"tedi-form-field__icon\">\n <tedi-icon\n [name]=\"icon.name\"\n [size]=\"\n icon.size ?? (size() === 'small' ? 16 : size() === 'large' ? 24 : 18)\n \"\n [color]=\"icon.color ?? 'inherit'\"\n [type]=\"icon.type ?? 'outlined'\"\n [variant]=\"icon.variant ?? 'outlined'\"\n [attr.aria-hidden]=\"true\"\n />\n </div>\n }\n</div>\n\n@if (feedback || characterLimit() != null) {\n <div class=\"tedi-form-field__feedback\">\n <ng-content select=\"tedi-feedback-text\"></ng-content>\n\n @if (characterLimit() != null) {\n <span\n class=\"tedi-form-field__character-count\"\n [class.tedi-form-field__character-count--error]=\"\n characterCountExceeded()\n \"\n [id]=\"characterCountId()\"\n [attr.aria-live]=\"characterCountExceeded() ? 'assertive' : 'polite'\"\n >\n {{ characterCount() }}/{{ characterLimit() }}\n </span>\n }\n </div>\n}\n\n<div class=\"tedi-form-field__extra\">\n <ng-content></ng-content>\n</div>\n", styles: [".tedi-form-field{display:flex;flex-direction:column}.tedi-form-field__input{--_field-padding-y: var(--form-field-padding-y-md-default);--_field-padding-x: var(--form-field-padding-x-md-default);position:relative;display:flex;gap:var(--form-field-inner-spacing);align-items:center;width:100%;height:var(--form-field-height);padding:var(--_field-padding-y) var(--_field-padding-x);background:var(--form-input-background-default);border:1px solid var(--form-input-border-default);border-radius:var(--form-field-radius)}.tedi-form-field__input:has(.tedi-textarea){align-items:stretch;height:auto;min-height:var(--form-textarea-min-height);padding:0}.tedi-form-field--small .tedi-label{font-size:var(--body-small-regular-size)}.tedi-form-field--small .tedi-form-field__input:not(:has(.tedi-textarea)){--_field-padding-y: var(--form-field-padding-y-sm);height:var(--form-field-height-sm)}.tedi-form-field--large .tedi-form-field__input:not(:has(.tedi-textarea)){--_field-padding-y: var(--form-field-padding-y-lg);--_field-padding-x: var(--form-field-padding-x-lg);height:var(--form-field-height-lg)}.tedi-form-field--valid .tedi-form-field__input{border-color:var(--form-general-feedback-success-border)}.tedi-form-field--valid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-form-field--invalid .tedi-form-field__input{border-color:var(--form-general-feedback-error-border)}.tedi-form-field--invalid .tedi-form-field__input:focus-within{box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-form-field--disabled .tedi-form-field__input,.tedi-form-field__input:has(input:disabled),.tedi-form-field__input:has(.tedi-textarea:disabled){cursor:not-allowed;resize:none;background:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled);box-shadow:none}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):hover,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:hover,.tedi-textarea:hover){border-color:var(--form-input-border-hover)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):active,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:active,.tedi-textarea:active){border-color:var(--form-input-border-active);box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):focus-within,.tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-form-field__input:not(:has(input:disabled,.tedi-textarea:disabled)):has(input:focus-visible,.tedi-textarea:focus-visible){border-color:var(--form-input-border-focus);box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-form-field__clear:disabled{cursor:not-allowed}.tedi-form-field__feedback{display:flex;gap:var(--layout-grid-gutters-16);align-items:flex-start;margin-top:var(--form-field-outer-spacing)}.tedi-form-field__character-count{margin-left:auto;font-size:var(--body-small-regular-size);color:var(--general-text-tertiary);white-space:nowrap}.tedi-form-field__character-count--error{color:var(--form-general-feedback-error-text)}.tedi-form-field__extra{margin-top:var(--form-field-outer-spacing)}.tedi-form-field__extra:empty{display:none}.tedi-form-field__buttons{display:flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-form-field__buttons--hidden{visibility:hidden}\n"] }]
|
|
10777
|
+
}], ctorParameters: () => [], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], characterLimit: [{ type: i0.Input, args: [{ isSignal: true, alias: "characterLimit", required: false }] }], control: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TEDI_FORM_FIELD_CONTROL), { isSignal: true }] }], controlElement: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TEDI_FORM_FIELD_CONTROL), { ...{
|
|
10778
|
+
read: ElementRef,
|
|
10779
|
+
}, isSignal: true }] }], ngControl: [{
|
|
10692
10780
|
type: ContentChild,
|
|
10693
10781
|
args: [NgControl]
|
|
10694
10782
|
}], feedback: [{
|
|
10695
10783
|
type: ContentChild,
|
|
10696
10784
|
args: [FeedbackTextComponent]
|
|
10785
|
+
}], feedbackElement: [{
|
|
10786
|
+
type: ContentChild,
|
|
10787
|
+
args: [FeedbackTextComponent, { read: ElementRef }]
|
|
10697
10788
|
}] } });
|
|
10698
10789
|
|
|
10699
10790
|
class SearchComponent {
|
|
@@ -10827,7 +10918,7 @@ class SearchComponent {
|
|
|
10827
10918
|
useExisting: forwardRef(() => SearchComponent),
|
|
10828
10919
|
multi: true,
|
|
10829
10920
|
},
|
|
10830
|
-
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [inputClass]=\"button() ? 'tedi-search__input--has-button' : null\"\n>\n @if (label()) {\n <label\n tedi-label\n [for]=\"inputId()\"\n [size]=\"size() === 'small' ? 'small' : 'default'\"\n >\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (keydown.enter)=\"emitSearch()\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search .tedi-search__input--has-button{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):active,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:active){box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):focus-within,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10921
|
+
], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<tedi-form-field\n class=\"tedi-search__field\"\n [size]=\"size()\"\n [icon]=\"fieldIcon()\"\n [clearable]=\"clearable() && !isDisabled()\"\n [inputClass]=\"button() ? 'tedi-search__input--has-button' : null\"\n>\n @if (label()) {\n <label\n tedi-label\n [for]=\"inputId()\"\n [size]=\"size() === 'small' ? 'small' : 'default'\"\n >\n {{ label() }}\n </label>\n }\n\n <input\n #searchInput\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [id]=\"inputId()\"\n [value]=\"value()\"\n [placeholder]=\"placeholder()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"inputAriaLabel()\"\n [attr.aria-describedby]=\"feedbackId()\"\n (valueChange)=\"onInputValue($event)\"\n (clear)=\"onClear()\"\n (keydown.enter)=\"emitSearch()\"\n (blur)=\"onBlur()\"\n />\n\n @if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [attr.id]=\"feedbackId()\"\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n }\n</tedi-form-field>\n\n@if (button(); as btn) {\n <button\n tedi-button\n type=\"button\"\n class=\"tedi-search__button\"\n [variant]=\"btn.variant ?? 'primary'\"\n [size]=\"buttonSize()\"\n [disabled]=\"isDisabled()\"\n [attr.aria-label]=\"buttonAriaLabel()\"\n (click)=\"emitSearch()\"\n >\n <tedi-icon [name]=\"btn.icon ?? 'search'\" [size]=\"buttonIconSize()\" />\n @if (btn.text) {\n {{ btn.text }}\n }\n </button>\n}\n", styles: [".tedi-search{display:flex;align-items:flex-end;width:100%}.tedi-search__field{flex:1 1 auto;min-width:0}.tedi-search__button{flex:0 0 auto;align-self:flex-end;white-space:nowrap}.tedi-search .tedi-search__button{height:var(--tedi-search-field-height);min-height:0;border-radius:0 var(--button-radius-sm) var(--button-radius-sm) 0}.tedi-search--button-icon-only .tedi-search__button{width:var(--tedi-search-field-height);padding-right:0;padding-left:0}.tedi-search .tedi-search__input--has-button{border-right-width:0;border-top-right-radius:0;border-bottom-right-radius:0}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):active,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:active){box-shadow:inset 0 0 0 1px var(--form-input-border-active)}.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):focus-within,.tedi-search .tedi-form-field:not(.tedi-form-field--disabled,.tedi-form-field--valid,.tedi-form-field--invalid) .tedi-search__input--has-button:not(:has(input:disabled)):has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-input-border-focus)}.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--valid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:focus-within,.tedi-search .tedi-form-field--invalid .tedi-search__input--has-button:has(input:focus-visible){box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}\n"], dependencies: [{ kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }, { kind: "component", type: FeedbackTextComponent, selector: "tedi-feedback-text", inputs: ["text", "type", "position"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
10831
10922
|
}
|
|
10832
10923
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SearchComponent, decorators: [{
|
|
10833
10924
|
type: Component,
|
|
@@ -12742,6 +12833,165 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
12742
12833
|
}, template: "<ng-content select=\"label[tedi-label]\"></ng-content>\n\n<div class=\"tedi-input-group__row\">\n <ng-content select=\"[tediInputGroupPrefix]\"></ng-content>\n <ng-content select=\"tedi-form-field, tedi-select\"></ng-content>\n <ng-content select=\"[tediInputGroupSuffix]\"></ng-content>\n</div>\n\n<ng-content select=\"tedi-feedback-text\"></ng-content>\n", styles: [".tedi-input-group{display:flex;flex-direction:column;width:100%}.tedi-input-group__row{display:inline-flex;width:100%}.tedi-input-group__row>:not(.tedi-input-group__prefix,.tedi-input-group__suffix){flex:1;min-width:0}.tedi-input-group__prefix,.tedi-input-group__suffix{display:flex;flex-shrink:0;align-items:center;justify-content:center;white-space:nowrap}.tedi-input-group__prefix--text,.tedi-input-group__suffix--text{padding:calc(var(--form-field-padding-y-md-default) - var(--tedi-borders-01)) var(--form-field-padding-x-md-default)}.tedi-input-group--addons .tedi-input-group__prefix,.tedi-input-group--addons .tedi-input-group__suffix{font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--general-text-secondary);text-align:center;background-color:var(--form-general-background-action-background);border:var(--tedi-borders-01) solid var(--form-input-border-default);transition:background-color .12s ease,border-color .12s ease,color .12s ease}.tedi-input-group--addons .tedi-input-group__prefix:not(.tedi-input-group__prefix--text)>*,.tedi-input-group--addons .tedi-input-group__suffix:not(.tedi-input-group__suffix--text)>*{min-width:1.5rem;padding:calc(var(--form-field-padding-y-md-default) - var(--tedi-borders-01)) var(--form-field-padding-x-md-default);color:var(--general-text-secondary)}.tedi-input-group--addons .tedi-input-group__prefix button,.tedi-input-group--addons .tedi-input-group__suffix button{display:inline-flex;gap:var(--form-field-inner-spacing);align-items:center;justify-content:center;width:100%;height:100%;font:inherit;color:inherit;cursor:pointer;background:none;border:0}.tedi-input-group--addons .tedi-input-group__prefix{border-right:0;border-radius:var(--form-field-radius) 0 0 var(--form-field-radius)}.tedi-input-group--addons .tedi-input-group__suffix{border-left:0;border-radius:0 var(--form-field-radius) var(--form-field-radius) 0}.tedi-input-group--addons .tedi-input-group__prefix:has(button:not(:disabled):hover),.tedi-input-group--addons .tedi-input-group__suffix:has(button:not(:disabled):hover){background-color:var(--button-main-secondary-background-hover);border-color:var(--button-main-secondary-border-hover)}.tedi-input-group--addons .tedi-input-group__prefix:has(button:not(:disabled):hover)>*,.tedi-input-group--addons .tedi-input-group__suffix:has(button:not(:disabled):hover)>*{color:var(--button-main-secondary-text-hover)}.tedi-input-group--addons .tedi-input-group__prefix:has(button:not(:disabled):active),.tedi-input-group--addons .tedi-input-group__suffix:has(button:not(:disabled):active){background-color:var(--button-main-secondary-background-active);border-color:var(--button-main-secondary-border-active)}.tedi-input-group--addons .tedi-input-group__prefix:has(button:not(:disabled):active)>*,.tedi-input-group--addons .tedi-input-group__suffix:has(button:not(:disabled):active)>*{color:var(--button-main-secondary-text-active)}.tedi-input-group--addons .tedi-input-group__prefix>button:focus-visible,.tedi-input-group--addons .tedi-input-group__suffix>button:focus-visible{z-index:2;outline:2px solid var(--button-main-primary-background-focus);outline-offset:2px}.tedi-input-group:not(.tedi-input-group--addons) .tedi-input-group__prefix>*,.tedi-input-group:not(.tedi-input-group--addons) .tedi-input-group__suffix>*{border-radius:var(--form-field-radius)}.tedi-input-group:not(.tedi-input-group--addons) .tedi-input-group__prefix>*{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-input-group:not(.tedi-input-group--addons) .tedi-input-group__suffix>*{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-input-group--has-prefix .tedi-form-field__input,.tedi-input-group--has-prefix .tedi-input{border-top-left-radius:0;border-bottom-left-radius:0}.tedi-input-group--has-suffix .tedi-form-field__input,.tedi-input-group--has-suffix .tedi-input{border-top-right-radius:0;border-bottom-right-radius:0}.tedi-input-group--disabled .tedi-input-group__prefix,.tedi-input-group--disabled .tedi-input-group__suffix{color:var(--general-text-disabled);background-color:var(--form-input-background-disabled);border-color:var(--form-input-border-disabled)}.tedi-input-group--disabled .tedi-input-group__prefix>*,.tedi-input-group--disabled .tedi-input-group__suffix>*{color:var(--general-text-disabled)}.tedi-input-group>.tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}\n"] }]
|
|
12743
12834
|
}], propDecorators: { addons: [{ type: i0.Input, args: [{ isSignal: true, alias: "addons", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], prefix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputGroupPrefixDirective), { isSignal: true }] }], suffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => InputGroupSuffixDirective), { isSignal: true }] }] } });
|
|
12744
12835
|
|
|
12836
|
+
class TextareaComponent {
|
|
12837
|
+
el = inject(ElementRef);
|
|
12838
|
+
renderer = inject(Renderer2);
|
|
12839
|
+
/**
|
|
12840
|
+
* Value of the textarea. Supports two-way binding, use with form controls.
|
|
12841
|
+
*/
|
|
12842
|
+
value = model("", ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
12843
|
+
/**
|
|
12844
|
+
* Whether the user can resize the textarea. Only vertical resizing is
|
|
12845
|
+
* supported; set to `false` to disable resizing entirely.
|
|
12846
|
+
*
|
|
12847
|
+
* The resize is applied to the surrounding `tedi-form-field` box (which owns
|
|
12848
|
+
* the border) while the textarea fills it, so the visible field resizes with
|
|
12849
|
+
* the drag.
|
|
12850
|
+
*
|
|
12851
|
+
* @default true
|
|
12852
|
+
*/
|
|
12853
|
+
resizable = input(true, ...(ngDevMode ? [{ debugName: "resizable" }] : []));
|
|
12854
|
+
/**
|
|
12855
|
+
* Automatically grows the textarea to fit its content as the user types,
|
|
12856
|
+
* using the native CSS `field-sizing` property (no JavaScript). Growth is
|
|
12857
|
+
* bounded by `minRows` and `maxRows` (and the optional `maxHeight` cap), and
|
|
12858
|
+
* manual resizing is disabled while auto-growing.
|
|
12859
|
+
*
|
|
12860
|
+
* On browsers without `field-sizing` support the textarea gracefully falls
|
|
12861
|
+
* back to its `minRows` height and remains manually resizable.
|
|
12862
|
+
*
|
|
12863
|
+
* @default false
|
|
12864
|
+
*/
|
|
12865
|
+
autoGrow = input(false, ...(ngDevMode ? [{ debugName: "autoGrow" }] : []));
|
|
12866
|
+
/**
|
|
12867
|
+
* Minimum number of visible rows while `autoGrow` is enabled.
|
|
12868
|
+
* @default 3
|
|
12869
|
+
*/
|
|
12870
|
+
minRows = input(3, ...(ngDevMode ? [{ debugName: "minRows" }] : []));
|
|
12871
|
+
/**
|
|
12872
|
+
* Maximum number of visible rows before the field scrolls, while `autoGrow`
|
|
12873
|
+
* is enabled.
|
|
12874
|
+
* @default 12
|
|
12875
|
+
*/
|
|
12876
|
+
maxRows = input(12, ...(ngDevMode ? [{ debugName: "maxRows" }] : []));
|
|
12877
|
+
/**
|
|
12878
|
+
* Fixed height of the textarea (e.g. `'7.5rem'`, `200` → `200px`). Applied
|
|
12879
|
+
* only when `autoGrow` is disabled; otherwise the height is content-driven.
|
|
12880
|
+
* Set to `undefined` to let the resting height come from the native `rows`
|
|
12881
|
+
* attribute instead.
|
|
12882
|
+
*
|
|
12883
|
+
* @default "7.5rem"
|
|
12884
|
+
*/
|
|
12885
|
+
height = input("7.5rem", ...(ngDevMode ? [{ debugName: "height" }] : []));
|
|
12886
|
+
/**
|
|
12887
|
+
* Maximum height the textarea may grow to (e.g. `'200px'`, `12` → `12px`,
|
|
12888
|
+
* `'12rem'`). Beyond it the field scrolls. Limits `autoGrow` growth (in
|
|
12889
|
+
* addition to `maxRows`) and manual resizing.
|
|
12890
|
+
*/
|
|
12891
|
+
maxHeight = input(...(ngDevMode ? [undefined, { debugName: "maxHeight" }] : []));
|
|
12892
|
+
toCssSize(value) {
|
|
12893
|
+
return typeof value === "number" ? `${value}px` : value;
|
|
12894
|
+
}
|
|
12895
|
+
rowsToHeight(rows) {
|
|
12896
|
+
return `calc(${rows} * 1lh + 2 * var(--_tedi-textarea-padding-y))`;
|
|
12897
|
+
}
|
|
12898
|
+
heightStyle = computed(() => {
|
|
12899
|
+
const height = this.height();
|
|
12900
|
+
if (this.autoGrow() || height == null)
|
|
12901
|
+
return null;
|
|
12902
|
+
return this.toCssSize(height);
|
|
12903
|
+
}, ...(ngDevMode ? [{ debugName: "heightStyle" }] : []));
|
|
12904
|
+
minHeightStyle = computed(() => this.autoGrow() ? this.rowsToHeight(this.minRows()) : null, ...(ngDevMode ? [{ debugName: "minHeightStyle" }] : []));
|
|
12905
|
+
maxHeightStyle = computed(() => {
|
|
12906
|
+
const limits = [];
|
|
12907
|
+
if (this.autoGrow())
|
|
12908
|
+
limits.push(this.rowsToHeight(this.maxRows()));
|
|
12909
|
+
const maxHeight = this.maxHeight();
|
|
12910
|
+
if (maxHeight != null)
|
|
12911
|
+
limits.push(this.toCssSize(maxHeight));
|
|
12912
|
+
if (limits.length === 0)
|
|
12913
|
+
return null;
|
|
12914
|
+
return limits.length === 1 ? limits[0] : `min(${limits.join(", ")})`;
|
|
12915
|
+
}, ...(ngDevMode ? [{ debugName: "maxHeightStyle" }] : []));
|
|
12916
|
+
disabled = computed(() => this.formDisabled(), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
12917
|
+
invalid = signal(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
12918
|
+
setInvalidState(isInvalid) {
|
|
12919
|
+
this.invalid.set(isInvalid);
|
|
12920
|
+
}
|
|
12921
|
+
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
12922
|
+
onChange = () => { };
|
|
12923
|
+
onTouched = () => { };
|
|
12924
|
+
constructor() {
|
|
12925
|
+
effect(() => {
|
|
12926
|
+
const value = this.value();
|
|
12927
|
+
if (this.el.nativeElement.value !== value) {
|
|
12928
|
+
this.renderer.setProperty(this.el.nativeElement, "value", value);
|
|
12929
|
+
}
|
|
12930
|
+
});
|
|
12931
|
+
}
|
|
12932
|
+
setValue(value) {
|
|
12933
|
+
this.value.set(value);
|
|
12934
|
+
}
|
|
12935
|
+
writeValue(value) {
|
|
12936
|
+
this.setValue(value ?? "");
|
|
12937
|
+
}
|
|
12938
|
+
registerOnChange(fn) {
|
|
12939
|
+
this.onChange = fn;
|
|
12940
|
+
}
|
|
12941
|
+
registerOnTouched(fn) {
|
|
12942
|
+
this.onTouched = fn;
|
|
12943
|
+
}
|
|
12944
|
+
setDisabledState(isDisabled) {
|
|
12945
|
+
this.formDisabled.set(isDisabled);
|
|
12946
|
+
this.renderer.setProperty(this.el.nativeElement, "disabled", isDisabled);
|
|
12947
|
+
}
|
|
12948
|
+
handleInputChange(event) {
|
|
12949
|
+
const textarea = event.target;
|
|
12950
|
+
const value = textarea.value;
|
|
12951
|
+
this.value.set(value);
|
|
12952
|
+
this.onChange(value);
|
|
12953
|
+
}
|
|
12954
|
+
handleBlur() {
|
|
12955
|
+
this.onTouched();
|
|
12956
|
+
}
|
|
12957
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12958
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.24", type: TextareaComponent, isStandalone: true, selector: "textarea[tedi-textarea]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, resizable: { classPropertyName: "resizable", publicName: "resizable", isSignal: true, isRequired: false, transformFunction: null }, autoGrow: { classPropertyName: "autoGrow", publicName: "autoGrow", isSignal: true, isRequired: false, transformFunction: null }, minRows: { classPropertyName: "minRows", publicName: "minRows", isSignal: true, isRequired: false, transformFunction: null }, maxRows: { classPropertyName: "maxRows", publicName: "maxRows", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { listeners: { "input": "handleInputChange($event)", "blur": "handleBlur()" }, properties: { "class.tedi-textarea--not-resizable": "!resizable()", "class.tedi-textarea--auto-grow": "autoGrow()", "style.height": "heightStyle()", "style.min-height": "minHeightStyle()", "style.max-height": "maxHeightStyle()", "attr.aria-invalid": "invalid() || null" }, classAttribute: "tedi-textarea" }, providers: [
|
|
12959
|
+
{
|
|
12960
|
+
provide: NG_VALUE_ACCESSOR,
|
|
12961
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
12962
|
+
multi: true,
|
|
12963
|
+
},
|
|
12964
|
+
{
|
|
12965
|
+
provide: TEDI_FORM_FIELD_CONTROL,
|
|
12966
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
12967
|
+
},
|
|
12968
|
+
], ngImport: i0, template: "", isInline: true, styles: [".tedi-textarea{--_tedi-textarea-padding-y: var(--form-field-padding-y-md-default);flex:1;width:100%;min-height:var(--form-textarea-min-height);padding:var(--_tedi-textarea-padding-y) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);resize:vertical;outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-textarea::placeholder{color:var(--form-input-text-placeholder)}.tedi-textarea:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-textarea--not-resizable{resize:none}.tedi-textarea--auto-grow{field-sizing:content;resize:none}.tedi-form-field--small .tedi-textarea{--_tedi-textarea-padding-y: var(--form-field-padding-y-sm)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12969
|
+
}
|
|
12970
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextareaComponent, decorators: [{
|
|
12971
|
+
type: Component,
|
|
12972
|
+
args: [{ selector: "textarea[tedi-textarea]", standalone: true, providers: [
|
|
12973
|
+
{
|
|
12974
|
+
provide: NG_VALUE_ACCESSOR,
|
|
12975
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
12976
|
+
multi: true,
|
|
12977
|
+
},
|
|
12978
|
+
{
|
|
12979
|
+
provide: TEDI_FORM_FIELD_CONTROL,
|
|
12980
|
+
useExisting: forwardRef(() => TextareaComponent),
|
|
12981
|
+
},
|
|
12982
|
+
], template: "", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
12983
|
+
class: "tedi-textarea",
|
|
12984
|
+
"[class.tedi-textarea--not-resizable]": "!resizable()",
|
|
12985
|
+
"[class.tedi-textarea--auto-grow]": "autoGrow()",
|
|
12986
|
+
"[style.height]": "heightStyle()",
|
|
12987
|
+
"[style.min-height]": "minHeightStyle()",
|
|
12988
|
+
"[style.max-height]": "maxHeightStyle()",
|
|
12989
|
+
"[attr.aria-invalid]": "invalid() || null",
|
|
12990
|
+
"(input)": "handleInputChange($event)",
|
|
12991
|
+
"(blur)": "handleBlur()",
|
|
12992
|
+
}, styles: [".tedi-textarea{--_tedi-textarea-padding-y: var(--form-field-padding-y-md-default);flex:1;width:100%;min-height:var(--form-textarea-min-height);padding:var(--_tedi-textarea-padding-y) var(--form-field-padding-x-md-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--form-input-text-filled);resize:vertical;outline:none;background:transparent;border:0;border-radius:var(--form-field-radius)}.tedi-textarea::placeholder{color:var(--form-input-text-placeholder)}.tedi-textarea:disabled{color:var(--form-input-text-disabled);cursor:not-allowed;background:transparent}.tedi-textarea--not-resizable{resize:none}.tedi-textarea--auto-grow{field-sizing:content;resize:none}.tedi-form-field--small .tedi-textarea{--_tedi-textarea-padding-y: var(--form-field-padding-y-sm)}\n"] }]
|
|
12993
|
+
}], ctorParameters: () => [], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], resizable: [{ type: i0.Input, args: [{ isSignal: true, alias: "resizable", required: false }] }], autoGrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoGrow", required: false }] }], minRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "minRows", required: false }] }], maxRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxRows", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }] } });
|
|
12994
|
+
|
|
12745
12995
|
/**
|
|
12746
12996
|
* Checks if a string is a valid `HH:mm` time (00:00 – 23:59).
|
|
12747
12997
|
*/
|
|
@@ -16722,7 +16972,7 @@ class TediTableComponent {
|
|
|
16722
16972
|
useFactory: (component) => component.contextValue,
|
|
16723
16973
|
deps: [TediTableComponent],
|
|
16724
16974
|
},
|
|
16725
|
-
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n stickyLeftClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n stickyLeftClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16975
|
+
], queries: [{ propertyName: "customResultsTemplateRef", first: true, predicate: TediPaginationResultsDirective, descendants: true, read: TemplateRef, isSignal: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"tedi-table-toolbar\" />\n<ng-content select=\"tedi-table-columns-menu\" />\n\n<!-- Live region for screen-reader announcements during keyboard reordering -->\n@if (reorderableColumns() || reorderableRows()) {\n <div\n [id]=\"liveRegionId\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n class=\"tedi-table__sr-only\"\n ></div>\n}\n\n@if (resolvedTopSlot(); as top) {\n <div class=\"tedi-table__pagination tedi-table__pagination--top\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"top.boundaryCount\"\n [siblingCount]=\"top.siblingCount\"\n [labels]=\"top.labels\"\n [background]=\"top.background\"\n [dividerPosition]=\"top.dividerPosition\"\n [hideResults]=\"top.hideResults\"\n [hidePageSize]=\"top.hidePageSize\"\n [hidePager]=\"top.hidePager\"\n [hideArrows]=\"top.hideArrows\"\n [disableArrowsAtBoundary]=\"top.disableArrowsAtBoundary\"\n [arrowVariant]=\"top.arrowVariant\"\n [showArrowLabels]=\"top.showArrowLabels\"\n [previousIcon]=\"top.previousIcon\"\n [nextIcon]=\"top.nextIcon\"\n [showModalTitle]=\"top.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (topResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n\n<div\n #scrollContainer\n class=\"tedi-table__scroll\"\n [attr.style]=\"maxHeightStyle()\"\n cdkScrollable\n tabindex=\"0\"\n role=\"group\"\n [attr.aria-label]=\"scrollRegionLabel()\"\n>\n <table\n class=\"tedi-table__table\"\n [attr.id]=\"id() || null\"\n [attr.aria-rowcount]=\"ariaRowCount()\"\n [attr.aria-colcount]=\"leafColumnCount() > 0 ? leafColumnCount() : null\"\n >\n @if (caption(); as cap) {\n <caption class=\"tedi-table__caption\">\n @if (isString(cap)) {\n {{ cap }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(cap)\" />\n }\n </caption>\n }\n\n <thead class=\"tedi-table__head\">\n @for (\n headerGroup of headerGroups();\n track headerGroup.id;\n let rowIndex = $index\n ) {\n <tr\n class=\"tedi-table__row\"\n [attr.aria-rowindex]=\"ariaRowIndexingEnabled() ? rowIndex + 1 : null\"\n [cdkDropListDisabled]=\"!reorderableColumns() || rowIndex > 0\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n cdkDropListAutoScrollDisabled\n (cdkDropListDropped)=\"handleColumnDrop($event)\"\n >\n @for (header of headerGroup.headers; track header.id) {\n @if (shouldRenderHeader(header, rowIndex)) {\n @let meta = getColumnMeta(header.column);\n @let ariaSort = getHeaderAriaSort(header.column);\n @let srHeaderLabel = getSrOnlyHeaderLabel(header.column);\n @let rowSpan = getHeaderRowSpan(header, rowIndex);\n <th\n scope=\"col\"\n cdkDrag\n [cdkDragDisabled]=\"\n !reorderableColumns() ||\n rowIndex > 0 ||\n header.column.id === SELECT_COLUMN_ID ||\n header.column.id === EXPAND_COLUMN_ID\n \"\n cdkDragLockAxis=\"x\"\n (keydown)=\"handleHeaderKeydown($event, header)\"\n [class]=\"\n 'tedi-table__header-cell' +\n (isHeaderGroup(header)\n ? ' tedi-table__header-cell--group'\n : '') +\n (meta?.align\n ? ' tedi-table__cell--align-' + meta?.align\n : '') +\n (meta?.vAlign\n ? ' tedi-table__cell--valign-' + meta?.vAlign\n : '') +\n (pickedUpColumnId() === header.column.id\n ? ' tedi-table__header-cell--picked-up'\n : '') +\n stickyLeftClass(header.column.id)\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n [attr.rowspan]=\"rowSpan\"\n [attr.aria-sort]=\"ariaSort\"\n [style.width.px]=\"headerCellWidth(header.column)\"\n [style.min-width.px]=\"columnMinWidth(header.column)\"\n [style.max-width.px]=\"columnMaxWidth(header.column)\"\n [style.left.px]=\"stickyLeft(header.column.id)\"\n >\n @if (srHeaderLabel) {\n <span class=\"tedi-table__sr-only\">{{ srHeaderLabel }}</span>\n }\n @if (header.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-all'\"\n [name]=\"resolvedId() + '-select-all'\"\n [attr.aria-label]=\"selectAllLabel()\"\n [checked]=\"isAllPageRowsSelected()\"\n [indeterminate]=\"\n isSomePageRowsSelected() && !isAllPageRowsSelected()\n \"\n (change)=\"handleSelectAll($any($event.target).checked)\"\n />\n }\n } @else if (header.column.id === EXPAND_COLUMN_ID) {\n <!-- empty -->\n } @else if (header.column.id === DRAG_COLUMN_ID) {\n <!-- empty -->\n } @else {\n <span class=\"tedi-table__header-content\">\n @if (\n reorderableColumns() &&\n rowIndex === 0 &&\n !isHeaderGroup(header)\n ) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpColumnId() === header.column.id\n \"\n [id]=\"reorderHandleId(header.column.id)\"\n [attr.aria-label]=\"dragColumnLabel()\"\n [attr.aria-pressed]=\"\n reorderableColumns()\n ? pickedUpColumnId() === header.column.id\n : null\n \"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n }\n <ng-container\n *flexRender=\"\n header.column.columnDef.header;\n props: header.getContext();\n let content\n \"\n >\n @if (shouldRenderSortableHeader(header.column, content)) {\n <button\n tedi-table-header-button\n [icon]=\"sortIcon(header.column)\"\n [selected]=\"!!header.column.getIsSorted()\"\n (click)=\"handleSortToggle(header.column)\"\n >\n {{ content }}\n </button>\n } @else if (isString(content) || isNumber(content)) {\n {{ content }}\n } @else {\n {{ content }}\n }\n </ng-container>\n @if (shouldRenderFilterButton(header.column)) {\n <tedi-popover\n #filterPopover\n class=\"tedi-table__filter-popover\"\n position=\"bottom-end\"\n [preventOverflow]=\"true\"\n >\n <button\n tedi-popover-trigger\n tedi-table-header-button\n icon=\"filter_alt\"\n [selected]=\"filterIsActive(header.column)\"\n [filled]=\"filterIsActive(header.column)\"\n [aria-label]=\"filterAriaLabel(header.column)\"\n (click)=\"handleFilterTriggerClick(header.column)\"\n ></button>\n <tedi-popover-content>\n <div class=\"tedi-table__filter\">\n <div class=\"tedi-table__filter-body\">\n @if (filterTemplateFor(header.column); as tpl) {\n <ng-container\n *ngTemplateOutlet=\"\n tpl;\n context: filterContextFor(\n header.column,\n filterPopover\n )\n \"\n />\n }\n </div>\n <div class=\"tedi-table__filter-actions\">\n <button\n tedi-button\n variant=\"secondary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterClear(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterClearLabel() }}\n </button>\n <button\n tedi-button\n variant=\"primary\"\n size=\"small\"\n type=\"button\"\n (click)=\"\n handleFilterApply(\n header.column,\n filterPopover\n )\n \"\n >\n {{ filterApplyLabel() }}\n </button>\n </div>\n </div>\n </tedi-popover-content>\n </tedi-popover>\n }\n </span>\n }\n </th>\n }\n }\n </tr>\n }\n @if (enableColumnFilters()) {\n <tr\n class=\"tedi-table__row tedi-table__row--filter\"\n [attr.aria-rowindex]=\"\n ariaRowIndexingEnabled() ? headerGroups().length + 1 : null\n \"\n >\n @for (column of leafColumns(); track column.id) {\n @let filterId = resolvedId() + \"-filter-\" + column.id;\n <th class=\"tedi-table__header-cell\" scope=\"col\">\n @if (column.getCanFilter()) {\n <tedi-form-field size=\"small\">\n <input\n tedi-text-field\n type=\"text\"\n [id]=\"filterId\"\n [name]=\"filterId\"\n [attr.aria-label]=\"filterLabel(column)\"\n [placeholder]=\"filterPlaceholder()\"\n [value]=\"getFilterValue(column)\"\n (input)=\"\n handleColumnFilter(column, $any($event.target).value)\n \"\n />\n </tedi-form-field>\n }\n </th>\n }\n </tr>\n }\n </thead>\n\n <tbody\n class=\"tedi-table__body\"\n cdkDropList\n [cdkDropListDisabled]=\"!reorderableRows()\"\n (cdkDropListDropped)=\"handleRowDrop($any($event))\"\n >\n @if (rows().length === 0) {\n <tr class=\"tedi-table__row\">\n <td\n class=\"tedi-table__cell tedi-table__cell--placeholder\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n @if (placeholder(); as pl) {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n </div>\n } @else {\n @if (isString(pl)) {\n {{ pl }}\n } @else {\n <ng-container *ngTemplateOutlet=\"$any(pl)\" />\n }\n }\n } @else {\n @if (placeholderRole()) {\n <div [attr.role]=\"placeholderRole()\">\n {{ placeholderLabel() }}\n </div>\n } @else {\n {{ placeholderLabel() }}\n }\n }\n </td>\n </tr>\n } @else {\n @for (row of rows(); track row.id) {\n @let isActiveRow =\n activeRowId() !== undefined && row.id === activeRowId();\n @let ariaRowIndex = rowAriaIndexById().get(row.id) ?? null;\n @let subRowId = resolvedId() + \"-sub-\" + row.id;\n @let expandsOnClick = rowExpandsOnClick(row);\n <tr\n cdkDrag\n [cdkDragDisabled]=\"!reorderableRows()\"\n cdkDragLockAxis=\"y\"\n [class]=\"\n 'tedi-table__row' +\n (this.selectedRowHighlight() && row.getIsSelected()\n ? ' tedi-table__row--selected'\n : '') +\n (isActiveRow ? ' tedi-table__row--active' : '') +\n (interactive() || expandsOnClick\n ? ' tedi-table__row--clickable'\n : '') +\n (row.depth > 0 ? ' tedi-table__row--sub-row' : '') +\n (groupStartRowIds().has(row.id)\n ? ' tedi-table__row--group-start'\n : '') +\n (pickedUpRow() === row.original\n ? ' tedi-table__row--picked-up'\n : '')\n \"\n [attr.role]=\"\n interactive() && !rowHasNestedInteractive(row) ? 'button' : null\n \"\n [attr.tabindex]=\"interactive() ? 0 : null\"\n [attr.aria-label]=\"rowAriaLabelFor(row)\"\n [attr.aria-rowindex]=\"ariaRowIndex\"\n [attr.aria-current]=\"isActiveRow ? 'true' : null\"\n (click)=\"\n (interactive() || expandsOnClick) && handleRowClick($event, row)\n \"\n (keydown)=\"handleRowKeydown($event, row)\"\n (mouseenter)=\"handleRowMouseEnter(row)\"\n (mouseleave)=\"handleRowMouseLeave()\"\n >\n @for (cell of row.getVisibleCells(); track cell.id) {\n @let cellMeta = getColumnMeta(cell.column);\n @let cellContext = cell.getContext();\n @let resolvedSpan = resolveRowSpan(cell, cellContext);\n @if (resolvedSpan !== 0) {\n <td\n [class]=\"\n 'tedi-table__cell' +\n (cellMeta?.align\n ? ' tedi-table__cell--align-' + cellMeta?.align\n : '') +\n (cellMeta?.vAlign\n ? ' tedi-table__cell--valign-' + cellMeta?.vAlign\n : '') +\n stickyLeftClass(cell.column.id)\n \"\n [style.left.px]=\"stickyLeft(cell.column.id)\"\n [attr.rowspan]=\"\n resolvedSpan !== null && resolvedSpan > 1\n ? resolvedSpan\n : null\n \"\n >\n @if (cell.column.id === DRAG_COLUMN_ID) {\n <button\n type=\"button\"\n cdkDragHandle\n class=\"tedi-table__drag-handle\"\n [class.tedi-table__drag-handle--picked-up]=\"\n pickedUpRow() === row.original\n \"\n [id]=\"rowReorderHandleId(row.id)\"\n [attr.aria-label]=\"dragRowLabel()\"\n [attr.aria-pressed]=\"\n reorderableRows()\n ? pickedUpRow() === row.original\n : null\n \"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleRowReorderKeydown($event, row)\"\n >\n <tedi-icon\n name=\"drag_indicator\"\n [size]=\"18\"\n color=\"inherit\"\n />\n </button>\n } @else if (cell.column.id === SELECT_COLUMN_ID) {\n @if (selectionMode() === \"multiple\") {\n <input\n tedi-checkbox\n type=\"checkbox\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-' + row.id\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"isRowSelected(row)\"\n [disabled]=\"!row.getCanSelect()\"\n [indeterminate]=\"isRowIndeterminate(row)\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n } @else {\n <input\n tedi-radio\n type=\"radio\"\n [id]=\"resolvedId() + '-select-' + row.id\"\n [name]=\"resolvedId() + '-select-row'\"\n [attr.aria-label]=\"selectRowLabel(row)\"\n [checked]=\"row.getIsSelected()\"\n [disabled]=\"!row.getCanSelect()\"\n (change)=\"\n handleSelectRow(row, $any($event.target).checked)\n \"\n (click)=\"$event.stopPropagation()\"\n />\n }\n } @else if (cell.column.id === EXPAND_COLUMN_ID) {\n <span\n class=\"tedi-table__expand-toggle\"\n [class.tedi-table__expand-toggle--icon-only]=\"\n !expandButtonHasLabel()\n \"\n >\n @if (row.getCanExpand()) {\n @let expandOpen = row.getIsExpanded();\n <button\n tedi-collapse-button\n [arrowType]=\"resolvedExpandVariant()\"\n [hideText]=\"!expandButtonHasLabel()\"\n [openText]=\"expandButtonOpenText()\"\n [closeText]=\"expandButtonCloseText()\"\n [open]=\"expandOpen\"\n [id]=\"resolvedId() + '-expand-' + row.id\"\n [ariaControls]=\"\n renderSubComponent() ? subRowId : undefined\n \"\n [ariaLabel]=\"\n expandButtonHasLabel()\n ? undefined\n : expandRowLabel(expandOpen)\n \"\n (openChange)=\"handleExpandToggle(row)\"\n (click)=\"$event.stopPropagation()\"\n (keydown)=\"handleExpandKeydown($event)\"\n ></button>\n }\n </span>\n } @else {\n <ng-container\n *flexRender=\"\n cell.column.columnDef.cell;\n props: cellContext;\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n }\n </tr>\n @if (renderSubComponent(); as subTpl) {\n @if (row.getCanExpand()) {\n @let isExpanded = row.getIsExpanded();\n <tr\n [class]=\"\n 'tedi-table__row tedi-table__row--sub-component' +\n (isExpanded ? ' tedi-table__row--sub-component-open' : '')\n \"\n >\n <td\n class=\"tedi-table__cell tedi-table__cell--sub-component\"\n [attr.id]=\"subRowId\"\n [attr.role]=\"isExpanded ? 'region' : null\"\n [attr.aria-label]=\"isExpanded ? rowDetailsLabel() : null\"\n [attr.inert]=\"isExpanded ? null : ''\"\n [attr.colspan]=\"leafColumnCount() > 0 ? leafColumnCount() : 1\"\n >\n <div class=\"tedi-table__sub-component-wrapper\">\n <div class=\"tedi-table__sub-component-content\">\n <div class=\"tedi-table__sub-component-inner\">\n <ng-container\n *ngTemplateOutlet=\"subTpl; context: { $implicit: row }\"\n />\n </div>\n </div>\n </div>\n </td>\n </tr>\n }\n }\n }\n }\n </tbody>\n\n @if (hasFooter()) {\n <tfoot class=\"tedi-table__foot\">\n @for (group of footerGroups(); track group.id) {\n <tr class=\"tedi-table__row\">\n @for (header of group.headers; track header.id) {\n @let footerMeta = getColumnMeta(header.column);\n <td\n [class]=\"\n 'tedi-table__cell tedi-table__cell--footer' +\n (footerMeta?.align\n ? ' tedi-table__cell--align-' + footerMeta?.align\n : '') +\n (footerMeta?.vAlign\n ? ' tedi-table__cell--valign-' + footerMeta?.vAlign\n : '')\n \"\n [attr.colspan]=\"header.colSpan > 1 ? header.colSpan : null\"\n >\n @if (!header.isPlaceholder) {\n <ng-container\n *flexRender=\"\n header.column.columnDef.footer;\n props: header.getContext();\n let content\n \"\n >\n {{ content }}\n </ng-container>\n }\n </td>\n }\n </tr>\n }\n </tfoot>\n }\n </table>\n</div>\n\n@if (resolvedBottomSlot(); as bottom) {\n <div class=\"tedi-table__pagination tedi-table__pagination--bottom\">\n <tedi-pagination\n [pageCount]=\"paginationPageCount()\"\n [page]=\"paginationPage()\"\n [totalItems]=\"paginationTotalItems()\"\n [pageSize]=\"paginationPageSize()\"\n [pageSizeOptions]=\"paginationPageSizeOptions()\"\n [boundaryCount]=\"bottom.boundaryCount\"\n [siblingCount]=\"bottom.siblingCount\"\n [labels]=\"bottom.labels\"\n [background]=\"bottom.background\"\n [dividerPosition]=\"bottom.dividerPosition\"\n [hideResults]=\"bottom.hideResults\"\n [hidePageSize]=\"bottom.hidePageSize\"\n [hidePager]=\"bottom.hidePager\"\n [hideArrows]=\"bottom.hideArrows\"\n [disableArrowsAtBoundary]=\"bottom.disableArrowsAtBoundary\"\n [arrowVariant]=\"bottom.arrowVariant\"\n [showArrowLabels]=\"bottom.showArrowLabels\"\n [previousIcon]=\"bottom.previousIcon\"\n [nextIcon]=\"bottom.nextIcon\"\n [showModalTitle]=\"bottom.showModalTitle\"\n (pageChange)=\"handlePaginationPageChange($event)\"\n (pageSizeChange)=\"handlePaginationPageSizeChange($event)\"\n >\n @if (bottomResultsTemplate(); as tpl) {\n <span tediPaginationResults>\n <ng-container *ngTemplateOutlet=\"tpl\" />\n </span>\n }\n </tedi-pagination>\n </div>\n}\n", styles: [".tedi-table{display:flex;flex-direction:column;gap:var(--tedi-dimensions-10);width:100%}.tedi-table__scroll{overflow-x:auto;background:var(--table-default);border:var(--tedi-borders-01) solid var(--table-border);border-radius:var(--table-radius)}.tedi-table__table{width:100%;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--general-text-primary);border-spacing:0;border-collapse:collapse;background:var(--table-default)}.tedi-table__caption{padding:var(--tedi-dimensions-10) var(--table-header-padding-x);font-weight:var(--body-regular-weight);color:var(--general-text-primary);text-align:left;caption-side:top}.tedi-table__head{background:var(--table-default)}.tedi-table__header-cell{padding:var(--table-header-padding-y) var(--table-header-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);color:var(--general-text-tertiary);text-align:left;white-space:nowrap;background:var(--table-default);border-bottom:1px solid var(--table-border-th)}.tedi-table__header-content{display:inline-flex;gap:var(--layout-grid-gutters-04);align-items:center}.tedi-table__filter-popover{display:inline-flex;align-items:center}.tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__body .tedi-table__row:last-child>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table--group-dividers-between .tedi-table__body .tedi-table__row--group-start>.tedi-table__cell{border-top:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--group-dividers-none .tedi-table__body .tedi-table__row>.tedi-table__cell{border-bottom:0}.tedi-table__cell{padding:var(--table-data-padding-y) var(--table-data-padding-x);vertical-align:middle;color:var(--general-text-primary);background:var(--table-default)}.tedi-table__cell--align-left{text-align:left}.tedi-table__cell--align-center{text-align:center}.tedi-table__cell--align-center .tedi-table__expand-toggle{justify-content:center}.tedi-table__cell--align-right{text-align:right}.tedi-table__cell--valign-top{vertical-align:top}.tedi-table__cell--valign-middle{vertical-align:middle}.tedi-table__cell--valign-bottom{vertical-align:bottom}.tedi-table__expand-toggle{display:flex;align-items:center}.tedi-table__expand-toggle--icon-only{min-height:var(--button-sm-icon-size)}.tedi-table__cell--placeholder{padding:var(--tedi-dimensions-14) var(--table-data-padding-x);color:var(--general-text-secondary);text-align:center}.tedi-table--small .tedi-table__header-cell{padding:var(--table-header-padding-y-sm) var(--table-header-padding-x-sm)}.tedi-table--small .tedi-table__cell{padding:var(--table-data-padding-y-sm) var(--table-data-padding-x-sm)}.tedi-table__foot{font-weight:var(--heading-weight);background:var(--table-default)}.tedi-table__cell--footer{color:var(--general-text-primary);border-top:var(--tedi-borders-01) solid var(--table-border-th)}.tedi-table__row--selected>.tedi-table__cell{background:var(--table-active)}.tedi-table__row--clickable{cursor:pointer}.tedi-table__row--clickable:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(var(--tedi-borders-02) * -1);background:transparent;border-color:transparent}.tedi-table__body .tedi-table__row--sub-component>.tedi-table__cell{background:var(--table-striped);border-bottom:0}.tedi-table__body .tedi-table__row--sub-component-open>.tedi-table__cell{border-bottom:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__row--sub-row>.tedi-table__cell{background:var(--table-striped)}.tedi-table__cell--sub-component{padding:0}.tedi-table__sub-component-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.tedi-table__row--sub-component-open .tedi-table__sub-component-wrapper{grid-template-rows:1fr}.tedi-table__sub-component-content{min-height:0;overflow:hidden}.tedi-table__sub-component-inner{padding:var(--table-data-padding-y) var(--table-data-padding-x)}.tedi-table__row--filter{background:var(--general-surface-primary)}.tedi-table__row--filter .tedi-table__header-cell{padding-top:var(--tedi-dimensions-05);padding-bottom:var(--tedi-dimensions-05);font-weight:var(--body-regular-weight);background:var(--general-surface-primary)}.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell{background:var(--table-striped)}.tedi-table.tedi-table--row-hover .tedi-table__body .tedi-table__row:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active>.tedi-table__cell,.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--active:hover>.tedi-table__cell{background:var(--table-hover)}.tedi-table .tedi-table__body .tedi-table__row.tedi-table__row--picked-up>.tedi-table__cell{background:var(--table-hover)}.tedi-table--vertical-borders .tedi-table__header-cell,.tedi-table--vertical-borders .tedi-table__cell{border-right:var(--tedi-borders-01) solid var(--table-border)}.tedi-table--vertical-borders thead tr:first-child .tedi-table__header-cell:last-child,.tedi-table--vertical-borders .tedi-table__row>.tedi-table__cell:last-child{border-right:0}.tedi-table--borderless .tedi-table__scroll{background:transparent;border:0;border-radius:0}.tedi-table--has-pagination{gap:0}.tedi-table--has-pagination-bottom .tedi-table__scroll{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.tedi-table--has-pagination-top .tedi-table__scroll{border-top:0;border-top-left-radius:0;border-top-right-radius:0}.tedi-table__pagination{border:var(--tedi-borders-01) solid var(--table-border)}.tedi-table__pagination--bottom{border-top:0;border-bottom-right-radius:var(--table-radius);border-bottom-left-radius:var(--table-radius)}.tedi-table__pagination--top{border-bottom:0;border-top-left-radius:var(--table-radius);border-top-right-radius:var(--table-radius)}.tedi-table--borderless .tedi-table__pagination{background:transparent;border:0}.tedi-table--sticky-first-column .tedi-table__header-cell.tedi-table__cell--sticky-left{position:sticky;z-index:2;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left{position:sticky;z-index:1;background:var(--table-default)}.tedi-table--sticky-first-column .tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--sub-row>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-striped)}.tedi-table--sticky-first-column .tedi-table__body .tedi-table__row--picked-up>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column.tedi-table--striped .tedi-table__body .tedi-table__row--picked-up:nth-of-type(2n)>.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell--picked-up.tedi-table__cell--sticky-left{background:var(--table-hover)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left{box-shadow:inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start{box-shadow:inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-first-column .tedi-table__row--clickable:focus-visible>.tedi-table__cell--sticky-left-start.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset var(--tedi-borders-02) 0 0 var(--tedi-primary-500),inset 0 var(--tedi-borders-02) 0 var(--tedi-primary-500),inset 0 calc(var(--tedi-borders-02) * -1) 0 var(--tedi-primary-500)}.tedi-table--sticky-header .tedi-table__head{border-bottom:0}.tedi-table--sticky-header .tedi-table__head .tedi-table__row{position:sticky;top:0;z-index:2;background:var(--table-default)}.tedi-table--sticky-header .tedi-table__head .tedi-table__header-cell{position:sticky;top:0;z-index:2;background:var(--table-default);box-shadow:inset 0 -1px 0 var(--table-border-th)}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left{z-index:3}.tedi-table--sticky-header.tedi-table--sticky-first-column .tedi-table__head .tedi-table__header-cell.tedi-table__cell--sticky-left-edge{box-shadow:inset -1px 0 0 var(--table-border),inset 0 -1px 0 var(--table-border-th)}.tedi-table--fixed-layout .tedi-table__table{table-layout:fixed}.tedi-table__drag-handle{display:inline-flex;align-items:center;justify-content:center;padding:2px;color:var(--general-text-tertiary);cursor:grab;background:transparent;border:0;border-radius:var(--button-radius-sm)}.tedi-table__drag-handle:hover{color:var(--general-text-primary);background:var(--button-main-neutral-icon-only-background-hover)}.tedi-table__drag-handle:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:0}.tedi-table__drag-handle.cdk-drag-disabled{color:var(--general-text-disabled);cursor:not-allowed}.tedi-table__drag-handle--picked-up{color:var(--tedi-primary-500);cursor:grabbing}.cdk-drag-preview .tedi-table__drag-handle,.cdk-drop-list-dragging .tedi-table__drag-handle{cursor:grabbing}.cdk-drag-preview.tedi-table__row,.cdk-drag-preview.tedi-table__header-cell{display:table;cursor:grabbing;background:var(--table-hover);border:var(--tedi-borders-01) solid var(--card-border-primary);border-radius:var(--table-radius);box-shadow:0 6px 16px var(--tedi-alpha-20)}.cdk-drag-preview.tedi-table__row>.tedi-table__cell{background:var(--table-hover)}.cdk-drag-placeholder.tedi-table__row,.cdk-drag-placeholder.tedi-table__header-cell{opacity:.3}.cdk-drop-list-dragging .tedi-table__row:not(.cdk-drag-placeholder),.cdk-drop-list-dragging .tedi-table__header-cell:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.tedi-table__filter{display:flex;flex-direction:column;gap:var(--tedi-dimensions-12);width:100%}.tedi-table__filter-actions{display:flex;gap:var(--button-gutter-x-sm)}.tedi-table__filter-actions>*{flex:1 1 0;justify-content:center}.tedi-table .tedi-table__head .tedi-table__header-cell--picked-up{cursor:grabbing;background:var(--table-hover)}.tedi-table__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;white-space:nowrap;border:0;clip-path:inset(50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: FlexRenderDirective, selector: "[flexRender]", inputs: ["flexRender", "flexRenderProps", "flexRenderInjector"] }, { kind: "component", type: PaginationComponent, selector: "tedi-pagination", inputs: ["pageCount", "page", "totalItems", "pageSize", "pageSizeOptions", "boundaryCount", "siblingCount", "labels", "background", "dividerPosition", "hideResults", "hidePageSize", "hidePager", "hideArrows", "disableArrowsAtBoundary", "arrowVariant", "showArrowLabels", "previousIcon", "nextIcon", "showModalTitle"], outputs: ["pageChange", "pageSizeChange"] }, { kind: "directive", type: TediPaginationResultsDirective, selector: "[tediPaginationResults]" }, { kind: "component", type: TediTableHeaderButtonComponent, selector: "button[tedi-table-header-button]", inputs: ["icon", "filled", "selected", "disabled", "iconSize", "aria-label"] }, { kind: "component", type: CheckboxComponent, selector: "input[type=checkbox][tedi-checkbox]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: RadioComponent, selector: "input[type=radio][tedi-radio]", inputs: ["size", "invalid", "value", "disabled"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: CollapseButtonComponent, selector: "button[tedi-collapse-button]", inputs: ["open", "openText", "closeText", "hideText", "arrowType", "size", "inverted", "underline", "ariaControls", "ariaLabel", "id"], outputs: ["openChange"] }, { kind: "component", type: PopoverComponent, selector: "tedi-popover", inputs: ["position", "preventOverflow", "dismissible", "hideOnScroll", "withBorder", "withArrow", "lockScroll", "timeoutDelay"] }, { kind: "component", type: PopoverContentComponent, selector: "tedi-popover-content", inputs: ["maxWidth", "title", "showClose"] }, { kind: "directive", type: PopoverTriggerDirective, selector: "[tedi-popover-trigger]", inputs: ["underline", "interactive"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
16726
16976
|
}
|
|
16727
16977
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TediTableComponent, decorators: [{
|
|
16728
16978
|
type: Component,
|
|
@@ -17433,7 +17683,7 @@ class FilterComponent {
|
|
|
17433
17683
|
useExisting: forwardRef(() => FilterComponent),
|
|
17434
17684
|
multi: true,
|
|
17435
17685
|
},
|
|
17436
|
-
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n [class.tedi-filter-dropdown__item--selected]=\"isOptionSelected(option.value)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'\"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{ resolvedSelectAllLabel() }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon class=\"tedi-filter__icon\" name=\"check\" [size]=\"iconSize()\" color=\"inherit\" />\n }\n\n <div class=\"tedi-filter__prepend\" [class.tedi-filter__prepend--hidden]=\"hidePrepend()\">\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge class=\"tedi-filter__count\" [text]=\"'' + selectedCount()\" color=\"brand\" />\n }\n\n @if (hasDropdown()) {\n <tedi-icon class=\"tedi-filter__icon\" name=\"arrow_drop_down\" variant=\"filled\" [size]=\"iconSize()\" color=\"inherit\" />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
17686
|
+
], queries: [{ propertyName: "customContent", first: true, predicate: FilterContentDirective, descendants: true, isSignal: true }, { propertyName: "filterPrepend", first: true, predicate: FilterPrependDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "dropdown", first: true, predicate: ["dropdown"], descendants: true, isSignal: true }, { propertyName: "dropdownPanel", first: true, predicate: ["dropdownPanel"], descendants: true, isSignal: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true, isSignal: true }, { propertyName: "triggerBtn", first: true, predicate: ["triggerBtn"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasDropdown()) {\n <tedi-dropdown #dropdown position=\"bottom-start\">\n <button\n #triggerBtn\n tedi-dropdown-trigger\n ariaHaspopup=\"dialog\"\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n (click)=\"focusDropdownContent()\"\n (keydown.arrowDown)=\"focusDropdownContent(true)\"\n (keydown.arrowUp)=\"focusDropdownContent(true, true)\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n <tedi-dropdown-content>\n <div\n #dropdownPanel\n class=\"tedi-filter-dropdown\"\n [class.tedi-filter-dropdown--custom]=\"hasCustomContent()\"\n role=\"dialog\"\n [attr.aria-label]=\"text()\"\n (keydown)=\"handleDropdownKeydown($event)\"\n >\n @if (hasCustomContent()) {\n <div class=\"tedi-filter-dropdown__custom-content\">\n <ng-content select=\"[tediFilterContent]\" />\n </div>\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"onCustomClear()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else if (isSingleSelect()) {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n [class.tedi-filter-dropdown__item--selected]=\"isOptionSelected(option.value)\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && selectOption(option.value)\"\n >\n <tedi-dropdown-item-value\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSingleSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n } @else {\n @if (showSearch()) {\n <ng-container *ngTemplateOutlet=\"searchField\" />\n }\n\n @if (showSelectAll() && filteredOptions().length > 0) {\n <div\n class=\"tedi-filter-dropdown__item tedi-filter-dropdown__item--select-all\"\n role=\"checkbox\"\n [attr.aria-checked]=\"allFilteredSelected() ? 'true' : someFilteredSelected() ? 'mixed' : 'false'\"\n (click)=\"toggleSelectAll()\"\n (keydown.enter)=\"toggleSelectAll()\"\n (keydown.space)=\"$event.preventDefault(); toggleSelectAll()\"\n tabindex=\"0\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"allFilteredSelected()\"\n [indeterminate]=\"someFilteredSelected()\"\n >\n <tedi-dropdown-item-value-label>{{ resolvedSelectAllLabel() }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n <tedi-separator />\n }\n\n <div\n #optionsList\n class=\"tedi-filter-dropdown__options\"\n role=\"listbox\"\n aria-multiselectable=\"true\"\n [attr.aria-label]=\"text()\"\n [attr.aria-activedescendant]=\"activeDescendantId()\"\n tabindex=\"0\"\n (focus)=\"onOptionsFocus()\"\n (blur)=\"onOptionsBlur()\"\n (mousedown)=\"onOptionsMousedown()\"\n (keydown)=\"onOptionsKeydown($event)\"\n >\n @for (option of filteredOptions(); track option.value; let i = $index) {\n <div\n class=\"tedi-filter-dropdown__item\"\n [class.tedi-filter-dropdown__item--disabled]=\"option.disabled\"\n [class.tedi-filter-dropdown__item--focused]=\"activeOptionIndex() === i\"\n role=\"option\"\n [attr.aria-selected]=\"isOptionSelected(option.value)\"\n [attr.aria-disabled]=\"option.disabled || null\"\n [id]=\"getOptionId(i)\"\n (click)=\"!option.disabled && toggleOption(option.value)\"\n >\n <tedi-dropdown-item-value\n type=\"checkbox\"\n [selected]=\"isOptionSelected(option.value)\"\n [disabled]=\"!!option.disabled\"\n >\n <tedi-dropdown-item-value-label>{{ option.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </div>\n }\n </div>\n\n @if (showClear()) {\n <tedi-separator />\n <div class=\"tedi-filter-dropdown__clear\">\n <button\n tedi-button\n variant=\"neutral\"\n size=\"small\"\n type=\"button\"\n (click)=\"clearSelection()\"\n >\n <tedi-icon name=\"refresh\" [size]=\"18\" color=\"brand\" />\n <span>{{ resolvedClearLabel() }}</span>\n </button>\n </div>\n }\n }\n </div>\n </tedi-dropdown-content>\n </tedi-dropdown>\n} @else {\n <button\n class=\"tedi-filter__button\"\n type=\"button\"\n [disabled]=\"isDisabled()\"\n [attr.role]=\"isGroupedRadio() ? 'radio' : null\"\n [attr.aria-checked]=\"isGroupedRadio() ? isSelected() : null\"\n [attr.aria-pressed]=\"isGroupedRadio() ? null : isSelected()\"\n (click)=\"toggle()\"\n >\n <ng-container *ngTemplateOutlet=\"buttonContent\" />\n </button>\n}\n\n<ng-template #buttonContent>\n @if (!hasDropdown() && isSelected()) {\n <tedi-icon class=\"tedi-filter__icon\" name=\"check\" [size]=\"iconSize()\" color=\"inherit\" />\n }\n\n <div class=\"tedi-filter__prepend\" [class.tedi-filter__prepend--hidden]=\"hidePrepend()\">\n <ng-content select=\"[tediFilterPrepend]\" />\n </div>\n\n <span class=\"tedi-filter__text\">{{ displayText() }}</span>\n\n <div class=\"tedi-filter__append\">\n <ng-content select=\"[tediFilterAppend]\" />\n </div>\n\n @if (isMultiSelect() && isSelected() && selectedCount() > 0) {\n <tedi-status-badge class=\"tedi-filter__count\" [text]=\"'' + selectedCount()\" color=\"brand\" />\n }\n\n @if (hasDropdown()) {\n <tedi-icon class=\"tedi-filter__icon\" name=\"arrow_drop_down\" variant=\"filled\" [size]=\"iconSize()\" color=\"inherit\" />\n }\n</ng-template>\n\n<ng-template #searchField>\n <div class=\"tedi-filter-dropdown__search\">\n <tedi-form-field icon=\"search\" [clearable]=\"searchClearable()\">\n <input\n tedi-text-field\n type=\"text\"\n role=\"searchbox\"\n [attr.aria-label]=\"text()\"\n [(value)]=\"searchTerm\"\n (clear)=\"onSearchClear()\"\n />\n </tedi-form-field>\n </div>\n <tedi-separator />\n</ng-template>\n", styles: [".tedi-filter{--_filter-bg: transparent;--_filter-text: inherit;--_filter-border: transparent;--_filter-border-width: var(--tedi-borders-01);--_filter-padding-x: var(--filter-default-padding-x);--_filter-radius: var(--form-checkbox-radio-card-radius);display:inline-flex}.tedi-filter__button{display:inline-flex;align-items:center;max-width:var(--button-width-max);padding:0 var(--_filter-padding-x);font-family:var(--family-default);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);color:var(--_filter-text);cursor:pointer;background-color:var(--_filter-bg);border:var(--_filter-border-width) solid var(--_filter-border);border-radius:var(--_filter-radius)}.tedi-filter__button:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:var(--tedi-borders-01)}.tedi-filter__button:disabled{cursor:not-allowed}.tedi-filter__button:not(:disabled):hover .tedi-icon{color:inherit}.tedi-filter--selected .tedi-icon{color:inherit}.tedi-filter__text{padding:calc(var(--filter-default-padding-y) - var(--_filter-border-width)) var(--filter-default-inner-spacing);white-space:nowrap}.tedi-filter__icon{padding:0 var(--filter-default-inner-spacing-sm)}.tedi-filter__prepend{display:flex;align-items:center;padding:0 var(--filter-default-inner-spacing-sm);color:var(--_filter-text)}.tedi-filter__prepend:empty{display:none}.tedi-filter__append{display:flex;align-items:center;padding:0 var(--layout-grid-gutters-02)}.tedi-filter__append:empty{display:none}.tedi-filter__prepend--hidden{display:none}.tedi-filter__count{padding-left:var(--layout-grid-gutters-04)}.tedi-filter--primary{--_filter-border-width: 0px;--_filter-bg: var(--filter-primary-default-background);--_filter-text: var(--filter-primary-default-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--selected{--_filter-bg: var(--filter-primary-selected-background);--_filter-text: var(--filter-primary-selected-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-primary-hover-background);--_filter-text: var(--filter-primary-hover-text)}.tedi-filter--primary.tedi-filter--selected .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-primary-active-background);--_filter-text: var(--filter-primary-active-text)}.tedi-filter--primary.tedi-filter--disabled{--_filter-bg: var(--filter-primary-disabled-background);--_filter-text: var(--filter-primary-disabled-text)}.tedi-filter--secondary{--_filter-bg: var(--filter-secondary-default-background);--_filter-text: var(--filter-secondary-default-text);--_filter-border: var(--filter-secondary-default-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):hover{--_filter-bg: var(--filter-secondary-hover-background);--_filter-text: var(--filter-secondary-hover-text);--_filter-border: var(--filter-secondary-hover-border)}.tedi-filter--secondary .tedi-filter__button:not(:disabled):active{--_filter-bg: var(--filter-secondary-active-background);--_filter-text: var(--filter-secondary-active-text);--_filter-border: var(--filter-secondary-active-border)}.tedi-filter--secondary.tedi-filter--selected{--_filter-bg: var(--filter-secondary-selected-background);--_filter-text: var(--filter-secondary-selected-text);--_filter-border: var(--filter-secondary-selected-border);--_filter-border-width: var(--general-selected-border-width)}.tedi-filter--secondary.tedi-filter--disabled{--_filter-bg: var(--filter-secondary-disabled-background);--_filter-text: var(--filter-secondary-disabled-text);--_filter-border: var(--filter-secondary-disabled-border);--_filter-border-width: var(--tedi-borders-01)}.tedi-filter--large{--_filter-padding-x: var(--filter-lg-padding-x)}.tedi-filter--large .tedi-filter__text{padding-top:calc(var(--filter-lg-padding-y) - var(--_filter-border-width));padding-bottom:calc(var(--filter-lg-padding-y) - var(--_filter-border-width))}.tedi-filter-dropdown{display:flex;flex-direction:column;overflow:hidden;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__custom-content,.tedi-filter-dropdown__search{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x)}.tedi-filter-dropdown__options{flex:1;max-height:var(--form-select-area-max-height);overflow-y:auto;outline:none}.tedi-filter-dropdown__item{display:flex;align-items:center;width:100%;min-height:var(--form-field-height);padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);color:var(--dropdown-item-default-text);cursor:pointer;background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__item:hover:not(.tedi-filter-dropdown__item--disabled){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}.tedi-filter-dropdown__item:focus-visible{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__item--disabled{cursor:not-allowed}.tedi-filter-dropdown__item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__label,.tedi-filter-dropdown__item--selected .tedi-dropdown-item-value__meta{color:inherit}.tedi-filter-dropdown__item--selected:hover:not(.tedi-filter-dropdown__item--selected--disabled){color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-filter-dropdown__item--focused{outline:var(--tedi-borders-02) solid var(--form-input-border-active);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-filter-dropdown__clear{display:flex;justify-content:center;padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);background:var(--dropdown-item-default-background)}.tedi-filter-dropdown__clear .tedi-icon{font-size:var(--button-icon-inner-size)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[tedi-button]", inputs: ["variant", "size"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "component", type: StatusBadgeComponent, selector: "tedi-status-badge", inputs: ["text", "class", "title", "role", "color", "variant", "size", "status", "icon"] }, { kind: "component", type: SeparatorComponent, selector: "tedi-separator", inputs: ["axis", "color", "variant", "dotSize", "dotFilled", "thickness", "spacing", "size"] }, { kind: "component", type: DropdownComponent, selector: "tedi-dropdown", inputs: ["value", "position", "preventOverflow", "offset", "hideOnScroll"], outputs: ["valueChange"] }, { kind: "directive", type: DropdownTriggerDirective, selector: "[tedi-dropdown-trigger]", inputs: ["ariaHaspopup"] }, { kind: "component", type: DropdownContentComponent, selector: "tedi-dropdown-content", inputs: ["dropdownRole"] }, { kind: "component", type: DropdownItemValueComponent, selector: "tedi-dropdown-item-value", inputs: ["type", "layout", "selected", "indeterminate", "disabled"] }, { kind: "component", type: DropdownItemValueLabelComponent, selector: "tedi-dropdown-item-value-label", inputs: ["clipContent"] }, { kind: "component", type: FormFieldComponent, selector: "tedi-form-field", inputs: ["size", "icon", "clearable", "inputClass", "characterLimit"] }, { kind: "component", type: TextFieldComponent, selector: "input[tedi-text-field]", inputs: ["value", "arrowsHidden", "disabled"], outputs: ["valueChange", "clear"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
17437
17687
|
}
|
|
17438
17688
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: FilterComponent, decorators: [{
|
|
17439
17689
|
type: Component,
|
|
@@ -20450,5 +20700,5 @@ function provideTedi(config = {}) {
|
|
|
20450
20700
|
* Generated bundle index. Do not edit.
|
|
20451
20701
|
*/
|
|
20452
20702
|
|
|
20453
|
-
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
|
|
20703
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, BreadcrumbItemDirective, BreadcrumbSeparatorDirective, BreadcrumbsComponent, BreakpointService, ButtonComponent, ButtonGroupButtonDirective, ButtonGroupComponent, COUNTER_TAG_WIDTH, CalendarComponent, CardButtonComponent, CardComponent, CardContentComponent, CardHeaderComponent, CardIconComponent, CardRowComponent, CarouselComponent, CarouselContentComponent, CarouselFooterComponent, CarouselHeaderComponent, CarouselIndicatorsComponent, CarouselNavigationComponent, CarouselSlideDirective, CheckboxCardComponent, CheckboxCardGroupComponent, CheckboxComponent, CheckboxGroupComponent, ClosingButtonComponent, ColComponent, CollapseButtonComponent, CollapseComponent, DROPDOWN_API, DROPDOWN_CONTENT_API, DateFieldComponent, DatePickerComponent, DropdownComponent, DropdownContentComponent, DropdownItemComponent, DropdownItemValueComponent, DropdownItemValueLabelComponent, DropdownItemValueMetaComponent, DropdownTriggerDirective, EllipsisComponent, EmptyStateComponent, FeedbackTextComponent, FilterComponent, FilterContentDirective, FilterGroupComponent, FilterPrependDirective, FooterBodyComponent, FooterBottomComponent, FooterComponent, FooterSectionComponent, FooterSideComponent, FormFieldComponent, HeaderActionsComponent, HeaderBottomComponent, HeaderComponent, HeaderContentComponent, HeaderLanguageComponent, HeaderLoginComponent, HeaderLogoComponent, HeaderLogoDarkDirective, HeaderLogoutComponent, HeaderMobileButtonComponent, HeaderProfileComponent, HeaderRoleComponent, HeaderRoleContentDirective, HeaderRoleNoResultsDirective, HeaderRoleTitleDirective, HeaderSearchComponent, HeaderTopComponent, HideAtDirective, HorizontalPushHandler, HorizontalStepperComponent, HorizontalStepperItemComponent, IconComponent, InfoButtonComponent, InfoTooltipComponent, InputGroupComponent, InputGroupPrefixDirective, InputGroupSuffixDirective, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LabelRowComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SearchComponent, SelectComponent, SelectOptionTemplateDirective, SelectTooltipTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, TEDI_INPUT_GROUP, TEDI_TABLE_CONTEXT, TEDI_THEME_DEFAULT_TOKEN, TEDI_TRANSLATION_DEFAULT_TOKEN, THEME_CLASS_PREFIX, THEME_COOKIE_NAME, THEME_FALLBACK_VALUE, TOAST_DEFAULT_DURATION, TabsComponent, TabsContentComponent, TabsListComponent, TabsTriggerComponent, TagComponent, TediPaginationResultsDirective, TediTableColumnsMenuComponent, TediTableComponent, TediTableHeaderButtonComponent, TediTableToolbarComponent, TediTranslationPipe, TediTranslationService, TextComponent, TextFieldComponent, TextGroupComponent, TextGroupLabelComponent, TextGroupValueComponent, TextareaComponent, ThemeService, TimeFieldComponent, TimePickerComponent, TimelineComponent, TimelineDescriptionComponent, TimelineItemComponent, TimelineTimingsBottomDirective, TimelineTitleComponent, ToastComponent, ToastService, ToggleComponent, TooltipComponent, TooltipContentComponent, TooltipTriggerComponent, VerticalSpacingDirective, VerticalSpacingItemDirective, addDays, addMonths, addYears, breakpointInput, buildMonthGrid, calculateArrowOffset, calculateVisibleTagCount, computeGroupSpans, cookieSignal, createTablePersistence, endOfMonth, formatDate, formatLocaleDate, formatLocaleDateHint, formatLocaleDateLong, formatMonthYear, generateUUID, getCardBorderPlacementColor, getDaysInMonth, getFirstDayOfWeek, getFocusableElements, getISOWeek, getMonthNames, getPaddingCssVariables, getPlacementFromPositionChange, getWeekdayNames, groupRowSpan, injectTediTableContext, isAfterDay, isBeforeDay, isDateInRange, isSameDay, isSameMonth, isSameYear, isValidTime, matchAny, matchDate, normalizeTime, parseDate, parseLocaleDate, provideTedi, resolveCardBorderRadius, startOfMonth, startOfWeek, toConnectedPositions, toggleDateInArray, usePagination };
|
|
20454
20704
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|