@eui/eds 23.0.0-alpha.11 → 23.0.0-alpha.13
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/docs/changelog.html +79 -0
- package/docs/index.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/llms.txt +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-charts-eds-chart-legend.mjs +6 -6
- package/fesm2022/eui-eds-charts-eds-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-gauge-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-geo-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-sparkline.mjs +3 -3
- package/fesm2022/eui-eds-eds-accordion.mjs +9 -9
- package/fesm2022/eui-eds-eds-alert.mjs +6 -6
- package/fesm2022/eui-eds-eds-autocomplete.mjs +21 -17
- package/fesm2022/eui-eds-eds-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-avatar.mjs +27 -27
- package/fesm2022/eui-eds-eds-badge.mjs +5 -4
- package/fesm2022/eui-eds-eds-badge.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-banner.mjs +21 -21
- package/fesm2022/eui-eds-eds-block-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-block-document.mjs +3 -3
- package/fesm2022/eui-eds-eds-blockquote.mjs +3 -3
- package/fesm2022/eui-eds-eds-breadcrumb.mjs +6 -6
- package/fesm2022/eui-eds-eds-button-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-calendar.mjs +33 -33
- package/fesm2022/eui-eds-eds-card.mjs +30 -30
- package/fesm2022/eui-eds-eds-carousel.mjs +6 -6
- package/fesm2022/eui-eds-eds-chip-list.mjs +9 -9
- package/fesm2022/eui-eds-eds-chip.mjs +5 -4
- package/fesm2022/eui-eds-eds-chip.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-dashboard-card.mjs +72 -72
- package/fesm2022/eui-eds-eds-date-block.mjs +3 -3
- package/fesm2022/eui-eds-eds-datepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-dialog.mjs +15 -15
- package/fesm2022/eui-eds-eds-dimmer.mjs +3 -3
- package/fesm2022/eui-eds-eds-disable-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-discussion-thread.mjs +6 -6
- package/fesm2022/eui-eds-eds-dropdown.mjs +9 -9
- package/fesm2022/eui-eds-eds-fab-button.mjs +6 -6
- package/fesm2022/eui-eds-eds-feedback-message.mjs +3 -3
- package/fesm2022/eui-eds-eds-fieldset.mjs +15 -15
- package/fesm2022/eui-eds-eds-file-upload.mjs +12 -12
- package/fesm2022/eui-eds-eds-growl.mjs +6 -6
- package/fesm2022/eui-eds-eds-icon-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-state.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon.mjs +6 -6
- package/fesm2022/eui-eds-eds-input-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-checkbox.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-group.mjs +9 -9
- package/fesm2022/eui-eds-eds-input-icon.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-number.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-radio.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-text.mjs +3 -3
- package/fesm2022/eui-eds-eds-label.mjs +3 -3
- package/fesm2022/eui-eds-eds-language-selector.mjs +6 -6
- package/fesm2022/eui-eds-eds-link.mjs +4 -4
- package/fesm2022/eui-eds-eds-link.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-list-items.mjs +6 -6
- package/fesm2022/eui-eds-eds-menu.mjs +6 -6
- package/fesm2022/eui-eds-eds-message-box.mjs +9 -9
- package/fesm2022/eui-eds-eds-multiselect.mjs +6 -6
- package/fesm2022/eui-eds-eds-navbar.mjs +6 -6
- package/fesm2022/eui-eds-eds-overlay.mjs +21 -21
- package/fesm2022/eui-eds-eds-page.mjs +51 -51
- package/fesm2022/eui-eds-eds-paginator.mjs +3 -3
- package/fesm2022/eui-eds-eds-popover.mjs +8 -7
- package/fesm2022/eui-eds-eds-popover.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-progress-bar.mjs +3 -3
- package/fesm2022/eui-eds-eds-progress-circle.mjs +3 -3
- package/fesm2022/eui-eds-eds-rating.mjs +3 -3
- package/fesm2022/eui-eds-eds-select.mjs +15 -15
- package/fesm2022/eui-eds-eds-shell.mjs +69 -69
- package/fesm2022/eui-eds-eds-skeleton.mjs +3 -3
- package/fesm2022/eui-eds-eds-slider.mjs +3 -3
- package/fesm2022/eui-eds-eds-snc.mjs +3 -3
- package/fesm2022/eui-eds-eds-split-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-table.mjs +33 -33
- package/fesm2022/eui-eds-eds-tabs.mjs +39 -33
- package/fesm2022/eui-eds-eds-tabs.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tag-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-tag.mjs +3 -3
- package/fesm2022/eui-eds-eds-textarea.mjs +6 -6
- package/fesm2022/eui-eds-eds-timeline.mjs +6 -6
- package/fesm2022/eui-eds-eds-timepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-toggle-group.mjs +6 -6
- package/fesm2022/eui-eds-eds-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-tooltip.mjs +6 -6
- package/fesm2022/eui-eds-eds-tree-list.mjs +21 -21
- package/fesm2022/eui-eds-eds-tree.mjs +9 -9
- package/fesm2022/eui-eds-eds-user-profile.mjs +9 -9
- package/fesm2022/eui-eds-eds-wizard.mjs +6 -6
- package/fesm2022/eui-eds-shared.mjs +27 -27
- package/package.json +1 -1
|
@@ -42,10 +42,10 @@ class EdsTooltipContainer {
|
|
|
42
42
|
get showHide() {
|
|
43
43
|
return 'visible';
|
|
44
44
|
}
|
|
45
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
46
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
45
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTooltipContainer, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
46
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTooltipContainer, isStandalone: true, selector: "eds-tooltip-container", inputs: { config: "config" }, host: { properties: { "attr.data-e2e": "this.e2e", "class": "this.cssClasses", "@showHide": "this.showHide" } }, ngImport: i0, template: "<div class=\"eds-tooltip__content\" [innerHTML]=\"config.tooltipContent\"></div>\n", styles: [".eui-21 .eds-tooltip-panel{margin-bottom:var(--eds-sp-2xl);background:transparent!important}.eui-21 .eds-tooltip-panel.cdk-overlay-pane{background:transparent!important}.eui-21 .eds-tooltip-panel.eds-tooltip--above :host{margin-bottom:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--above :host:before{border-color:var(--eds-c-surface-inverted) transparent transparent transparent;bottom:2px;left:calc(50% - 8px);transform:translateY(16px)}.eui-21 .eds-tooltip-panel.eds-tooltip--below :host{margin-top:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--below :host:before{border-color:transparent transparent var(--eds-c-surface-inverted) transparent;left:calc(50% - 8px);top:0;transform:translateY(-100%)}.eui-21 .eds-tooltip-panel.eds-tooltip--left :host,.eui-21 .eds-tooltip-panel.eds-tooltip--before :host{margin-right:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--left :host:before,.eui-21 .eds-tooltip-panel.eds-tooltip--before :host:before{border-color:transparent transparent transparent var(--eds-c-surface-inverted);right:-6px;top:50%;transform:translate(8px,-8px)}.eui-21 .eds-tooltip-panel.eds-tooltip--right :host,.eui-21 .eds-tooltip-panel.eds-tooltip--after :host{margin-left:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--right :host:before,.eui-21 .eds-tooltip-panel.eds-tooltip--after :host:before{border-color:transparent var(--eds-c-surface-inverted) transparent transparent;left:-6px;top:50%;transform:translate(-8px,-8px)}.eui-21 :host{max-width:50vw;display:block;position:relative;background:transparent}.eui-21 :host:before{border-color:transparent;border-style:solid;border-width:8px;bottom:0;content:\"\";display:block;height:0;position:absolute;width:0}.eui-21 :host.eds-tooltip--content-left{text-align:left}.eui-21 :host.eds-tooltip--content-right{text-align:right}.eui-21 :host.eds-tooltip--content-center{text-align:center}.eui-21 :host.eds-tooltip--content-justify{text-align:justify}.eui-21 :host .eds-tooltip__content{background-color:var(--eds-c-surface-inverted);border-radius:var(--eds-br-s);box-shadow:var(--eds-sh-2);color:var(--eds-c-on-surface-inverted);letter-spacing:.05em;padding:var(--eds-sp-2xs);white-space:pre-line;font:var(--eds-f-label-s)}\n"], animations: [showHide], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
47
47
|
}
|
|
48
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
48
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTooltipContainer, decorators: [{
|
|
49
49
|
type: Component,
|
|
50
50
|
args: [{ selector: 'eds-tooltip-container', animations: [showHide], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"eds-tooltip__content\" [innerHTML]=\"config.tooltipContent\"></div>\n", styles: [".eui-21 .eds-tooltip-panel{margin-bottom:var(--eds-sp-2xl);background:transparent!important}.eui-21 .eds-tooltip-panel.cdk-overlay-pane{background:transparent!important}.eui-21 .eds-tooltip-panel.eds-tooltip--above :host{margin-bottom:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--above :host:before{border-color:var(--eds-c-surface-inverted) transparent transparent transparent;bottom:2px;left:calc(50% - 8px);transform:translateY(16px)}.eui-21 .eds-tooltip-panel.eds-tooltip--below :host{margin-top:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--below :host:before{border-color:transparent transparent var(--eds-c-surface-inverted) transparent;left:calc(50% - 8px);top:0;transform:translateY(-100%)}.eui-21 .eds-tooltip-panel.eds-tooltip--left :host,.eui-21 .eds-tooltip-panel.eds-tooltip--before :host{margin-right:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--left :host:before,.eui-21 .eds-tooltip-panel.eds-tooltip--before :host:before{border-color:transparent transparent transparent var(--eds-c-surface-inverted);right:-6px;top:50%;transform:translate(8px,-8px)}.eui-21 .eds-tooltip-panel.eds-tooltip--right :host,.eui-21 .eds-tooltip-panel.eds-tooltip--after :host{margin-left:var(--eds-sp-s)}.eui-21 .eds-tooltip-panel.eds-tooltip--right :host:before,.eui-21 .eds-tooltip-panel.eds-tooltip--after :host:before{border-color:transparent var(--eds-c-surface-inverted) transparent transparent;left:-6px;top:50%;transform:translate(-8px,-8px)}.eui-21 :host{max-width:50vw;display:block;position:relative;background:transparent}.eui-21 :host:before{border-color:transparent;border-style:solid;border-width:8px;bottom:0;content:\"\";display:block;height:0;position:absolute;width:0}.eui-21 :host.eds-tooltip--content-left{text-align:left}.eui-21 :host.eds-tooltip--content-right{text-align:right}.eui-21 :host.eds-tooltip--content-center{text-align:center}.eui-21 :host.eds-tooltip--content-justify{text-align:justify}.eui-21 :host .eds-tooltip__content{background-color:var(--eds-c-surface-inverted);border-radius:var(--eds-br-s);box-shadow:var(--eds-sh-2);color:var(--eds-c-on-surface-inverted);letter-spacing:.05em;padding:var(--eds-sp-2xs);white-space:pre-line;font:var(--eds-f-label-s)}\n"] }]
|
|
51
51
|
}], propDecorators: { config: [{
|
|
@@ -361,10 +361,10 @@ class EdsTooltip {
|
|
|
361
361
|
this.fallbackOverlayY = 'center';
|
|
362
362
|
}
|
|
363
363
|
}
|
|
364
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
365
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.
|
|
364
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTooltip, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
365
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "22.1.2", type: EdsTooltip, isStandalone: true, selector: "[edsTooltip]", inputs: { e2eAttr: "e2eAttr", showDelay: ["showDelay", "showDelay", numberAttribute], hideDelay: ["hideDelay", "hideDelay", numberAttribute], contentAlignment: "contentAlignment", position: "position", isDisabled: ["isDisabled", "isDisabled", booleanAttribute], tooltipContent: ["edsTooltip", "tooltipContent"], edsTooltipPrimary: ["edsTooltipPrimary", "edsTooltipPrimary", booleanAttribute], edsTooltipSecondary: ["edsTooltipSecondary", "edsTooltipSecondary", booleanAttribute], edsTooltipInfo: ["edsTooltipInfo", "edsTooltipInfo", booleanAttribute], edsTooltipSuccess: ["edsTooltipSuccess", "edsTooltipSuccess", booleanAttribute], edsTooltipWarning: ["edsTooltipWarning", "edsTooltipWarning", booleanAttribute], edsTooltipDanger: ["edsTooltipDanger", "edsTooltipDanger", booleanAttribute], edsTooltipAccent: ["edsTooltipAccent", "edsTooltipAccent", booleanAttribute] }, host: { listeners: { "mouseenter": "mouseEntering($event)", "focus": "focused($event)", "keydown.esc": "onEscapePressed($any($event))" } }, exportAs: ["edsTooltip"], usesOnChanges: true, ngImport: i0 }); }
|
|
366
366
|
}
|
|
367
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
367
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTooltip, decorators: [{
|
|
368
368
|
type: Directive,
|
|
369
369
|
args: [{
|
|
370
370
|
selector: '[edsTooltip]',
|
|
@@ -22,10 +22,10 @@ import { EDS_INPUT_ICON } from '@eui/eds/eds-input-icon';
|
|
|
22
22
|
* Provides a structured container for rich content beyond simple labels.
|
|
23
23
|
*/
|
|
24
24
|
class EdsTreeListItemContent {
|
|
25
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
25
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemContent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsTreeListItemContent, isStandalone: true, selector: "eds-tree-list-item-content", host: { classAttribute: "eds-tree-list-item-content" }, ngImport: i0, template: '<ng-content/>', isInline: true }); }
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemContent, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{
|
|
31
31
|
selector: 'eds-tree-list-item-content',
|
|
@@ -40,10 +40,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
40
40
|
* Replaces the default label rendering with custom HTML or components.
|
|
41
41
|
*/
|
|
42
42
|
class EdsTreeListItemLabel {
|
|
43
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
44
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
43
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemLabel, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
44
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsTreeListItemLabel, isStandalone: true, selector: "eds-tree-list-item-label", ngImport: i0 }); }
|
|
45
45
|
}
|
|
46
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
46
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemLabel, decorators: [{
|
|
47
47
|
type: Directive,
|
|
48
48
|
args: [{
|
|
49
49
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -54,10 +54,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
54
54
|
* Directive for projecting additional details content below the main label.
|
|
55
55
|
*/
|
|
56
56
|
class EdsTreeListItemDetails {
|
|
57
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
58
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
57
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemDetails, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
58
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsTreeListItemDetails, isStandalone: true, selector: "eds-tree-list-item-details", ngImport: i0 }); }
|
|
59
59
|
}
|
|
60
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
60
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemDetails, decorators: [{
|
|
61
61
|
type: Directive,
|
|
62
62
|
args: [{
|
|
63
63
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -68,10 +68,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
68
68
|
* Directive for projecting custom container content within eds-tree-list-item.
|
|
69
69
|
*/
|
|
70
70
|
class EdsTreeListItemSubContainer {
|
|
71
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
72
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
71
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemSubContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
72
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsTreeListItemSubContainer, isStandalone: true, selector: "eds-tree-list-item-sub-container", ngImport: i0 }); }
|
|
73
73
|
}
|
|
74
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
74
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItemSubContainer, decorators: [{
|
|
75
75
|
type: Directive,
|
|
76
76
|
args: [{
|
|
77
77
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
@@ -283,10 +283,10 @@ class EdsTreeListItem {
|
|
|
283
283
|
focusable.nativeElement.setAttribute('tabindex', '0');
|
|
284
284
|
}
|
|
285
285
|
}
|
|
286
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
287
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
286
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
287
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTreeListItem, isStandalone: true, selector: "eds-tree-list-item", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, isAlwaysExpanded: { classPropertyName: "isAlwaysExpanded", publicName: "isAlwaysExpanded", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: false, isRequired: false, transformFunction: booleanAttribute } }, outputs: { toggled: "toggled" }, host: { properties: { "class": "hostClasses()", "attr.tabindex": "tabIndex", "attr.role": "\"treeitem\"", "attr.id": "itemId", "attr.aria-label": "ariaLabelValue", "attr.aria-expanded": "hasSub ? isExpanded : null", "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "customLabel", first: true, predicate: i0.forwardRef(() => EdsTreeListItemLabel), descendants: true, isSignal: true }, { propertyName: "customDetailContent", first: true, predicate: i0.forwardRef(() => EdsTreeListItemDetails), descendants: true, isSignal: true }, { propertyName: "customSubContainerContent", first: true, predicate: i0.forwardRef(() => EdsTreeListItemSubContainer), descendants: true, isSignal: true }, { propertyName: "subTreeList", predicate: i0.forwardRef(() => EdsTreeList), descendants: true, isSignal: true }, { propertyName: "customContent", predicate: i0.forwardRef(() => EdsTreeListItemContent), isSignal: true }], viewQueries: [{ propertyName: "focusable", first: true, predicate: ["focusable"], descendants: true, isSignal: true }], hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsInfo", "edsInfo", "edsSuccess", "edsSuccess", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<div class=\"eds-tree-list-item-header\">\n <div\n #focusable\n class=\"eds-tree-list-item-header__content\"\n (keydown)=\"onKeyDown($event)\"\n [attr.aria-label]=\"(label() || '') + ' ' + (subLabel() || '')\">\n\n @if (hasCustomContent) {\n <ng-content select=\"eds-tree-list-item-content\"/>\n <ng-container *ngTemplateOutlet=\"rightContent\"/>\n } @else {\n <div class=\"eds-tree-list-item-header__label\">\n @if (!customLabel()) {\n <span class=\"eds-tree-list-item-header__label-text\">{{ label() }}</span>\n @if (subLabel()) {\n <span class=\"eds-tree-list-item-header__sublabel\">{{ subLabel() }}</span>\n }\n } @else {\n <ng-content select=\"eds-tree-list-item-label\"/>\n }\n </div>\n <ng-container *ngTemplateOutlet=\"rightContent\"/>\n }\n </div>\n\n @if (customDetailContent()) {\n <div class=\"eds-tree-list-item-header__details-content\">\n <ng-content select=\"eds-tree-list-item-details\"/>\n </div>\n }\n\n @if (customSubContainerContent()) {\n <ng-content select=\"eds-tree-list-item-sub-container\"/>\n }\n</div>\n\n@if (isExpanded || isAlwaysExpanded()) {\n <ng-content/>\n}\n\n<ng-template #rightContent>\n <div class=\"eds-tree-list-item-header__right-content\">\n @if (hasSub && !isAlwaysExpanded()) {\n <button\n edsIconButton\n edsSizeS\n edsNeutral\n [icon]=\"isExpanded ? 'caret-up' : 'caret-down'\"\n [ariaLabel]=\"isExpanded ? 'Collapse' : 'Expand'\"\n (buttonClick)=\"toggle($event)\">\n </button>\n }\n </div>\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 .eds-tree-list-item{display:block;width:100%;border-top:1px solid var(--eds-c-border-divider)}.eui-21 .eds-tree-list-item-header{display:flex;align-items:center;width:100%;border-left:var(--eds-sp-xs) solid transparent;text-decoration:none;min-height:2.5rem}.eui-21 .eds-tree-list-item-header:hover,.eui-21 .eds-tree-list-item-header:focus{text-decoration:none}.eui-21 .eds-tree-list-item-header__content{align-items:center;display:flex;padding:var(--eds-sp-xs) var(--eds-sp-s);width:100%;font:var(--eds-f-paragraph-m);outline:none}.eui-21 .eds-tree-list-item-header__content:focus-visible{outline:var(--eds-bw-s) solid var(--eds-c-border-primary);outline-offset:-2px;border-radius:var(--eds-br-s)}.eui-21 .eds-tree-list-item-header__label{display:flex;align-items:center;gap:var(--eds-sp-xs);flex:1}.eui-21 .eds-tree-list-item-header__label-text{font:var(--eds-f-paragraph-m)}.eui-21 .eds-tree-list-item-header__sublabel{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler)}.eui-21 .eds-tree-list-item-header__right-content{align-items:center;display:flex;flex:0 0 auto;margin-left:auto}.eui-21 .eds-tree-list-item-header__details-content{border-top:1px solid var(--eds-c-border-divider);padding:var(--eds-sp-xs) var(--eds-sp-s)}.eui-21 .eds-tree-list-item-content{display:flex;align-items:center;width:100%}.eui-21 .eds-tree-list .eds-tree-list{border-top:1px solid var(--eds-c-border-divider)}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list-item{border-top:0}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list-item-header__content,.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list-item-header__details-content{margin-left:var(--eds-sp-m)}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__content,.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__details-content{margin-left:calc(2 * var(--eds-sp-m))}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__content,.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__details-content{margin-left:calc(3 * var(--eds-sp-m))}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__content,.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__details-content{margin-left:calc(4 * var(--eds-sp-m))}.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__content,.eui-21 .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list .eds-tree-list-item-header__details-content{margin-left:calc(5 * var(--eds-sp-m))}.eui-21 .eds-tree-list-item--neutral>.eds-tree-list-item-header{border-left-color:var(--eds-c-border-neutral)}.eui-21 .eds-tree-list-item--info>.eds-tree-list-item-header{border-left-color:var(--eds-c-border-info)}.eui-21 .eds-tree-list-item--success>.eds-tree-list-item-header{border-left-color:var(--eds-c-border-success)}.eui-21 .eds-tree-list-item--warning>.eds-tree-list-item-header{border-left-color:var(--eds-c-border-warning)}.eui-21 .eds-tree-list-item--critical>.eds-tree-list-item-header{border-left-color:var(--eds-c-border-critical)}.eui-21 .eds-tree-list-item--active>.eds-tree-list-item-header{background-color:var(--eds-c-surface-selected)}.eui-21 .eds-tree-list-item--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
288
288
|
}
|
|
289
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
289
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListItem, decorators: [{
|
|
290
290
|
type: Component,
|
|
291
291
|
args: [{ selector: 'eds-tree-list-item', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
292
292
|
NgTemplateOutlet,
|
|
@@ -372,10 +372,10 @@ class EdsTreeListToolbar {
|
|
|
372
372
|
this.isToggleExpanded = !this.isToggleExpanded;
|
|
373
373
|
this.collapseAll.emit(event);
|
|
374
374
|
}
|
|
375
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
375
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListToolbar, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
376
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTreeListToolbar, isStandalone: true, selector: "eds-tree-list-toolbar", inputs: { isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, expandAllLabel: { classPropertyName: "expandAllLabel", publicName: "expandAllLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseAllLabel: { classPropertyName: "collapseAllLabel", publicName: "collapseAllLabel", isSignal: true, isRequired: false, transformFunction: null }, isToggleExpanded: { classPropertyName: "isToggleExpanded", publicName: "isToggleExpanded", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, filterValue: { classPropertyName: "filterValue", publicName: "filterValue", isSignal: false, isRequired: false, transformFunction: null } }, outputs: { filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, host: { classAttribute: "eds-tree-list-toolbar" }, usesOnChanges: true, ngImport: i0, template: "@if (isVisible()) {\n <eds-input-icon>\n <eds-icon icon=\"magnifying-glass:core\" size=\"s\"></eds-icon>\n <input\n edsInputText\n edsClearable\n [(ngModel)]=\"filterValue\"\n [placeholder]=\"filterLabel()\"\n (ngModelChange)=\"onFilter()\" />\n </eds-input-icon>\n\n @if (!isToggleExpanded) {\n <button edsButton edsNeutral (click)=\"onExpandAll($event)\" aria-label=\"Expand all\">\n {{ expandAllLabel() }}\n <eds-icon icon=\"arrows-out-simple:core\" size=\"s\"></eds-icon>\n </button>\n } @else {\n <button edsButton edsNeutral (click)=\"onCollapseAll($event)\" aria-label=\"Collapse all\">\n {{ collapseAllLabel() }}\n <eds-icon icon=\"arrows-in-simple:core\" size=\"s\"></eds-icon>\n </button>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.EdsButton, selector: "button[edsButton]", inputs: ["e2eAttr", "id", "edsBlockButton", "edsIconButton", "edsAvatarButton", "edsLineWrap", "edsButtonPrimary", "edsButtonSecondary", "edsButtonTertiary", "edsButtonRounded", "edsTypeVariant", "isChecked", "edsDisabled"] }, { kind: "component", type: i3.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i4.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i5.EdsInputIcon, selector: "eds-input-icon", inputs: ["e2eAttr", "edsIconPositionStart", "edsIconPositionEnd"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
377
377
|
}
|
|
378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
378
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeListToolbar, decorators: [{
|
|
379
379
|
type: Component,
|
|
380
380
|
args: [{ selector: 'eds-tree-list-toolbar', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
381
381
|
FormsModule,
|
|
@@ -650,10 +650,10 @@ class EdsTreeList {
|
|
|
650
650
|
}
|
|
651
651
|
return this.defaultFilterFunction({ level, item, keyword });
|
|
652
652
|
}
|
|
653
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
654
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
653
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeList, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
654
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTreeList, isStandalone: true, selector: "eds-tree-list", inputs: { isShowToolbar: { classPropertyName: "isShowToolbar", publicName: "isShowToolbar", isSignal: true, isRequired: false, transformFunction: null }, isExpanded: { classPropertyName: "isExpanded", publicName: "isExpanded", isSignal: true, isRequired: false, transformFunction: null }, filterLabel: { classPropertyName: "filterLabel", publicName: "filterLabel", isSignal: true, isRequired: false, transformFunction: null }, filterFunction: { classPropertyName: "filterFunction", publicName: "filterFunction", isSignal: true, isRequired: false, transformFunction: null }, expandAllLabel: { classPropertyName: "expandAllLabel", publicName: "expandAllLabel", isSignal: true, isRequired: false, transformFunction: null }, collapseAllLabel: { classPropertyName: "collapseAllLabel", publicName: "collapseAllLabel", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, toolbarFilterValue: { classPropertyName: "toolbarFilterValue", publicName: "toolbarFilterValue", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filter: "filter", expandAll: "expandAll", collapseAll: "collapseAll" }, host: { properties: { "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "items", predicate: i0.forwardRef(() => EdsTreeListItem), isSignal: true }], ngImport: i0, template: "@if (isShowToolbar()) {\n <eds-tree-list-toolbar\n [isVisible]=\"isShowToolbar()\"\n (filter)=\"onFilter($event)\"\n [filterValue]=\"toolbarFilterValue()\"\n (expandAll)=\"onExpandAll($event)\"\n (collapseAll)=\"onCollapseAll($event)\"\n [filterLabel]=\"filterLabel() || 'Filter'\"\n [expandAllLabel]=\"expandAllLabel() || 'Expand all'\"\n [collapseAllLabel]=\"collapseAllLabel() || 'Collapse all'\"\n [isToggleExpanded]=\"isExpanded()\" />\n}\n\n<div\n class=\"eds-tree-list\"\n [attr.role]=\"ariaRoleTree\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-owns]=\"ariaOwns\">\n <ng-content/>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 .eds-tree-list{display:block;width:100%}.eui-21 .eds-tree-list-toolbar{align-items:center;display:flex;flex-direction:row;gap:var(--eds-sp-s);padding:var(--eds-sp-m)}\n"], dependencies: [{ kind: "component", type: EdsTreeListToolbar, selector: "eds-tree-list-toolbar", inputs: ["isVisible", "filterLabel", "expandAllLabel", "collapseAllLabel", "isToggleExpanded", "filterValue"], outputs: ["filter", "expandAll", "collapseAll"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
655
655
|
}
|
|
656
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
656
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeList, decorators: [{
|
|
657
657
|
type: Component,
|
|
658
658
|
args: [{ selector: 'eds-tree-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [EdsTreeListToolbar], host: {
|
|
659
659
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
@@ -947,10 +947,10 @@ class EdsTree {
|
|
|
947
947
|
checkIfCurrentScrollable(scrolled) {
|
|
948
948
|
return scrolled.getElementRef().nativeElement === this.cdkScrollableRef()?.getElementRef().nativeElement;
|
|
949
949
|
}
|
|
950
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
951
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n @if (renderTree) {\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n class=\"eds-cdk-tree\">\n <!-- Leaf node (no children) -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n <div class=\"eds-tree-node-wrapper__container\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n }\n </cdk-nested-tree-node>\n <!-- Expandable node (has children) -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\">\n <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n edsIconButton\n edsSizeS\n edsRounded\n [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n class=\"eds-tree-node__button\">\n </button>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n }\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n @if (node) {\n <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n @if (node && node.selectable) {\n <input\n edsInputCheckbox\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\" />\n }\n\n @if (node?.treeContentBlock?.iconSvgName) {\n <eds-icon\n [icon]=\"node?.treeContentBlock?.iconSvgName\"\n size=\"s\"\n class=\"eds-u-mr-xs\">\n </eds-icon>\n }\n\n @if (node?.treeContentBlock?.chips) {\n @for (chip of node.treeContentBlock.chips; track chip) {\n <eds-chip\n edsSizeM\n [edsColorVariant]=\"chip.typeClass || 'neutral'\"\n class=\"eds-u-mr-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n }\n\n @if (node?.treeContentBlock?.typeLabel) {\n <eds-badge edsSizeM [edsColorVariant]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eds-badge>\n }\n </div>\n\n <div class=\"eds-tree-node-wrapper__container-middle\">\n @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n <label\n edsLabel\n for=\"{{ id }}\"\n class=\"eds-u-text-truncate\"\n [class.eds-label--selected]=\"\n highlightPath()\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eds-u-cursor-pointer]=\"node?.selectable\">\n {{ node?.treeContentBlock?.label }}\n </label>\n }\n @if (node?.treeContentBlock?.url) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link\"\n [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n @if (node?.treeContentBlock?.urlExternal) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link-external\"\n [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n </div>\n\n @if (node?.treeContentBlock?.rightContent) {\n <div class=\"eds-tree-node-wrapper__container-right\">\n @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n <eds-badge edsOutline [edsColorVariant]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n {{ badge.label }}\n </eds-badge>\n }\n\n @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n <eds-chip\n edsSizeM\n [edsColorVariant]=\"chip.typeClass || 'neutral'\"\n class=\"eds-u-ml-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n\n @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n <eds-dropdown class=\"eds-u-ml-xs\">\n <button edsIconButton edsSizeS edsRounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n <eds-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eds-dropdown-content>\n </eds-dropdown>\n }\n </div>\n }\n\n @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\" />\n }\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n edsIconButton\n edsSizeS\n edsRounded\n [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n ariaLabel=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n </button>\n @if (metaDataContainer.expanded) {\n <div class=\"eds-tree-node__metacontent\">\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n }\n </ng-template>\n }\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "div[edsBadge], span[edsBadge], eds-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "edsBadgeIcon", "edsDottedBadge", "edsOutline"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "edsDisabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
950
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
951
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsTree, isStandalone: true, selector: "eds-tree", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, nodes: { classPropertyName: "nodes", publicName: "nodes", isSignal: true, isRequired: false, transformFunction: null }, nodeTemplateRef: { classPropertyName: "nodeTemplateRef", publicName: "nodeTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, nodeContentMetadataTemplateRef: { classPropertyName: "nodeContentMetadataTemplateRef", publicName: "nodeContentMetadataTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, rightContextMenuTemplateRef: { classPropertyName: "rightContextMenuTemplateRef", publicName: "rightContextMenuTemplateRef", isSignal: true, isRequired: false, transformFunction: null }, customNodeSelectFn: { classPropertyName: "customNodeSelectFn", publicName: "customNodeSelectFn", isSignal: true, isRequired: false, transformFunction: null }, expandedSvgIconClass: { classPropertyName: "expandedSvgIconClass", publicName: "expandedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, collapsedSvgIconClass: { classPropertyName: "collapsedSvgIconClass", publicName: "collapsedSvgIconClass", isSignal: true, isRequired: false, transformFunction: null }, isClickTogglingNode: { classPropertyName: "isClickTogglingNode", publicName: "isClickTogglingNode", isSignal: true, isRequired: false, transformFunction: null }, isMultiselect: { classPropertyName: "isMultiselect", publicName: "isMultiselect", isSignal: true, isRequired: false, transformFunction: null }, isSingleSelect: { classPropertyName: "isSingleSelect", publicName: "isSingleSelect", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveSelection: { classPropertyName: "isRecursiveSelection", publicName: "isRecursiveSelection", isSignal: true, isRequired: false, transformFunction: null }, isRecursiveParentSelection: { classPropertyName: "isRecursiveParentSelection", publicName: "isRecursiveParentSelection", isSignal: true, isRequired: false, transformFunction: null }, showUnderlinedLinks: { classPropertyName: "showUnderlinedLinks", publicName: "showUnderlinedLinks", isSignal: true, isRequired: false, transformFunction: null }, showLines: { classPropertyName: "showLines", publicName: "showLines", isSignal: true, isRequired: false, transformFunction: null }, highlightPath: { classPropertyName: "highlightPath", publicName: "highlightPath", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollThreshold: { classPropertyName: "virtualScrollThreshold", publicName: "virtualScrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, virtualScrollPageSize: { classPropertyName: "virtualScrollPageSize", publicName: "virtualScrollPageSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", nodeClick: "nodeClick", nodeToggle: "nodeToggle" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "cdkScrollableRef", first: true, predicate: ["cdkScrollableRef"], descendants: true, read: CdkScrollable, isSignal: true }, { propertyName: "treeComponentInstance", first: true, predicate: ["treeComponentInstance"], descendants: true, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"eds-tree__wrapper eds-ul-rep\" cdkScrollable #cdkScrollableRef>\n @if (renderTree) {\n <cdk-tree\n #treeComponentInstance\n [dataSource]=\"cdkArrayDataSource\"\n [treeControl]=\"cdkTreeControl\"\n [trackBy]=\"trackBy\"\n class=\"eds-cdk-tree\">\n <!-- Leaf node (no children) -->\n <cdk-nested-tree-node *cdkTreeNodeDef=\"let treeRunTimeItemModel\" class=\"eds-cdk-nested-tree-node\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\"\n (click)=\"onNodeClick(treeRunTimeItemModel, $event)\">\n <div class=\"eds-tree-node-wrapper__container\">\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel?.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path\n }\">\n </ng-container>\n </div>\n </div>\n </div>\n }\n </cdk-nested-tree-node>\n <!-- Expandable node (has children) -->\n <cdk-nested-tree-node\n *cdkTreeNodeDef=\"let treeRunTimeItemModel; when: hasChild\"\n class=\"eds-cdk-nested-tree-node eds-cdk-nested-tree-node--with-child\">\n @if (treeRunTimeItemModel) {\n <div\n class=\"eds-li-rep eds-tree-node eds-tree-node--with-child\"\n [class.eds-tree-node--first]=\"treeRunTimeItemModel?.path === '0'\"\n [class.eds-tree-node--last]=\"treeRunTimeItemModel.last\"\n [title]=\"getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.tooltipLabel\n || getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label || ''\">\n <div class=\"eds-tree-node-wrapper\">\n <div (click)=\"onNodeClick(treeRunTimeItemModel, $event)\" class=\"eds-tree-node-wrapper__container\">\n <!-- Expand/collapse action button -->\n <button\n edsIconButton\n edsSizeS\n edsRounded\n [icon]=\"cdkTreeControl.isExpanded(treeRunTimeItemModel) ? collapsedSvgIconClass() : expandedSvgIconClass()\"\n [ariaLabel]=\"'Toggle ' + getTreeItem(treeRunTimeItemModel?.path)?.node?.treeContentBlock?.label\"\n (click)=\"onToggleButtonClick(treeRunTimeItemModel, $event)\"\n class=\"eds-tree-node__button\">\n </button>\n <ng-container\n [ngTemplateOutlet]=\"nodeTemplateRef() || nodeTemplateDefault\"\n [ngTemplateOutletContext]=\"{\n $implicit: getTreeItem(treeRunTimeItemModel.path)?.node,\n onSelect: onSelectFn(treeRunTimeItemModel.path),\n id: uid + treeRunTimeItemModel.path,\n path: treeRunTimeItemModel.path,\n children: getTreeItem(treeRunTimeItemModel?.path)?.children\n }\">\n </ng-container>\n </div>\n </div>\n @if (cdkTreeControl.isExpanded(treeRunTimeItemModel)) {\n <div class=\"eds-ul-rep eds-tree-node\" role=\"group\">\n <ng-container cdkTreeNodeOutlet></ng-container>\n </div>\n }\n </div>\n }\n </cdk-nested-tree-node>\n </cdk-tree>\n }\n</div>\n\n<ng-template #nodeTemplateDefault let-node let-onSelect=\"onSelect\" let-id=\"id\" let-path=\"path\">\n @if (node) {\n <div class=\"eds-tree-node-wrapper__container-left\" [class.eds-tree-node-wrapper__container-left--selected]=\"node?.isSelected\">\n @if (node && node.selectable) {\n <input\n edsInputCheckbox\n type=\"checkbox\"\n id=\"{{ id }}\"\n [checked]=\"!!node?.isSelected\"\n [indeterminate]=\"!!node?.isIndeterminate\"\n (change)=\"onSelect($event)\" />\n }\n\n @if (node?.treeContentBlock?.iconSvgName) {\n <eds-icon\n [icon]=\"node?.treeContentBlock?.iconSvgName\"\n size=\"s\"\n class=\"eds-u-mr-xs\">\n </eds-icon>\n }\n\n @if (node?.treeContentBlock?.chips) {\n @for (chip of node.treeContentBlock.chips; track chip) {\n <eds-chip\n edsSizeM\n [edsColorVariant]=\"chip.typeClass || 'neutral'\"\n class=\"eds-u-mr-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n }\n\n @if (node?.treeContentBlock?.typeLabel) {\n <eds-badge edsSizeM [edsColorVariant]=\"node?.treeContentBlock?.typeClass || 'neutral'\" class=\"eds-u-mr-xs\">\n {{ node?.treeContentBlock?.typeLabel }}\n </eds-badge>\n }\n </div>\n\n <div class=\"eds-tree-node-wrapper__container-middle\">\n @if (!node?.treeContentBlock?.url && !node?.treeContentBlock?.urlExternal) {\n <label\n edsLabel\n for=\"{{ id }}\"\n class=\"eds-u-text-truncate\"\n [class.eds-label--selected]=\"\n highlightPath()\n ? getRunTimeSelectionRecursiveState(path)?.selectionRecursiveState === 'indeterminate' || node?.isSelected\n : node?.isSelected\n \"\n [class.eds-u-cursor-pointer]=\"node?.selectable\">\n {{ node?.treeContentBlock?.label }}\n </label>\n }\n @if (node?.treeContentBlock?.url) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link\"\n [class.eds-u-text-link-standalone]=\"!showUnderlinedLinks()\"\n [routerLink]=\"node?.treeContentBlock?.url\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n @if (node?.treeContentBlock?.urlExternal) {\n <label edsLabel for=\"{{ id }}\" class=\"eds-u-text-truncate\">\n <a\n class=\"eds-u-text-link-external\"\n [class.eds-u-text-link-external-standalone]=\"!showUnderlinedLinks()\"\n href=\"{{ node?.treeContentBlock?.urlExternal }}\"\n target=\"{{ node?.treeContentBlock?.urlExternalTarget || 'blank' }}\">\n {{ node?.treeContentBlock?.label }}\n </a>\n </label>\n }\n </div>\n\n @if (node?.treeContentBlock?.rightContent) {\n <div class=\"eds-tree-node-wrapper__container-right\">\n @for (badge of node.treeContentBlock.rightContent?.badges; track badge) {\n <eds-badge edsOutline [edsColorVariant]=\"badge.typeClass || 'neutral'\" class=\"eds-u-ml-xs\">\n {{ badge.label }}\n </eds-badge>\n }\n\n @for (chip of node.treeContentBlock.rightContent?.chips; track chip) {\n <eds-chip\n edsSizeM\n [edsColorVariant]=\"chip.typeClass || 'neutral'\"\n class=\"eds-u-ml-xs\">\n {{ chip.label }}\n </eds-chip>\n }\n\n @if (node.treeContentBlock.rightContent?.contextMenuMetaData && rightContextMenuTemplateRef()) {\n <eds-dropdown class=\"eds-u-ml-xs\">\n <button edsIconButton edsSizeS edsRounded icon=\"dots-three-vertical\" ariaLabel=\"Options menu\"></button>\n <eds-dropdown-content>\n <ng-template\n [ngTemplateOutlet]=\"rightContextMenuTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.rightContent?.contextMenuMetaData,\n metadata: node?.treeContentBlock?.rightContent?.contextMenuMetaData\n }\">\n </ng-template>\n </eds-dropdown-content>\n </eds-dropdown>\n }\n </div>\n }\n\n @if (node.treeContentBlock?.metadata && nodeContentMetadataTemplateRef()) {\n <ng-container\n [ngTemplateOutlet]=\"nodeContentMetadataContainer\"\n [ngTemplateOutletContext]=\"{\n $implicit: { expanded: false }\n }\" />\n }\n <ng-template #nodeContentMetadataContainer let-metaDataContainer>\n <button\n edsIconButton\n edsSizeS\n edsRounded\n [icon]=\"metaDataContainer.expanded ? 'caret-down' : 'caret-right'\"\n ariaLabel=\"expand collapse tree item\"\n (click)=\"metaDataContainer.expanded = !metaDataContainer.expanded\">\n </button>\n @if (metaDataContainer.expanded) {\n <div class=\"eds-tree-node__metacontent\">\n <ng-template\n [ngTemplateOutlet]=\"nodeContentMetadataTemplateRef()\"\n [ngTemplateOutletContext]=\"{\n $implicit: node?.treeContentBlock?.metadata,\n metadata: node?.treeContentBlock?.metadata\n }\">\n </ng-template>\n </div>\n }\n </ng-template>\n }\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree{display:flex;overflow-x:hidden;overflow-y:auto;position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper{display:flex;list-style:none;margin:0;overflow-y:auto;padding:var(--eds-sp-3xs);position:relative;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{display:flex;width:auto}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-l)}.eui-21 .eds-tree .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node--with-child{display:flex;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node{display:flex;flex-direction:column;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__metacontent{display:flex}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node__button{margin-left:calc(-3 * var(--eds-sp-3xs))}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper{align-items:center;display:flex;min-height:var(--eds-sp-3xl);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper:hover{background-color:var(--eds-c-surface-hover)}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container{align-items:center;display:flex;gap:var(--eds-sp-2xs);width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-left{align-items:center;display:flex;justify-content:flex-start}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-middle{align-items:center;display:flex;justify-content:flex-start;overflow:hidden;width:100%}.eui-21 .eds-tree .eds-tree__wrapper .eds-tree-node-wrapper__container-right{align-items:center;display:flex;justify-content:flex-end;margin-left:auto}.eui-21 .eds-tree:not(.eds-tree--with-children) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node{padding-inline-start:2px}.eui-21 .eds-tree.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-3xs)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:before{border-left:1px solid var(--eds-c-border-divider);content:\"\";height:calc(100% - var(--eds-sp-m) - var(--eds-sp-xl));position:absolute;top:var(--eds-sp-xl)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-ul-rep:first-child:before{height:calc(100% - var(--eds-sp-m) - var(--eds-sp-3xs));top:0}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep{padding-inline-start:var(--eds-sp-s);position:relative}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node:not(.eds-tree-node--with-child):before{position:relative;left:0;display:inline-flex;width:var(--eds-sp-3xl);border-bottom:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:var(--eds-sp-m)}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node.eds-tree-node--with-child:before{position:absolute;left:calc(var(--eds-sp-3xl) + var(--eds-sp-3xs));display:inline-flex;width:var(--eds-sp-xs);border-bottom:1px solid var(--eds-c-border-divider);border-left:1px solid var(--eds-c-border-divider);content:\"\";margin-left:calc(-2 * var(--eds-sp-l) + var(--eds-sp-3xs));top:calc(.85 * var(--eds-sp-l))}.eui-21 .eds-tree.eds-tree--show-lines.eds-tree--with-children div.eds-li-rep.eds-tree-node--last:before{height:auto;top:var(--eds-sp-m)}.eui-21 .eds-tree:not(.eds-tree--show-lines) .eds-tree__wrapper .eds-cdk-tree .eds-cdk-nested-tree-node:not(.eds-cdk-nested-tree-node--with-child){padding-inline-start:var(--eds-sp-xl)}.eui-21 .eds-tree:not(.eds-tree--show-lines).eds-tree--with-children div.eds-ul-rep{padding-inline-start:var(--eds-sp-m)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }, { kind: "ngmodule", type: CdkTreeModule }, { kind: "directive", type: i2.CdkNestedTreeNode, selector: "cdk-nested-tree-node", exportAs: ["cdkNestedTreeNode"] }, { kind: "directive", type: i2.CdkTreeNodeDef, selector: "[cdkTreeNodeDef]", inputs: ["cdkTreeNodeDefWhen"] }, { kind: "component", type: i2.CdkTree, selector: "cdk-tree", inputs: ["dataSource", "treeControl", "levelAccessor", "childrenAccessor", "trackBy", "expansionKey"], exportAs: ["cdkTree"] }, { kind: "directive", type: i2.CdkTreeNodeOutlet, selector: "[cdkTreeNodeOutlet]" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "browserUrl", "routerLink"] }, { kind: "component", type: i4.EdsInputCheckbox, selector: "input[edsInputCheckbox]", inputs: ["e2eAttr", "checked", "indeterminate", "disabled", "readonly", "isInvalid"], outputs: ["checkedChange", "indeterminateChange"] }, { kind: "component", type: i5.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["edsRequired"] }, { kind: "component", type: i8.EdsBadge, selector: "div[edsBadge], span[edsBadge], eds-badge", inputs: ["e2eAttr", "aria-label", "maxCharCount", "charReplacement", "edsBadgeIcon", "edsDottedBadge", "edsOutline"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "edsDisabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i10.EdsDropdown, selector: "eds-dropdown", inputs: ["e2eAttr", "panelTabIndex", "width", "height", "position", "subDropdownPosition", "isBlock", "isDropDownRightAligned", "hasClosedOnClickInside", "isLabelUpdatedFromSelectedItem", "isExpandOnHover", "hasTabNavigation", "isRightClickEnabled", "isTriggerToggle", "edsDisabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
952
952
|
}
|
|
953
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
953
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, decorators: [{
|
|
954
954
|
type: Component,
|
|
955
955
|
args: [{ selector: 'eds-tree', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
956
956
|
NgTemplateOutlet,
|
|
@@ -1038,10 +1038,10 @@ class EdsDropdownTreeDirective {
|
|
|
1038
1038
|
}
|
|
1039
1039
|
return 'No node selected.';
|
|
1040
1040
|
}
|
|
1041
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1042
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.
|
|
1041
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDropdownTreeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1042
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "22.1.2", type: EdsDropdownTreeDirective, isStandalone: true, selector: "eds-dropdown[edsDropdownTree]", inputs: { buttonTemplateRef: { classPropertyName: "buttonTemplateRef", publicName: "buttonTemplateRef", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "edsTree", first: true, predicate: EdsTree, descendants: true, isSignal: true }], ngImport: i0 }); }
|
|
1043
1043
|
}
|
|
1044
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1044
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsDropdownTreeDirective, decorators: [{
|
|
1045
1045
|
type: Directive,
|
|
1046
1046
|
args: [{
|
|
1047
1047
|
selector: 'eds-dropdown[edsDropdownTree]',
|
|
@@ -1183,8 +1183,8 @@ class EdsTreeFormControlDirective {
|
|
|
1183
1183
|
this.onChange(this.edsTreeControlValueSetter()(selectionChanges.selection));
|
|
1184
1184
|
});
|
|
1185
1185
|
}
|
|
1186
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
1187
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.
|
|
1186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeFormControlDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1187
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.1.2", type: EdsTreeFormControlDirective, isStandalone: true, selector: "eds-tree[edsTreeFormControl]", inputs: { edsTreeControlValueSetter: { classPropertyName: "edsTreeControlValueSetter", publicName: "edsTreeControlValueSetter", isSignal: true, isRequired: false, transformFunction: null }, edsTreeControlModelMapper: { classPropertyName: "edsTreeControlModelMapper", publicName: "edsTreeControlModelMapper", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1188
1188
|
{
|
|
1189
1189
|
provide: NG_VALUE_ACCESSOR,
|
|
1190
1190
|
useExisting: forwardRef(() => EdsTreeFormControlDirective),
|
|
@@ -1192,7 +1192,7 @@ class EdsTreeFormControlDirective {
|
|
|
1192
1192
|
},
|
|
1193
1193
|
], ngImport: i0 }); }
|
|
1194
1194
|
}
|
|
1195
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
1195
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTreeFormControlDirective, decorators: [{
|
|
1196
1196
|
type: Directive,
|
|
1197
1197
|
args: [{
|
|
1198
1198
|
selector: 'eds-tree[edsTreeFormControl]',
|
|
@@ -8,10 +8,10 @@ import * as i3 from '@angular/cdk/a11y';
|
|
|
8
8
|
import { A11yModule } from '@angular/cdk/a11y';
|
|
9
9
|
|
|
10
10
|
class EdsUserProfileMenu {
|
|
11
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
12
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
11
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfileMenu, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsUserProfileMenu, isStandalone: true, selector: "eds-user-profile-menu", ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;padding:var(--eds-sp-xs) var(--eds-sp-none)}\n"] }); }
|
|
13
13
|
}
|
|
14
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
14
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfileMenu, decorators: [{
|
|
15
15
|
type: Component,
|
|
16
16
|
args: [{ selector: 'eds-user-profile-menu', template: "<ng-content></ng-content>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;padding:var(--eds-sp-xs) var(--eds-sp-none)}\n"] }]
|
|
17
17
|
}] });
|
|
@@ -186,10 +186,10 @@ class EdsUserProfile {
|
|
|
186
186
|
const viewportWidth = window.innerWidth;
|
|
187
187
|
this.alignLeft.set(rect.right < viewportWidth / 2);
|
|
188
188
|
}
|
|
189
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
190
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
189
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfile, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
190
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsUserProfile, isStandalone: true, selector: "eds-user-profile", inputs: { fullName: { classPropertyName: "fullName", publicName: "fullName", isSignal: true, isRequired: false, transformFunction: null }, firstName: { classPropertyName: "firstName", publicName: "firstName", isSignal: true, isRequired: false, transformFunction: null }, lastName: { classPropertyName: "lastName", publicName: "lastName", isSignal: true, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: true, isRequired: false, transformFunction: null }, subInfos: { classPropertyName: "subInfos", publicName: "subInfos", isSignal: true, isRequired: false, transformFunction: null }, welcomeLabel: { classPropertyName: "welcomeLabel", publicName: "welcomeLabel", isSignal: true, isRequired: false, transformFunction: null }, hasWelcomeLabel: { classPropertyName: "hasWelcomeLabel", publicName: "hasWelcomeLabel", isSignal: true, isRequired: false, transformFunction: null }, isShowUserInfos: { classPropertyName: "isShowUserInfos", publicName: "isShowUserInfos", isSignal: true, isRequired: false, transformFunction: null }, isShowAvatarInitials: { classPropertyName: "isShowAvatarInitials", publicName: "isShowAvatarInitials", isSignal: true, isRequired: false, transformFunction: null }, isReverse: { classPropertyName: "isReverse", publicName: "isReverse", isSignal: true, isRequired: false, transformFunction: null }, reverseNameOrder: { classPropertyName: "reverseNameOrder", publicName: "reverseNameOrder", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, queries: [{ propertyName: "menuChild", first: true, predicate: EdsUserProfileMenu, descendants: true, isSignal: true }], ngImport: i0, template: "<div\n class=\"user-profile\"\n [class.reverse]=\"effectiveReverse()\"\n [class.in-toolbar]=\"isInToolbar()\"\n [class.has-menu]=\"hasMenu()\"\n [attr.tabindex]=\"hasMenu() ? 0 : null\"\n [attr.role]=\"hasMenu() ? 'button' : null\"\n (click)=\"hasMenu() && toggleMenu()\"\n (keydown.enter)=\"hasMenu() && toggleMenu()\"\n (keydown.space)=\"hasMenu() && toggleMenu(); $event.preventDefault()\"\n (keydown.escape)=\"closeMenu()\">\n\n <!-- Avatar -->\n @if (isInToolbar()) {\n <eds-avatar edsSizeM>\n @if (avatarUrl()) {\n <eds-avatar-icon>\n <eds-avatar-image [imageUrl]=\"avatarUrl()\" />\n </eds-avatar-icon>\n } @else if (isShowAvatarInitials() && initials()) {\n <eds-avatar-icon>\n <eds-avatar-text>{{ initials() }}</eds-avatar-text>\n </eds-avatar-icon>\n } @else {\n <eds-avatar-icon>\n <eds-avatar-text>\uD83D\uDC64</eds-avatar-text>\n </eds-avatar-icon>\n }\n </eds-avatar>\n } @else {\n <eds-avatar edsSizeL>\n @if (avatarUrl()) {\n <eds-avatar-icon>\n <eds-avatar-image [imageUrl]=\"avatarUrl()\" />\n </eds-avatar-icon>\n } @else if (isShowAvatarInitials() && initials()) {\n <eds-avatar-icon>\n <eds-avatar-text>{{ initials() }}</eds-avatar-text>\n </eds-avatar-icon>\n } @else {\n <eds-avatar-icon>\n <eds-avatar-text>\uD83D\uDC64</eds-avatar-text>\n </eds-avatar-icon>\n }\n </eds-avatar>\n }\n\n <!-- User info -->\n @if (isShowUserInfos()) {\n <div class=\"user-info\">\n @if (hasWelcomeLabel() && welcomeLabel()) {\n <span class=\"welcome\">{{ welcomeLabel() }}</span>\n }\n <span class=\"name\">{{ displayName() }}</span>\n @if (subInfos()) {\n <span class=\"sub-info\">{{ subInfos() }}</span>\n }\n </div>\n }\n\n <!-- Chevron indicator (only when menu is present) -->\n @if (hasMenu()) {\n <eds-icon class=\"chevron\" [class.chevron-brand]=\"isInToolbar()\" [icon]=\"isMenuOpen() ? 'caret-up' : 'caret-down'\" edsSizeS />\n }\n</div>\n\n<!-- Dropdown menu (content projected) -->\n@if (isMenuOpen()) {\n <div class=\"profile-menu\"\n [class.align-left]=\"alignLeft()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n role=\"menu\"\n (keydown)=\"onMenuKeydown($event)\">\n <ng-content select=\"eds-user-profile-menu\"></ng-content>\n </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .user-profile{display:flex;align-items:center;gap:var(--eds-sp-xs);border-radius:var(--eds-br-s);padding:var(--eds-sp-3xs) var(--eds-sp-xs);transition:background .15s ease}.eui-21 :host .user-profile.has-menu{cursor:pointer}.eui-21 :host .user-profile.has-menu:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .user-profile.has-menu:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .user-profile.has-menu.in-toolbar:hover{background:var(--eds-c-surface-brand--hover)}.eui-21 :host .user-profile.reverse .user-info{order:-1;text-align:right}.eui-21 :host .user-info{display:flex;flex-direction:column;min-width:0}.eui-21 :host .welcome{font:var(--eds-f-microcopy-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .name{font:var(--eds-f-label-m-semi-bold);color:var(--eds-c-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .sub-info{font:var(--eds-f-microcopy-xs);color:var(--eds-c-foreground-subtler);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .chevron{flex-shrink:0;color:var(--eds-c-foreground-subtler);transition:transform .2s ease}.eui-21 :host .chevron.chevron-brand{color:var(--eds-c-on-surface-brand)}.eui-21 :host .profile-menu{position:absolute;top:100%;right:0;z-index:200;min-width:220px;margin-top:var(--eds-sp-3xs);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3);overflow:hidden}.eui-21 :host .profile-menu.align-left{right:auto;left:0}\n"], dependencies: [{ kind: "component", type: i1.EdsAvatar, selector: "div[edsAvatar], span[edsAvatar], eds-avatar", inputs: ["e2eAttr", "aria-label", "colorPalette"] }, { kind: "component", type: i1.EdsAvatarIcon, selector: "eds-avatar-icon" }, { kind: "component", type: i1.EdsAvatarText, selector: "eds-avatar-text" }, { kind: "component", type: i1.EdsAvatarImage, selector: "eds-avatar-image", inputs: ["imageUrl"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "ngmodule", type: A11yModule }, { kind: "directive", type: i3.CdkTrapFocus, selector: "[cdkTrapFocus]", inputs: ["cdkTrapFocus", "cdkTrapFocusAutoCapture"], exportAs: ["cdkTrapFocus"] }] }); }
|
|
191
191
|
}
|
|
192
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
192
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfile, decorators: [{
|
|
193
193
|
type: Component,
|
|
194
194
|
args: [{ selector: 'eds-user-profile', imports: [...EDS_AVATAR, ...EDS_ICON, A11yModule], template: "<div\n class=\"user-profile\"\n [class.reverse]=\"effectiveReverse()\"\n [class.in-toolbar]=\"isInToolbar()\"\n [class.has-menu]=\"hasMenu()\"\n [attr.tabindex]=\"hasMenu() ? 0 : null\"\n [attr.role]=\"hasMenu() ? 'button' : null\"\n (click)=\"hasMenu() && toggleMenu()\"\n (keydown.enter)=\"hasMenu() && toggleMenu()\"\n (keydown.space)=\"hasMenu() && toggleMenu(); $event.preventDefault()\"\n (keydown.escape)=\"closeMenu()\">\n\n <!-- Avatar -->\n @if (isInToolbar()) {\n <eds-avatar edsSizeM>\n @if (avatarUrl()) {\n <eds-avatar-icon>\n <eds-avatar-image [imageUrl]=\"avatarUrl()\" />\n </eds-avatar-icon>\n } @else if (isShowAvatarInitials() && initials()) {\n <eds-avatar-icon>\n <eds-avatar-text>{{ initials() }}</eds-avatar-text>\n </eds-avatar-icon>\n } @else {\n <eds-avatar-icon>\n <eds-avatar-text>\uD83D\uDC64</eds-avatar-text>\n </eds-avatar-icon>\n }\n </eds-avatar>\n } @else {\n <eds-avatar edsSizeL>\n @if (avatarUrl()) {\n <eds-avatar-icon>\n <eds-avatar-image [imageUrl]=\"avatarUrl()\" />\n </eds-avatar-icon>\n } @else if (isShowAvatarInitials() && initials()) {\n <eds-avatar-icon>\n <eds-avatar-text>{{ initials() }}</eds-avatar-text>\n </eds-avatar-icon>\n } @else {\n <eds-avatar-icon>\n <eds-avatar-text>\uD83D\uDC64</eds-avatar-text>\n </eds-avatar-icon>\n }\n </eds-avatar>\n }\n\n <!-- User info -->\n @if (isShowUserInfos()) {\n <div class=\"user-info\">\n @if (hasWelcomeLabel() && welcomeLabel()) {\n <span class=\"welcome\">{{ welcomeLabel() }}</span>\n }\n <span class=\"name\">{{ displayName() }}</span>\n @if (subInfos()) {\n <span class=\"sub-info\">{{ subInfos() }}</span>\n }\n </div>\n }\n\n <!-- Chevron indicator (only when menu is present) -->\n @if (hasMenu()) {\n <eds-icon class=\"chevron\" [class.chevron-brand]=\"isInToolbar()\" [icon]=\"isMenuOpen() ? 'caret-up' : 'caret-down'\" edsSizeS />\n }\n</div>\n\n<!-- Dropdown menu (content projected) -->\n@if (isMenuOpen()) {\n <div class=\"profile-menu\"\n [class.align-left]=\"alignLeft()\"\n cdkTrapFocus\n [cdkTrapFocusAutoCapture]=\"true\"\n role=\"menu\"\n (keydown)=\"onMenuKeydown($event)\">\n <ng-content select=\"eds-user-profile-menu\"></ng-content>\n </div>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;position:relative}.eui-21 :host .user-profile{display:flex;align-items:center;gap:var(--eds-sp-xs);border-radius:var(--eds-br-s);padding:var(--eds-sp-3xs) var(--eds-sp-xs);transition:background .15s ease}.eui-21 :host .user-profile.has-menu{cursor:pointer}.eui-21 :host .user-profile.has-menu:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host .user-profile.has-menu:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .user-profile.has-menu.in-toolbar:hover{background:var(--eds-c-surface-brand--hover)}.eui-21 :host .user-profile.reverse .user-info{order:-1;text-align:right}.eui-21 :host .user-info{display:flex;flex-direction:column;min-width:0}.eui-21 :host .welcome{font:var(--eds-f-microcopy-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .name{font:var(--eds-f-label-m-semi-bold);color:var(--eds-c-foreground);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .sub-info{font:var(--eds-f-microcopy-xs);color:var(--eds-c-foreground-subtler);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.eui-21 :host .chevron{flex-shrink:0;color:var(--eds-c-foreground-subtler);transition:transform .2s ease}.eui-21 :host .chevron.chevron-brand{color:var(--eds-c-on-surface-brand)}.eui-21 :host .profile-menu{position:absolute;top:100%;right:0;z-index:200;min-width:220px;margin-top:var(--eds-sp-3xs);background:var(--eds-c-surface-elevation-overlay);border:var(--eds-bw-xs) solid var(--eds-c-border-divider);border-radius:var(--eds-br-m);box-shadow:var(--eds-sh-3);overflow:hidden}.eui-21 :host .profile-menu.align-left{right:auto;left:0}\n"] }]
|
|
195
195
|
}], propDecorators: { fullName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullName", required: false }] }], firstName: [{ type: i0.Input, args: [{ isSignal: true, alias: "firstName", required: false }] }], lastName: [{ type: i0.Input, args: [{ isSignal: true, alias: "lastName", required: false }] }], avatarUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "avatarUrl", required: false }] }], subInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "subInfos", required: false }] }], welcomeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "welcomeLabel", required: false }] }], hasWelcomeLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasWelcomeLabel", required: false }] }], isShowUserInfos: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowUserInfos", required: false }] }], isShowAvatarInitials: [{ type: i0.Input, args: [{ isSignal: true, alias: "isShowAvatarInitials", required: false }] }], isReverse: [{ type: i0.Input, args: [{ isSignal: true, alias: "isReverse", required: false }] }], reverseNameOrder: [{ type: i0.Input, args: [{ isSignal: true, alias: "reverseNameOrder", required: false }] }], menuChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EdsUserProfileMenu), { isSignal: true }] }], onDocumentClick: [{
|
|
@@ -202,10 +202,10 @@ class EdsUserProfileMenuItem {
|
|
|
202
202
|
this.tabindex = -1;
|
|
203
203
|
this.role = 'menuitem';
|
|
204
204
|
}
|
|
205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
205
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfileMenuItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
206
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsUserProfileMenuItem, isStandalone: true, selector: "eds-user-profile-menu-item", host: { properties: { "attr.tabindex": "this.tabindex", "attr.role": "this.role" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;padding:var(--eds-sp-xs) var(--eds-sp-m);font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);cursor:pointer;outline:none;transition:background .15s ease}.eui-21 :host:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host:first-child{background:var(--eds-c-surface-selected)}.eui-21 :host:focus{background:var(--eds-c-surface-selected)}\n"] }); }
|
|
207
207
|
}
|
|
208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsUserProfileMenuItem, decorators: [{
|
|
209
209
|
type: Component,
|
|
210
210
|
args: [{ selector: 'eds-user-profile-menu-item', template: "<ng-content></ng-content>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;padding:var(--eds-sp-xs) var(--eds-sp-m);font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground);cursor:pointer;outline:none;transition:background .15s ease}.eui-21 :host:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-xs)!important}.eui-21 :host:hover{background:var(--eds-c-surface-elevation-sunken)}.eui-21 :host:first-child{background:var(--eds-c-surface-selected)}.eui-21 :host:focus{background:var(--eds-c-surface-selected)}\n"] }]
|
|
211
211
|
}], propDecorators: { tabindex: [{
|
|
@@ -30,10 +30,10 @@ class EdsWizardStepComponent {
|
|
|
30
30
|
}, /* @ts-ignore */
|
|
31
31
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
32
32
|
}
|
|
33
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
34
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
33
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsWizardStepComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
34
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsWizardStepComponent, isStandalone: true, selector: "eds-wizard-step", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, subLabel: { classPropertyName: "subLabel", publicName: "subLabel", isSignal: true, isRequired: false, transformFunction: null }, indexLabel: { classPropertyName: "indexLabel", publicName: "indexLabel", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, isCompleted: { classPropertyName: "isCompleted", publicName: "isCompleted", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isCompleted: "isCompletedChange", isActive: "isActiveChange", index: "indexChange" }, host: { properties: { "class": "hostClasses()" } }, hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsSuccess", "edsSuccess", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: '@if (isActive()) { <ng-content/> }', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
35
35
|
}
|
|
36
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
36
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsWizardStepComponent, decorators: [{
|
|
37
37
|
type: Component,
|
|
38
38
|
args: [{
|
|
39
39
|
selector: 'eds-wizard-step',
|
|
@@ -182,10 +182,10 @@ class EdsWizard {
|
|
|
182
182
|
elements[index].nativeElement.focus();
|
|
183
183
|
}
|
|
184
184
|
}
|
|
185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
186
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
185
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsWizard, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
186
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsWizard, isStandalone: true, selector: "eds-wizard", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, activeStepIndex: { classPropertyName: "activeStepIndex", publicName: "activeStepIndex", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, showLabels: { classPropertyName: "showLabels", publicName: "showLabels", isSignal: true, isRequired: false, transformFunction: null }, navigationAllowed: { classPropertyName: "navigationAllowed", publicName: "navigationAllowed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { stepSelect: "stepSelect" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, queries: [{ propertyName: "childSteps", predicate: EdsWizardStepComponent, isSignal: true }], viewQueries: [{ propertyName: "stepElements", predicate: ["stepEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"eds-wizard__steps\" role=\"tablist\" aria-orientation=\"horizontal\">\n @for (step of resolvedSteps(); track step.id ?? $index; let idx = $index; let last = $last) {\n <div\n #stepEl\n class=\"eds-wizard__step\"\n role=\"tab\"\n [class.eds-wizard__step--active]=\"idx === activeIndex()\"\n [class.eds-wizard__step--completed]=\"step.isCompleted\"\n [class.eds-wizard__step--disabled]=\"step.isDisabled\"\n [class.eds-wizard__step--warning]=\"step.colorVariant === 'warning'\"\n [class.eds-wizard__step--critical]=\"step.colorVariant === 'critical'\"\n [class.eds-wizard__step--success]=\"step.colorVariant === 'success'\"\n [attr.aria-selected]=\"idx === activeIndex()\"\n [attr.aria-disabled]=\"step.isDisabled\"\n [attr.aria-label]=\"step.label\"\n [attr.tabindex]=\"getTabIndex(idx)\"\n (click)=\"onStepClick(step, idx)\"\n (keydown)=\"onKeydown($event)\">\n\n <div class=\"eds-wizard__step-indicator\">\n <div class=\"eds-wizard__step-circle\">\n @if (step.icon) {\n <eds-icon [icon]=\"step.icon\" edsSizeS/>\n } @else if (step.isCompleted) {\n <eds-icon icon=\"check:core\" edsSizeS/>\n } @else if (step.colorVariant === 'critical') {\n <eds-icon icon=\"warning:core\" edsSizeS/>\n } @else {\n <span class=\"eds-wizard__step-number\">{{ step.indexLabel ?? idx + 1 }}</span>\n }\n </div>\n\n @if (!last) {\n <div class=\"eds-wizard__step-connector\"\n [class.eds-wizard__step-connector--completed]=\"step.isCompleted\">\n </div>\n }\n </div>\n\n @if (showLabels()) {\n <div class=\"eds-wizard__step-labels\">\n @if (step.label) {\n <span class=\"eds-wizard__step-label\">{{ step.label }}</span>\n }\n @if (step.subLabel) {\n <span class=\"eds-wizard__step-sublabel\">{{ step.subLabel }}</span>\n }\n </div>\n }\n </div>\n }\n</div>\n\n<div class=\"eds-wizard__content\" role=\"tabpanel\">\n <ng-content/>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-wizard{display:block}.eui-21 :host .eds-wizard__steps{display:flex;padding:var(--eds-sp-m) 0}.eui-21 :host .eds-wizard__step{display:flex;flex-direction:column;align-items:flex-start;flex:1 1 0;cursor:pointer;outline:none}.eui-21 :host .eds-wizard__step:first-child .eds-wizard__step-labels{text-align:left;align-items:flex-start}.eui-21 :host .eds-wizard__step:last-child{flex:0 0 auto}.eui-21 :host .eds-wizard__step:last-child .eds-wizard__step-connector{display:none}.eui-21 :host .eds-wizard__step:last-child .eds-wizard__step-labels{text-align:right;align-items:flex-end}.eui-21 :host .eds-wizard__step:focus-visible .eds-wizard__step-circle:focus-visible:not([readonly]){outline:var(--eds-bw-s) solid var(--eds-c-border-primary)!important;outline-offset:1px!important;border-radius:var(--eds-br-full)!important}.eui-21 :host .eds-wizard__step-indicator{display:flex;align-items:center;width:100%}.eui-21 :host .eds-wizard__step-circle{--_circle-size: 2rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--_circle-size);height:var(--_circle-size);border-radius:var(--eds-br-full);border:2px solid var(--eds-c-border-neutral);background-color:var(--eds-c-surface-default);font:var(--eds-f-label-m-semi-bold);color:var(--eds-c-foreground-subtler);transition:background-color .15s,border-color .15s,color .15s}.eui-21 :host .eds-wizard__step-number{font:var(--eds-f-label-m-semi-bold);line-height:1}.eui-21 :host .eds-wizard__step-connector{flex:1 1 0;height:2px;background-color:var(--eds-c-border-divider);margin:0 var(--eds-sp-2xs);transition:background-color .15s}.eui-21 :host .eds-wizard__step-connector--completed{background-color:var(--eds-c-border-primary)}.eui-21 :host .eds-wizard__step-labels{display:flex;flex-direction:column;margin-top:var(--eds-sp-2xs);width:var(--_circle-size, 2rem);text-align:center;align-items:center}.eui-21 :host .eds-wizard__step-label{font:var(--eds-f-label-s);color:var(--eds-c-foreground-subtler);transition:color .15s;white-space:nowrap}.eui-21 :host .eds-wizard__step-sublabel{font:var(--eds-f-paragraph-s);color:var(--eds-c-foreground-subtler);margin-top:var(--eds-sp-3xs);white-space:nowrap}.eui-21 :host .eds-wizard__content{margin-top:var(--eds-sp-m)}.eui-21 :host .eds-wizard__step--active .eds-wizard__step-circle{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary);color:var(--eds-c-on-surface-primary)}.eui-21 :host .eds-wizard__step--active .eds-wizard__step-label{color:var(--eds-c-foreground-primary)}.eui-21 :host .eds-wizard__step--active .eds-wizard__step-sublabel{color:var(--eds-c-foreground-primary)}.eui-21 :host .eds-wizard__step--completed .eds-wizard__step-circle{background-color:var(--eds-c-surface-primary);border-color:var(--eds-c-border-primary);color:var(--eds-c-on-surface-primary)}.eui-21 :host .eds-wizard__step--completed .eds-wizard__step-label{color:var(--eds-c-foreground-default)}.eui-21 :host .eds-wizard__step--critical:not(.eds-wizard__step--active) .eds-wizard__step-circle{border-color:var(--eds-c-border-critical);color:var(--eds-c-foreground-critical)}.eui-21 :host .eds-wizard__step--critical .eds-wizard__step-label{color:var(--eds-c-foreground-critical)}.eui-21 :host .eds-wizard__step--critical .eds-wizard__step-sublabel{color:var(--eds-c-foreground-critical)}.eui-21 :host .eds-wizard__step--warning:not(.eds-wizard__step--active) .eds-wizard__step-circle{border-color:var(--eds-c-border-warning);color:var(--eds-c-foreground-warning)}.eui-21 :host .eds-wizard__step--warning .eds-wizard__step-label{color:var(--eds-c-foreground-warning)}.eui-21 :host .eds-wizard__step--warning .eds-wizard__step-sublabel{color:var(--eds-c-foreground-warning)}.eui-21 :host .eds-wizard__step--success .eds-wizard__step-circle{border-color:var(--eds-c-border-success);color:var(--eds-c-foreground-success)}.eui-21 :host .eds-wizard__step--success .eds-wizard__step-label{color:var(--eds-c-foreground-success)}.eui-21 :host .eds-wizard__step--success .eds-wizard__step-sublabel{color:var(--eds-c-foreground-success)}.eui-21 :host .eds-wizard__step--disabled{cursor:not-allowed;opacity:.4}\n"], dependencies: [{ kind: "component", type: i1$1.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
187
187
|
}
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
188
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsWizard, decorators: [{
|
|
189
189
|
type: Component,
|
|
190
190
|
args: [{ selector: 'eds-wizard', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON], host: {
|
|
191
191
|
'[class]': 'hostClasses()',
|