@eui/eds 23.0.0-alpha.11 → 23.0.0-alpha.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/changelog.html +79 -0
- package/docs/index.html +1 -1
- package/docs/js/search/search_index.js +2 -2
- package/docs/llms.txt +1 -1
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-charts-eds-chart-legend.mjs +6 -6
- package/fesm2022/eui-eds-charts-eds-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-gauge-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-geo-chart.mjs +3 -3
- package/fesm2022/eui-eds-charts-eds-sparkline.mjs +3 -3
- package/fesm2022/eui-eds-eds-accordion.mjs +9 -9
- package/fesm2022/eui-eds-eds-alert.mjs +6 -6
- package/fesm2022/eui-eds-eds-autocomplete.mjs +21 -17
- package/fesm2022/eui-eds-eds-autocomplete.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-avatar.mjs +27 -27
- package/fesm2022/eui-eds-eds-badge.mjs +5 -4
- package/fesm2022/eui-eds-eds-badge.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-banner.mjs +21 -21
- package/fesm2022/eui-eds-eds-block-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-block-document.mjs +3 -3
- package/fesm2022/eui-eds-eds-blockquote.mjs +3 -3
- package/fesm2022/eui-eds-eds-breadcrumb.mjs +6 -6
- package/fesm2022/eui-eds-eds-button-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-calendar.mjs +33 -33
- package/fesm2022/eui-eds-eds-card.mjs +30 -30
- package/fesm2022/eui-eds-eds-carousel.mjs +6 -6
- package/fesm2022/eui-eds-eds-chip-list.mjs +9 -9
- package/fesm2022/eui-eds-eds-chip.mjs +5 -4
- package/fesm2022/eui-eds-eds-chip.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-dashboard-card.mjs +72 -72
- package/fesm2022/eui-eds-eds-date-block.mjs +3 -3
- package/fesm2022/eui-eds-eds-datepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-dialog.mjs +15 -15
- package/fesm2022/eui-eds-eds-dimmer.mjs +3 -3
- package/fesm2022/eui-eds-eds-disable-content.mjs +3 -3
- package/fesm2022/eui-eds-eds-discussion-thread.mjs +6 -6
- package/fesm2022/eui-eds-eds-dropdown.mjs +9 -9
- package/fesm2022/eui-eds-eds-fab-button.mjs +6 -6
- package/fesm2022/eui-eds-eds-feedback-message.mjs +3 -3
- package/fesm2022/eui-eds-eds-fieldset.mjs +15 -15
- package/fesm2022/eui-eds-eds-file-upload.mjs +12 -12
- package/fesm2022/eui-eds-eds-growl.mjs +6 -6
- package/fesm2022/eui-eds-eds-icon-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-state.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-icon.mjs +6 -6
- package/fesm2022/eui-eds-eds-input-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-checkbox.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-group.mjs +9 -9
- package/fesm2022/eui-eds-eds-input-icon.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-number.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-radio.mjs +3 -3
- package/fesm2022/eui-eds-eds-input-text.mjs +3 -3
- package/fesm2022/eui-eds-eds-label.mjs +3 -3
- package/fesm2022/eui-eds-eds-language-selector.mjs +6 -6
- package/fesm2022/eui-eds-eds-link.mjs +4 -4
- package/fesm2022/eui-eds-eds-link.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-list-items.mjs +6 -6
- package/fesm2022/eui-eds-eds-menu.mjs +6 -6
- package/fesm2022/eui-eds-eds-message-box.mjs +9 -9
- package/fesm2022/eui-eds-eds-multiselect.mjs +6 -6
- package/fesm2022/eui-eds-eds-navbar.mjs +6 -6
- package/fesm2022/eui-eds-eds-overlay.mjs +21 -21
- package/fesm2022/eui-eds-eds-page.mjs +51 -51
- package/fesm2022/eui-eds-eds-paginator.mjs +3 -3
- package/fesm2022/eui-eds-eds-popover.mjs +8 -7
- package/fesm2022/eui-eds-eds-popover.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-progress-bar.mjs +3 -3
- package/fesm2022/eui-eds-eds-progress-circle.mjs +3 -3
- package/fesm2022/eui-eds-eds-rating.mjs +3 -3
- package/fesm2022/eui-eds-eds-select.mjs +15 -15
- package/fesm2022/eui-eds-eds-shell.mjs +69 -69
- package/fesm2022/eui-eds-eds-skeleton.mjs +3 -3
- package/fesm2022/eui-eds-eds-slider.mjs +3 -3
- package/fesm2022/eui-eds-eds-snc.mjs +3 -3
- package/fesm2022/eui-eds-eds-split-button.mjs +3 -3
- package/fesm2022/eui-eds-eds-table.mjs +33 -33
- package/fesm2022/eui-eds-eds-tabs.mjs +39 -33
- package/fesm2022/eui-eds-eds-tabs.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-tag-group.mjs +3 -3
- package/fesm2022/eui-eds-eds-tag.mjs +3 -3
- package/fesm2022/eui-eds-eds-textarea.mjs +6 -6
- package/fesm2022/eui-eds-eds-timeline.mjs +6 -6
- package/fesm2022/eui-eds-eds-timepicker.mjs +3 -3
- package/fesm2022/eui-eds-eds-toggle-group.mjs +6 -6
- package/fesm2022/eui-eds-eds-toggle.mjs +3 -3
- package/fesm2022/eui-eds-eds-tooltip.mjs +6 -6
- package/fesm2022/eui-eds-eds-tree-list.mjs +21 -21
- package/fesm2022/eui-eds-eds-tree.mjs +9 -9
- package/fesm2022/eui-eds-eds-user-profile.mjs +9 -9
- package/fesm2022/eui-eds-eds-wizard.mjs +6 -6
- package/fesm2022/eui-eds-shared.mjs +27 -27
- package/package.json +1 -1
package/docs/llms.txt
CHANGED
package/docs/properties.html
CHANGED
|
@@ -14,10 +14,10 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
|
|
|
14
14
|
* ```
|
|
15
15
|
*/
|
|
16
16
|
class EdsChartLegend {
|
|
17
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
17
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChartLegend, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsChartLegend, isStandalone: true, selector: "eds-chart-legend", host: { properties: { "attr.data-e2e": "\"eds-chart-legend\"" }, classAttribute: "eds-chart-legend" }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eds-sp-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
19
19
|
}
|
|
20
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
20
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChartLegend, decorators: [{
|
|
21
21
|
type: Component,
|
|
22
22
|
args: [{ selector: 'eds-chart-legend', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
23
23
|
class: 'eds-chart-legend',
|
|
@@ -45,8 +45,8 @@ class EdsChartLegendItem {
|
|
|
45
45
|
this.value = input('', /* @ts-ignore */
|
|
46
46
|
...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
47
47
|
}
|
|
48
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
49
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
48
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChartLegendItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
49
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChartLegendItem, isStandalone: true, selector: "eds-chart-legend-item", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: true, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "eds-chart-legend-item" }, ngImport: i0, template: `
|
|
50
50
|
<span class="eds-chart-legend-item__dot" [style.background-color]="color()"></span>
|
|
51
51
|
<span class="eds-chart-legend-item__label">{{ label() }}</span>
|
|
52
52
|
@if (value()) {
|
|
@@ -54,7 +54,7 @@ class EdsChartLegendItem {
|
|
|
54
54
|
}
|
|
55
55
|
`, isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;align-items:center;gap:var(--eds-sp-3xs);font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground-subtler)}.eui-21 :host .eds-chart-legend-item__dot{display:inline-block;width:.5rem;height:.5rem;border-radius:var(--eds-br-full);flex-shrink:0}.eui-21 :host .eds-chart-legend-item__label{white-space:nowrap}.eui-21 :host .eds-chart-legend-item__value{font:var(--eds-f-label-s-semi-bold);color:var(--eds-c-foreground-default)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
56
56
|
}
|
|
57
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
57
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChartLegendItem, decorators: [{
|
|
58
58
|
type: Component,
|
|
59
59
|
args: [{ selector: 'eds-chart-legend-item', template: `
|
|
60
60
|
<span class="eds-chart-legend-item__dot" [style.background-color]="color()"></span>
|
|
@@ -734,8 +734,8 @@ class EdsChart {
|
|
|
734
734
|
prev += values[i];
|
|
735
735
|
}
|
|
736
736
|
}
|
|
737
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
738
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
737
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
738
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsChart, isStandalone: true, selector: "eds-chart", inputs: { series: { classPropertyName: "series", publicName: "series", isSignal: true, isRequired: false, transformFunction: null }, labels: { classPropertyName: "labels", publicName: "labels", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, showYAxis: { classPropertyName: "showYAxis", publicName: "showYAxis", isSignal: true, isRequired: false, transformFunction: null }, gridLines: { classPropertyName: "gridLines", publicName: "gridLines", isSignal: true, isRequired: false, transformFunction: null }, lineWidth: { classPropertyName: "lineWidth", publicName: "lineWidth", isSignal: true, isRequired: false, transformFunction: null }, fillOpacity: { classPropertyName: "fillOpacity", publicName: "fillOpacity", isSignal: true, isRequired: false, transformFunction: null }, barWidth: { classPropertyName: "barWidth", publicName: "barWidth", isSignal: true, isRequired: false, transformFunction: null }, animate: { classPropertyName: "animate", publicName: "animate", isSignal: true, isRequired: false, transformFunction: null }, animationDuration: { classPropertyName: "animationDuration", publicName: "animationDuration", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "\"eds-chart\"" }, classAttribute: "eds-chart" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["chartCanvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
739
739
|
<canvas #chartCanvas class="eds-chart__canvas" (mousemove)="onMouseMove($event)" (mouseleave)="onMouseLeave()"></canvas>
|
|
740
740
|
@if (tooltipVisible()) {
|
|
741
741
|
<div class="eds-chart__tooltip" [style.left.px]="tooltipX()" [style.top.px]="tooltipY()">
|
|
@@ -751,7 +751,7 @@ class EdsChart {
|
|
|
751
751
|
}
|
|
752
752
|
`, isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;width:100%;height:100%;position:relative}.eui-21 :host .eds-chart__canvas{display:block;width:100%;height:100%}.eui-21 :host .eds-chart__tooltip{position:absolute;z-index:10;background-color:var(--eds-c-surface-elevation);border:1px solid var(--eds-c-border-divider);border-radius:var(--eds-br-s);box-shadow:var(--eds-sh-2);padding:var(--eds-sp-xs) var(--eds-sp-s);pointer-events:none;white-space:nowrap;min-width:7rem}.eui-21 :host .eds-chart__tooltip-label{font:var(--eds-f-label-xs);color:var(--eds-c-foreground-subtler);margin-bottom:var(--eds-sp-3xs)}.eui-21 :host .eds-chart__tooltip-item{display:flex;align-items:center;gap:var(--eds-sp-3xs);padding:var(--eds-sp-3xs) 0}.eui-21 :host .eds-chart__tooltip-dot{width:.5rem;height:.5rem;border-radius:var(--eds-br-full);flex-shrink:0}.eui-21 :host .eds-chart__tooltip-name{font:var(--eds-f-paragraph-xs);color:var(--eds-c-foreground);flex:1}.eui-21 :host .eds-chart__tooltip-value{font:var(--eds-f-label-xs);color:var(--eds-c-foreground);margin-left:var(--eds-sp-s)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
753
753
|
}
|
|
754
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
754
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsChart, decorators: [{
|
|
755
755
|
type: Component,
|
|
756
756
|
args: [{ selector: 'eds-chart', template: `
|
|
757
757
|
<canvas #chartCanvas class="eds-chart__canvas" (mousemove)="onMouseMove($event)" (mouseleave)="onMouseLeave()"></canvas>
|
|
@@ -92,10 +92,10 @@ class EdsGaugeChart {
|
|
|
92
92
|
}, /* @ts-ignore */
|
|
93
93
|
...(ngDevMode ? [{ debugName: "ringSegments" }] : /* istanbul ignore next */ []));
|
|
94
94
|
}
|
|
95
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
96
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
95
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGaugeChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
96
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsGaugeChart, isStandalone: true, selector: "eds-gauge-chart", inputs: { segments: { classPropertyName: "segments", publicName: "segments", isSignal: true, isRequired: false, transformFunction: null }, centerLabel: { classPropertyName: "centerLabel", publicName: "centerLabel", isSignal: true, isRequired: false, transformFunction: null }, centerValue: { classPropertyName: "centerValue", publicName: "centerValue", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, halfCircle: { classPropertyName: "halfCircle", publicName: "halfCircle", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-gauge-chart\"" } }, ngImport: i0, template: "<svg viewBox=\"0 0 100 100\" class=\"eds-gauge-chart__svg\">\n <!-- Background track (full circle or half) -->\n <circle\n class=\"eds-gauge-chart__track\"\n cx=\"50\"\n cy=\"50\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke-dasharray]=\"trackDashArray()\"\n fill=\"none\"\n />\n <!-- Colored segments -->\n @for (seg of ringSegments(); track $index) {\n <circle\n class=\"eds-gauge-chart__segment\"\n cx=\"50\"\n cy=\"50\"\n [attr.r]=\"radius()\"\n [attr.stroke-width]=\"strokeWidth()\"\n [attr.stroke]=\"seg.color\"\n [attr.stroke-dasharray]=\"seg.dashArray\"\n [attr.stroke-dashoffset]=\"seg.dashOffset\"\n fill=\"none\"\n stroke-linecap=\"round\"\n />\n }\n</svg>\n<div class=\"eds-gauge-chart__center\">\n @if (centerValue()) {\n <span class=\"eds-gauge-chart__value\">{{ centerValue() }}</span>\n }\n @if (centerLabel()) {\n <span class=\"eds-gauge-chart__label\">{{ centerLabel() }}</span>\n }\n <ng-content />\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;align-items:center;justify-content:center;position:relative;width:var(--_ring-size);height:var(--_ring-size);margin:0 auto;container-type:inline-size}.eui-21 :host .eds-gauge-chart__svg{width:100%;height:100%;transform:rotate(-90deg)}.eui-21 :host .eds-gauge-chart__track{stroke:var(--eds-c-surface-neutral-subtler)}.eui-21 :host .eds-gauge-chart__segment{transition:stroke-dashoffset .3s ease}.eui-21 :host .eds-gauge-chart__center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;width:65%;height:65%}.eui-21 :host .eds-gauge-chart__value{font-weight:700;font-size:clamp(.875rem,15cqi,2rem);color:var(--eds-c-foreground);line-height:1.2}.eui-21 :host .eds-gauge-chart__label{font-size:clamp(.625rem,8cqi,.875rem);color:var(--eds-c-foreground-subtler);margin-top:var(--eds-sp-3xs)}.eui-21 :host{--_ring-size: 10rem}.eui-21 :host.eds-gauge-chart--size-xs{--_ring-size: 6rem}.eui-21 :host.eds-gauge-chart--size-s{--_ring-size: 8rem}.eui-21 :host.eds-gauge-chart--size-m{--_ring-size: 10rem}.eui-21 :host.eds-gauge-chart--size-l{--_ring-size: 14rem}.eui-21 :host.eds-gauge-chart--size-xl{--_ring-size: 18rem}.eui-21 :host.eds-gauge-chart--size-fluid{--_ring-size: auto;width:75%;padding:10%;aspect-ratio:1;margin:0 auto}.eui-21 :host.eds-gauge-chart--half{height:calc(var(--_ring-size) / 2);overflow:hidden}.eui-21 :host.eds-gauge-chart--half .eds-gauge-chart__svg{position:absolute;top:0;left:0;width:100%;height:var(--_ring-size);transform:rotate(180deg)}.eui-21 :host.eds-gauge-chart--half .eds-gauge-chart__center{top:75%;bottom:auto;left:50%;transform:translate(-50%,-50%)}.eui-21 :host.eds-gauge-chart--half .eds-gauge-chart__value{font:var(--eds-f-heading-xl-bold, bold 2rem/1.2 system-ui)}.eui-21 :host.eds-gauge-chart--half.eds-gauge-chart--size-fluid{--_ring-size: auto;width:100%;aspect-ratio:2/1}.eui-21 :host.eds-gauge-chart--half.eds-gauge-chart--size-fluid .eds-gauge-chart__svg{height:200%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
97
97
|
}
|
|
98
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGaugeChart, decorators: [{
|
|
99
99
|
type: Component,
|
|
100
100
|
args: [{ selector: 'eds-gauge-chart', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
101
101
|
'[class]': 'hostClasses()',
|
|
@@ -313,10 +313,10 @@ class EdsGeoChart {
|
|
|
313
313
|
}
|
|
314
314
|
return hex;
|
|
315
315
|
}
|
|
316
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
317
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGeoChart, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
317
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsGeoChart, isStandalone: true, selector: "eds-geo-chart", inputs: { mapUrl: { classPropertyName: "mapUrl", publicName: "mapUrl", isSignal: true, isRequired: false, transformFunction: null }, regions: { classPropertyName: "regions", publicName: "regions", isSignal: true, isRequired: false, transformFunction: null }, baseColor: { classPropertyName: "baseColor", publicName: "baseColor", isSignal: true, isRequired: false, transformFunction: null }, defaultFill: { classPropertyName: "defaultFill", publicName: "defaultFill", isSignal: true, isRequired: false, transformFunction: null }, strokeColor: { classPropertyName: "strokeColor", publicName: "strokeColor", isSignal: true, isRequired: false, transformFunction: null }, hoverable: { classPropertyName: "hoverable", publicName: "hoverable", isSignal: true, isRequired: false, transformFunction: null }, autoZoom: { classPropertyName: "autoZoom", publicName: "autoZoom", isSignal: true, isRequired: false, transformFunction: null }, zoomPadding: { classPropertyName: "zoomPadding", publicName: "zoomPadding", isSignal: true, isRequired: false, transformFunction: null }, bounds: { classPropertyName: "bounds", publicName: "bounds", isSignal: true, isRequired: false, transformFunction: null }, hasPanZoom: { classPropertyName: "hasPanZoom", publicName: "hasPanZoom", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "\"eds-geo-chart\"" }, classAttribute: "eds-geo-chart" }, ngImport: i0, template: `<div class="eds-geo-chart__container" [innerHTML]="sanitizedSvg()"></div>`, isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;width:100%}.eui-21 :host .eds-geo-chart__container{width:100%;height:auto}.eui-21 :host .eds-geo-chart__container ::ng-deep svg{width:100%;height:auto;display:block}.eui-21 :host .eds-geo-chart__container ::ng-deep path:hover{opacity:.85;filter:brightness(.7)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
318
318
|
}
|
|
319
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsGeoChart, decorators: [{
|
|
320
320
|
type: Component,
|
|
321
321
|
args: [{ selector: 'eds-geo-chart', template: `<div class="eds-geo-chart__container" [innerHTML]="sanitizedSvg()"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
322
322
|
class: 'eds-geo-chart',
|
|
@@ -55,8 +55,8 @@ class EdsSparkline {
|
|
|
55
55
|
}, /* @ts-ignore */
|
|
56
56
|
...(ngDevMode ? [{ debugName: "areaPath" }] : /* istanbul ignore next */ []));
|
|
57
57
|
}
|
|
58
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
59
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
58
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsSparkline, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
59
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsSparkline, isStandalone: true, selector: "eds-sparkline", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-e2e": "\"eds-sparkline\"" }, classAttribute: "eds-sparkline" }, ngImport: i0, template: `
|
|
60
60
|
<svg [attr.viewBox]="viewBox()" [attr.height]="height()" preserveAspectRatio="none" class="eds-sparkline__svg">
|
|
61
61
|
@if (type() === 'area') {
|
|
62
62
|
<path [attr.d]="areaPath()" [attr.fill]="color()" fill-opacity="0.15" />
|
|
@@ -65,7 +65,7 @@ class EdsSparkline {
|
|
|
65
65
|
</svg>
|
|
66
66
|
`, isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:inline-flex;align-items:center;width:100%}.eui-21 :host .eds-sparkline__svg{width:100%}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
67
67
|
}
|
|
68
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
68
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsSparkline, decorators: [{
|
|
69
69
|
type: Component,
|
|
70
70
|
args: [{ selector: 'eds-sparkline', template: `
|
|
71
71
|
<svg [attr.viewBox]="viewBox()" [attr.height]="height()" preserveAspectRatio="none" class="eds-sparkline__svg">
|
|
@@ -22,10 +22,10 @@ class EdsAccordion {
|
|
|
22
22
|
this.hostClasses = computed(() => 'eds-accordion', /* @ts-ignore */
|
|
23
23
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
24
24
|
}
|
|
25
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
26
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
25
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
26
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsAccordion, isStandalone: true, selector: "eds-accordion", host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-accordion\"" } }, hostDirectives: [{ directive: i1.CdkAccordion, inputs: ["multi", "isMulti"] }], ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;width:100%;flex-direction:column}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
27
27
|
}
|
|
28
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
28
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordion, decorators: [{
|
|
29
29
|
type: Component,
|
|
30
30
|
args: [{ selector: 'eds-accordion', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
|
|
31
31
|
{
|
|
@@ -93,10 +93,10 @@ class EdsAccordionItem {
|
|
|
93
93
|
event.preventDefault();
|
|
94
94
|
event.stopPropagation();
|
|
95
95
|
}
|
|
96
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
97
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
96
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordionItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
97
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsAccordionItem, isStandalone: true, selector: "eds-accordion-item", inputs: { edsDisabled: { classPropertyName: "edsDisabled", publicName: "edsDisabled", isSignal: true, isRequired: false, transformFunction: null }, headingLevel: { classPropertyName: "headingLevel", publicName: "headingLevel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { toggleItem: "toggleItem" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "\"eds-accordion-item\"" } }, hostDirectives: [{ directive: i1.CdkAccordionItem, inputs: ["expanded", "isExpanded"] }, { directive: i2.EdsSizeDirective, inputs: ["edsSizeS", "edsSizeS", "edsSizeM", "edsSizeM", "edsSizeL", "edsSizeL", "edsSizeVariant", "edsSizeVariant"] }], ngImport: i0, template: "<div [attr.role]=\"'heading'\" [attr.aria-level]=\"headingLevel()\">\n <button\n class=\"eds-accordion-item__header\"\n [id]=\"headerId\"\n [attr.aria-expanded]=\"accItem.expanded\"\n [attr.aria-controls]=\"panelId\"\n [attr.aria-disabled]=\"edsDisabled() || null\"\n [disabled]=\"edsDisabled()\"\n (click)=\"onToggle($event)\">\n <ng-content select=\"eds-accordion-item-header\"/>\n <span class=\"eds-accordion-item__header-icon\" [class.eds-accordion-item__header-icon--rotated]=\"accItem.expanded\">\n <eds-icon icon=\"caret-down:core\" edsSizeS/>\n </span>\n </button>\n</div>\n<div\n [id]=\"panelId\"\n role=\"region\"\n [attr.aria-labelledby]=\"headerId\"\n class=\"eds-accordion-item__body\"\n [class.eds-accordion-item__body--hidden]=\"!accItem.expanded\">\n <ng-content/>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;flex-direction:column;width:100%;border-bottom:var(--eds-bw-xs) solid var(--eds-c-border-divider);overflow:clip}.eui-21 :host [role=heading]{margin:0;padding:0;font:inherit}.eui-21 :host .eds-accordion-item__header{display:flex;align-items:center;width:100%;padding:var(--eds-sp-m) var(--eds-sp-l);outline:none;background-color:transparent;border:var(--eds-bw-none);text-align:start;cursor:pointer;font:var(--eds-f-label-m-semi-bold);color:var(--eds-c-foreground)}.eui-21 :host .eds-accordion-item__header:focus-visible{outline:var(--eds-bw-xs) solid var(--eds-c-border-focus);outline-offset:calc(-1 * var(--eds-sp-4xs));border-radius:var(--eds-br-xs)}.eui-21 :host .eds-accordion-item__header:hover:not(:disabled){background-color:var(--eds-c-surface-elevation-sunken)}.eui-21 :host .eds-accordion-item__header-icon{display:inline-flex;align-items:center;justify-content:center;margin-left:auto;padding-left:var(--eds-sp-m)}.eui-21 :host .eds-accordion-item__header-icon>*{display:inline-flex;transition:transform .2s ease}.eui-21 :host .eds-accordion-item__header-icon--rotated>*{transform:rotate(180deg)}.eui-21 :host .eds-accordion-item__body{padding:var(--eds-sp-xs) var(--eds-sp-l) var(--eds-sp-l) var(--eds-sp-l);font:var(--eds-f-paragraph-m)}.eui-21 :host .eds-accordion-item__body--hidden{display:none}.eui-21 :host.eds-accordion-item--size-s .eds-accordion-item__header{padding-top:var(--eds-sp-xs);padding-bottom:var(--eds-sp-xs);font:var(--eds-f-label-s-semi-bold)}.eui-21 :host.eds-accordion-item--size-s .eds-accordion-item__body{padding-bottom:var(--eds-sp-s);font:var(--eds-f-paragraph-s)}.eui-21 :host.eds-accordion-item--size-l .eds-accordion-item__header{padding-top:var(--eds-sp-l);padding-bottom:var(--eds-sp-l);font:var(--eds-f-label-l-semi-bold)}.eui-21 :host.eds-accordion-item--disabled{pointer-events:none;opacity:var(--eds-op-40)}\n"], dependencies: [{ kind: "component", type: i3.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
98
98
|
}
|
|
99
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
99
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordionItem, decorators: [{
|
|
100
100
|
type: Component,
|
|
101
101
|
args: [{ selector: 'eds-accordion-item', changeDetection: ChangeDetectionStrategy.OnPush, imports: [...EDS_ICON], hostDirectives: [
|
|
102
102
|
{
|
|
@@ -118,10 +118,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
118
118
|
*/
|
|
119
119
|
// eslint-disable-next-line @angular-eslint/directive-selector
|
|
120
120
|
class EdsAccordionItemHeader {
|
|
121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
122
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.
|
|
121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordionItemHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
122
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EdsAccordionItemHeader, isStandalone: true, selector: "eds-accordion-item-header", ngImport: i0 }); }
|
|
123
123
|
}
|
|
124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAccordionItemHeader, decorators: [{
|
|
125
125
|
type: Directive,
|
|
126
126
|
args: [{ selector: 'eds-accordion-item-header' }]
|
|
127
127
|
}] });
|
|
@@ -58,10 +58,10 @@ class EdsAlert {
|
|
|
58
58
|
this.isVisible.set(false);
|
|
59
59
|
this.closeAlert.emit(false);
|
|
60
60
|
}
|
|
61
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
62
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
61
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAlert, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
62
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsAlert, isStandalone: true, selector: "div[edsAlert], eds-alert", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, isCloseable: { classPropertyName: "isCloseable", publicName: "isCloseable", isSignal: true, isRequired: false, transformFunction: null }, isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisible: "isVisibleChange", closeAlert: "closeAlert" }, host: { attributes: { "role": "alert" }, properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, hostDirectives: [{ directive: i1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "<eds-icon-state class=\"eds-alert__icon\" [edsColorVariant]=\"colorDirective.resolvedColor() || 'info'\"/>\n\n<div class=\"eds-alert__content\">\n <ng-content select=\"eds-alert-title\"/>\n <ng-content />\n</div>\n\n@if (isCloseable()) {\n <button edsIconButton class=\"eds-alert__close\" \n ariaLabel=\"Close alert icon\"\n icon=\"x:core\" edsRounded edsSizeS edsNeutral\n (buttonClick)=\"onCloseClick()\">\n </button>\n}\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host.eds-alert.eds-alert--info{--_surface: var(--eds-c-surface-info-subtler);--_on-surface: var(--eds-c-on-surface-info-subtler);--_border-color: var(--eds-c-border-info)}.eui-21 :host.eds-alert.eds-alert--success{--_surface: var(--eds-c-surface-success-subtler);--_on-surface: var(--eds-c-on-surface-success-subtler);--_border-color: var(--eds-c-border-success)}.eui-21 :host.eds-alert.eds-alert--warning{--_surface: var(--eds-c-surface-warning-subtler);--_on-surface: var(--eds-c-on-surface-warning-subtler);--_border-color: var(--eds-c-border-warning)}.eui-21 :host.eds-alert.eds-alert--critical{--_surface: var(--eds-c-surface-critical-subtler);--_on-surface: var(--eds-c-on-surface-critical-subtler);--_border-color: var(--eds-c-border-critical)}.eui-21 :host.eds-alert{display:flex;width:100%;background-color:var(--_surface);padding:var(--eds-sp-s);border-radius:var(--eds-br-s);border-left:var(--eds-bw-m) solid var(--_border-color)}.eui-21 :host.eds-alert .eds-alert__content{display:flex;width:100%;flex-direction:column;padding:0 var(--eds-sp-xs);font:var(--eds-f-paragraph-m)}.eui-21 :host.eds-alert .eds-alert__close{margin-left:auto;display:flex;align-self:baseline;--_button-padding: var(--eds-sp-3xs)}@media screen and (max-width:767px){.eui-21 :host.eds-alert .eds-alert__content{font:var(--eds-f-paragraph-s)}}\n"], dependencies: [{ kind: "component", type: i2.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "component", type: i3.EdsIconState, selector: "eds-icon-state", inputs: ["ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
63
63
|
}
|
|
64
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
64
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAlert, decorators: [{
|
|
65
65
|
type: Component,
|
|
66
66
|
args: [{ selector: 'div[edsAlert], eds-alert', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
67
67
|
...EDS_ICON_BUTTON,
|
|
@@ -86,10 +86,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
86
86
|
}], propDecorators: { e2eAttr: [{ type: i0.Input, args: [{ isSignal: true, alias: "e2eAttr", required: false }] }], isCloseable: [{ type: i0.Input, args: [{ isSignal: true, alias: "isCloseable", required: false }] }], isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }, { type: i0.Output, args: ["isVisibleChange"] }], closeAlert: [{ type: i0.Output, args: ["closeAlert"] }] } });
|
|
87
87
|
|
|
88
88
|
class EdsAlertTitle {
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
90
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.
|
|
89
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAlertTitle, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
90
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EdsAlertTitle, isStandalone: true, selector: "eds-alert-title", ngImport: i0, template: '<ng-content/>', isInline: true, styles: [".eui-21 :host{font:var(--eds-f-paragraph-m-semi-bold)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
91
91
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
92
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAlertTitle, decorators: [{
|
|
93
93
|
type: Component,
|
|
94
94
|
args: [{ template: '<ng-content/>', selector: 'eds-alert-title', changeDetection: ChangeDetectionStrategy.OnPush, styles: [".eui-21 :host{font:var(--eds-f-paragraph-m-semi-bold)}\n"] }]
|
|
95
95
|
}] });
|
|
@@ -63,10 +63,10 @@ class EdsAutocompleteOption {
|
|
|
63
63
|
}, /* @ts-ignore */
|
|
64
64
|
...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
|
|
65
65
|
}
|
|
66
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
67
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
66
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompleteOption, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
67
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsAutocompleteOption, isStandalone: true, selector: "eds-autocomplete-option", inputs: { optionId: { classPropertyName: "optionId", publicName: "optionId", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null }, isGroupItem: { classPropertyName: "isGroupItem", publicName: "isGroupItem", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "option" }, properties: { "id": "optionId()", "attr.aria-selected": "isActive() ? \"true\" : \"false\"", "attr.aria-disabled": "isDisabled() ? \"true\" : null", "class": "hostClasses()" } }, ngImport: i0, template: '<ng-content/>', isInline: true, styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{align-items:center;border-left:var(--eds-bw-m) solid transparent;cursor:pointer;display:flex;min-height:40px;padding-inline:var(--eds-sp-s);gap:var(--eds-sp-xs)}.eui-21 :host:hover{background-color:var(--eds-c-surface-accent)}.eui-21 :host.eds-autocomplete-option--active{background-color:var(--eds-c-surface-selected)}.eui-21 :host.eds-autocomplete-option--disabled{cursor:default;opacity:.4}.eui-21 :host.eds-autocomplete-option--disabled:hover{background:none}.eui-21 :host.eds-autocomplete-option--group-item{padding-left:var(--eds-sp-l)}.eui-21 :host.eds-autocomplete-option--primary{border-left-color:var(--eds-c-border-primary)}.eui-21 :host.eds-autocomplete-option--info{border-left-color:var(--eds-c-info)}.eui-21 :host.eds-autocomplete-option--success{border-left-color:var(--eds-c-success)}.eui-21 :host.eds-autocomplete-option--warning{border-left-color:var(--eds-c-warning)}.eui-21 :host.eds-autocomplete-option--critical{border-left-color:var(--eds-c-critical)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
68
68
|
}
|
|
69
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompleteOption, decorators: [{
|
|
70
70
|
type: Component,
|
|
71
71
|
args: [{ selector: 'eds-autocomplete-option', template: '<ng-content/>', changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
72
72
|
role: 'option',
|
|
@@ -85,10 +85,10 @@ class EdsAutocompleteOptionGroup {
|
|
|
85
85
|
this.label = input(/* @ts-ignore */
|
|
86
86
|
...(ngDevMode ? [undefined, { debugName: "label" }] : /* istanbul ignore next */ []));
|
|
87
87
|
}
|
|
88
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
89
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.
|
|
88
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompleteOptionGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
89
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EdsAutocompleteOptionGroup, isStandalone: true, selector: "eds-autocomplete-option-group", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "group" }, classAttribute: "eds-autocomplete-option-group" }, ngImport: i0, template: '<ng-content/>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
90
90
|
}
|
|
91
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
91
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompleteOptionGroup, decorators: [{
|
|
92
92
|
type: Component,
|
|
93
93
|
args: [{
|
|
94
94
|
selector: 'eds-autocomplete-option-group',
|
|
@@ -104,7 +104,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
|
|
|
104
104
|
|
|
105
105
|
class EdsAutocompletePanel {
|
|
106
106
|
constructor() {
|
|
107
|
-
this.virtualScrolling = viewChild.required('virtualScrolling'
|
|
107
|
+
this.virtualScrolling = viewChild.required('virtualScrolling', /* @ts-ignore */
|
|
108
|
+
...(ngDevMode ? [{ debugName: "virtualScrolling" }] : /* istanbul ignore next */ []));
|
|
108
109
|
this.panelId = input('eds-autocomplete__panel', /* @ts-ignore */
|
|
109
110
|
...(ngDevMode ? [{ debugName: "panelId" }] : /* istanbul ignore next */ []));
|
|
110
111
|
this.isOpen = input(false, /* @ts-ignore */
|
|
@@ -132,10 +133,10 @@ class EdsAutocompletePanel {
|
|
|
132
133
|
onOptionSelected(option) {
|
|
133
134
|
this.optionSelected.emit(option);
|
|
134
135
|
}
|
|
135
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
136
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompletePanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsAutocompletePanel, isStandalone: true, selector: "eds-autocomplete-panel", inputs: { panelId: { classPropertyName: "panelId", publicName: "panelId", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, viewportHeight: { classPropertyName: "viewportHeight", publicName: "viewportHeight", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, distinctOptionGroups: { classPropertyName: "distinctOptionGroups", publicName: "distinctOptionGroups", isSignal: true, isRequired: false, transformFunction: null }, groupedOptions: { classPropertyName: "groupedOptions", publicName: "groupedOptions", isSignal: true, isRequired: false, transformFunction: null }, autocompleteOptions: { classPropertyName: "autocompleteOptions", publicName: "autocompleteOptions", isSignal: true, isRequired: false, transformFunction: null }, selectedOptionIndex: { classPropertyName: "selectedOptionIndex", publicName: "selectedOptionIndex", isSignal: true, isRequired: false, transformFunction: null }, optionTemplate: { classPropertyName: "optionTemplate", publicName: "optionTemplate", isSignal: true, isRequired: false, transformFunction: null }, optGroupTemplate: { classPropertyName: "optGroupTemplate", publicName: "optGroupTemplate", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { optionSelected: "optionSelected" }, host: { classAttribute: "eds-autocomplete-panel" }, viewQueries: [{ propertyName: "virtualScrolling", first: true, predicate: ["virtualScrolling"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\n [id]=\"panelId()\"\n class=\"eds-autocomplete__panel\"\n role=\"listbox\"\n aria-label=\"Autocomplete panel\">\n <cdk-virtual-scroll-viewport\n #virtualScrolling\n [itemSize]=\"itemSize()\"\n tabindex=\"-1\"\n minBufferPx=\"500\"\n maxBufferPx=\"750\"\n [style.min-height]=\"viewportHeight() + 'px'\">\n @if (groupBy()) {\n @for (distinctOptionGroup of distinctOptionGroups(); track distinctOptionGroup) {\n @if (groupedOptions()[distinctOptionGroup]?.options?.length > 0) {\n <eds-autocomplete-option-group [label]=\"distinctOptionGroup\">\n <div class=\"eds-autocomplete-option-group__label\">\n @if (optGroupTemplate()) {\n <ng-template\n [ngTemplateOutlet]=\"optGroupTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: { label: distinctOptionGroup } }\">\n </ng-template>\n } @else {\n {{ distinctOptionGroup }}\n }\n </div>\n <div class=\"eds-autocomplete-option-group__options\">\n @for (option of groupedOptions()[distinctOptionGroup].options; let j = $index; track option.id ?? j) {\n <eds-autocomplete-option\n isGroupItem\n [optionId]=\"panelId() + '-option-' + (groupedOptions()[distinctOptionGroup].ancestorLength + j)\"\n [isActive]=\"selectedOptionIndex() === groupedOptions()[distinctOptionGroup].ancestorLength + j\"\n [isDisabled]=\"option.isDisabled\"\n (click)=\"onOptionSelected(option)\">\n @if (optionTemplate()) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-template>\n } @else {\n @if (option.iconName) {\n <eds-icon [icon]=\"option.iconName\" />\n }\n {{ option.label }}\n }\n </eds-autocomplete-option>\n }\n </div>\n </eds-autocomplete-option-group>\n }\n }\n } @else {\n <eds-autocomplete-option\n *cdkVirtualFor=\"let option of autocompleteOptions(); let i = index; trackBy: trackByFn\"\n [optionId]=\"panelId() + '-option-' + i\"\n [isActive]=\"selectedOptionIndex() === i\"\n [isDisabled]=\"option.isDisabled\"\n (click)=\"onOptionSelected(option)\">\n @if (optionTemplate()) {\n <ng-template\n [ngTemplateOutlet]=\"optionTemplate()!\"\n [ngTemplateOutletContext]=\"{ $implicit: option }\">\n </ng-template>\n } @else {\n @if (option.iconName) {\n <eds-icon [icon]=\"option.iconName\" />\n }\n {{ option.label }}\n }\n </eds-autocomplete-option>\n }\n </cdk-virtual-scroll-viewport>\n</div>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:block;width:100%}.eui-21 :host .eds-autocomplete__panel{box-shadow:var(--eds-sh-3);background-color:var(--eds-c-surface-elevation);border-radius:var(--eds-br-s);width:100%;overflow:hidden}.eui-21 :host .eds-autocomplete-option-group .eds-autocomplete-option-group__label{align-items:center;cursor:default;display:flex;font:var(--eds-f-label-m-semi-bold);min-height:40px;padding-inline:var(--eds-sp-s);gap:var(--eds-sp-xs)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ScrollingModule }, { kind: "directive", type: i1.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: i1.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i1.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "component", type: EdsAutocompleteOption, selector: "eds-autocomplete-option", inputs: ["optionId", "isActive", "isDisabled", "isGroupItem", "variant"] }, { kind: "component", type: EdsAutocompleteOptionGroup, selector: "eds-autocomplete-option-group", inputs: ["label"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
137
138
|
}
|
|
138
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocompletePanel, decorators: [{
|
|
139
140
|
type: Component,
|
|
140
141
|
args: [{ selector: 'eds-autocomplete-panel', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
141
142
|
NgTemplateOutlet,
|
|
@@ -210,10 +211,13 @@ class EdsAutocomplete {
|
|
|
210
211
|
this.chipDragRelease = output();
|
|
211
212
|
this.chipDrop = output();
|
|
212
213
|
// --- View queries ---
|
|
213
|
-
this.templatePortalContent = viewChild.required('templatePortalContent'
|
|
214
|
-
|
|
215
|
-
this.
|
|
216
|
-
|
|
214
|
+
this.templatePortalContent = viewChild.required('templatePortalContent', /* @ts-ignore */
|
|
215
|
+
...(ngDevMode ? [{ debugName: "templatePortalContent" }] : /* istanbul ignore next */ []));
|
|
216
|
+
this.autocompletePanelRef = viewChild.required(EdsAutocompletePanel, /* @ts-ignore */
|
|
217
|
+
...(ngDevMode ? [{ debugName: "autocompletePanelRef" }] : /* istanbul ignore next */ []));
|
|
218
|
+
this.inputContainerRef = viewChild.required('inputContainerRef', /* @ts-ignore */
|
|
219
|
+
...(ngDevMode ? [{ debugName: "inputContainerRef" }] : /* istanbul ignore next */ []));
|
|
220
|
+
this.inputRef = viewChild.required('input', { ...(ngDevMode ? { debugName: "inputRef" } : /* istanbul ignore next */ {}), read: ElementRef });
|
|
217
221
|
// --- Public state ---
|
|
218
222
|
this.autocompleteOptions = signal([], /* @ts-ignore */
|
|
219
223
|
...(ngDevMode ? [{ debugName: "autocompleteOptions" }] : /* istanbul ignore next */ []));
|
|
@@ -736,10 +740,10 @@ class EdsAutocomplete {
|
|
|
736
740
|
updateAriaRequired(ctrl) {
|
|
737
741
|
this.hasAriaRequiredAttribute.set(ctrl?.control?.hasValidator(Validators.required) ?? false);
|
|
738
742
|
}
|
|
739
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.
|
|
740
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EdsAutocomplete, isStandalone: true, selector: "eds-autocomplete", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, autocompleteData: { classPropertyName: "autocompleteData", publicName: "autocompleteData", isSignal: true, isRequired: false, transformFunction: null }, visibleOptions: { classPropertyName: "visibleOptions", publicName: "visibleOptions", isSignal: true, isRequired: false, transformFunction: null }, matching: { classPropertyName: "matching", publicName: "matching", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, chipsSortOrder: { classPropertyName: "chipsSortOrder", publicName: "chipsSortOrder", isSignal: true, isRequired: false, transformFunction: null }, itemsSortOrder: { classPropertyName: "itemsSortOrder", publicName: "itemsSortOrder", isSignal: true, isRequired: false, transformFunction: null }, chipsPosition: { classPropertyName: "chipsPosition", publicName: "chipsPosition", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, toggleLinkMoreLabel: { classPropertyName: "toggleLinkMoreLabel", publicName: "toggleLinkMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleLinkLessLabel: { classPropertyName: "toggleLinkLessLabel", publicName: "toggleLinkLessLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, isFreeValueAllowed: { classPropertyName: "isFreeValueAllowed", publicName: "isFreeValueAllowed", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasChips: { classPropertyName: "hasChips", publicName: "hasChips", isSignal: true, isRequired: false, transformFunction: null }, isAsync: { classPropertyName: "isAsync", publicName: "isAsync", isSignal: true, isRequired: false, transformFunction: null }, isChipsSorted: { classPropertyName: "isChipsSorted", publicName: "isChipsSorted", isSignal: true, isRequired: false, transformFunction: null }, isItemsSorted: { classPropertyName: "isItemsSorted", publicName: "isItemsSorted", isSignal: true, isRequired: false, transformFunction: null }, isGroupSorted: { classPropertyName: "isGroupSorted", publicName: "isGroupSorted", isSignal: true, isRequired: false, transformFunction: null }, isChipsRemovable: { classPropertyName: "isChipsRemovable", publicName: "isChipsRemovable", isSignal: true, isRequired: false, transformFunction: null }, isDuplicateValueAllowed: { classPropertyName: "isDuplicateValueAllowed", publicName: "isDuplicateValueAllowed", isSignal: true, isRequired: false, transformFunction: null }, isAddOnBlur: { classPropertyName: "isAddOnBlur", publicName: "isAddOnBlur", isSignal: true, isRequired: false, transformFunction: null }, isForceSelection: { classPropertyName: "isForceSelection", publicName: "isForceSelection", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChipsCount: { classPropertyName: "maxVisibleChipsCount", publicName: "maxVisibleChipsCount", isSignal: true, isRequired: false, transformFunction: null }, chipsLabelTruncateCount: { classPropertyName: "chipsLabelTruncateCount", publicName: "chipsLabelTruncateCount", isSignal: true, isRequired: false, transformFunction: null }, isMaxVisibleChipsOpened: { classPropertyName: "isMaxVisibleChipsOpened", publicName: "isMaxVisibleChipsOpened", isSignal: true, isRequired: false, transformFunction: null }, isChipsDragAndDrop: { classPropertyName: "isChipsDragAndDrop", publicName: "isChipsDragAndDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true, isSignal: true }, { propertyName: "autocompletePanelRef", first: true, predicate: EdsAutocompletePanel, descendants: true, isSignal: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (chipsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"inputControl\" />\n}\n\n@if (hasChips() && chips().length > 0) {\n <eds-chip-list\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"chips()\"\n (cdkDropListDropped)=\"onChipDropped($event)\">\n @for (chip of chips(); let i = $index; track chip.edsInternalId) {\n @if (!maxVisibleChipsCount() || isVisibleChipsOpened() || i < maxVisibleChipsCount()) {\n <eds-chip\n [isRemovable]=\"isChipsRemovable() && !isReadonly() && chip.isRemovable !== false\"\n cdkDrag\n edsSizeM\n [cdkDragDisabled]=\"!isChipsDragAndDrop()\"\n [cdkDragData]=\"chip\"\n [data]=\"chip\"\n (chipRemove)=\"onChipRemove($event)\"\n (cdkDragStarted)=\"onChipDragStarted($event)\"\n (cdkDragReleased)=\"onChipDragReleased($event)\">\n @if (chip.iconSvgName) {\n <eds-icon [icon]=\"chip.iconSvgName\" />\n }\n <span class=\"eds-chip-list-label\">\n @if (chipsLabelTruncateCount()) {\n {{ chip.label | slice:0:chipsLabelTruncateCount() }}\n } @else {\n {{ chip.label }}\n }\n </span>\n </eds-chip>\n }\n }\n <eds-chip-list-additional-content>\n @if (maxVisibleChipsCount() && chips().length > maxVisibleChipsCount()) {\n <button\n edsIconButton\n edsNeutral\n edsSizeS\n type=\"button\"\n [icon]=\"isVisibleChipsOpened() ? 'caret-left' : 'caret-right'\"\n [ariaLabel]=\"isVisibleChipsOpened() ? 'Collapse' : 'Expand'\"\n (click)=\"toggleTags()\">\n </button>\n }\n </eds-chip-list-additional-content>\n </eds-chip-list>\n}\n\n@if (chipsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"inputControl\" />\n}\n\n<ng-template #inputControl>\n @if (!hasChips() || (hasChips() && !isReadonly())) {\n <div class=\"eds-autocomplete__input-container\" #inputContainerRef>\n <input\n [attr.id]=\"inputId()\"\n #input\n edsInputText\n [edsClearable]=\"!isReadonly() && !internalDisabled() && !isLoading()\"\n [edsLoading]=\"isLoading()\"\n [formControl]=\"autocompleteControl\"\n class=\"eds-autocomplete__input\"\n [placeholder]=\"placeholder()\"\n autocomplete=\"off\"\n [readonly]=\"isReadonly()\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? panelId : null\"\n [attr.aria-activedescendant]=\"isOpen && hasOptionsResult ? activeDescendantId() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"hasAriaRequiredAttribute() ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"listbox\" />\n </div>\n }\n</ng-template>\n\n<ng-template #templatePortalContent>\n <eds-autocomplete-panel\n [panelId]=\"panelId\"\n [isOpen]=\"isOpen\"\n [itemSize]=\"itemSize\"\n [viewportHeight]=\"cdkVirtualScrollViewportHeight\"\n [groupBy]=\"groupBy()\"\n [distinctOptionGroups]=\"distinctOptionGroups\"\n [groupedOptions]=\"groupedOptions()\"\n [autocompleteOptions]=\"autocompleteOptions()\"\n [selectedOptionIndex]=\"selectedOptionIndex()\"\n (optionSelected)=\"onOptionSelected($event)\">\n </eds-autocomplete-panel>\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;flex-direction:column;width:100%;gap:var(--eds-sp-xs)}.eui-21 :host .eds-autocomplete__input-container{display:flex;width:100%}.eui-21 :host .eds-autocomplete__input{width:100%}.eui-21 :host .eds-autocomplete__expand-button{margin-left:var(--eds-sp-xs)}.eui-21 :host.eds-autocomplete--readonly{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: EdsAutocompletePanel, selector: "eds-autocomplete-panel", inputs: ["panelId", "isOpen", "itemSize", "viewportHeight", "groupBy", "distinctOptionGroups", "groupedOptions", "autocompleteOptions", "selectedOptionIndex", "optionTemplate", "optGroupTemplate"], outputs: ["optionSelected"] }, { kind: "component", type: i4.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i5.EdsChipList, selector: "eds-chip-list", inputs: ["ariaLabel", "e2eAttr"] }, { kind: "component", type: i5.EdsChipListAdditionalContent, selector: "eds-chip-list-additional-content" }, { kind: "component", type: i6.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "edsDisabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i8.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
743
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocomplete, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
744
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EdsAutocomplete, isStandalone: true, selector: "eds-autocomplete", inputs: { e2eAttr: { classPropertyName: "e2eAttr", publicName: "e2eAttr", isSignal: true, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, autocompleteData: { classPropertyName: "autocompleteData", publicName: "autocompleteData", isSignal: true, isRequired: false, transformFunction: null }, visibleOptions: { classPropertyName: "visibleOptions", publicName: "visibleOptions", isSignal: true, isRequired: false, transformFunction: null }, matching: { classPropertyName: "matching", publicName: "matching", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, chipsSortOrder: { classPropertyName: "chipsSortOrder", publicName: "chipsSortOrder", isSignal: true, isRequired: false, transformFunction: null }, itemsSortOrder: { classPropertyName: "itemsSortOrder", publicName: "itemsSortOrder", isSignal: true, isRequired: false, transformFunction: null }, chipsPosition: { classPropertyName: "chipsPosition", publicName: "chipsPosition", isSignal: true, isRequired: false, transformFunction: null }, groupBy: { classPropertyName: "groupBy", publicName: "groupBy", isSignal: true, isRequired: false, transformFunction: null }, toggleLinkMoreLabel: { classPropertyName: "toggleLinkMoreLabel", publicName: "toggleLinkMoreLabel", isSignal: true, isRequired: false, transformFunction: null }, toggleLinkLessLabel: { classPropertyName: "toggleLinkLessLabel", publicName: "toggleLinkLessLabel", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, panelClass: { classPropertyName: "panelClass", publicName: "panelClass", isSignal: true, isRequired: false, transformFunction: null }, panelWidth: { classPropertyName: "panelWidth", publicName: "panelWidth", isSignal: true, isRequired: false, transformFunction: null }, isFreeValueAllowed: { classPropertyName: "isFreeValueAllowed", publicName: "isFreeValueAllowed", isSignal: true, isRequired: false, transformFunction: null }, isReadonly: { classPropertyName: "isReadonly", publicName: "isReadonly", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, hasChips: { classPropertyName: "hasChips", publicName: "hasChips", isSignal: true, isRequired: false, transformFunction: null }, isAsync: { classPropertyName: "isAsync", publicName: "isAsync", isSignal: true, isRequired: false, transformFunction: null }, isChipsSorted: { classPropertyName: "isChipsSorted", publicName: "isChipsSorted", isSignal: true, isRequired: false, transformFunction: null }, isItemsSorted: { classPropertyName: "isItemsSorted", publicName: "isItemsSorted", isSignal: true, isRequired: false, transformFunction: null }, isGroupSorted: { classPropertyName: "isGroupSorted", publicName: "isGroupSorted", isSignal: true, isRequired: false, transformFunction: null }, isChipsRemovable: { classPropertyName: "isChipsRemovable", publicName: "isChipsRemovable", isSignal: true, isRequired: false, transformFunction: null }, isDuplicateValueAllowed: { classPropertyName: "isDuplicateValueAllowed", publicName: "isDuplicateValueAllowed", isSignal: true, isRequired: false, transformFunction: null }, isAddOnBlur: { classPropertyName: "isAddOnBlur", publicName: "isAddOnBlur", isSignal: true, isRequired: false, transformFunction: null }, isForceSelection: { classPropertyName: "isForceSelection", publicName: "isForceSelection", isSignal: true, isRequired: false, transformFunction: null }, maxVisibleChipsCount: { classPropertyName: "maxVisibleChipsCount", publicName: "maxVisibleChipsCount", isSignal: true, isRequired: false, transformFunction: null }, chipsLabelTruncateCount: { classPropertyName: "chipsLabelTruncateCount", publicName: "chipsLabelTruncateCount", isSignal: true, isRequired: false, transformFunction: null }, isMaxVisibleChipsOpened: { classPropertyName: "isMaxVisibleChipsOpened", publicName: "isMaxVisibleChipsOpened", isSignal: true, isRequired: false, transformFunction: null }, isChipsDragAndDrop: { classPropertyName: "isChipsDragAndDrop", publicName: "isChipsDragAndDrop", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose", panelOpen: "panelOpen", inputFocus: "inputFocus", inputBlur: "inputBlur", clear: "clear", selectionChange: "selectionChange", itemAdd: "itemAdd", itemRemove: "itemRemove", inputChange: "inputChange", chipDragStart: "chipDragStart", chipDragRelease: "chipDragRelease", chipDrop: "chipDrop" }, host: { properties: { "class": "hostClasses()", "attr.data-e2e": "e2eAttr()" } }, viewQueries: [{ propertyName: "templatePortalContent", first: true, predicate: ["templatePortalContent"], descendants: true, isSignal: true }, { propertyName: "autocompletePanelRef", first: true, predicate: EdsAutocompletePanel, descendants: true, isSignal: true }, { propertyName: "inputContainerRef", first: true, predicate: ["inputContainerRef"], descendants: true, isSignal: true }, { propertyName: "inputRef", first: true, predicate: ["input"], descendants: true, read: ElementRef, isSignal: true }], hostDirectives: [{ directive: i1$1.EdsColorDirective, inputs: ["edsNeutral", "edsNeutral", "edsSuccess", "edsSuccess", "edsInfo", "edsInfo", "edsWarning", "edsWarning", "edsCritical", "edsCritical", "edsColorVariant", "edsColorVariant"] }], ngImport: i0, template: "@if (chipsPosition() === 'bottom') {\n <ng-container [ngTemplateOutlet]=\"inputControl\" />\n}\n\n@if (hasChips() && chips().length > 0) {\n <eds-chip-list\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"chips()\"\n (cdkDropListDropped)=\"onChipDropped($event)\">\n @for (chip of chips(); let i = $index; track chip.edsInternalId) {\n @if (!maxVisibleChipsCount() || isVisibleChipsOpened() || i < maxVisibleChipsCount()) {\n <eds-chip\n [isRemovable]=\"isChipsRemovable() && !isReadonly() && chip.isRemovable !== false\"\n cdkDrag\n edsSizeM\n [cdkDragDisabled]=\"!isChipsDragAndDrop()\"\n [cdkDragData]=\"chip\"\n [data]=\"chip\"\n (chipRemove)=\"onChipRemove($event)\"\n (cdkDragStarted)=\"onChipDragStarted($event)\"\n (cdkDragReleased)=\"onChipDragReleased($event)\">\n @if (chip.iconSvgName) {\n <eds-icon [icon]=\"chip.iconSvgName\" />\n }\n <span class=\"eds-chip-list-label\">\n @if (chipsLabelTruncateCount()) {\n {{ chip.label | slice:0:chipsLabelTruncateCount() }}\n } @else {\n {{ chip.label }}\n }\n </span>\n </eds-chip>\n }\n }\n <eds-chip-list-additional-content>\n @if (maxVisibleChipsCount() && chips().length > maxVisibleChipsCount()) {\n <button\n edsIconButton\n edsNeutral\n edsSizeS\n type=\"button\"\n [icon]=\"isVisibleChipsOpened() ? 'caret-left' : 'caret-right'\"\n [ariaLabel]=\"isVisibleChipsOpened() ? 'Collapse' : 'Expand'\"\n (click)=\"toggleTags()\">\n </button>\n }\n </eds-chip-list-additional-content>\n </eds-chip-list>\n}\n\n@if (chipsPosition() === 'top') {\n <ng-container [ngTemplateOutlet]=\"inputControl\" />\n}\n\n<ng-template #inputControl>\n @if (!hasChips() || (hasChips() && !isReadonly())) {\n <div class=\"eds-autocomplete__input-container\" #inputContainerRef>\n <input\n [attr.id]=\"inputId()\"\n #input\n edsInputText\n [edsClearable]=\"!isReadonly() && !internalDisabled() && !isLoading()\"\n [edsLoading]=\"isLoading()\"\n [formControl]=\"autocompleteControl\"\n class=\"eds-autocomplete__input\"\n [placeholder]=\"placeholder()\"\n autocomplete=\"off\"\n [readonly]=\"isReadonly()\"\n (clear)=\"onClear()\"\n (click)=\"openPanel()\"\n (focus)=\"onFocus($event)\"\n (blur)=\"onBlur($event)\"\n role=\"combobox\"\n [attr.aria-expanded]=\"isOpen\"\n [attr.aria-controls]=\"isOpen ? panelId : null\"\n [attr.aria-activedescendant]=\"isOpen && hasOptionsResult ? activeDescendantId() : null\"\n [attr.aria-label]=\"ariaLabel()\"\n [attr.aria-required]=\"hasAriaRequiredAttribute() ? 'true' : null\"\n aria-autocomplete=\"both\"\n aria-haspopup=\"listbox\" />\n </div>\n }\n</ng-template>\n\n<ng-template #templatePortalContent>\n <eds-autocomplete-panel\n [panelId]=\"panelId\"\n [isOpen]=\"isOpen\"\n [itemSize]=\"itemSize\"\n [viewportHeight]=\"cdkVirtualScrollViewportHeight\"\n [groupBy]=\"groupBy()\"\n [distinctOptionGroups]=\"distinctOptionGroups\"\n [groupedOptions]=\"groupedOptions()\"\n [autocompleteOptions]=\"autocompleteOptions()\"\n [selectedOptionIndex]=\"selectedOptionIndex()\"\n (optionSelected)=\"onOptionSelected($event)\">\n </eds-autocomplete-panel>\n</ng-template>\n", styles: ["@keyframes eds-spin{0%{transform:translateY(-50%) rotate(0)}to{transform:translateY(-50%) rotate(360deg)}}.eui-21 :host{display:flex;flex-direction:column;width:100%;gap:var(--eds-sp-xs)}.eui-21 :host .eds-autocomplete__input-container{display:flex;width:100%}.eui-21 :host .eds-autocomplete__input{width:100%}.eui-21 :host .eds-autocomplete__expand-button{margin-left:var(--eds-sp-xs)}.eui-21 :host.eds-autocomplete--readonly{pointer-events:none}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i2$1.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2$1.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "ngmodule", type: ScrollingModule }, { kind: "component", type: EdsAutocompletePanel, selector: "eds-autocomplete-panel", inputs: ["panelId", "isOpen", "itemSize", "viewportHeight", "groupBy", "distinctOptionGroups", "groupedOptions", "autocompleteOptions", "selectedOptionIndex", "optionTemplate", "optGroupTemplate"], outputs: ["optionSelected"] }, { kind: "component", type: i4.EdsInputText, selector: "input[edsInputText]", inputs: ["e2eAttr", "disabled", "readonly", "isInvalid"] }, { kind: "component", type: i5.EdsChipList, selector: "eds-chip-list", inputs: ["ariaLabel", "e2eAttr"] }, { kind: "component", type: i5.EdsChipListAdditionalContent, selector: "eds-chip-list-additional-content" }, { kind: "component", type: i6.EdsChip, selector: "eds-chip, span[edsChip], li[edsChip]", inputs: ["ariaLabel", "e2eAttr", "edsInternalId", "tooltipMessage", "id", "data", "isRemovable", "isActive", "edsDisabled"], outputs: ["chipRemove", "chipClick"] }, { kind: "component", type: i2.EdsIcon, selector: "eds-icon, span[edsIcon]", inputs: ["icon", "set", "ariaLabel", "ariaHidden", "edsRounded"] }, { kind: "component", type: i8.EdsIconButton, selector: "button[edsIconButton]", inputs: ["icon", "ariaLabel", "edsRounded", "edsDisabled"], outputs: ["buttonClick"] }, { kind: "pipe", type: SlicePipe, name: "slice" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
741
745
|
}
|
|
742
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.
|
|
746
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EdsAutocomplete, decorators: [{
|
|
743
747
|
type: Component,
|
|
744
748
|
args: [{ selector: 'eds-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
745
749
|
NgTemplateOutlet,
|