@eui/eds 22.0.0-alpha.32 → 22.0.0-alpha.34
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 +50 -0
- package/docs/components/EdsBadge.html +3 -3
- package/docs/components/EdsTree.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/EdsBadge.md +2 -2
- package/docs/json/documentation.json +55 -55
- package/docs/llms.txt +5 -5
- package/docs/miscellaneous/typealiases.html +2 -2
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-badge.mjs +5 -5
- package/fesm2022/eui-eds-eds-badge.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-icon.mjs +2 -2
- package/fesm2022/eui-eds-eds-icon.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-password.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-password.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tree.mjs +2 -2
- package/fesm2022/eui-eds-eds-tree.mjs.map +1 -1
- package/package.json +1 -1
- package/types/eui-eds-eds-badge.d.ts +5 -5
- package/types/eui-eds-eds-badge.d.ts.map +1 -1
|
@@ -23,7 +23,7 @@ import { ObserversModule } from '@angular/cdk/observers';
|
|
|
23
23
|
*
|
|
24
24
|
* #### Variant
|
|
25
25
|
* ```html
|
|
26
|
-
* <eds-badge color="info" variant="
|
|
26
|
+
* <eds-badge color="info" variant="light">New</eds-badge>
|
|
27
27
|
* ```
|
|
28
28
|
*
|
|
29
29
|
* #### Truncation
|
|
@@ -46,8 +46,8 @@ class EdsBadge {
|
|
|
46
46
|
this.color = input('neutral', /* @ts-ignore */
|
|
47
47
|
...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
|
|
48
48
|
/**
|
|
49
|
-
* Visual variant of the badge. `filled` uses a solid semantic surface; `
|
|
50
|
-
* uses a
|
|
49
|
+
* Visual variant of the badge. `filled` uses a solid semantic surface; `light`
|
|
50
|
+
* uses a subtle semantic surface with a matching subtler foreground.
|
|
51
51
|
*
|
|
52
52
|
* @default 'filled'
|
|
53
53
|
*/
|
|
@@ -134,7 +134,7 @@ class EdsBadge {
|
|
|
134
134
|
}
|
|
135
135
|
}
|
|
136
136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBadge, isStandalone: true, selector: "eds-badge, span[edsBadge]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.color": "color()", "attr.variant": "variant()", "attr.size": "size()", "attr.icon-only": "iconOnly() || null", "attr.empty": "isEmpty() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentUpdated()) {\n <span class=\"eds-badge__wrapper\">\n {{ updatedContent() }}\n </span>\n} @else {\n <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n", styles: [":host{--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-border-width: var(--eds-bw-xs);--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-empty-size: var(--eds-sp-s);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle);display:inline-flex;border:var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-on-surface: var(--_eds-badge-on-surface);--_icon-size: initial}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-height);min-width:var(--_eds-badge-min-width);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: var(--eds-c-border-primary-subtle)}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success);--_eds-badge-border-color: var(--eds-c-border-success-subtle)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info);--_eds-badge-border-color: var(--eds-c-border-info-subtle)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning);--_eds-badge-border-color: var(--eds-c-border-warning-subtle)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical);--_eds-badge-border-color: var(--eds-c-border-critical-subtle)}:host([variant=
|
|
137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsBadge, isStandalone: true, selector: "eds-badge, span[edsBadge]", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, iconOnly: { classPropertyName: "iconOnly", publicName: "iconOnly", isSignal: true, isRequired: false, transformFunction: null }, maxCharCount: { classPropertyName: "maxCharCount", publicName: "maxCharCount", isSignal: true, isRequired: false, transformFunction: null }, charReplacement: { classPropertyName: "charReplacement", publicName: "charReplacement", isSignal: true, isRequired: false, transformFunction: null }, e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "attr.color": "color()", "attr.variant": "variant()", "attr.size": "size()", "attr.icon-only": "iconOnly() || null", "attr.empty": "isEmpty() || null", "attr.data-e2e": "e2eAttr()", "attr.aria-label": "ariaLabel()" } }, viewQueries: [{ propertyName: "content", first: true, predicate: ["contentRef"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (hasContentUpdated()) {\n <span class=\"eds-badge__wrapper\">\n {{ updatedContent() }}\n </span>\n} @else {\n <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n", styles: [":host{--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-border-width: var(--eds-bw-xs);--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-empty-size: var(--eds-sp-s);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle);display:inline-flex;border:var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-on-surface: var(--_eds-badge-on-surface);--_icon-size: initial}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-height);min-width:var(--_eds-badge-min-width);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: var(--eds-c-border-primary-subtle)}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success);--_eds-badge-border-color: var(--eds-c-border-success-subtle)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info);--_eds-badge-border-color: var(--eds-c-border-info-subtle)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning);--_eds-badge-border-color: var(--eds-c-border-warning-subtle)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical);--_eds-badge-border-color: var(--eds-c-border-critical-subtle)}:host([variant=light][color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);--_eds-badge-border-color: var(--eds-c-border-primary-subtler)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);--_eds-badge-border-color: var(--eds-c-border-neutral-subtler)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);--_eds-badge-border-color: var(--eds-c-border-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);--_eds-badge-border-color: var(--eds-c-border-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);--_eds-badge-border-color: var(--eds-c-border-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);--_eds-badge-border-color: var(--eds-c-border-critical-subtler)}:host([size=xs]){--_eds-badge-height: var(--eds-sp-s);--_eds-badge-min-width: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-microcopy-2xs);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-height: var(--eds-sp-m);--_eds-badge-min-width: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-microcopy-2xs)}:host([size=l]){--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-height);min-width:var(--_eds-badge-height)}:host-context(.eds-icon){position:absolute;left:60%;top:-20%}:host([empty]):host-context(.eds-icon){left:60%;top:-10%}:host([size=xs][empty]):host-context(.eds-icon){left:70%;top:-10%}:host-context(.eds-icon-button[size=\"2xs\"]){left:50%;top:-30%}:host-context(.eds-icon-button[size=xs]){left:50%;top:-40%}:host-context(.eds-icon-button[size=s]){left:50%;top:-50%}:host-context(.eds-icon-button[size=m]){left:50%;top:-40%}:host-context(.eds-icon-button[size=l]){left:50%;top:-25%}:host-context(.eds-avatar){border:var(--eds-bw-s) solid var(--eds-c-border-inverted)}\n"], dependencies: [{ kind: "ngmodule", type: ObserversModule }, { kind: "directive", type: i1.CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
138
138
|
}
|
|
139
139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsBadge, decorators: [{
|
|
140
140
|
type: Component,
|
|
@@ -147,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
147
147
|
'[attr.empty]': 'isEmpty() || null',
|
|
148
148
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
149
149
|
'[attr.aria-label]': 'ariaLabel()',
|
|
150
|
-
}, template: "@if (hasContentUpdated()) {\n <span class=\"eds-badge__wrapper\">\n {{ updatedContent() }}\n </span>\n} @else {\n <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n", styles: [":host{--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-border-width: var(--eds-bw-xs);--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-empty-size: var(--eds-sp-s);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle);display:inline-flex;border:var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-on-surface: var(--_eds-badge-on-surface);--_icon-size: initial}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-height);min-width:var(--_eds-badge-min-width);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: var(--eds-c-border-primary-subtle)}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success);--_eds-badge-border-color: var(--eds-c-border-success-subtle)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info);--_eds-badge-border-color: var(--eds-c-border-info-subtle)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning);--_eds-badge-border-color: var(--eds-c-border-warning-subtle)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical);--_eds-badge-border-color: var(--eds-c-border-critical-subtle)}:host([variant=
|
|
150
|
+
}, template: "@if (hasContentUpdated()) {\n <span class=\"eds-badge__wrapper\">\n {{ updatedContent() }}\n </span>\n} @else {\n <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n", styles: [":host{--_eds-badge-padding: 0 var(--eds-sp-3xs);--_eds-badge-border-radius: var(--eds-br-full);--_eds-badge-border-width: var(--eds-bw-xs);--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-3xs));--_eds-badge-empty-size: var(--eds-sp-s);--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle);display:inline-flex;border:var(--_eds-badge-border-width) solid var(--_eds-badge-border-color);border-radius:var(--_eds-badge-border-radius);background-color:var(--_eds-badge-surface);--_eds-icon-on-surface: var(--_eds-badge-on-surface);--_icon-size: initial}:host .eds-badge__wrapper{display:inline-flex;align-items:center;justify-content:center;color:var(--_eds-badge-on-surface);height:var(--_eds-badge-height);min-width:var(--_eds-badge-min-width);padding:var(--_eds-badge-padding);font:var(--_eds-badge-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host([color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary);--_eds-badge-on-surface: var(--eds-c-on-surface-primary);--_eds-badge-border-color: var(--eds-c-border-primary-subtle)}:host([color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral);--_eds-badge-border-color: var(--eds-c-border-neutral-subtle)}:host([color=success]){--_eds-badge-surface: var(--eds-c-surface-success);--_eds-badge-on-surface: var(--eds-c-on-surface-success);--_eds-badge-border-color: var(--eds-c-border-success-subtle)}:host([color=info]){--_eds-badge-surface: var(--eds-c-surface-info);--_eds-badge-on-surface: var(--eds-c-on-surface-info);--_eds-badge-border-color: var(--eds-c-border-info-subtle)}:host([color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning);--_eds-badge-on-surface: var(--eds-c-on-surface-warning);--_eds-badge-border-color: var(--eds-c-border-warning-subtle)}:host([color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical);--_eds-badge-on-surface: var(--eds-c-on-surface-critical);--_eds-badge-border-color: var(--eds-c-border-critical-subtle)}:host([variant=light][color=primary]){--_eds-badge-surface: var(--eds-c-surface-primary-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-primary-subtler);--_eds-badge-border-color: var(--eds-c-border-primary-subtler)}:host([variant=light][color=neutral]){--_eds-badge-surface: var(--eds-c-surface-neutral-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-neutral-subtler);--_eds-badge-border-color: var(--eds-c-border-neutral-subtler)}:host([variant=light][color=success]){--_eds-badge-surface: var(--eds-c-surface-success-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-success-subtler);--_eds-badge-border-color: var(--eds-c-border-success-subtler)}:host([variant=light][color=info]){--_eds-badge-surface: var(--eds-c-surface-info-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-info-subtler);--_eds-badge-border-color: var(--eds-c-border-info-subtler)}:host([variant=light][color=warning]){--_eds-badge-surface: var(--eds-c-surface-warning-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-warning-subtler);--_eds-badge-border-color: var(--eds-c-border-warning-subtler)}:host([variant=light][color=critical]){--_eds-badge-surface: var(--eds-c-surface-critical-subtler);--_eds-badge-on-surface: var(--eds-c-on-surface-critical-subtler);--_eds-badge-border-color: var(--eds-c-border-critical-subtler)}:host([size=xs]){--_eds-badge-height: var(--eds-sp-s);--_eds-badge-min-width: var(--eds-sp-s);--_eds-badge-font: var(--eds-f-microcopy-2xs);--_eds-badge-empty-size: var(--eds-sp-2xs)}:host([size=s]){--_eds-badge-height: var(--eds-sp-m);--_eds-badge-min-width: var(--eds-sp-m);--_eds-badge-font: var(--eds-f-microcopy-2xs)}:host([size=l]){--_eds-badge-height: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-min-width: calc(var(--eds-sp-m) + var(--eds-sp-2xs));--_eds-badge-font: var(--eds-f-microcopy-xs);--_eds-badge-empty-size: var(--eds-sp-m)}:host([empty]){width:var(--_eds-badge-empty-size);height:var(--_eds-badge-empty-size)}:host([icon-only]) .eds-badge__wrapper{padding:0;width:var(--_eds-badge-height);min-width:var(--_eds-badge-height)}:host-context(.eds-icon){position:absolute;left:60%;top:-20%}:host([empty]):host-context(.eds-icon){left:60%;top:-10%}:host([size=xs][empty]):host-context(.eds-icon){left:70%;top:-10%}:host-context(.eds-icon-button[size=\"2xs\"]){left:50%;top:-30%}:host-context(.eds-icon-button[size=xs]){left:50%;top:-40%}:host-context(.eds-icon-button[size=s]){left:50%;top:-50%}:host-context(.eds-icon-button[size=m]){left:50%;top:-40%}:host-context(.eds-icon-button[size=l]){left:50%;top:-25%}:host-context(.eds-avatar){border:var(--eds-bw-s) solid var(--eds-c-border-inverted)}\n"] }]
|
|
151
151
|
}], ctorParameters: () => [], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], iconOnly: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconOnly", required: false }] }], maxCharCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxCharCount", required: false }] }], charReplacement: [{ type: i0.Input, args: [{ isSignal: true, alias: "charReplacement", required: false }] }], e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], content: [{ type: i0.ViewChild, args: ['contentRef', { isSignal: true }] }] } });
|
|
152
152
|
|
|
153
153
|
const EDS_BADGE = [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n booleanAttribute,\n numberAttribute,\n computed,\n effect,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | '
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-badge.mjs","sources":["../../eds-badge/eds-badge.ts","../../eds-badge/eds-badge.html","../../eds-badge/index.ts","../../eds-badge/eui-eds-eds-badge.ts"],"sourcesContent":["import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n booleanAttribute,\n numberAttribute,\n computed,\n effect,\n input,\n signal,\n viewChild,\n} from '@angular/core';\nimport { ObserversModule } from '@angular/cdk/observers';\n\n/**\n * Local narrowed unions — the badge's variant contract. No shared-token import.\n */\nexport type EdsBadgeColor = 'primary' | 'neutral' | 'success' | 'info' | 'warning' | 'critical';\nexport type EdsBadgeVariant = 'filled' | 'light';\nexport type EdsBadgeSize = 'xs' | 's' | 'm' | 'l';\n\n/**\n * @description\n * A badge component that displays text, numbers, or a dot indicator with semantic\n * color, size, and variant styling. Supports content truncation, an automatic empty\n * state, and an icon-only (dot) mode.\n *\n * @usageNotes\n * #### Basic badge\n * ```html\n * <eds-badge>99</eds-badge>\n * ```\n *\n * #### Semantic colors\n * ```html\n * <eds-badge color=\"success\">Active</eds-badge>\n * <eds-badge color=\"critical\">Error</eds-badge>\n * ```\n *\n * #### Variant\n * ```html\n * <eds-badge color=\"info\" variant=\"light\">New</eds-badge>\n * ```\n *\n * #### Truncation\n * ```html\n * <eds-badge [maxCharCount]=\"2\" charReplacement=\"99+\">150</eds-badge>\n * ```\n *\n * #### Icon-only (dot indicator)\n * ```html\n * <eds-badge iconOnly color=\"critical\"></eds-badge>\n * ```\n */\n@Component({\n selector: 'eds-badge, span[edsBadge]',\n templateUrl: './eds-badge.html',\n styleUrl: './eds-badge.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [ObserversModule],\n host: {\n role: 'status',\n '[attr.color]': 'color()',\n '[attr.variant]': 'variant()',\n '[attr.size]': 'size()',\n '[attr.icon-only]': 'iconOnly() || null',\n '[attr.empty]': 'isEmpty() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[attr.aria-label]': 'ariaLabel()',\n },\n})\nexport class EdsBadge {\n /**\n * Semantic color of the badge.\n *\n * @default 'neutral'\n */\n color = input<EdsBadgeColor>('neutral');\n\n /**\n * Visual variant of the badge. `filled` uses a solid semantic surface; `light`\n * uses a subtle semantic surface with a matching subtler foreground.\n *\n * @default 'filled'\n */\n variant = input<EdsBadgeVariant>('filled');\n\n /**\n * Size of the badge.\n *\n * @default 'm'\n */\n size = input<EdsBadgeSize>('m');\n\n /**\n * Whether the badge is a small dot indicator with no text content.\n *\n * @default false\n */\n iconOnly = input(false, { transform: booleanAttribute });\n\n /**\n * Maximum number of characters to display before truncating. When the content\n * exceeds this limit it is replaced with `charReplacement`. `0` disables truncation.\n *\n * @default 0\n */\n maxCharCount = input(0, { transform: numberAttribute });\n\n /**\n * Text shown when the content is truncated by `maxCharCount`. Falls back to `'99+'`.\n *\n * @default ''\n */\n charReplacement = input('');\n\n /**\n * Data attribute for e2e testing.\n *\n * @default 'eds-badge'\n */\n e2eAttr = input('eds-badge');\n\n /**\n * ARIA label for accessibility. When `null`, the visible content serves as the\n * accessible name.\n *\n * @default 'badge'\n */\n ariaLabel = input<string | null>('badge');\n\n protected readonly content = viewChild<ElementRef<HTMLElement>>('contentRef');\n\n /** Whether the projected content is empty (drives the dot/empty state). */\n protected readonly isEmpty = signal(false);\n\n /** Whether the content was truncated by `maxCharCount`. */\n protected readonly hasContentUpdated = signal(false);\n\n /** The replacement text shown when content is truncated. */\n protected readonly updatedContent = computed(() => this.charReplacement() || '99+');\n\n constructor() {\n effect(() => {\n const content = this.content();\n if (content) {\n this.isEmpty.set(content.nativeElement.childNodes.length === 0);\n if (!this.isEmpty()) {\n this._checkContent();\n }\n }\n });\n }\n\n /**\n * Handles projected content changes and re-evaluates truncation.\n */\n onContentChanged(): void {\n this._checkContent();\n }\n\n /**\n * Checks whether the content exceeds `maxCharCount` and flags truncation.\n */\n private _checkContent(): void {\n const maxCharCount = this.maxCharCount();\n const contentEl = this.content();\n if (maxCharCount !== 0 && contentEl) {\n const contentText = contentEl.nativeElement.outerText;\n this.hasContentUpdated.set(!!contentText && contentText.length > maxCharCount);\n }\n }\n}\n","@if (hasContentUpdated()) {\n <span class=\"eds-badge__wrapper\">\n {{ updatedContent() }}\n </span>\n} @else {\n <span class=\"eds-badge__wrapper\" #contentRef (cdkObserveContent)=\"onContentChanged()\">\n <ng-content></ng-content>\n </span>\n}\n","import { EdsBadge } from './eds-badge';\n\nexport * from './eds-badge';\n\nexport const EDS_BADGE = [\n EdsBadge,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -86,7 +86,7 @@ class EdsIcon {
|
|
|
86
86
|
this.config = inject(EUI_CONFIG_TOKEN, { optional: true });
|
|
87
87
|
}
|
|
88
88
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"3xs\"]){--_eds-icon-size: var(--eds-is-3xs)}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
89
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsIcon, isStandalone: true, selector: "eds-icon, span[edsIcon]", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, set: { classPropertyName: "set", publicName: "set", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaHidden: { classPropertyName: "ariaHidden", publicName: "ariaHidden", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.color": "color()", "attr.size": "size()", "attr.rounded": "rounded() || null", "attr.loading": "isLoading() || null", "attr.role": "ariaHidden() ? null : \"img\"", "attr.aria-label": "ariaLabel() || null", "attr.aria-hidden": "ariaHidden() || null" }, classAttribute: "eds-icon" }, ngImport: i0, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"3xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xs))}:host([size=\"2xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xs))}:host([size=xs]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xs))}:host([size=s]){--_eds-icon-size: var(--_icon-size, var(--eds-is-s))}:host([size=m]){--_eds-icon-size: var(--_icon-size, var(--eds-is-m))}:host([size=l]){--_eds-icon-size: var(--_icon-size, var(--eds-is-l))}:host([size=xl]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xl))}:host([size=\"2xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xl))}:host([size=\"3xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xl))}:host([size=\"4xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-4xl))}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
90
90
|
}
|
|
91
91
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsIcon, decorators: [{
|
|
92
92
|
type: Component,
|
|
@@ -99,7 +99,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
99
99
|
'[attr.role]': 'ariaHidden() ? null : "img"',
|
|
100
100
|
'[attr.aria-label]': 'ariaLabel() || null',
|
|
101
101
|
'[attr.aria-hidden]': 'ariaHidden() || null',
|
|
102
|
-
}, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"3xs\"]){--_eds-icon-size: var(--eds-is-3xs)}:host([size=\"2xs\"]){--_eds-icon-size: var(--eds-is-2xs)}:host([size=xs]){--_eds-icon-size: var(--eds-is-xs)}:host([size=s]){--_eds-icon-size: var(--eds-is-s)}:host([size=m]){--_eds-icon-size: var(--eds-is-m)}:host([size=l]){--_eds-icon-size: var(--eds-is-l)}:host([size=xl]){--_eds-icon-size: var(--eds-is-xl)}:host([size=\"2xl\"]){--_eds-icon-size: var(--eds-is-2xl)}:host([size=\"3xl\"]){--_eds-icon-size: var(--eds-is-3xl)}:host([size=\"4xl\"]){--_eds-icon-size: var(--eds-is-4xl)}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
102
|
+
}, template: "@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n", styles: [":host{--_eds-icon-size: var(--_icon-size, var(--eds-is-m));--_eds-icon-color: var(--_eds-icon-on-surface, var(--_on-surface, var(--eds-c-foreground)));display:inline-flex;position:relative}:host .eds-icon-svg{height:var(--_eds-icon-size);width:var(--_eds-icon-size);fill:var(--_eds-icon-color);color:var(--_eds-icon-color)}:host .eds-icon-svg.eds-icon-set-flags-1x1,:host .eds-icon-svg.eds-icon-set-flags-4x3{fill:none}:host([size=\"3xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xs))}:host([size=\"2xs\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xs))}:host([size=xs]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xs))}:host([size=s]){--_eds-icon-size: var(--_icon-size, var(--eds-is-s))}:host([size=m]){--_eds-icon-size: var(--_icon-size, var(--eds-is-m))}:host([size=l]){--_eds-icon-size: var(--_icon-size, var(--eds-is-l))}:host([size=xl]){--_eds-icon-size: var(--_icon-size, var(--eds-is-xl))}:host([size=\"2xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-2xl))}:host([size=\"3xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-3xl))}:host([size=\"4xl\"]){--_eds-icon-size: var(--_icon-size, var(--eds-is-4xl))}:host([color=neutral]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground))}:host([color=neutral-subtle]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtle))}:host([color=neutral-subtler]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-subtler))}:host([color=primary]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-primary))}:host([color=highlight]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-highlight))}:host([color=info]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-info))}:host([color=success]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-success))}:host([color=warning]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-warning))}:host([color=critical]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-critical))}:host([color=brand]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-on-surface-brand))}:host([color=disabled]){--_eds-icon-color: var(--_eds-icon-on-surface, var(--eds-c-foreground-disabled))}:host([rounded]){border-radius:50%;overflow:hidden}:host([rounded]) .eds-icon-svg{border-radius:50%}:host([loading]){--_eds-icon-spinner-border: max(2px, calc(var(--_eds-icon-size) * .125))}:host([loading]) .eds-icon-spinner{display:inline-block;box-sizing:border-box;width:var(--_eds-icon-size);height:var(--_eds-icon-size);border:var(--_eds-icon-spinner-border) solid var(--eds-c-border-neutral-subtle);border-top-color:var(--_eds-icon-color);border-radius:50%;animation:eds-icon-spin .6s linear infinite}@keyframes eds-icon-spin{to{transform:rotate(360deg)}}\n"] }]
|
|
103
103
|
}], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], set: [{ type: i0.Input, args: [{ isSignal: true, alias: "set", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], ariaHidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaHidden", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }] } });
|
|
104
104
|
|
|
105
105
|
/**
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n | 'neutral'\n | 'neutral-subtle'\n | 'neutral-subtler'\n | 'primary'\n | 'highlight'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'brand'\n | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n | '3xs'\n | '2xs'\n | 'xs'\n | 's'\n | 'm'\n | 'l'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n selector: 'eds-icon, span[edsIcon]',\n templateUrl: './eds-icon.html',\n styleUrl: './eds-icon.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-icon',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'rounded() || null',\n '[attr.loading]': 'isLoading() || null',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIcon {\n /**\n * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n * When format includes colon separator, automatically splits into icon and set properties.\n */\n icon = input<string>('');\n\n /**\n * Icon set library to load the icon from.\n * @default 'regular'\n */\n set = input('regular');\n\n /**\n * Semantic color of the icon.\n * @default 'neutral'\n */\n color = input<EdsIconColor>('neutral');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /**\n * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n * @default false\n */\n rounded = input(false, { transform: booleanAttribute });\n\n /**\n * When true, replaces the icon with a spinning loading indicator.\n * The spinner inherits the icon's size and color.\n * @default false\n */\n isLoading = input(false, { transform: booleanAttribute });\n\n /** Resolved icon name (parsed from 'icon:set' format). */\n iconName = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[0];\n }\n return raw;\n });\n\n /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n resolvedSet = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[1] || 'regular';\n }\n return this.set() || 'regular';\n });\n\n /** Base URL for icon assets, resolved from app config (falls back to 'assets'). */\n assetsBaseUrl = computed(() => this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets');\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n}\n","@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n","import {\n ChangeDetectionStrategy,\n Component,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n selector: 'eds-icon-image, span[edsIconImage]',\n templateUrl: './eds-icon-image.html',\n styleUrl: './eds-icon-image.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.size]': 'size()',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIconImage {\n /**\n * Direct URL to an SVG icon file, bypassing the icon set resolution.\n * Useful for loading custom or external icons not in configured icon sets.\n */\n iconUrl = input<string>('');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /** Base URL for icon assets, resolved from app config (falls back to 'assets'). */\n assetsBaseUrl = computed(() => this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets');\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n EdsIcon,\n EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-icon.mjs","sources":["../../eds-icon/eds-icon.ts","../../eds-icon/eds-icon.html","../../eds-icon/eds-icon-image.ts","../../eds-icon/eds-icon-image.html","../../eds-icon/index.ts","../../eds-icon/eui-eds-eds-icon.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\n\n/**\n * Local narrowed color union — the icon's color contract.\n * Maps the legacy `EdsColorDirective` semantic booleans to EDS semantic colors.\n */\nexport type EdsIconColor =\n | 'neutral'\n | 'neutral-subtle'\n | 'neutral-subtler'\n | 'primary'\n | 'highlight'\n | 'info'\n | 'success'\n | 'warning'\n | 'critical'\n | 'brand'\n | 'disabled';\n\n/**\n * Local narrowed size union — the icon's size contract.\n */\nexport type EdsIconSize =\n | '3xs'\n | '2xs'\n | 'xs'\n | 's'\n | 'm'\n | 'l'\n | 'xl'\n | '2xl'\n | '3xl'\n | '4xl';\n\n/**\n * @description\n * Displays a scalable vector icon from a sprite set. Supports semantic color and size via\n * string inputs reflected as host attributes, an optional circular clip, and a loading spinner.\n * Icons resolve from the configured assets path using the `iconName:setName` convention.\n *\n * @usageNotes\n * ```html\n * <eds-icon icon=\"check\" color=\"success\" size=\"m\" />\n * <eds-icon icon=\"warning\" color=\"warning\" size=\"l\" [ariaHidden]=\"false\" ariaLabel=\"Warning\" />\n * <eds-icon icon=\"check:core\" />\n * ```\n */\n@Component({\n selector: 'eds-icon, span[edsIcon]',\n templateUrl: './eds-icon.html',\n styleUrl: './eds-icon.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n class: 'eds-icon',\n '[attr.color]': 'color()',\n '[attr.size]': 'size()',\n '[attr.rounded]': 'rounded() || null',\n '[attr.loading]': 'isLoading() || null',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIcon {\n /**\n * Name of the icon to display, optionally including the icon set using 'iconName:setName' format.\n * When format includes colon separator, automatically splits into icon and set properties.\n */\n icon = input<string>('');\n\n /**\n * Icon set library to load the icon from.\n * @default 'regular'\n */\n set = input('regular');\n\n /**\n * Semantic color of the icon.\n * @default 'neutral'\n */\n color = input<EdsIconColor>('neutral');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /**\n * Applies a circular clip (border-radius: 50%) to the icon, useful for flag icons.\n * @default false\n */\n rounded = input(false, { transform: booleanAttribute });\n\n /**\n * When true, replaces the icon with a spinning loading indicator.\n * The spinner inherits the icon's size and color.\n * @default false\n */\n isLoading = input(false, { transform: booleanAttribute });\n\n /** Resolved icon name (parsed from 'icon:set' format). */\n iconName = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[0];\n }\n return raw;\n });\n\n /** Resolved icon set (parsed from 'icon:set' format or defaults to set input). */\n resolvedSet = computed(() => {\n const raw = this.icon();\n if (raw && raw.indexOf(':') > -1) {\n return raw.split(':')[1] || 'regular';\n }\n return this.set() || 'regular';\n });\n\n /** Base URL for icon assets, resolved from app config (falls back to 'assets'). */\n assetsBaseUrl = computed(() => this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets');\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n}\n","@if (isLoading()) {\n <span class=\"eds-icon-spinner\" aria-hidden=\"true\"></span>\n} @else {\n <svg\n class=\"eds-icon-svg eds-sprite-{{iconName()}} eds-icon-set-{{resolvedSet()}}\"\n aria-hidden=\"true\">\n <use [attr.href]=\"assetsBaseUrl() + '/eds/icons/sprites/' + resolvedSet() + '.svg#' + iconName()\"></use>\n </svg>\n}\n<ng-content />\n","import {\n ChangeDetectionStrategy,\n Component,\n inject,\n computed,\n booleanAttribute,\n input,\n} from '@angular/core';\nimport { EUI_CONFIG_TOKEN } from '@eui/core';\nimport { EuiConfig } from '@eui/core';\nimport { EdsIconSize } from './eds-icon';\n\n/**\n * @description\n * Displays a raster/vector image as an icon from a direct URL, bypassing sprite-set resolution.\n * Sized via the `size` string input reflected as a host attribute.\n *\n * @usageNotes\n * ```html\n * <eds-icon-image iconUrl=\"/assets/custom-icon.svg\" size=\"l\" ariaLabel=\"Custom icon\" />\n * ```\n */\n@Component({\n selector: 'eds-icon-image, span[edsIconImage]',\n templateUrl: './eds-icon-image.html',\n styleUrl: './eds-icon-image.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n host: {\n '[attr.size]': 'size()',\n '[attr.role]': 'ariaHidden() ? null : \"img\"',\n '[attr.aria-label]': 'ariaLabel() || null',\n '[attr.aria-hidden]': 'ariaHidden() || null',\n },\n})\nexport class EdsIconImage {\n /**\n * Direct URL to an SVG icon file, bypassing the icon set resolution.\n * Useful for loading custom or external icons not in configured icon sets.\n */\n iconUrl = input<string>('');\n\n /**\n * Size of the icon.\n * @default 'm'\n */\n size = input<EdsIconSize>('m');\n\n /**\n * Accessible label for screen readers describing the icon's purpose.\n */\n ariaLabel = input<string>('');\n\n /**\n * Hides the icon from assistive technologies when purely decorative.\n * @default true\n */\n ariaHidden = input(true, { transform: booleanAttribute });\n\n /** Base URL for icon assets, resolved from app config (falls back to 'assets'). */\n assetsBaseUrl = computed(() => this.config?.appConfig?.global?.eui?.assetsBaseUrl || 'assets');\n\n private config = inject<EuiConfig>(EUI_CONFIG_TOKEN, { optional: true })!;\n}\n","<svg class=\"eds-icon-svg-image\" aria-hidden=\"true\" role=\"img\">\n <image [attr.href]=\"iconUrl()\" class=\"eds-icon-svg-image\"></image>\n</svg>\n","import { EdsIcon } from './eds-icon';\nimport { EdsIconImage } from './eds-icon-image';\n\nexport * from './eds-icon';\nexport * from './eds-icon-image';\n\nexport const EDS_ICON = [\n EdsIcon,\n EdsIconImage,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -141,7 +141,7 @@ class EdsInputPassword {
|
|
|
141
141
|
this._onChange(target.value);
|
|
142
142
|
}
|
|
143
143
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputPassword, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
144
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputPassword, isStandalone: true, selector: "eds-input-password", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.invalid": "_isInvalid() || null", "attr.readonly": "readonly() || null", "attr.disabled": "internalDisabled() || null", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-password" }, ngImport: i0, template: "<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .eds-input-button{width:100%}:host ::ng-deep .eds-icon-button{border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--eds-br-s);border-bottom-right-radius:var(--eds-br-s);background-color:var(--eds-c-surface-elevation)}:host ::ng-deep .eds-icon-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}:host([disabled]) ::ng-deep .eds-icon-button{background-color:var(--eds-c-suface-disabled);border-color:var(--eds-c-border-disabled)}:host([readonly]) ::ng-deep .eds-icon-button{background-color:transparent;border-color:transparent}:host([readonly]) ::ng-deep .eds-icon-button:before{display:none}:host([invalid]) ::ng-deep .eds-input-text{border-color:var(--eds-c-border-critical)}\n"], dependencies: [{ kind: "component", type: i1.EdsInputButton, selector: "eds-input-button", inputs: ["e2eAttr", "edsButtonPositionStart", "edsButtonPositionEnd"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i3.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsInputPassword, isStandalone: true, selector: "eds-input-password", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, isInvalid: { classPropertyName: "isInvalid", publicName: "isInvalid", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, hideLabel: { classPropertyName: "hideLabel", publicName: "hideLabel", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.invalid": "_isInvalid() || null", "attr.readonly": "readonly() || null", "attr.disabled": "internalDisabled() || null", "attr.data-e2e": "e2eAttr()" }, classAttribute: "eds-input-password" }, ngImport: i0, template: "<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .eds-input-button{width:100%}:host ::ng-deep .eds-icon-button{border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--eds-br-s);border-bottom-right-radius:var(--eds-br-s);background-color:var(--eds-c-surface-elevation)}:host ::ng-deep .eds-icon-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}:host([disabled]) ::ng-deep .eds-icon-button{background-color:var(--eds-c-suface-disabled);border-color:var(--eds-c-border-disabled)}:host([readonly]) ::ng-deep .eds-icon-button{background-color:transparent;border-color:transparent}:host([readonly]) ::ng-deep .eds-icon-button:before{display:none}:host([invalid]) ::ng-deep .eds-input-text,:host([invalid]) ::ng-deep .eds-icon-button{border-color:var(--eds-c-border-critical)}\n"], dependencies: [{ kind: "component", type: i1.EdsInputButton, selector: "eds-input-button", inputs: ["e2eAttr", "edsButtonPositionStart", "edsButtonPositionEnd"] }, { kind: "component", type: i2.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i3.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
145
145
|
}
|
|
146
146
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsInputPassword, decorators: [{
|
|
147
147
|
type: Component,
|
|
@@ -155,7 +155,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
155
155
|
'[attr.readonly]': 'readonly() || null',
|
|
156
156
|
'[attr.disabled]': 'internalDisabled() || null',
|
|
157
157
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
158
|
-
}, template: "<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .eds-input-button{width:100%}:host ::ng-deep .eds-icon-button{border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--eds-br-s);border-bottom-right-radius:var(--eds-br-s);background-color:var(--eds-c-surface-elevation)}:host ::ng-deep .eds-icon-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}:host([disabled]) ::ng-deep .eds-icon-button{background-color:var(--eds-c-suface-disabled);border-color:var(--eds-c-border-disabled)}:host([readonly]) ::ng-deep .eds-icon-button{background-color:transparent;border-color:transparent}:host([readonly]) ::ng-deep .eds-icon-button:before{display:none}:host([invalid]) ::ng-deep .eds-input-text{border-color:var(--eds-c-border-critical)}\n"] }]
|
|
158
|
+
}, template: "<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n", styles: [":host{display:block;width:100%}:host ::ng-deep .eds-input-button{width:100%}:host ::ng-deep .eds-icon-button{border:var(--eds-bw-xs) solid var(--eds-c-border-neutral);border-left:none;border-top-left-radius:0;border-bottom-left-radius:0;border-top-right-radius:var(--eds-br-s);border-bottom-right-radius:var(--eds-br-s);background-color:var(--eds-c-surface-elevation)}:host ::ng-deep .eds-icon-button:before{background-color:var(--eds-c-border-divider);content:\"\";display:block;height:1.75rem;left:-1px;position:absolute;top:var(--eds-sp-2xs);width:1px}:host([disabled]) ::ng-deep .eds-icon-button{background-color:var(--eds-c-suface-disabled);border-color:var(--eds-c-border-disabled)}:host([readonly]) ::ng-deep .eds-icon-button{background-color:transparent;border-color:transparent}:host([readonly]) ::ng-deep .eds-icon-button:before{display:none}:host([invalid]) ::ng-deep .eds-input-text,:host([invalid]) ::ng-deep .eds-icon-button{border-color:var(--eds-c-border-critical)}\n"] }]
|
|
159
159
|
}], ctorParameters: () => [], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], isInvalid: [{ type: i0.Input, args: [{ isSignal: true, alias: "isInvalid", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], hideLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideLabel", required: false }] }] } });
|
|
160
160
|
|
|
161
161
|
/** Convenience array for importing eds-input-password. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eui-eds-eds-input-password.mjs","sources":["../../eds-input-password/eds-input-password.ts","../../eds-input-password/eds-input-password.html","../../eds-input-password/index.ts","../../eds-input-password/eui-eds-eds-input-password.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n booleanAttribute,\n computed,\n effect,\n input,\n signal,\n} from '@angular/core';\nimport { inject } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n/**\n * A password input field with a trailing toggle button that switches the\n * visibility of the entered value between masked (`password`) and plain\n * (`text`).\n *\n * Composes an {@link EdsInputButton} layout wrapping an `input[edsInputText]`\n * and a trailing `button[edsIconButton]` that toggles an eye / eye-slash icon.\n * Implements `ControlValueAccessor` for reactive/template-driven forms.\n *\n * @usageNotes\n * ### Basic usage\n * ```html\n * <eds-input-password placeholder=\"Enter your password\" />\n * ```\n *\n * ### With a form control\n * ```html\n * <eds-input-password [formControl]=\"password\" />\n * ```\n */\n@Component({\n selector: 'eds-input-password',\n templateUrl: './eds-input-password.html',\n styleUrl: './eds-input-password.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ...EDS_INPUT_BUTTON,\n ...EDS_INPUT_TEXT,\n ...EDS_ICON_BUTTON,\n ],\n host: {\n class: 'eds-input-password',\n '[attr.invalid]': '_isInvalid() || null',\n '[attr.readonly]': 'readonly() || null',\n '[attr.disabled]': 'internalDisabled() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsInputPassword implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-input-password'\n */\n e2eAttr = input('eds-input-password');\n\n /**\n * Placeholder text shown in the input when empty.\n * @default ''\n */\n placeholder = input('');\n\n /**\n * Controls whether the input is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the input is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the input shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n /**\n * Accessible label for the visibility toggle button when the password is\n * hidden (pressing it will show the password).\n * @default 'Show password'\n */\n showLabel = input('Show password');\n\n /**\n * Accessible label for the visibility toggle button when the password is\n * shown (pressing it will hide the password).\n * @default 'Hide password'\n */\n hideLabel = input('Hide password');\n\n /**\n * Whether the password value is currently visible (`true` → `text`,\n * `false` → `password`).\n */\n protected readonly visible = signal(false);\n\n /** Internal value backing the CVA and the native input element. */\n protected readonly value = signal('');\n\n /** Internal disabled state (written by CVA `setDisabledState` + the input). */\n protected readonly internalDisabled = signal(false);\n\n /** Resolved input `type` derived from the visibility state. */\n protected readonly inputType = computed(() => this.visible() ? 'text' : 'password');\n\n /** Icon shown on the toggle button, derived from the visibility state. */\n protected readonly toggleIcon = computed(() => this.visible() ? 'eye-slash' : 'eye');\n\n /** Accessible label for the toggle button, derived from the visibility state. */\n protected readonly toggleLabel = computed(() =>\n this.visible() ? this.hideLabel() : this.showLabel(),\n );\n\n private _ngControl = inject(NgControl, { optional: true, self: true });\n protected readonly _isInvalid = signal(false);\n\n constructor() {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n\n // Sync the disabled input into the internal signal.\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n // Sync the invalid state: prefer NgControl validity, fall back to the input.\n effect(() => {\n if (this._ngControl) {\n this._isInvalid.set(!!this._ngControl.invalid && !!this._ngControl.touched);\n } else {\n this._isInvalid.set(this.isInvalid());\n }\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: string): void {\n this.value.set(value ?? '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n /** Toggles the password visibility. */\n protected toggleVisibility(): void {\n if (this.internalDisabled() || this.readonly()) {\n return;\n }\n this.visible.update((v) => !v);\n }\n\n /** Handles input from the native text field. */\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.value.set(target.value);\n this._onChange(target.value);\n }\n\n protected onTouched: () => void = () => { /* noop */ };\n\n private _onChange: (value: string) => void = () => { /* noop */ };\n}\n","<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n","import { EdsInputPassword } from './eds-input-password';\n\nexport { EdsInputPassword };\n\n/** Convenience array for importing eds-input-password. */\nexport const EDS_INPUT_PASSWORD = [\n EdsInputPassword,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"eui-eds-eds-input-password.mjs","sources":["../../eds-input-password/eds-input-password.ts","../../eds-input-password/eds-input-password.html","../../eds-input-password/index.ts","../../eds-input-password/eui-eds-eds-input-password.ts"],"sourcesContent":["import {\n ChangeDetectionStrategy,\n Component,\n booleanAttribute,\n computed,\n effect,\n input,\n signal,\n} from '@angular/core';\nimport { inject } from '@angular/core';\nimport { ControlValueAccessor, NgControl } from '@angular/forms';\nimport { EDS_INPUT_BUTTON } from '@eui/eds/eds-input-button';\nimport { EDS_INPUT_TEXT } from '@eui/eds/eds-input-text';\nimport { EDS_ICON_BUTTON } from '@eui/eds/eds-icon-button';\n\n/**\n * A password input field with a trailing toggle button that switches the\n * visibility of the entered value between masked (`password`) and plain\n * (`text`).\n *\n * Composes an {@link EdsInputButton} layout wrapping an `input[edsInputText]`\n * and a trailing `button[edsIconButton]` that toggles an eye / eye-slash icon.\n * Implements `ControlValueAccessor` for reactive/template-driven forms.\n *\n * @usageNotes\n * ### Basic usage\n * ```html\n * <eds-input-password placeholder=\"Enter your password\" />\n * ```\n *\n * ### With a form control\n * ```html\n * <eds-input-password [formControl]=\"password\" />\n * ```\n */\n@Component({\n selector: 'eds-input-password',\n templateUrl: './eds-input-password.html',\n styleUrl: './eds-input-password.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n imports: [\n ...EDS_INPUT_BUTTON,\n ...EDS_INPUT_TEXT,\n ...EDS_ICON_BUTTON,\n ],\n host: {\n class: 'eds-input-password',\n '[attr.invalid]': '_isInvalid() || null',\n '[attr.readonly]': 'readonly() || null',\n '[attr.disabled]': 'internalDisabled() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n },\n})\nexport class EdsInputPassword implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-input-password'\n */\n e2eAttr = input('eds-input-password');\n\n /**\n * Placeholder text shown in the input when empty.\n * @default ''\n */\n placeholder = input('');\n\n /**\n * Controls whether the input is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the input is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the input shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n /**\n * Accessible label for the visibility toggle button when the password is\n * hidden (pressing it will show the password).\n * @default 'Show password'\n */\n showLabel = input('Show password');\n\n /**\n * Accessible label for the visibility toggle button when the password is\n * shown (pressing it will hide the password).\n * @default 'Hide password'\n */\n hideLabel = input('Hide password');\n\n /**\n * Whether the password value is currently visible (`true` → `text`,\n * `false` → `password`).\n */\n protected readonly visible = signal(false);\n\n /** Internal value backing the CVA and the native input element. */\n protected readonly value = signal('');\n\n /** Internal disabled state (written by CVA `setDisabledState` + the input). */\n protected readonly internalDisabled = signal(false);\n\n /** Resolved input `type` derived from the visibility state. */\n protected readonly inputType = computed(() => this.visible() ? 'text' : 'password');\n\n /** Icon shown on the toggle button, derived from the visibility state. */\n protected readonly toggleIcon = computed(() => this.visible() ? 'eye-slash' : 'eye');\n\n /** Accessible label for the toggle button, derived from the visibility state. */\n protected readonly toggleLabel = computed(() =>\n this.visible() ? this.hideLabel() : this.showLabel(),\n );\n\n private _ngControl = inject(NgControl, { optional: true, self: true });\n protected readonly _isInvalid = signal(false);\n\n constructor() {\n if (this._ngControl) {\n this._ngControl.valueAccessor = this;\n }\n\n // Sync the disabled input into the internal signal.\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n\n // Sync the invalid state: prefer NgControl validity, fall back to the input.\n effect(() => {\n if (this._ngControl) {\n this._isInvalid.set(!!this._ngControl.invalid && !!this._ngControl.touched);\n } else {\n this._isInvalid.set(this.isInvalid());\n }\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: string): void {\n this.value.set(value ?? '');\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n this.internalDisabled.set(isDisabled);\n }\n\n /** Toggles the password visibility. */\n protected toggleVisibility(): void {\n if (this.internalDisabled() || this.readonly()) {\n return;\n }\n this.visible.update((v) => !v);\n }\n\n /** Handles input from the native text field. */\n protected onInput(event: Event): void {\n const target = event.target as HTMLInputElement;\n this.value.set(target.value);\n this._onChange(target.value);\n }\n\n protected onTouched: () => void = () => { /* noop */ };\n\n private _onChange: (value: string) => void = () => { /* noop */ };\n}\n","<eds-input-button>\n <input\n edsInputText\n [type]=\"inputType()\"\n [attr.placeholder]=\"placeholder()\"\n [value]=\"value()\"\n [disabled]=\"internalDisabled()\"\n [readonly]=\"readonly()\"\n [isInvalid]=\"_isInvalid()\"\n (input)=\"onInput($event)\"\n (blur)=\"onTouched()\"\n />\n <button\n edsIconButton\n type=\"button\"\n [icon]=\"toggleIcon()\"\n [ariaLabel]=\"toggleLabel()\"\n [attr.aria-pressed]=\"visible()\"\n [disabled]=\"internalDisabled()\"\n (click)=\"toggleVisibility()\"\n ></button>\n</eds-input-button>\n","import { EdsInputPassword } from './eds-input-password';\n\nexport { EdsInputPassword };\n\n/** Convenience array for importing eds-input-password. */\nexport const EDS_INPUT_PASSWORD = [\n EdsInputPassword,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
|
|
@@ -948,7 +948,7 @@ class EdsTree {
|
|
|
948
948
|
return scrolled.getElementRef().nativeElement === this.cdkScrollableRef()?.getElementRef().nativeElement;
|
|
949
949
|
}
|
|
950
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 size=\"s\"\n rounded\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 size=\"m\"\n [color]=\"$any(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 size=\"m\" [color]=\"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 variant=\"outline\" [color]=\"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 size=\"m\"\n [color]=\"$any(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 size=\"s\" rounded 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 size=\"s\"\n rounded\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: [".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", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["color", "edsRequired", "hasRequiredLabel", "hasOptionalLabel"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], 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", "disabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
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 size=\"s\"\n rounded\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 size=\"m\"\n [color]=\"$any(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 size=\"m\" [color]=\"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 variant=\"light\" [color]=\"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 size=\"m\"\n [color]=\"$any(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 size=\"s\" rounded 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 size=\"s\"\n rounded\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: [".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", "color", "size", "ariaLabel", "ariaHidden", "rounded", "isLoading"] }, { kind: "component", type: i6.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "color", "size", "ariaLabel", "rounded", "disabled"], outputs: ["buttonClick"] }, { kind: "component", type: i7.EdsLabel, selector: "label[edsLabel], span[edsLabel], div[edsLabel]", inputs: ["color", "edsRequired", "hasRequiredLabel", "hasOptionalLabel"] }, { kind: "component", type: i8.EdsBadge, selector: "eds-badge, span[edsBadge]", inputs: ["color", "variant", "size", "iconOnly", "maxCharCount", "charReplacement", "e2eAttr", "ariaLabel"] }, { kind: "component", type: i9.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["color", "size", "ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "disabled"], 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", "disabled"], outputs: ["expand", "isDropdownOpen"] }, { kind: "directive", type: i10.EdsDropdownContent, selector: "eds-dropdown-content" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
952
952
|
}
|
|
953
953
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsTree, decorators: [{
|
|
954
954
|
type: Component,
|
|
@@ -969,7 +969,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
|
|
|
969
969
|
], host: {
|
|
970
970
|
'[class]': 'hostClasses()',
|
|
971
971
|
'[attr.data-e2e]': 'e2eAttr()',
|
|
972
|
-
}, 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 size=\"s\"\n rounded\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 size=\"m\"\n [color]=\"$any(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 size=\"m\" [color]=\"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 variant=\"outline\" [color]=\"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 size=\"m\"\n [color]=\"$any(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 size=\"s\" rounded 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 size=\"s\"\n rounded\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: [".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"] }]
|
|
972
|
+
}, 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 size=\"s\"\n rounded\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 size=\"m\"\n [color]=\"$any(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 size=\"m\" [color]=\"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 variant=\"light\" [color]=\"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 size=\"m\"\n [color]=\"$any(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 size=\"s\" rounded 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 size=\"s\"\n rounded\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: [".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"] }]
|
|
973
973
|
}], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], nodes: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodes", required: false }] }], nodeTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeTemplateRef", required: false }] }], nodeContentMetadataTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "nodeContentMetadataTemplateRef", required: false }] }], rightContextMenuTemplateRef: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightContextMenuTemplateRef", required: false }] }], customNodeSelectFn: [{ type: i0.Input, args: [{ isSignal: true, alias: "customNodeSelectFn", required: false }] }], expandedSvgIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedSvgIconClass", required: false }] }], collapsedSvgIconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedSvgIconClass", required: false }] }], isClickTogglingNode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isClickTogglingNode", required: false }] }], isMultiselect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isMultiselect", required: false }] }], isSingleSelect: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSingleSelect", required: false }] }], isRecursiveSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRecursiveSelection", required: false }] }], isRecursiveParentSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "isRecursiveParentSelection", required: false }] }], showUnderlinedLinks: [{ type: i0.Input, args: [{ isSignal: true, alias: "showUnderlinedLinks", required: false }] }], showLines: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLines", required: false }] }], highlightPath: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightPath", required: false }] }], virtualScrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollThreshold", required: false }] }], virtualScrollPageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScrollPageSize", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeToggle: [{ type: i0.Output, args: ["nodeToggle"] }], cdkScrollableRef: [{ type: i0.ViewChild, args: ['cdkScrollableRef', { ...{ read: CdkScrollable }, isSignal: true }] }], treeComponentInstance: [{ type: i0.ViewChild, args: ['treeComponentInstance', { isSignal: true }] }] } });
|
|
974
974
|
|
|
975
975
|
/**
|