@tedi-design-system/angular 7.1.0-rc.2 → 7.1.0-rc.4
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/fesm2022/tedi-design-system-angular-community.mjs +1 -1
- package/fesm2022/tedi-design-system-angular-community.mjs.map +1 -1
- package/fesm2022/tedi-design-system-angular-tedi.mjs +310 -24
- package/fesm2022/tedi-design-system-angular-tedi.mjs.map +1 -1
- package/package.json +1 -1
- package/tedi/index.d.ts +176 -7
- package/tedi/index.d.ts.map +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild,
|
|
2
|
+
import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component, signal, inject, ElementRef, Directive, booleanAttribute, output, ViewContainerRef, Renderer2, effect, HostListener, Injectable, InjectionToken, model, isDevMode, forwardRef, contentChild, contentChildren, PLATFORM_ID, REQUEST, isSignal, Pipe, Injector, viewChild, NgZone, DestroyRef, viewChildren, afterNextRender, afterRenderEffect, Optional, SkipSelf, untracked, ViewChild, TemplateRef, ContentChild, HostAttributeToken, HostBinding, runInInjectionContext, ContentChildren, RendererStyleFlags2, makeEnvironmentProviders } from '@angular/core';
|
|
3
3
|
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
4
4
|
import * as i1 from '@angular/cdk/overlay';
|
|
5
5
|
import { CdkOverlayOrigin, OverlayModule, Overlay, OverlayConfig, CdkConnectedOverlay } from '@angular/cdk/overlay';
|
|
@@ -5340,6 +5340,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
5340
5340
|
|
|
5341
5341
|
const FOCUSABLE_SELECTOR = "button, a[href], [tabindex]";
|
|
5342
5342
|
class TooltipTriggerComponent {
|
|
5343
|
+
/**
|
|
5344
|
+
* When `false`, the trigger is a pure positioning anchor: it skips making its
|
|
5345
|
+
* projected child focusable (no synthesized `tabindex`, focus ring or
|
|
5346
|
+
* `aria-describedby`). Use for decorative or externally-controlled origins where
|
|
5347
|
+
* focus and ARIA live on another element (e.g. a slider's range input).
|
|
5348
|
+
* @default true
|
|
5349
|
+
*/
|
|
5350
|
+
interactive = input(true, ...(ngDevMode ? [{ debugName: "interactive" }] : []));
|
|
5343
5351
|
host = inject(ElementRef);
|
|
5344
5352
|
overlayOrigin = inject(CdkOverlayOrigin, { self: true });
|
|
5345
5353
|
renderer = inject(Renderer2);
|
|
@@ -5358,7 +5366,9 @@ class TooltipTriggerComponent {
|
|
|
5358
5366
|
this.isTouch = true;
|
|
5359
5367
|
}
|
|
5360
5368
|
onTouchEnd() {
|
|
5361
|
-
this.tooltip.
|
|
5369
|
+
if (this.tooltip.openWith() !== "none") {
|
|
5370
|
+
this.tooltip.toggleTooltip();
|
|
5371
|
+
}
|
|
5362
5372
|
setTimeout(() => (this.isTouch = false), 300);
|
|
5363
5373
|
}
|
|
5364
5374
|
onClick() {
|
|
@@ -5410,6 +5420,8 @@ class TooltipTriggerComponent {
|
|
|
5410
5420
|
this.tooltip.hideTooltip();
|
|
5411
5421
|
}
|
|
5412
5422
|
ngAfterContentChecked() {
|
|
5423
|
+
if (!this.interactive())
|
|
5424
|
+
return;
|
|
5413
5425
|
const element = this.host.nativeElement;
|
|
5414
5426
|
const firstChild = element.firstChild;
|
|
5415
5427
|
if (!firstChild) {
|
|
@@ -5460,14 +5472,14 @@ class TooltipTriggerComponent {
|
|
|
5460
5472
|
return (el.tagName === "BUTTON" || (el.tagName === "A" && el.hasAttribute("href")));
|
|
5461
5473
|
}
|
|
5462
5474
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5463
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
5475
|
+
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 });
|
|
5464
5476
|
}
|
|
5465
5477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipTriggerComponent, decorators: [{
|
|
5466
5478
|
type: Component,
|
|
5467
5479
|
args: [{ selector: "tedi-tooltip-trigger", standalone: true, template: "<ng-content />", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [CdkOverlayOrigin], host: {
|
|
5468
5480
|
"[class.tedi-tooltip-trigger--clickable]": "tooltip.openWith() === 'click'",
|
|
5469
5481
|
}, 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"] }]
|
|
5470
|
-
}], ctorParameters: () => [], propDecorators: { onTouchStart: [{
|
|
5482
|
+
}], ctorParameters: () => [], propDecorators: { interactive: [{ type: i0.Input, args: [{ isSignal: true, alias: "interactive", required: false }] }], onTouchStart: [{
|
|
5471
5483
|
type: HostListener,
|
|
5472
5484
|
args: ["touchstart"]
|
|
5473
5485
|
}], onTouchEnd: [{
|
|
@@ -5544,14 +5556,35 @@ class TooltipComponent {
|
|
|
5544
5556
|
*/
|
|
5545
5557
|
preventOverflow = input(true, ...(ngDevMode ? [{ debugName: "preventOverflow" }] : []));
|
|
5546
5558
|
/**
|
|
5547
|
-
* How tooltip can opened
|
|
5559
|
+
* How the tooltip can be opened. Use `none` for full external control via `open`
|
|
5560
|
+
* (e.g. a slider or custom draggable element driving the open state itself).
|
|
5548
5561
|
* @default both
|
|
5549
5562
|
*/
|
|
5550
5563
|
openWith = input("both", ...(ngDevMode ? [{ debugName: "openWith" }] : []));
|
|
5564
|
+
/**
|
|
5565
|
+
* Controlled open state. When set (not `undefined`), it overrides the built-in
|
|
5566
|
+
* trigger behavior; typically paired with `openWith="none"`. Leave unset for the
|
|
5567
|
+
* default trigger-driven behavior.
|
|
5568
|
+
*/
|
|
5569
|
+
open = model(undefined, ...(ngDevMode ? [{ debugName: "open" }] : []));
|
|
5570
|
+
/**
|
|
5571
|
+
* While open, continuously reposition the tooltip so it follows an origin that moves
|
|
5572
|
+
* (e.g. a dragging slider thumb). Uses `requestAnimationFrame`; enable only while the
|
|
5573
|
+
* origin can actually move to avoid needless work.
|
|
5574
|
+
* @default false
|
|
5575
|
+
*/
|
|
5576
|
+
trackPosition = input(false, ...(ngDevMode ? [{ debugName: "trackPosition" }] : []));
|
|
5551
5577
|
/** Delay time (in ms) for closing tooltip when not hovering trigger or content.
|
|
5552
5578
|
* @default 100
|
|
5553
5579
|
*/
|
|
5554
5580
|
timeoutDelay = input(100, ...(ngDevMode ? [{ debugName: "timeoutDelay" }] : []));
|
|
5581
|
+
/**
|
|
5582
|
+
* Extra distance (in px) between the tooltip and its trigger, added on top of the
|
|
5583
|
+
* arrow allowance. Set to `0` to sit the tooltip directly against the trigger
|
|
5584
|
+
* (e.g. a slider thumb).
|
|
5585
|
+
* @default 4
|
|
5586
|
+
*/
|
|
5587
|
+
offset = input(4, ...(ngDevMode ? [{ debugName: "offset" }] : []));
|
|
5555
5588
|
/** Dropdown trigger button */
|
|
5556
5589
|
tooltipTrigger = contentChild.required(TooltipTriggerComponent);
|
|
5557
5590
|
/** Tooltip content component */
|
|
@@ -5561,34 +5594,76 @@ class TooltipComponent {
|
|
|
5561
5594
|
connectedOverlay = viewChild(CdkConnectedOverlay, ...(ngDevMode ? [{ debugName: "connectedOverlay" }] : []));
|
|
5562
5595
|
descriptionId = `tedi-tooltip-${++tooltipIdCounter}`;
|
|
5563
5596
|
contentText = signal("", ...(ngDevMode ? [{ debugName: "contentText" }] : []));
|
|
5564
|
-
|
|
5597
|
+
internalOpen = signal(false, ...(ngDevMode ? [{ debugName: "internalOpen" }] : []));
|
|
5598
|
+
isOpen = computed(() => this.open() !== undefined ? Boolean(this.open()) : this.internalOpen(), ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
5565
5599
|
currentPlacement = signal("top", ...(ngDevMode ? [{ debugName: "currentPlacement" }] : []));
|
|
5566
5600
|
arrowLeft = signal(null, ...(ngDevMode ? [{ debugName: "arrowLeft" }] : []));
|
|
5567
5601
|
arrowTop = signal(null, ...(ngDevMode ? [{ debugName: "arrowTop" }] : []));
|
|
5568
|
-
overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(),
|
|
5602
|
+
overlayPositions = computed(() => toConnectedPositions(this.position(), this.preventOverflow(), this.offset()), ...(ngDevMode ? [{ debugName: "overlayPositions" }] : []));
|
|
5569
5603
|
overlayOrigin = computed(() => this.tooltipTrigger().overlayOrigin, ...(ngDevMode ? [{ debugName: "overlayOrigin" }] : []));
|
|
5570
5604
|
isContentHovered = signal(false, ...(ngDevMode ? [{ debugName: "isContentHovered" }] : []));
|
|
5571
5605
|
hideTimeout;
|
|
5606
|
+
ngZone = inject(NgZone);
|
|
5607
|
+
trackRafId = null;
|
|
5572
5608
|
horizontalPush = new HorizontalPushHandler(() => this.connectedOverlay()?.overlayRef?.overlayElement, () => this.updateArrowPosition());
|
|
5573
5609
|
constructor() {
|
|
5574
5610
|
inject(DestroyRef).onDestroy(() => {
|
|
5575
5611
|
clearTimeout(this.hideTimeout);
|
|
5576
5612
|
this.horizontalPush.detach();
|
|
5613
|
+
this.stopTracking();
|
|
5614
|
+
});
|
|
5615
|
+
effect(() => {
|
|
5616
|
+
if (this.isOpen() && this.trackPosition()) {
|
|
5617
|
+
this.startTracking();
|
|
5618
|
+
}
|
|
5619
|
+
else {
|
|
5620
|
+
this.stopTracking();
|
|
5621
|
+
}
|
|
5577
5622
|
});
|
|
5578
5623
|
}
|
|
5579
5624
|
showTooltip() {
|
|
5625
|
+
if (this.open() !== undefined)
|
|
5626
|
+
return;
|
|
5580
5627
|
clearTimeout(this.hideTimeout);
|
|
5581
5628
|
if (!this.isOpen()) {
|
|
5582
|
-
this.
|
|
5629
|
+
this.internalOpen.set(true);
|
|
5583
5630
|
}
|
|
5584
5631
|
}
|
|
5585
5632
|
hideTooltip() {
|
|
5633
|
+
if (this.open() !== undefined)
|
|
5634
|
+
return;
|
|
5586
5635
|
if (this.isOpen()) {
|
|
5587
5636
|
clearTimeout(this.hideTimeout);
|
|
5588
|
-
this.
|
|
5637
|
+
this.internalOpen.set(false);
|
|
5589
5638
|
this.horizontalPush.detach();
|
|
5590
5639
|
}
|
|
5591
5640
|
}
|
|
5641
|
+
/**
|
|
5642
|
+
* Recomputes the overlay position against its origin. Call this when the origin has
|
|
5643
|
+
* moved without a scroll/resize event (e.g. a dragged element). `trackPosition`
|
|
5644
|
+
* calls it automatically each frame while open.
|
|
5645
|
+
*/
|
|
5646
|
+
updatePosition() {
|
|
5647
|
+
this.connectedOverlay()?.overlayRef?.updatePosition();
|
|
5648
|
+
this.updateArrowPosition();
|
|
5649
|
+
}
|
|
5650
|
+
startTracking() {
|
|
5651
|
+
if (this.trackRafId !== null)
|
|
5652
|
+
return;
|
|
5653
|
+
this.ngZone.runOutsideAngular(() => {
|
|
5654
|
+
const loop = () => {
|
|
5655
|
+
this.updatePosition();
|
|
5656
|
+
this.trackRafId = requestAnimationFrame(loop);
|
|
5657
|
+
};
|
|
5658
|
+
this.trackRafId = requestAnimationFrame(loop);
|
|
5659
|
+
});
|
|
5660
|
+
}
|
|
5661
|
+
stopTracking() {
|
|
5662
|
+
if (this.trackRafId !== null) {
|
|
5663
|
+
cancelAnimationFrame(this.trackRafId);
|
|
5664
|
+
this.trackRafId = null;
|
|
5665
|
+
}
|
|
5666
|
+
}
|
|
5592
5667
|
toggleTooltip() {
|
|
5593
5668
|
if (this.isOpen()) {
|
|
5594
5669
|
this.hideTooltip();
|
|
@@ -5629,12 +5704,12 @@ class TooltipComponent {
|
|
|
5629
5704
|
}
|
|
5630
5705
|
}
|
|
5631
5706
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5632
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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 }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, 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@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\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()\" aria-hidden=\"true\">\n <div\n class=\"tedi-tooltip__arrow\"\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{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"], 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 });
|
|
5707
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.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@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\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()\" aria-hidden=\"true\">\n <div\n class=\"tedi-tooltip__arrow\"\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{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"], 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 });
|
|
5633
5708
|
}
|
|
5634
5709
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TooltipComponent, decorators: [{
|
|
5635
5710
|
type: Component,
|
|
5636
5711
|
args: [{ standalone: true, selector: "tedi-tooltip", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content select=\"tedi-tooltip-trigger\" />\n@if (contentText()) {\n <span [id]=\"descriptionId\" class=\"sr-only\">{{ contentText() }}</span>\n}\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()\" aria-hidden=\"true\">\n <div\n class=\"tedi-tooltip__arrow\"\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{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"] }]
|
|
5637
|
-
}], 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 }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], tooltipTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipTriggerComponent), { isSignal: true }] }], tooltipContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TooltipContentComponent), { ...{
|
|
5712
|
+
}], 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), { ...{
|
|
5638
5713
|
read: ElementRef,
|
|
5639
5714
|
}, isSignal: true }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }] } });
|
|
5640
5715
|
|
|
@@ -5680,7 +5755,7 @@ class EllipsisComponent {
|
|
|
5680
5755
|
this.fullText.set(el.textContent?.trim() ?? "");
|
|
5681
5756
|
}
|
|
5682
5757
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EllipsisComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5683
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EllipsisComponent, isStandalone: true, selector: "tedi-ellipsis", inputs: { lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-ellipsis" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isEllipsed() && tooltip()) {\n <tedi-tooltip openWith=\"hover\">\n <tedi-tooltip-trigger class=\"tedi-ellipsis__trigger\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ fullText() }}</tedi-tooltip-content>\n </tedi-tooltip>\n} @else {\n <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n}\n\n<ng-template #contentTpl>\n <span class=\"tedi-ellipsis__wrapper\">\n <span\n #content\n [class]=\"contentClasses()\"\n [style.-webkit-line-clamp]=\"clampStyle()\"\n [style.line-clamp]=\"clampStyle()\"\n >\n <span class=\"tedi-ellipsis__inner\"><ng-content /></span>\n </span>\n </span>\n</ng-template>\n", styles: [".tedi-ellipsis,.tedi-ellipsis__trigger,.tedi-ellipsis__wrapper{display:block;min-width:0}.tedi-ellipsis__content{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;-webkit-box-orient:vertical}.tedi-ellipsis__content--start{display:block;text-align:left;-webkit-hyphens:none;hyphens:none;word-break:normal;white-space:nowrap;-webkit-user-select:none;user-select:none;direction:rtl}.tedi-ellipsis__content--start .tedi-ellipsis__inner{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5758
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: EllipsisComponent, isStandalone: true, selector: "tedi-ellipsis", inputs: { lineClamp: { classPropertyName: "lineClamp", publicName: "lineClamp", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-ellipsis" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (isEllipsed() && tooltip()) {\n <tedi-tooltip openWith=\"hover\">\n <tedi-tooltip-trigger class=\"tedi-ellipsis__trigger\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ fullText() }}</tedi-tooltip-content>\n </tedi-tooltip>\n} @else {\n <ng-container [ngTemplateOutlet]=\"contentTpl\" />\n}\n\n<ng-template #contentTpl>\n <span class=\"tedi-ellipsis__wrapper\">\n <span\n #content\n [class]=\"contentClasses()\"\n [style.-webkit-line-clamp]=\"clampStyle()\"\n [style.line-clamp]=\"clampStyle()\"\n >\n <span class=\"tedi-ellipsis__inner\"><ng-content /></span>\n </span>\n </span>\n</ng-template>\n", styles: [".tedi-ellipsis,.tedi-ellipsis__trigger,.tedi-ellipsis__wrapper{display:block;min-width:0}.tedi-ellipsis__content{display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-webkit-hyphens:auto;hyphens:auto;word-break:break-word;-webkit-box-orient:vertical}.tedi-ellipsis__content--start{display:block;text-align:left;-webkit-hyphens:none;hyphens:none;word-break:normal;white-space:nowrap;-webkit-user-select:none;user-select:none;direction:rtl}.tedi-ellipsis__content--start .tedi-ellipsis__inner{unicode-bidi:plaintext}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
5684
5759
|
}
|
|
5685
5760
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: EllipsisComponent, decorators: [{
|
|
5686
5761
|
type: Component,
|
|
@@ -8940,13 +9015,13 @@ class PopoverContentComponent {
|
|
|
8940
9015
|
this.popover.hidePopover(true);
|
|
8941
9016
|
}
|
|
8942
9017
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
8943
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--
|
|
9018
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverContentComponent, isStandalone: true, selector: "tedi-popover-content", inputs: { maxWidth: { classPropertyName: "maxWidth", publicName: "maxWidth", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, showClose: { classPropertyName: "showClose", publicName: "showClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
8944
9019
|
}
|
|
8945
9020
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverContentComponent, decorators: [{
|
|
8946
9021
|
type: Component,
|
|
8947
9022
|
args: [{ standalone: true, selector: "tedi-popover-content", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet, ClosingButtonComponent], host: {
|
|
8948
9023
|
"[class]": "classes()",
|
|
8949
|
-
}, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--
|
|
9024
|
+
}, template: "@if (title() && showClose()) {\n <div class=\"tedi-popover-content__head\">\n <h4 class=\"tedi-popover-content__title\" [id]=\"titleId\">{{ title() }}</h4>\n <button tedi-closing-button (click)=\"handleClose()\"></button>\n </div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else if (showClose()) {\n <div class=\"tedi-popover-content__head\">\n <div>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <button tedi-closing-button size=\"small\" (click)=\"handleClose()\"></button>\n </div>\n} @else if (title()) {\n <h4 [id]=\"titleId\">{{ title() }}</h4>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n} @else {\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
8950
9025
|
}], propDecorators: { maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], showClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "showClose", required: false }] }] } });
|
|
8951
9026
|
|
|
8952
9027
|
let popoverIdCounter = 0;
|
|
@@ -9214,13 +9289,13 @@ class PopoverComponent {
|
|
|
9214
9289
|
this.hidePopover(true);
|
|
9215
9290
|
}
|
|
9216
9291
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9217
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-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\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--
|
|
9292
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: PopoverComponent, isStandalone: true, selector: "tedi-popover", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, preventOverflow: { classPropertyName: "preventOverflow", publicName: "preventOverflow", isSignal: true, isRequired: false, transformFunction: null }, dismissible: { classPropertyName: "dismissible", publicName: "dismissible", isSignal: true, isRequired: false, transformFunction: null }, hideOnScroll: { classPropertyName: "hideOnScroll", publicName: "hideOnScroll", isSignal: true, isRequired: false, transformFunction: null }, withBorder: { classPropertyName: "withBorder", publicName: "withBorder", isSignal: true, isRequired: false, transformFunction: null }, withArrow: { classPropertyName: "withArrow", publicName: "withArrow", isSignal: true, isRequired: false, transformFunction: null }, lockScroll: { classPropertyName: "lockScroll", publicName: "lockScroll", isSignal: true, isRequired: false, transformFunction: null }, timeoutDelay: { classPropertyName: "timeoutDelay", publicName: "timeoutDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "tedi-popover" }, queries: [{ propertyName: "popoverTrigger", first: true, predicate: PopoverTriggerDirective, descendants: true, isSignal: true }, { propertyName: "popoverContent", first: true, predicate: PopoverContentComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content select=\"[tedi-popover-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\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\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 });
|
|
9218
9293
|
}
|
|
9219
9294
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: PopoverComponent, decorators: [{
|
|
9220
9295
|
type: Component,
|
|
9221
9296
|
args: [{ standalone: true, selector: "tedi-popover", imports: [OverlayModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
9222
9297
|
class: "tedi-popover",
|
|
9223
|
-
}, template: "<ng-content select=\"[tedi-popover-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\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--
|
|
9298
|
+
}, template: "<ng-content select=\"[tedi-popover-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\n [class]=\"panelClasses()\"\n [id]=\"containerId()\"\n [attr.data-placement]=\"currentPlacement()\"\n [attr.aria-labelledby]=\"ariaLabelledBy()\"\n tabindex=\"-1\"\n role=\"dialog\"\n >\n @if (withArrow()) {\n <div\n class=\"tedi-popover__arrow\"\n [style.left.px]=\"arrowLeft()\"\n [style.top.px]=\"arrowTop()\"\n ></div>\n }\n <ng-content select=\"tedi-popover-content\" />\n </div>\n</ng-template>\n", styles: [".tedi-popover{display:inline-flex;align-items:center}[tedi-popover-trigger]{cursor:pointer}[tedi-popover-trigger]:not(button,a[href]):focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:var(--tedi-borders-01)}.tedi-popover__container{position:relative;z-index:var(--z-index-dropdown);border:var(--popover-border-width-md) solid var(--popover-border-default);border-radius:var(--popover-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-popover__container--arrow .tedi-popover__arrow{position:absolute;z-index:0;width:1.5rem;height:1.5rem;background:var(--popover-background);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:inset(0 -5px -5px 0)}.tedi-popover__container--arrow .tedi-popover-content{z-index:1}.tedi-popover__container--arrow[data-placement=top] .tedi-popover__arrow{bottom:-.75rem;transform:translate(-50%) rotate(45deg)}.tedi-popover__container--arrow[data-placement=bottom] .tedi-popover__arrow{top:-.75rem;transform:translate(-50%) rotate(-135deg)}.tedi-popover__container--arrow[data-placement=left] .tedi-popover__arrow{right:-.75rem;transform:translateY(-50%) rotate(-45deg)}.tedi-popover__container--arrow[data-placement=right] .tedi-popover__arrow{left:-.75rem;transform:translateY(-50%) rotate(135deg)}.tedi-popover__container--border{position:relative}.tedi-popover__container--border:before{position:absolute;z-index:2;content:\"\";background:var(--popover-border-prominent)}.tedi-popover__container--border .tedi-popover__arrow{z-index:3;box-sizing:border-box;width:1.5rem;height:1.5rem;background:var(--popover-background);border-right:var(--popover-border-width-lg) solid var(--popover-border-prominent);border-bottom:var(--popover-border-width-lg) solid var(--popover-border-prominent);filter:drop-shadow(0 0 5px var(--tedi-alpha-20));clip-path:polygon(75% 0,100% 0,100% 100%,0 100%,0 75%)}.tedi-popover__container--border[data-placement=top]{border-bottom-right-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=top]:before{right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=top] .tedi-popover__arrow{bottom:-1rem;transform:translate(-50%) translateY(calc(-1 * var(--popover-border-width-lg))) rotate(45deg)}.tedi-popover__container--border[data-placement=bottom]{border-top-left-radius:var(--popover-radius-sharp);border-top-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=bottom]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));height:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=bottom] .tedi-popover__arrow{top:-1rem;transform:translate(-50%) translateY(var(--popover-border-width-lg)) rotate(-135deg)}.tedi-popover__container--border[data-placement=left]{border-top-right-radius:var(--popover-radius-sharp);border-bottom-right-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=left]:before{top:calc(-1 * var(--popover-border-width-md));right:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=left] .tedi-popover__arrow{right:-1rem;transform:translateY(-50%) translate(calc(-1 * var(--popover-border-width-lg))) rotate(-45deg)}.tedi-popover__container--border[data-placement=right]{border-top-left-radius:var(--popover-radius-sharp);border-bottom-left-radius:var(--popover-radius-sharp)}.tedi-popover__container--border[data-placement=right]:before{top:calc(-1 * var(--popover-border-width-md));bottom:calc(-1 * var(--popover-border-width-md));left:calc(-1 * var(--popover-border-width-md));width:var(--popover-border-width-lg)}.tedi-popover__container--border[data-placement=right] .tedi-popover__arrow{left:-1rem;transform:translateY(-50%) translate(var(--popover-border-width-lg)) rotate(135deg)}.tedi-popover-trigger__text{text-decoration:underline dashed var(--general-border-secondary);text-underline-offset:.5em}.tedi-popover-trigger__text:hover{color:var(--link-primary-default);text-decoration-color:var(--general-border-brand)}.tedi-popover-content{position:relative;display:flex;flex-direction:column;gap:var(--layout-grid-gutters-08);max-width:calc(100dvw - 1rem);padding:var(--popover-padding-sm);color:var(--popover-text);background:var(--popover-background);border-radius:var(--popover-radius-rounded)}.tedi-popover-content--small{width:240px}.tedi-popover-content--medium{width:480px}.tedi-popover-content--large{width:840px}.tedi-popover-content__head{display:flex;gap:var(--layout-grid-gutters-08);justify-content:space-between}.tedi-popover-content__head>div{display:flex;flex:1 1 0;flex-direction:column;gap:var(--layout-grid-gutters-08);min-width:0}.tedi-popover-content__title{align-self:center}\n"] }]
|
|
9224
9299
|
}], ctorParameters: () => [], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], preventOverflow: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventOverflow", required: false }] }], dismissible: [{ type: i0.Input, args: [{ isSignal: true, alias: "dismissible", required: false }] }], hideOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideOnScroll", required: false }] }], withBorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "withBorder", required: false }] }], withArrow: [{ type: i0.Input, args: [{ isSignal: true, alias: "withArrow", required: false }] }], lockScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "lockScroll", required: false }] }], timeoutDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "timeoutDelay", required: false }] }], connectedOverlay: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CdkConnectedOverlay), { isSignal: true }] }], popoverTrigger: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverTriggerDirective), { isSignal: true }] }], popoverContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => PopoverContentComponent), { isSignal: true }] }] } });
|
|
9225
9300
|
|
|
9226
9301
|
class DatePickerHeaderComponent {
|
|
@@ -11187,7 +11262,7 @@ class SelectComponent {
|
|
|
11187
11262
|
useExisting: forwardRef(() => SelectComponent),
|
|
11188
11263
|
multi: true,
|
|
11189
11264
|
},
|
|
11190
|
-
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <div class=\"tedi-select__label-row\">\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltip(); as tooltipText) {\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button tedi-info-button></button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ tooltipText }}</tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\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 }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__label-row{display:flex;gap:var(--content-label-inner-spacing-x);align-items:center}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 1 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter,.tedi-select__multiselect-container--single-row .tedi-select__search-input{flex-shrink:0}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label", "color"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { 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: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { 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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11265
|
+
], queries: [{ propertyName: "optionTemplate", first: true, predicate: SelectOptionTemplateDirective, descendants: true, isSignal: true }, { propertyName: "valueTemplate", first: true, predicate: SelectValueTemplateDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "listboxRef", first: true, predicate: CdkListbox, descendants: true, read: ElementRef, isSignal: true }, { propertyName: "cdkListboxRef", first: true, predicate: CdkListbox, descendants: true, isSignal: true }, { propertyName: "connectedOverlay", first: true, predicate: CdkConnectedOverlay, descendants: true, isSignal: true }, { propertyName: "triggerRef", first: true, predicate: ["trigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "multiselectContainerRef", first: true, predicate: ["multiselectContainer"], descendants: true, isSignal: true }, { propertyName: "tagRefs", predicate: ["tagElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "@if (label()) {\n <div class=\"tedi-select__label-row\">\n <label\n [id]=\"labelId()\"\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [size]=\"size()\"\n (click)=\"onTriggerClick()\"\n >\n {{ label() }}\n </label>\n @if (tooltip(); as tooltipText) {\n <tedi-tooltip>\n <tedi-tooltip-trigger>\n <button tedi-info-button></button>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ tooltipText }}</tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n}\n<div\n [id]=\"searchable() ? null : inputId()\"\n class=\"tedi-select__trigger tedi-input\"\n [class.tedi-input--disabled]=\"disabled()\"\n [class.tedi-input--small]=\"size() === 'small'\"\n [class.tedi-input--error]=\"state() === 'error'\"\n [class.tedi-input--valid]=\"state() === 'valid'\"\n [class.tedi-select__trigger--searchable]=\"searchable()\"\n [class.tedi-select__trigger--search-focused]=\"searchFocused()\"\n cdkOverlayOrigin\n #trigger=\"cdkOverlayOrigin\"\n [attr.role]=\"searchable() ? null : 'combobox'\"\n [attr.aria-haspopup]=\"searchable() ? null : 'listbox'\"\n [attr.aria-expanded]=\"searchable() ? null : isOpen()\"\n [attr.aria-controls]=\"searchable() ? null : listboxId()\"\n [attr.aria-labelledby]=\"!searchable() ? resolvedAriaLabelledby() : null\"\n [attr.aria-label]=\"!searchable() ? resolvedAriaLabel() : null\"\n [tabindex]=\"searchable() || disabled() ? -1 : 0\"\n (click)=\"onTriggerClick()\"\n (keydown.enter)=\"onTriggerEnter()\"\n (keydown.space)=\"$event.preventDefault(); toggleIsOpen()\"\n (keydown.arrowdown)=\"$event.preventDefault(); toggleIsOpen()\"\n (blur)=\"onTouched()\"\n>\n @if (searchable()) {\n <div class=\"tedi-select__search-wrapper\">\n @if (showSingleSelectedValue()) {\n <span class=\"tedi-select__selected-value\">\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n </span>\n }\n @if (allowMultiple() && selectedValues().length) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [class.tedi-select__search-input--hidden]=\"showSingleSelectedValue()\"\n [placeholder]=\"showSingleSelectedValue() ? '' : placeholder()\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n />\n }\n </div>\n } @else {\n <span class=\"tedi-select__label\">\n @if (selectedValues().length) {\n @if (allowMultiple()) {\n <ng-container\n [ngTemplateOutlet]=\"multiselectTags\"\n [ngTemplateOutletContext]=\"{ $implicit: multiselectContainerRef }\"\n />\n } @else {\n @if (valueTemplate(); as tpl) {\n @if (selectedOptions()[0]; as option) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getValueContext(option)\"\n />\n }\n } @else {\n {{ selectedLabels().join(\", \") }}\n }\n }\n } @else {\n <span class=\"tedi-select__label--placeholder\">\n {{ placeholder() }}\n </span>\n }\n </span>\n }\n\n @if (clearable() && selectedValues().length) {\n <button\n class=\"tedi-select__clear\"\n tedi-closing-button\n type=\"button\"\n size=\"small\"\n [iconSize]=\"18\"\n [ariaLabel]=\"'clear' | tediTranslate\"\n (click)=\"clear($event)\"\n (keydown.enter)=\"clear($event)\"\n (keydown.space)=\"clear($event)\"\n [attr.aria-describedby]=\"label() ? labelId() : null\"\n ></button>\n }\n\n <span\n class=\"tedi-select__arrow\"\n aria-hidden=\"true\"\n (click)=\"onArrowClick($event)\"\n >\n <tedi-icon name=\"arrow_drop_down\" />\n </span>\n</div>\n@if (feedbackText(); as feedback) {\n <tedi-feedback-text\n [text]=\"feedback.text\"\n [type]=\"feedback.type\"\n [position]=\"feedback.position\"\n />\n}\n\n<ng-template #multiselectTags>\n <div\n class=\"tedi-select__multiselect-container\"\n [class.tedi-select__multiselect-container--single-row]=\"!multiRow()\"\n #multiselectContainer\n >\n @if (multiRow()) {\n @for (value of selectedValues(); track value) {\n <tedi-tag\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n } @else {\n <div class=\"tedi-select__multiselect-tags\">\n @for (value of selectedValues(); track value; let i = $index) {\n @if (visibleTagsCount() === null || i < visibleTagsCount()!) {\n <tedi-tag\n #tagElement\n [ellipsis]=\"tagEllipsis()\"\n [closable]=\"isTagRemovable()\"\n (closed)=\"deselect($event, value)\"\n >\n {{ getLabel(value) }}\n </tedi-tag>\n }\n }\n </div>\n @if (hiddenTagsCount() > 0) {\n <tedi-tag class=\"tedi-select__multiselect-counter\">+{{ hiddenTagsCount() }}</tedi-tag>\n }\n }\n @if (searchable()) {\n <input\n #searchInput\n [id]=\"inputId()\"\n type=\"text\"\n class=\"tedi-select__search-input\"\n [value]=\"searchTerm()\"\n [disabled]=\"disabled()\"\n (input)=\"onSearchInput($event)\"\n (focus)=\"onSearchFocus()\"\n (blur)=\"onSearchBlur()\"\n (keydown)=\"onSearchKeydown($event)\"\n autocomplete=\"off\"\n role=\"combobox\"\n aria-autocomplete=\"list\"\n [attr.aria-expanded]=\"isOpen()\"\n [attr.aria-controls]=\"listboxId()\"\n [attr.aria-labelledby]=\"resolvedAriaLabelledby()\"\n [attr.aria-label]=\"resolvedAriaLabel()\"\n />\n }\n </div>\n</ng-template>\n\n<ng-template\n cdkConnectedOverlay\n [cdkConnectedOverlayOrigin]=\"trigger\"\n [cdkConnectedOverlayOpen]=\"isOpen()\"\n [cdkConnectedOverlayPositions]=\"dropdownPositions()\"\n [cdkConnectedOverlayFlexibleDimensions]=\"true\"\n [cdkConnectedOverlayGrowAfterOpen]=\"true\"\n (detach)=\"toggleIsOpen(true)\"\n>\n <div\n class=\"tedi-select__dropdown\"\n [style.width]=\"!!dropdownWidth() ? dropdownWidth() + 'px' : 'auto'\"\n [style.max-height]=\"dropdownMaxHeight() ? dropdownMaxHeight() + 'px' : null\"\n >\n <ul\n [id]=\"listboxId()\"\n class=\"tedi-select__options\"\n [class.tedi-select__options--multiselect]=\"allowMultiple()\"\n [class.tedi-select__options--swatch-grid]=\"dropdownType() === 'grid'\"\n cdkListbox\n [cdkListboxMultiple]=\"allowMultiple()\"\n [cdkListboxValue]=\"visibleSelectedValues()\"\n [cdkListboxNavigatesDisabledOptions]=\"false\"\n [cdkListboxUseActiveDescendant]=\"true\"\n (cdkListboxValueChange)=\"handleValueChange($event)\"\n (keydown.tab)=\"toggleIsOpen(true)\"\n (keydown.escape)=\"toggleIsOpen(true)\"\n #listbox=\"cdkListbox\"\n >\n @if (filteredOptions().length) {\n @if (allowMultiple() && showSelectAll()) {\n <li\n class=\"tedi-dropdown-item\"\n [cdkOption]=\"SpecialOptionControls.SELECT_ALL\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"allOptionsSelected()\" [indeterminate]=\"someOptionsSelected()\">\n <tedi-dropdown-item-value-label>{{ \"select.select-all\" | tediTranslate }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n }\n\n @for (group of optionGroups(); track group.label) {\n @if (group.label.length > 0) {\n @if (allowMultiple() && selectableGroups()) {\n <li\n class=\"tedi-dropdown-item tedi-select__group-name tedi-select__group-name--selectable\"\n [cdkOption]=\"SpecialOptionControls.SELECT_GROUP + group.label\"\n >\n <tedi-dropdown-item-value type=\"checkbox\" [selected]=\"isGroupSelected(group.label)\" [indeterminate]=\"isGroupIndeterminate(group.label)\">\n <tedi-dropdown-item-value-label>{{ group.label }}</tedi-dropdown-item-value-label>\n </tedi-dropdown-item-value>\n </li>\n } @else {\n <li class=\"tedi-select__group-name\" role=\"presentation\">\n <span tedi-text color=\"tertiary\">\n {{ group.label }}\n </span>\n </li>\n }\n }\n\n @for (option of group.options; track option.value; let i = $index) {\n <li\n class=\"tedi-dropdown-item\"\n [class.tedi-dropdown-item--selected]=\"!allowMultiple() && isOptionSelected(option.value)\"\n [class.tedi-dropdown-item--disabled]=\"option.disabled\"\n [class.tedi-dropdown-item--custom]=\"optionTemplate()\"\n [cdkOption]=\"option.value\"\n [cdkOptionDisabled]=\"option.disabled\"\n >\n @if (optionTemplate(); as tpl) {\n <ng-container\n [ngTemplateOutlet]=\"tpl.template\"\n [ngTemplateOutletContext]=\"getOptionContext(option, i)\"\n />\n } @else {\n <tedi-dropdown-item-value\n [type]=\"allowMultiple() ? 'checkbox' : 'default'\"\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 }\n </li>\n }\n }\n } @else {\n <li class=\"tedi-dropdown-item tedi-select__no-options\">\n {{ noOptionsMessage() || (\"select.no-options\" | tediTranslate) }}\n </li>\n }\n </ul>\n </div>\n</ng-template>\n", styles: ["li[tedi-dropdown-item],.tedi-dropdown-item{display:flex;gap:var(--dropdown-item-inner-spacing);align-items:center;width:100%;min-height:40px;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)}li[tedi-dropdown-item]:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]),.tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled,[aria-disabled=true]){color:var(--dropdown-item-hover-text);background:var(--dropdown-item-hover-background)}li[tedi-dropdown-item]:focus-visible,.tedi-dropdown-item:focus-visible{outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}li[tedi-dropdown-item][aria-selected=true],li[tedi-dropdown-item].tedi-dropdown-item--selected,.tedi-dropdown-item[aria-selected=true],.tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}li[tedi-dropdown-item][aria-disabled=true],li[tedi-dropdown-item].tedi-dropdown-item--disabled,.tedi-dropdown-item[aria-disabled=true],.tedi-dropdown-item.tedi-dropdown-item--disabled{color:var(--general-text-disabled);cursor:not-allowed;background:var(--dropdown-item-disabled-background)}.tedi-input{--_border-color: var(--form-input-border-default);--_color: var(--form-input-text-filled);--_background-color: var(--form-input-background-default);--_placeholder-color: var(--form-input-text-placeholder);--_border-radius: var(--form-field-radius);--_font-size: var(--body-regular-size);--_line-height: var(--body-regular-line-height);--_padding-y: var(--form-field-padding-y-md-default);--_padding-x: var(--form-field-padding-x-md-default);--_search-input-min-width: 1px;min-height:var(--form-field-height);padding:calc(var(--_padding-y) - var(--tedi-borders-01)) var(--_padding-x);margin-bottom:0;font-family:var(--family-default);font-size:var(--_font-size);line-height:var(--_line-height);color:var(--_color);background-color:var(--_background-color);border:var(--tedi-borders-01) solid var(--_border-color);border-radius:var(--_border-radius)}.tedi-input:hover{--_border-color: var(--form-input-border-hover)}.tedi-input:focus,.tedi-input:active,.tedi-input.tedi-select__trigger--search-focused{border-color:var(--form-input-border-hover);box-shadow:inset 0 0 0 1px var(--form-input-border-hover)}.tedi-input--disabled{--_color: var(--form-input-text-disabled);--_border-color: var(--form-input-border-disabled);--_background-color: var(--form-input-background-disabled);pointer-events:none}.tedi-input--error:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-error-border)}.tedi-input--error:not(.tedi-input--disabled):focus,.tedi-input--error:not(.tedi-input--disabled):active,.tedi-input--error:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-error-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-error-border)}.tedi-input--valid:not(.tedi-input--disabled){--_border-color: var(--form-general-feedback-success-border)}.tedi-input--valid:not(.tedi-input--disabled):focus,.tedi-input--valid:not(.tedi-input--disabled):active,.tedi-input--valid:not(.tedi-input--disabled).tedi-select__trigger--search-focused{border-color:var(--form-general-feedback-success-border);box-shadow:inset 0 0 0 1px var(--form-general-feedback-success-border)}.tedi-input--small{--_padding-y: var(--form-field-padding-y-sm);min-height:var(--form-field-height-sm)}.tedi-select{display:block;width:100%}.tedi-select .tedi-feedback-text{margin-top:var(--form-field-outer-spacing)}.tedi-select__label-row{display:flex;gap:var(--content-label-inner-spacing-x);align-items:center}.tedi-select__trigger{display:flex;justify-content:space-between;width:100%;cursor:pointer}.tedi-select__label{flex-grow:1;overflow:hidden;text-align:left;cursor:default}.tedi-select__label--placeholder{color:var(--_placeholder-color);pointer-events:none}.tedi-select__clear{flex-grow:0;padding:0;margin:0;color:var(--button-close-text-default);cursor:pointer;background:none;border:none}.tedi-select__clear+.tedi-select__arrow{border-left:1px solid var(--general-border-primary)}.tedi-select__arrow{display:inline-flex;flex-grow:0;flex-shrink:0;align-items:center;padding-left:var(--form-field-inner-spacing);margin-left:var(--form-field-inner-spacing);color:inherit;cursor:default}.tedi-select__dropdown{display:flex;flex-direction:column;max-height:100%;margin-top:var(--form-field-outer-spacing);margin-bottom:var(--form-field-outer-spacing);background:var(--card-background-primary);border-radius:var(--card-radius-rounded);box-shadow:0 1px 5px 0 var(--tedi-alpha-20)}.tedi-select__trigger--searchable{cursor:text}.tedi-select__search-wrapper{position:relative;display:flex;flex-grow:1;flex-wrap:wrap;gap:var(--form-field-inner-spacing);align-items:center;min-height:var(--_line-height);overflow:hidden}.tedi-select__selected-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none}.tedi-select__search-input{position:absolute;top:0;left:0;width:100%;height:100%;padding:0;font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;background:transparent;border:none}.tedi-select__search-input:focus{outline:none}.tedi-select__search-input::placeholder{color:var(--form-input-text-placeholder)}.tedi-select__search-input--hidden{color:transparent;caret-color:var(--form-input-text-filled)}.tedi-select__search-input:not(.tedi-select__search-input--hidden){position:relative;flex:1;width:auto;min-width:var(--_search-input-min-width);height:auto}.tedi-select__options{flex:1;min-height:0;padding:0;margin:0;overflow-y:auto;outline:none}.tedi-select__options .tedi-dropdown-item{outline:none}.tedi-select__options .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline:var(--tedi-borders-02) solid var(--tedi-primary-500);outline-offset:calc(-1 * var(--tedi-borders-02))}.tedi-select__options .tedi-dropdown-item[aria-selected=true],.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected{color:var(--dropdown-item-active-text);background:var(--dropdown-item-active-background)}.tedi-select__options .tedi-dropdown-item[aria-selected=true] .tedi-icon,.tedi-select__options .tedi-dropdown-item.tedi-dropdown-item--selected .tedi-icon{color:inherit}.tedi-select__dropdown-item--label{display:none}.tedi-select__dropdown-item--custom-content:empty+.tedi-select__dropdown-item--label{display:block}.tedi-select__group-name{display:block;padding:var(--dropdown-group-label-padding-y) var(--dropdown-group-label-padding-x) var(--layout-grid-gutters-04);font-size:var(--heading-subtitle-small-size);font-weight:var(--heading-subtitle-small-weight);line-height:var(--heading-subtitle-small-line-height);text-transform:uppercase;letter-spacing:0}.tedi-select__group-name--selectable{padding:var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);font-size:var(--body-regular-size);font-weight:var(--body-regular-weight);line-height:var(--body-regular-line-height);text-transform:none;letter-spacing:inherit}.tedi-select__group-name--selectable~.tedi-dropdown-item:not(.tedi-select__group-name){padding-left:var(--form-checkbox-radio-subitem-padding-left)}.tedi-select--multiselect .tedi-select__trigger{align-items:flex-start}.tedi-select__multiselect-container{display:flex;flex-wrap:wrap;gap:var(--form-field-inner-spacing)}.tedi-select__multiselect-container--single-row{flex-wrap:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-tags{display:flex;flex:0 1 auto;gap:var(--form-field-inner-spacing);min-width:0;overflow:hidden}.tedi-select__multiselect-container--single-row .tedi-tag{flex-shrink:0}.tedi-select__multiselect-container--single-row .tedi-tag__content{white-space:nowrap}.tedi-select__multiselect-container--single-row .tedi-select__multiselect-counter,.tedi-select__multiselect-container--single-row .tedi-select__search-input{flex-shrink:0}.tedi-select__no-options{color:var(--general-text-tertiary);cursor:default}.tedi-select__no-options:hover{color:var(--general-text-tertiary);background:var(--dropdown-item-default-background)}.tedi-select__dropdown:has(.tedi-select__options--swatch-grid){width:fit-content}.tedi-select__options--swatch-grid{--tedi-swatch-size: 24px;--tedi-swatch-gap: var(--layout-grid-gutters-04);--tedi-swatch-columns: 11;display:grid;grid-template-columns:repeat(auto-fit,var(--tedi-swatch-size));gap:var(--tedi-swatch-gap);max-width:calc(var(--tedi-swatch-columns) * (var(--tedi-swatch-size) + var(--tedi-swatch-gap)));padding:var(--dropdown-body-padding-y) var(--dropdown-body-padding-x)}.tedi-select__options--swatch-grid .tedi-dropdown-item{display:flex;align-items:center;justify-content:center;width:var(--tedi-swatch-size);height:var(--tedi-swatch-size);min-height:auto;padding:var(--layout-grid-gutters-02);color:inherit;background:transparent;border-radius:var(--card-radius-rounded)}.tedi-select__options--swatch-grid .tedi-dropdown-item.cdk-option-active:not(.tedi-dropdown-item--disabled){outline-offset:0}.tedi-select__options--swatch-grid .tedi-dropdown-item[aria-selected=true],.tedi-select__options--swatch-grid .tedi-dropdown-item.tedi-dropdown-item--selected{color:inherit;background:transparent;border:var(--tedi-borders-02) solid var(--card-border-selected)}.tedi-select__options--swatch-grid .tedi-dropdown-item:hover:not(.tedi-dropdown-item--disabled){background:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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"] }, { kind: "directive", type: i1.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "ngmodule", type: CdkListboxModule }, { kind: "directive", type: i3.CdkListbox, selector: "[cdkListbox]", inputs: ["id", "tabindex", "cdkListboxValue", "cdkListboxMultiple", "cdkListboxDisabled", "cdkListboxUseActiveDescendant", "cdkListboxOrientation", "cdkListboxCompareWith", "cdkListboxNavigationWrapDisabled", "cdkListboxNavigatesDisabledOptions"], outputs: ["cdkListboxValueChange"], exportAs: ["cdkListbox"] }, { kind: "directive", type: i3.CdkOption, selector: "[cdkOption]", inputs: ["id", "cdkOption", "cdkOptionTypeaheadLabel", "cdkOptionDisabled", "tabindex"], exportAs: ["cdkOption"] }, { kind: "component", type: ClosingButtonComponent, selector: "button[tedi-closing-button]", inputs: ["size", "iconSize", "icon", "ariaLabel", "showTitle"] }, { kind: "component", type: InfoButtonComponent, selector: "button[tedi-info-button]", inputs: ["aria-label", "color"] }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { 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: TextComponent, selector: "[tedi-text]", inputs: ["modifiers", "color"] }, { kind: "component", type: TagComponent, selector: "tedi-tag", inputs: ["loading", "closable", "type", "ellipsis"], outputs: ["closed"] }, { 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: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11191
11266
|
}
|
|
11192
11267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SelectComponent, decorators: [{
|
|
11193
11268
|
type: Component,
|
|
@@ -11226,6 +11301,213 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImpo
|
|
|
11226
11301
|
args: ["document:click", ["$event"]]
|
|
11227
11302
|
}] } });
|
|
11228
11303
|
|
|
11304
|
+
class SliderComponent {
|
|
11305
|
+
/**
|
|
11306
|
+
* Unique identifier for the underlying range input, used for label association.
|
|
11307
|
+
*/
|
|
11308
|
+
inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
|
|
11309
|
+
/**
|
|
11310
|
+
* Name attribute of the underlying input.
|
|
11311
|
+
*/
|
|
11312
|
+
name = input(...(ngDevMode ? [undefined, { debugName: "name" }] : []));
|
|
11313
|
+
/**
|
|
11314
|
+
* Label rendered above the slider.
|
|
11315
|
+
*/
|
|
11316
|
+
label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
11317
|
+
/**
|
|
11318
|
+
* Hide the label visually while keeping it available to assistive technology, or
|
|
11319
|
+
* `"keep-space"` to also reserve its vertical space.
|
|
11320
|
+
* @default false
|
|
11321
|
+
*/
|
|
11322
|
+
hideLabel = input(false, ...(ngDevMode ? [{ debugName: "hideLabel" }] : []));
|
|
11323
|
+
/**
|
|
11324
|
+
* Marks the field as required.
|
|
11325
|
+
* @default false
|
|
11326
|
+
*/
|
|
11327
|
+
required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
11328
|
+
/**
|
|
11329
|
+
* Minimum allowed value.
|
|
11330
|
+
* @default 0
|
|
11331
|
+
*/
|
|
11332
|
+
min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
11333
|
+
/**
|
|
11334
|
+
* Maximum allowed value.
|
|
11335
|
+
* @default 100
|
|
11336
|
+
*/
|
|
11337
|
+
max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : []));
|
|
11338
|
+
/**
|
|
11339
|
+
* Step size.
|
|
11340
|
+
* @default 1
|
|
11341
|
+
*/
|
|
11342
|
+
step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : []));
|
|
11343
|
+
/**
|
|
11344
|
+
* Current value. Supports two-way binding and reactive forms.
|
|
11345
|
+
*/
|
|
11346
|
+
value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
11347
|
+
/**
|
|
11348
|
+
* Disables the slider.
|
|
11349
|
+
* @default false
|
|
11350
|
+
*/
|
|
11351
|
+
disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
11352
|
+
/**
|
|
11353
|
+
* Marks the slider as invalid for validation purposes.
|
|
11354
|
+
* @default false
|
|
11355
|
+
*/
|
|
11356
|
+
invalid = input(false, ...(ngDevMode ? [{ debugName: "invalid" }] : []));
|
|
11357
|
+
/**
|
|
11358
|
+
* Text rendered to the left of the track (e.g. the minimum value).
|
|
11359
|
+
*/
|
|
11360
|
+
minLabel = input(...(ngDevMode ? [undefined, { debugName: "minLabel" }] : []));
|
|
11361
|
+
/**
|
|
11362
|
+
* Text rendered to the right of the track (e.g. the maximum value).
|
|
11363
|
+
* Ignored when `showCurrentValue` is `true`.
|
|
11364
|
+
*/
|
|
11365
|
+
maxLabel = input(...(ngDevMode ? [undefined, { debugName: "maxLabel" }] : []));
|
|
11366
|
+
/**
|
|
11367
|
+
* Render the current value to the right of the track instead of `maxLabel`.
|
|
11368
|
+
* @default false
|
|
11369
|
+
*/
|
|
11370
|
+
showCurrentValue = input(false, ...(ngDevMode ? [{ debugName: "showCurrentValue" }] : []));
|
|
11371
|
+
/**
|
|
11372
|
+
* Formats the current value for the thumb tooltip and the `showCurrentValue` label.
|
|
11373
|
+
*/
|
|
11374
|
+
valueFormatter = input(...(ngDevMode ? [undefined, { debugName: "valueFormatter" }] : []));
|
|
11375
|
+
/**
|
|
11376
|
+
* Show a tooltip with the current value above the thumb while hovered, focused or dragged.
|
|
11377
|
+
* @default true
|
|
11378
|
+
*/
|
|
11379
|
+
tooltip = input(true, ...(ngDevMode ? [{ debugName: "tooltip" }] : []));
|
|
11380
|
+
/**
|
|
11381
|
+
* FeedbackText component inputs, rendered below the slider.
|
|
11382
|
+
*/
|
|
11383
|
+
feedbackText = input(...(ngDevMode ? [undefined, { debugName: "feedbackText" }] : []));
|
|
11384
|
+
/**
|
|
11385
|
+
* Accessible label used when no visible `label` is provided.
|
|
11386
|
+
*/
|
|
11387
|
+
ariaLabel = input(...(ngDevMode ? [undefined, { debugName: "ariaLabel" }] : []));
|
|
11388
|
+
/**
|
|
11389
|
+
* ID of an element that labels the slider, used when no visible `label` is provided.
|
|
11390
|
+
*/
|
|
11391
|
+
ariaLabelledby = input(...(ngDevMode ? [undefined, { debugName: "ariaLabelledby" }] : []));
|
|
11392
|
+
/**
|
|
11393
|
+
* Human-readable text alternative of the current value.
|
|
11394
|
+
*/
|
|
11395
|
+
ariaValuetext = input(...(ngDevMode ? [undefined, { debugName: "ariaValuetext" }] : []));
|
|
11396
|
+
formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : []));
|
|
11397
|
+
isHovered = signal(false, ...(ngDevMode ? [{ debugName: "isHovered" }] : []));
|
|
11398
|
+
isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : []));
|
|
11399
|
+
isDragging = signal(false, ...(ngDevMode ? [{ debugName: "isDragging" }] : []));
|
|
11400
|
+
onChange = () => { };
|
|
11401
|
+
onTouched = () => { };
|
|
11402
|
+
isDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
11403
|
+
isInvalid = computed(() => this.invalid() || this.feedbackText()?.type === "error", ...(ngDevMode ? [{ debugName: "isInvalid" }] : []));
|
|
11404
|
+
clampedValue = computed(() => Math.min(this.max(), Math.max(this.min(), this.value())), ...(ngDevMode ? [{ debugName: "clampedValue" }] : []));
|
|
11405
|
+
progress = computed(() => {
|
|
11406
|
+
const min = this.min();
|
|
11407
|
+
const max = this.max();
|
|
11408
|
+
if (max === min)
|
|
11409
|
+
return 0;
|
|
11410
|
+
return ((this.clampedValue() - min) / (max - min)) * 100;
|
|
11411
|
+
}, ...(ngDevMode ? [{ debugName: "progress" }] : []));
|
|
11412
|
+
progressStyle = computed(() => ({
|
|
11413
|
+
"--tedi-slider-progress": `${this.progress()}%`,
|
|
11414
|
+
"--tedi-slider-progress-ratio": `${this.progress() / 100}`,
|
|
11415
|
+
}), ...(ngDevMode ? [{ debugName: "progressStyle" }] : []));
|
|
11416
|
+
formattedValue = computed(() => {
|
|
11417
|
+
const formatter = this.valueFormatter();
|
|
11418
|
+
return formatter ? formatter(this.clampedValue()) : `${this.clampedValue()}`;
|
|
11419
|
+
}, ...(ngDevMode ? [{ debugName: "formattedValue" }] : []));
|
|
11420
|
+
rightLabel = computed(() => this.showCurrentValue() ? this.formattedValue() : this.maxLabel(), ...(ngDevMode ? [{ debugName: "rightLabel" }] : []));
|
|
11421
|
+
feedbackId = computed(() => this.feedbackText() ? `${this.inputId()}-feedback` : null, ...(ngDevMode ? [{ debugName: "feedbackId" }] : []));
|
|
11422
|
+
canShowTooltip = computed(() => this.tooltip() && !this.isDisabled(), ...(ngDevMode ? [{ debugName: "canShowTooltip" }] : []));
|
|
11423
|
+
tooltipOpen = computed(() => this.canShowTooltip() &&
|
|
11424
|
+
(this.isHovered() || this.isFocused() || this.isDragging()), ...(ngDevMode ? [{ debugName: "tooltipOpen" }] : []));
|
|
11425
|
+
classes = computed(() => {
|
|
11426
|
+
const classList = ["tedi-slider"];
|
|
11427
|
+
if (this.isDisabled())
|
|
11428
|
+
classList.push("tedi-slider--disabled");
|
|
11429
|
+
if (this.isInvalid())
|
|
11430
|
+
classList.push("tedi-slider--invalid");
|
|
11431
|
+
if (this.isDragging() && !this.isDisabled()) {
|
|
11432
|
+
classList.push("tedi-slider--dragging");
|
|
11433
|
+
}
|
|
11434
|
+
return classList.join(" ");
|
|
11435
|
+
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
11436
|
+
writeValue(value) {
|
|
11437
|
+
this.value.set(value == null || isNaN(value) ? this.min() : value);
|
|
11438
|
+
}
|
|
11439
|
+
registerOnChange(fn) {
|
|
11440
|
+
this.onChange = fn;
|
|
11441
|
+
}
|
|
11442
|
+
registerOnTouched(fn) {
|
|
11443
|
+
this.onTouched = fn;
|
|
11444
|
+
}
|
|
11445
|
+
setDisabledState(disabled) {
|
|
11446
|
+
this.formDisabled.set(disabled);
|
|
11447
|
+
}
|
|
11448
|
+
handleInput(event) {
|
|
11449
|
+
const next = event.target.valueAsNumber;
|
|
11450
|
+
if (isNaN(next))
|
|
11451
|
+
return;
|
|
11452
|
+
this.value.set(next);
|
|
11453
|
+
this.onChange(next);
|
|
11454
|
+
}
|
|
11455
|
+
handlePointerDown() {
|
|
11456
|
+
if (this.isDisabled())
|
|
11457
|
+
return;
|
|
11458
|
+
this.isDragging.set(true);
|
|
11459
|
+
window.addEventListener("pointerup", this.endDrag);
|
|
11460
|
+
window.addEventListener("pointercancel", this.endDrag);
|
|
11461
|
+
}
|
|
11462
|
+
handleFocus() {
|
|
11463
|
+
this.isFocused.set(true);
|
|
11464
|
+
}
|
|
11465
|
+
handleBlur() {
|
|
11466
|
+
this.isFocused.set(false);
|
|
11467
|
+
this.onTouched();
|
|
11468
|
+
}
|
|
11469
|
+
handleMouseEnter() {
|
|
11470
|
+
this.isHovered.set(true);
|
|
11471
|
+
}
|
|
11472
|
+
handleMouseLeave() {
|
|
11473
|
+
this.isHovered.set(false);
|
|
11474
|
+
}
|
|
11475
|
+
ngOnDestroy() {
|
|
11476
|
+
this.endDrag();
|
|
11477
|
+
}
|
|
11478
|
+
endDrag = () => {
|
|
11479
|
+
this.isDragging.set(false);
|
|
11480
|
+
window.removeEventListener("pointerup", this.endDrag);
|
|
11481
|
+
window.removeEventListener("pointercancel", this.endDrag);
|
|
11482
|
+
};
|
|
11483
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11484
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SliderComponent, isStandalone: true, selector: "tedi-slider", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, invalid: { classPropertyName: "invalid", publicName: "invalid", isSignal: true, isRequired: false, transformFunction: null }, minLabel: { classPropertyName: "minLabel", publicName: "minLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLabel: { classPropertyName: "maxLabel", publicName: "maxLabel", isSignal: true, isRequired: false, transformFunction: null }, showCurrentValue: { classPropertyName: "showCurrentValue", publicName: "showCurrentValue", isSignal: true, isRequired: false, transformFunction: null }, valueFormatter: { classPropertyName: "valueFormatter", publicName: "valueFormatter", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null }, feedbackText: { classPropertyName: "feedbackText", publicName: "feedbackText", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabelledby: { classPropertyName: "ariaLabelledby", publicName: "ariaLabelledby", isSignal: true, isRequired: false, transformFunction: null }, ariaValuetext: { classPropertyName: "ariaValuetext", publicName: "ariaValuetext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, host: { properties: { "class": "classes()" } }, providers: [
|
|
11485
|
+
{
|
|
11486
|
+
provide: NG_VALUE_ACCESSOR,
|
|
11487
|
+
useExisting: forwardRef(() => SliderComponent),
|
|
11488
|
+
multi: true,
|
|
11489
|
+
},
|
|
11490
|
+
], ngImport: i0, template: "@if (label()) {\n <label\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [class.sr-only]=\"hideLabel() === true\"\n [class.tedi-slider__label--reserve-space]=\"hideLabel() === 'keep-space'\"\n >{{ label() }}</label>\n}\n<div class=\"tedi-slider__container\">\n <div class=\"tedi-slider__track-row\">\n @if (minLabel() != null) {\n <span class=\"tedi-slider__range-label\" aria-hidden=\"true\">{{ minLabel() }}</span>\n }\n <div class=\"tedi-slider__track\" [style]=\"progressStyle()\">\n <input\n type=\"range\"\n class=\"tedi-slider__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [value]=\"clampedValue()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"isInvalid() ? 'true' : null\"\n [attr.aria-describedby]=\"feedbackId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-valuetext]=\"ariaValuetext()\"\n (input)=\"handleInput($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (pointerdown)=\"handlePointerDown()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n />\n @if (canShowTooltip()) {\n <tedi-tooltip\n openWith=\"none\"\n position=\"top\"\n [offset]=\"0\"\n [open]=\"tooltipOpen()\"\n [trackPosition]=\"isDragging() || isFocused()\"\n >\n <tedi-tooltip-trigger\n class=\"tedi-slider__thumb-anchor\"\n [interactive]=\"false\"\n ></tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ formattedValue() }}</tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n @if (rightLabel() != null) {\n <span\n class=\"tedi-slider__range-label\"\n [attr.aria-hidden]=\"showCurrentValue() ? null : 'true'\"\n [attr.aria-live]=\"showCurrentValue() ? 'polite' : null\"\n >\n {{ rightLabel() }}\n </span>\n }\n </div>\n <div class=\"tedi-slider__addon\">\n <ng-content select=\"[sliderAddon]\" />\n </div>\n</div>\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", styles: [".tedi-slider{display:flex;flex-direction:column;width:100%}.tedi-slider__label--reserve-space{min-height:var(--body-regular-line-height);overflow:hidden;clip-path:inset(50%)}.tedi-slider__container{display:flex;flex-wrap:wrap;gap:var(--form-slider-inner-spacing);align-items:center;width:100%}.tedi-slider__container:has(.tedi-slider__addon:not(:empty)) .tedi-slider__track-row{min-width:8rem}.tedi-slider__track-row{display:flex;flex:1 0 0;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-slider__range-label{flex-shrink:0;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-slider-range-label-text);white-space:nowrap}.tedi-slider__track{--tedi-slider-progress: 0%;--tedi-slider-progress-ratio: 0;position:relative;flex:1 0 0;min-width:0;height:var(--form-slider-height);background:linear-gradient(to right,var(--form-slider-active-background-default) 0%,var(--form-slider-active-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%);border:1px solid var(--form-slider-border-default);border-radius:var(--form-slider-radius)}.tedi-slider__thumb-anchor{position:absolute;top:50%;left:calc(var(--form-slider-thumb-size) / 2 + var(--tedi-slider-progress-ratio) * (100% - var(--form-slider-thumb-size)));display:block;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);pointer-events:none;transform:translate(-50%,-50%)}.tedi-slider__input{--tedi-slider-hit-padding: .625rem;position:absolute;inset:calc(var(--tedi-slider-hit-padding) * -1) 0;width:100%;padding:0;margin:0;appearance:none;cursor:pointer;outline:none;background:transparent;border:0;border-radius:inherit}.tedi-slider__input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-moz-range-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-webkit-slider-thumb{width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);margin-top:calc((var(--form-slider-height) - var(--form-slider-thumb-size)) / 2 + var(--tedi-slider-hit-padding));appearance:none;cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input:hover:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:hover:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:active:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:active:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:focus-visible:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__input:focus-visible:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__addon{display:flex;flex-shrink:0;align-items:center}.tedi-slider__addon:empty{display:none}.tedi-slider:hover:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-hover) 0%,var(--form-slider-active-background-hover) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--dragging:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-active) 0%,var(--form-slider-active-background-active) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-disabled) 0%,var(--form-slider-active-background-disabled) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__input{cursor:not-allowed}.tedi-slider--disabled .tedi-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}.tedi-slider--disabled .tedi-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}\n"], dependencies: [{ 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: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
11491
|
+
}
|
|
11492
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SliderComponent, decorators: [{
|
|
11493
|
+
type: Component,
|
|
11494
|
+
args: [{ selector: "tedi-slider", standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
11495
|
+
LabelComponent,
|
|
11496
|
+
FeedbackTextComponent,
|
|
11497
|
+
TooltipComponent,
|
|
11498
|
+
TooltipTriggerComponent,
|
|
11499
|
+
TooltipContentComponent,
|
|
11500
|
+
], providers: [
|
|
11501
|
+
{
|
|
11502
|
+
provide: NG_VALUE_ACCESSOR,
|
|
11503
|
+
useExisting: forwardRef(() => SliderComponent),
|
|
11504
|
+
multi: true,
|
|
11505
|
+
},
|
|
11506
|
+
], host: {
|
|
11507
|
+
"[class]": "classes()",
|
|
11508
|
+
}, template: "@if (label()) {\n <label\n tedi-label\n [for]=\"inputId()\"\n [required]=\"required()\"\n [class.sr-only]=\"hideLabel() === true\"\n [class.tedi-slider__label--reserve-space]=\"hideLabel() === 'keep-space'\"\n >{{ label() }}</label>\n}\n<div class=\"tedi-slider__container\">\n <div class=\"tedi-slider__track-row\">\n @if (minLabel() != null) {\n <span class=\"tedi-slider__range-label\" aria-hidden=\"true\">{{ minLabel() }}</span>\n }\n <div class=\"tedi-slider__track\" [style]=\"progressStyle()\">\n <input\n type=\"range\"\n class=\"tedi-slider__input\"\n [id]=\"inputId()\"\n [attr.name]=\"name()\"\n [attr.min]=\"min()\"\n [attr.max]=\"max()\"\n [attr.step]=\"step()\"\n [value]=\"clampedValue()\"\n [disabled]=\"isDisabled()\"\n [required]=\"required()\"\n [attr.aria-invalid]=\"isInvalid() ? 'true' : null\"\n [attr.aria-describedby]=\"feedbackId()\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-labelledby]=\"ariaLabelledby()\"\n [attr.aria-valuetext]=\"ariaValuetext()\"\n (input)=\"handleInput($event)\"\n (mouseenter)=\"handleMouseEnter()\"\n (mouseleave)=\"handleMouseLeave()\"\n (pointerdown)=\"handlePointerDown()\"\n (focus)=\"handleFocus()\"\n (blur)=\"handleBlur()\"\n />\n @if (canShowTooltip()) {\n <tedi-tooltip\n openWith=\"none\"\n position=\"top\"\n [offset]=\"0\"\n [open]=\"tooltipOpen()\"\n [trackPosition]=\"isDragging() || isFocused()\"\n >\n <tedi-tooltip-trigger\n class=\"tedi-slider__thumb-anchor\"\n [interactive]=\"false\"\n ></tedi-tooltip-trigger>\n <tedi-tooltip-content>{{ formattedValue() }}</tedi-tooltip-content>\n </tedi-tooltip>\n }\n </div>\n @if (rightLabel() != null) {\n <span\n class=\"tedi-slider__range-label\"\n [attr.aria-hidden]=\"showCurrentValue() ? null : 'true'\"\n [attr.aria-live]=\"showCurrentValue() ? 'polite' : null\"\n >\n {{ rightLabel() }}\n </span>\n }\n </div>\n <div class=\"tedi-slider__addon\">\n <ng-content select=\"[sliderAddon]\" />\n </div>\n</div>\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", styles: [".tedi-slider{display:flex;flex-direction:column;width:100%}.tedi-slider__label--reserve-space{min-height:var(--body-regular-line-height);overflow:hidden;clip-path:inset(50%)}.tedi-slider__container{display:flex;flex-wrap:wrap;gap:var(--form-slider-inner-spacing);align-items:center;width:100%}.tedi-slider__container:has(.tedi-slider__addon:not(:empty)) .tedi-slider__track-row{min-width:8rem}.tedi-slider__track-row{display:flex;flex:1 0 0;gap:var(--layout-grid-gutters-08);align-items:center;min-width:0}.tedi-slider__range-label{flex-shrink:0;font-size:var(--body-regular-size);line-height:var(--body-regular-line-height);color:var(--form-slider-range-label-text);white-space:nowrap}.tedi-slider__track{--tedi-slider-progress: 0%;--tedi-slider-progress-ratio: 0;position:relative;flex:1 0 0;min-width:0;height:var(--form-slider-height);background:linear-gradient(to right,var(--form-slider-active-background-default) 0%,var(--form-slider-active-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%);border:1px solid var(--form-slider-border-default);border-radius:var(--form-slider-radius)}.tedi-slider__thumb-anchor{position:absolute;top:50%;left:calc(var(--form-slider-thumb-size) / 2 + var(--tedi-slider-progress-ratio) * (100% - var(--form-slider-thumb-size)));display:block;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);pointer-events:none;transform:translate(-50%,-50%)}.tedi-slider__input{--tedi-slider-hit-padding: .625rem;position:absolute;inset:calc(var(--tedi-slider-hit-padding) * -1) 0;width:100%;padding:0;margin:0;appearance:none;cursor:pointer;outline:none;background:transparent;border:0;border-radius:inherit}.tedi-slider__input::-webkit-slider-runnable-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-moz-range-track{width:100%;height:100%;background:transparent;border:0}.tedi-slider__input::-webkit-slider-thumb{width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);margin-top:calc((var(--form-slider-height) - var(--form-slider-thumb-size)) / 2 + var(--tedi-slider-hit-padding));appearance:none;cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input::-moz-range-thumb{box-sizing:border-box;width:var(--form-slider-thumb-size);height:var(--form-slider-thumb-size);cursor:pointer;background:var(--form-slider-thumb-background-default);border:var(--tedi-borders-02) solid var(--form-slider-thumb-border-default);border-radius:50%}.tedi-slider__input:hover:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:hover:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-hover);border-color:var(--form-slider-thumb-border-hover)}.tedi-slider__input:active:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:active:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-active);border-color:var(--form-slider-thumb-border-active)}.tedi-slider__input:focus-visible:not(:disabled)::-webkit-slider-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__input:focus-visible:not(:disabled)::-moz-range-thumb{background:var(--form-slider-thumb-background-focus);border-color:var(--form-slider-thumb-border-focus);box-shadow:0 0 0 var(--tedi-borders-01) var(--tedi-neutral-100),0 0 0 calc(var(--tedi-borders-01) + var(--tedi-borders-02)) var(--form-slider-thumb-border-focus)}.tedi-slider__addon{display:flex;flex-shrink:0;align-items:center}.tedi-slider__addon:empty{display:none}.tedi-slider:hover:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-hover) 0%,var(--form-slider-active-background-hover) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--dragging:not(.tedi-slider--disabled) .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-active) 0%,var(--form-slider-active-background-active) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__track{background:linear-gradient(to right,var(--form-slider-active-background-disabled) 0%,var(--form-slider-active-background-disabled) var(--tedi-slider-progress),var(--form-slider-passive-background-default) var(--tedi-slider-progress),var(--form-slider-passive-background-default) 100%)}.tedi-slider--disabled .tedi-slider__input{cursor:not-allowed}.tedi-slider--disabled .tedi-slider__input::-webkit-slider-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}.tedi-slider--disabled .tedi-slider__input::-moz-range-thumb{cursor:not-allowed;background:var(--form-slider-thumb-background-disabled);border-color:var(--form-slider-thumb-border-disabled)}\n"] }]
|
|
11509
|
+
}], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], invalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "invalid", required: false }] }], minLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLabel", required: false }] }], maxLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLabel", required: false }] }], showCurrentValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCurrentValue", required: false }] }], valueFormatter: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueFormatter", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], feedbackText: [{ type: i0.Input, args: [{ isSignal: true, alias: "feedbackText", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaLabelledby: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabelledby", required: false }] }], ariaValuetext: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaValuetext", required: false }] }] } });
|
|
11510
|
+
|
|
11229
11511
|
class ToggleComponent {
|
|
11230
11512
|
/**
|
|
11231
11513
|
* The unique identifier for the input element that is associated with label.
|
|
@@ -12354,7 +12636,11 @@ class TextGroupComponent {
|
|
|
12354
12636
|
});
|
|
12355
12637
|
}, ...(ngDevMode ? [{ debugName: "breakpointInputs" }] : []));
|
|
12356
12638
|
classes = computed(() => {
|
|
12357
|
-
const
|
|
12639
|
+
const { type, labelWidth } = this.breakpointInputs();
|
|
12640
|
+
const classList = ['tedi-text-group', `tedi-text-group--${type}`];
|
|
12641
|
+
if (labelWidth) {
|
|
12642
|
+
classList.push('tedi-text-group--fixed-label');
|
|
12643
|
+
}
|
|
12358
12644
|
return classList.join(" ");
|
|
12359
12645
|
}, ...(ngDevMode ? [{ debugName: "classes" }] : []));
|
|
12360
12646
|
ngAfterContentChecked() {
|
|
@@ -12367,22 +12653,22 @@ class TextGroupComponent {
|
|
|
12367
12653
|
}
|
|
12368
12654
|
}
|
|
12369
12655
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"
|
|
12656
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.24", type: TextGroupComponent, isStandalone: true, selector: "tedi-text-group", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, labelWidth: { classPropertyName: "labelWidth", publicName: "labelWidth", isSignal: true, isRequired: false, transformFunction: null }, xs: { classPropertyName: "xs", publicName: "xs", isSignal: true, isRequired: false, transformFunction: null }, sm: { classPropertyName: "sm", publicName: "sm", isSignal: true, isRequired: false, transformFunction: null }, md: { classPropertyName: "md", publicName: "md", isSignal: true, isRequired: false, transformFunction: null }, lg: { classPropertyName: "lg", publicName: "lg", isSignal: true, isRequired: false, transformFunction: null }, xl: { classPropertyName: "xl", publicName: "xl", isSignal: true, isRequired: false, transformFunction: null }, xxl: { classPropertyName: "xxl", publicName: "xxl", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "textGroupLabel", first: true, predicate: TextGroupLabelComponent, descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "[tedi-label]", inputs: ["size", "required", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12371
12657
|
}
|
|
12372
12658
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupComponent, decorators: [{
|
|
12373
12659
|
type: Component,
|
|
12374
12660
|
args: [{ standalone: true, selector: "tedi-text-group", imports: [
|
|
12375
12661
|
LabelComponent
|
|
12376
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"
|
|
12662
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<dl [class]=\"classes()\" [style.--_label-width]=\"breakpointInputs().labelWidth\">\n <dt [attr.aria-label]=\"labelText()\">\n <span tedi-label aria-hidden=\"true\">\n <ng-content select=\"tedi-text-group-label\"></ng-content>\n </span>\n </dt>\n <dd>\n <ng-content select=\"tedi-text-group-value\"></ng-content>\n </dd>\n</dl>\n", styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
|
|
12377
12663
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], labelWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelWidth", required: false }] }], textGroupLabel: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TextGroupLabelComponent), { ...{ read: ElementRef }, isSignal: true }] }], xs: [{ type: i0.Input, args: [{ isSignal: true, alias: "xs", required: false }] }], sm: [{ type: i0.Input, args: [{ isSignal: true, alias: "sm", required: false }] }], md: [{ type: i0.Input, args: [{ isSignal: true, alias: "md", required: false }] }], lg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lg", required: false }] }], xl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xl", required: false }] }], xxl: [{ type: i0.Input, args: [{ isSignal: true, alias: "xxl", required: false }] }] } });
|
|
12378
12664
|
|
|
12379
12665
|
class TextGroupValueComponent {
|
|
12380
12666
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupValueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
12381
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12667
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.24", type: TextGroupValueComponent, isStandalone: true, selector: "tedi-text-group-value", ngImport: i0, template: `<ng-content />`, isInline: true, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
12382
12668
|
}
|
|
12383
12669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: TextGroupValueComponent, decorators: [{
|
|
12384
12670
|
type: Component,
|
|
12385
|
-
args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
|
|
12671
|
+
args: [{ selector: "tedi-text-group-value", template: `<ng-content />`, standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: ["tedi-text-group{display:block}.tedi-text-group--horizontal{display:flex;gap:1rem;align-items:flex-start}.tedi-text-group--fixed-label>dt{flex-shrink:0}.tedi-text-group>dt{width:var(--_label-width)}tedi-text-group-label{display:flex;flex-shrink:0}tedi-text-group-value{display:flex;gap:var(--text-group-value-inner-spacing);align-items:center}\n"] }]
|
|
12386
12672
|
}] });
|
|
12387
12673
|
|
|
12388
12674
|
class CarouselSlideDirective {
|
|
@@ -18195,7 +18481,7 @@ class SideNavItemComponent {
|
|
|
18195
18481
|
}
|
|
18196
18482
|
}
|
|
18197
18483
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
18198
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, styleAttribute: "display: contents" }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "<li [class]=\"classes()\">\n @if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n <tedi-sidenav-group-title>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-sidenav-group-title>\n </ng-container>\n <ng-template #mobileLink>\n <ng-container *ngIf=\"route(); else mobileHref\">\n <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #mobileHref>\n <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n </ng-template>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n } @else if (sidenavService.tooltipEnabled()) {\n <tedi-tooltip position=\"right\">\n <tedi-tooltip-trigger>\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content position=\"right\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n\n <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (dropdown) {\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n }\n </button>\n </ng-container>\n <ng-template #hasLink>\n <ng-container\n *ngIf=\"\n (dropdown && sidenavService.isCollapsed()) ||\n (dropdown && sidenavService.isMobile());\n else plainLink\n \"\n >\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </button>\n </ng-container>\n <ng-template #plainLink>\n @if (route()) {\n <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (dropdown) {\n <button\n class=\"tedi-sidenav-item__caret-button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"dropdown.open()\"\n >\n <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n <div class=\"tedi-sidenav-item__caret-container\">\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </div>\n </button>\n }\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as icon) {\n @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n }\n }\n <span class=\"tedi-sidenav-item__text\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text-default);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text-default);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideNavGroupTitleComponent, selector: "tedi-sidenav-group-title" }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "timeoutDelay"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger" }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18484
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.24", type: SideNavItemComponent, isStandalone: true, selector: "tedi-sidenav-item", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, route: { classPropertyName: "route", publicName: "route", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "presentation" }, styleAttribute: "display: contents" }, queries: [{ propertyName: "dropdown", first: true, predicate: i0.forwardRef(() => SideNavDropdownComponent), descendants: true }], ngImport: i0, template: "<li [class]=\"classes()\">\n @if (sidenavService.isMobile()) {\n @if (sidenavService.isMobileItemOpen() && dropdown?.open()) {\n <ng-container *ngIf=\"!href() && !route(); else mobileLink\">\n <tedi-sidenav-group-title>\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </tedi-sidenav-group-title>\n </ng-container>\n <ng-template #mobileLink>\n <ng-container *ngIf=\"route(); else mobileHref\">\n <a class=\"tedi-sidenav-item__link\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-container>\n <ng-template #mobileHref>\n <a class=\"tedi-sidenav-item__link\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n </ng-template>\n </ng-template>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n } @else if (sidenavService.tooltipEnabled()) {\n <tedi-tooltip position=\"right\">\n <tedi-tooltip-trigger>\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n </tedi-tooltip-trigger>\n <tedi-tooltip-content position=\"right\">\n {{ textContent() }}\n </tedi-tooltip-content>\n </tedi-tooltip>\n } @else {\n <div class=\"tedi-sidenav-item__trigger\">\n <ng-container *ngTemplateOutlet=\"buttonOrLink\"></ng-container>\n </div>\n }\n\n <ng-content select=\"tedi-sidenav-dropdown\"></ng-content>\n</li>\n\n<ng-template #buttonOrLink>\n <ng-container *ngIf=\"!href() && !route(); else hasLink\">\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown?.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n @if (dropdown) {\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n }\n </button>\n </ng-container>\n <ng-template #hasLink>\n <ng-container\n *ngIf=\"\n (dropdown && sidenavService.isCollapsed()) ||\n (dropdown && sidenavService.isMobile());\n else plainLink\n \"\n >\n <button class=\"tedi-sidenav-item__title\" (click)=\"toggleDropdown()\" [attr.aria-expanded]=\"dropdown.open()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </button>\n </ng-container>\n <ng-template #plainLink>\n @if (route()) {\n <a class=\"tedi-sidenav-item__title\" [routerLink]=\"route()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n } @else {\n <a class=\"tedi-sidenav-item__title\" [href]=\"href()\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </a>\n }\n @if (dropdown) {\n <button\n class=\"tedi-sidenav-item__caret-button\"\n (click)=\"toggleDropdown()\"\n [attr.aria-expanded]=\"dropdown.open()\"\n >\n <span class=\"sr-only\">{{ 'sidenav.toggleSubmenu' | tediTranslate: textContent(): dropdown.open() }}</span>\n <div class=\"tedi-sidenav-item__caret-container\">\n <tedi-icon\n name=\"expand_more\"\n class=\"tedi-sidenav-item__caret\"\n color=\"white\"\n [attr.data-open]=\"dropdown.open() ? 'true' : 'false'\"\n />\n </div>\n </button>\n }\n </ng-template>\n </ng-template>\n</ng-template>\n\n<ng-template #content>\n @if (icon(); as icon) {\n @if (!(sidenavService.isMobileItemOpen() && dropdown?.open())) {\n <tedi-icon [name]=\"icon\" color=\"white\" class=\"tedi-sidenav-item__icon\" />\n }\n }\n <span class=\"tedi-sidenav-item__text\">\n <ng-content></ng-content>\n </span>\n</ng-template>\n", styles: [".tedi-sidenav-item{position:relative;display:flex;flex-direction:column;font-size:var(--_sidenav-item-font-size);line-height:var(--_sidenav-item-line-height)}.tedi-sidenav-item--hidden{display:none}.tedi-sidenav-item--selected .tedi-sidenav-item__trigger{background:var(--navigation-vertical-item-background-active)}.tedi-sidenav-item--selected .tedi-sidenav-item__text{font-weight:var(--body-bold-weight)}.tedi-sidenav-item__trigger{--_gap: var(--navigation-vertical-item-inner-spacing);position:relative;display:flex;gap:var(--_gap);width:100%;cursor:pointer}.tedi-sidenav-item__trigger:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__trigger:has(>.tedi-sidenav-item__caret-button:hover){background:transparent}.tedi-sidenav-item__title{display:flex;gap:var(--_gap);align-items:center;width:100%;min-height:var(--_sidenav-item-min-height);padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);font-size:inherit;color:var(--navigation-vertical-item-text-default);text-align:start;text-decoration:none;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__title:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__title:not(:only-child){max-width:calc(100% - var(--_sidenav-item-padding-right) - var(--_sidenav-item-caret-size) - var(--_gap));padding-right:0}.tedi-sidenav-item__icon{font-size:var(--_sidenav-item-icon-size)!important}.tedi-sidenav-item__caret-button{display:flex;place-items:center center;min-height:var(--_sidenav-item-min-height);padding:0;font-size:inherit;cursor:pointer;background:transparent;border:0}.tedi-sidenav-item__caret-button:hover .tedi-sidenav-item__caret-container{background-color:var(--navigation-vertical-item-background-arrow-button-active)}.tedi-sidenav-item__caret-button:focus-visible{position:relative;z-index:1;outline:none}.tedi-sidenav-item__caret-button:focus-visible .tedi-sidenav-item__caret-container{box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__caret-button:last-child{padding-right:var(--_sidenav-item-padding-right)}.tedi-sidenav-item__caret-container{display:flex;align-items:center;justify-content:center;width:fit-content;height:fit-content;border-radius:var(--button-radius-sm)}.tedi-sidenav-item__caret{margin-left:auto;font-size:var(--_sidenav-item-caret-size)!important;transition:transform var(--_sidenav-transition-duration) ease}.tedi-sidenav-item__caret[data-open=true]{transform:rotate(180deg)}.tedi-sidenav-item__text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:enable-wrap 0s var(--_sidenav-transition-duration) forwards}.tedi-sidenav-item__link{padding:var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-right) var(--_sidenav-item-padding-y) var(--_sidenav-item-padding-left);color:var(--navigation-vertical-item-text-default);text-decoration:none}.tedi-sidenav-item__link:hover{background:var(--navigation-vertical-item-background-hover)}.tedi-sidenav-item__link:focus-visible{position:relative;z-index:1;outline:none;background:var(--navigation-vertical-item-background-focus);box-shadow:var(--_sidenav-focus-ring)}.tedi-sidenav-item__link .tedi-sidenav-item__text{white-space:wrap}@keyframes enable-wrap{to{max-width:none;white-space:normal}}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "tedi-icon", inputs: ["name", "size", "color", "background", "variant", "type", "label"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SideNavGroupTitleComponent, selector: "tedi-sidenav-group-title" }, { kind: "component", type: TooltipComponent, selector: "tedi-tooltip", inputs: ["position", "preventOverflow", "openWith", "open", "trackPosition", "timeoutDelay", "offset"], outputs: ["openChange"] }, { kind: "component", type: TooltipTriggerComponent, selector: "tedi-tooltip-trigger", inputs: ["interactive"] }, { kind: "component", type: TooltipContentComponent, selector: "tedi-tooltip-content", inputs: ["maxWidth"] }, { kind: "pipe", type: TediTranslationPipe, name: "tediTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
18199
18485
|
}
|
|
18200
18486
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.24", ngImport: i0, type: SideNavItemComponent, decorators: [{
|
|
18201
18487
|
type: Component,
|
|
@@ -18823,5 +19109,5 @@ function provideTedi(config = {}) {
|
|
|
18823
19109
|
* Generated bundle index. Do not edit.
|
|
18824
19110
|
*/
|
|
18825
19111
|
|
|
18826
|
-
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, 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, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, 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 };
|
|
19112
|
+
export { AVAILABLE_LANGUAGES, AccordionComponent, AccordionItemComponent, AccordionItemContentComponent, AccordionItemHeaderComponent, AlertComponent, AttachmentActionsComponent, AttachmentComponent, BREAKPOINTS, BaseButtonDirective, 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, LANGUAGE_COOKIE_NAME, LANGUAGE_FALLBACK_VALUE, LabelComponent, LinkComponent, ListComponent, MODAL_DATA, MODAL_SIZE, ModalComponent, ModalContentComponent, ModalFooterComponent, ModalHeaderComponent, ModalRef, ModalService, NumberFieldComponent, PaginationComponent, PopoverComponent, PopoverContentComponent, PopoverTriggerDirective, ProgressBarComponent, RadioCardComponent, RadioCardGroupComponent, RadioComponent, RadioGroupComponent, RowComponent, ScrollFadeComponent, SelectComponent, SelectOptionTemplateDirective, SelectValueTemplateDirective, SeparatorComponent, ShowAtDirective, SideNavComponent, SideNavDropdownComponent, SideNavDropdownGroupComponent, SideNavDropdownItemComponent, SideNavGroupTitleComponent, SideNavItemComponent, SideNavOverlayComponent, SideNavToggleComponent, SliderComponent, SpecialOptionControls, SpinnerComponent, StatusBadgeComponent, StatusIndicatorComponent, TAG_GAP, TEDI_FORM_FIELD_CONTROL, 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 };
|
|
18827
19113
|
//# sourceMappingURL=tedi-design-system-angular-tedi.mjs.map
|