@eui/ecl 23.0.0-alpha.10 → 23.0.0-alpha.11

package/fesm2022/eui-ecl-components-ecl-highlighted-search.mjs

@@ -0,0 +1,193 @@
+import * as i0 from '@angular/core';
+import { inject, ElementRef, Directive, forwardRef, input, output, computed, signal, contentChild, afterNextRender, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { EclBaseEvent, ECLBaseDirective } from '@eui/ecl/core';
+import * as i2 from '@eui/ecl/components/ecl-button';
+import { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';
+import * as i3 from '@eui/ecl/components/ecl-form-group';
+import { EUI_ECL_FORM_GROUP } from '@eui/ecl/components/ecl-form-group';
+import * as i4 from '@eui/ecl/components/ecl-text-input';
+import { EUI_ECL_TEXT_INPUT } from '@eui/ecl/components/ecl-text-input';
+import * as i5 from '@eui/ecl/components/ecl-icon';
+import { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';
+
+/**
+ * Marker directive for the suggestions content projection slot.
+ * Applies the `ecl-highlighted-search__suggestion-list` class to the host element.
+ * The parent `ecl-highlighted-search` component uses this to locate
+ * the projected element and set `aria-labelledby`.
+ */
+class EclHighlightedSearchSuggestionsDirective {
+    constructor() {
+        this.el = inject(ElementRef);
+    }
+    /** Sets the aria-labelledby attribute on the host element. */
+    setAriaLabelledBy(id) {
+        this.el.nativeElement.setAttribute('aria-labelledby', id);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclHighlightedSearchSuggestionsDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: EclHighlightedSearchSuggestionsDirective, isStandalone: true, selector: "[eclHighlightedSearchSuggestions]", host: { classAttribute: "ecl-highlighted-search__suggestion-list" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclHighlightedSearchSuggestionsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[eclHighlightedSearchSuggestions]',
+                    host: {
+                        'class': 'ecl-highlighted-search__suggestion-list',
+                    },
+                }]
+        }] });
+
+class EclHighlightedSearchEvent extends EclBaseEvent {
+    constructor(keyword) {
+        super();
+        this.keyword = keyword;
+    }
+}
+
+const ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => EclHighlightedSearchComponent),
+    multi: true,
+};
+/**
+ * Highlighted search component based on ECL design system.
+ * Renders a prominent search banner with title, description, search form,
+ * and an optional suggestion area via content projection.
+ *
+ * Implements ControlValueAccessor for use with ngModel and reactive forms.
+ *
+ * @example
+ * ```html
+ * <ecl-highlighted-search
+ *     eclTitle="Find your next role"
+ *     description="Discover job opportunities in the EU institutions"
+ *     helperText="Enter the job you're looking for"
+ *     placeholder="Enter a search keyword"
+ *     suggestionLabel="Or explore:"
+ *     searchButtonLabel="Search"
+ *     (searchEvent)="onSearch($event)">
+ *
+ *     <ul eclTagSet eclHighlightedSearchSuggestions>
+ *         <li eclTagSetItem><a href="/traineeships" eclTag>Traineeships</a></li>
+ *         <li eclTagSetItem><a href="/it" eclTag>IT &amp; Digital</a></li>
+ *         <li eclTagSetItem><a href="/policy" eclTag>Policy &amp; Law</a></li>
+ *     </ul>
+ *
+ * </ecl-highlighted-search>
+ * ```
+ */
+class EclHighlightedSearchComponent extends ECLBaseDirective {
+    constructor() {
+        super();
+        /** Subtitle text displayed below the title. */
+        this.description = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+        /** The heading text displayed above the search form. */
+        this.eclTitle = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "eclTitle" }] : /* istanbul ignore next */ []));
+        /** Helper text displayed below the search input. */
+        this.helperText = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+        /** Placeholder text for the search input field. */
+        this.placeholder = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+        /** Label text for the search button. Defaults to "Search". */
+        this.searchButtonLabel = input('Search', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchButtonLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted when the user submits the search form. */
+        this.searchEvent = output();
+        /** Label for the suggestion section (e.g. "Or explore:"). */
+        this.suggestionLabel = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestionLabel" }] : /* istanbul ignore next */ []));
+        /** ID for the helper text element. */
+        this.helperId = computed(() => `ehs-${this.instanceId()}-helper`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "helperId" }] : /* istanbul ignore next */ []));
+        /** ID for the search input element. */
+        this.inputId = computed(() => `ehs-${this.instanceId()}-input`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "inputId" }] : /* istanbul ignore next */ []));
+        /** Internal search text model. */
+        this.searchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "searchText" }] : /* istanbul ignore next */ []));
+        /** ID for the suggestion label element. */
+        this.suggestionLabelId = computed(() => `ehs-${this.instanceId()}-suggestion-label`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestionLabelId" }] : /* istanbul ignore next */ []));
+        /** ID for the title element, used for aria-describedby on the form. */
+        this.titleId = computed(() => `ehs-${this.instanceId()}-title`, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "titleId" }] : /* istanbul ignore next */ []));
+        /** Unique instance ID for generating element IDs. */
+        this.instanceId = signal(crypto.randomUUID(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "instanceId" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        /** Reference to the projected suggestions content for aria wiring. */
+        this.suggestionsContent = contentChild(EclHighlightedSearchSuggestionsDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "suggestionsContent" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            this.wireAriaOnSuggestions();
+        });
+    }
+    writeValue(value) {
+        this.searchText.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    /** Handle Enter key on input for search submission. */
+    onEnterKeyDown(event) {
+        event.preventDefault();
+        this.searchEvent.emit(new EclHighlightedSearchEvent(this.searchText()));
+    }
+    /** Called when the input model changes. Propagates to CVA. */
+    onModelChange(value) {
+        this.searchText.set(value);
+        this.onChange(value);
+    }
+    /** Handle form submission. */
+    onSubmit(event) {
+        event.preventDefault();
+        this.onTouched();
+        this.searchEvent.emit(new EclHighlightedSearchEvent(this.searchText()));
+    }
+    /**
+     * Programmatically sets aria-labelledby on the projected suggestions element
+     * so the consumer doesn't need to wire IDs manually.
+     */
+    wireAriaOnSuggestions() {
+        const directive = this.suggestionsContent();
+        if (directive) {
+            directive.setAriaLabelledBy(this.suggestionLabelId());
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclHighlightedSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclHighlightedSearchComponent, isStandalone: true, selector: "ecl-highlighted-search", inputs: { description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, searchButtonLabel: { classPropertyName: "searchButtonLabel", publicName: "searchButtonLabel", isSignal: true, isRequired: false, transformFunction: null }, suggestionLabel: { classPropertyName: "suggestionLabel", publicName: "suggestionLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchEvent: "searchEvent" }, host: { styleAttribute: "display: block", classAttribute: "ecl-highlighted-search" }, providers: [ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR], queries: [{ propertyName: "suggestionsContent", first: true, predicate: EclHighlightedSearchSuggestionsDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-highlighted-search__content\">\n    <div class=\"ecl-highlighted-search__title\" [id]=\"titleId()\">{{ eclTitle() }}</div>\n\n    @if (description()) {\n        <div class=\"ecl-highlighted-search__description ecl-content-color\">{{ description() }}</div>\n    }\n\n    <form class=\"ecl-highlighted-search__form\" role=\"search\" [attr.aria-describedby]=\"titleId()\" (submit)=\"onSubmit($event)\">\n        <div class=\"ecl-highlighted-search__form-content\">\n            <ecl-icon iconSet=\"phosphor\" icon=\"magnifying-glass\" size=\"m\"\n                      class=\"ecl-highlighted-search__form-icon\"></ecl-icon>\n\n            <div eclFormGroup class=\"ecl-highlighted-search__form-group\">\n                <label [for]=\"inputId()\" [id]=\"inputId() + '-label'\"\n                       class=\"ecl-form-label ecl-form-label--hidden\">{{ placeholder() }}</label>\n                <input [id]=\"inputId()\"\n                       eclTextInput\n                       type=\"search\"\n                       eclSize=\"l\"\n                       [placeholder]=\"placeholder()\"\n                       [attr.aria-describedby]=\"helperId()\"\n                       class=\"ecl-highlighted-search__form-input\"\n                       [ngModel]=\"searchText()\"\n                       (ngModelChange)=\"onModelChange($event)\"\n                       (keydown.enter)=\"onEnterKeyDown($event)\"\n                       name=\"highlighted-search-input\" />\n            </div>\n\n            <button eclButton\n                    variant=\"primary\"\n                    size=\"m\"\n                    eclStyle=\"highlight\"\n                    type=\"submit\"\n                    class=\"ecl-highlighted-search__form-button\">\n                <span eclButtonLabel>{{ searchButtonLabel() }}</span>\n            </button>\n        </div>\n\n        @if (helperText()) {\n            <div class=\"ecl-highlighted-search__form-helper\" [id]=\"helperId()\">{{ helperText() }}</div>\n        }\n    </form>\n\n    @if (suggestionLabel()) {\n        <div class=\"ecl-highlighted-search__suggestion\">\n            <span class=\"ecl-highlighted-search__suggestion-label\" [id]=\"suggestionLabelId()\">{{ suggestionLabel() }}</span>\n            <ng-content select=\"[eclHighlightedSearchSuggestions]\"></ng-content>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i2.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "directive", type: i2.EclButtonLabelDirective, selector: "[eclButtonLabel]" }, { kind: "component", type: i3.EclFormGroupComponent, selector: "[eclFormGroup], ecl-form-group" }, { kind: "directive", type: i4.EclTextInputDirective, selector: "input[eclTextInput]", inputs: ["type", "eclSize", "isInvalid"] }, { kind: "component", type: i5.EclIconComponent, selector: "ecl-icon", inputs: ["iconSet", "icon", "size", "color", "transform", "ariaLabelledby", "role", "title", "ariaHidden", "focusable", "isFlipHorizontal"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclHighlightedSearchComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ecl-highlighted-search', imports: [
+                        FormsModule,
+                        ...EUI_ECL_BUTTON,
+                        ...EUI_ECL_FORM_GROUP,
+                        ...EUI_ECL_TEXT_INPUT,
+                        ...EUI_ECL_ICON,
+                    ], providers: [ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR], host: {
+                        'class': 'ecl-highlighted-search',
+                        'style': 'display: block',
+                    }, template: "<div class=\"ecl-highlighted-search__content\">\n    <div class=\"ecl-highlighted-search__title\" [id]=\"titleId()\">{{ eclTitle() }}</div>\n\n    @if (description()) {\n        <div class=\"ecl-highlighted-search__description ecl-content-color\">{{ description() }}</div>\n    }\n\n    <form class=\"ecl-highlighted-search__form\" role=\"search\" [attr.aria-describedby]=\"titleId()\" (submit)=\"onSubmit($event)\">\n        <div class=\"ecl-highlighted-search__form-content\">\n            <ecl-icon iconSet=\"phosphor\" icon=\"magnifying-glass\" size=\"m\"\n                      class=\"ecl-highlighted-search__form-icon\"></ecl-icon>\n\n            <div eclFormGroup class=\"ecl-highlighted-search__form-group\">\n                <label [for]=\"inputId()\" [id]=\"inputId() + '-label'\"\n                       class=\"ecl-form-label ecl-form-label--hidden\">{{ placeholder() }}</label>\n                <input [id]=\"inputId()\"\n                       eclTextInput\n                       type=\"search\"\n                       eclSize=\"l\"\n                       [placeholder]=\"placeholder()\"\n                       [attr.aria-describedby]=\"helperId()\"\n                       class=\"ecl-highlighted-search__form-input\"\n                       [ngModel]=\"searchText()\"\n                       (ngModelChange)=\"onModelChange($event)\"\n                       (keydown.enter)=\"onEnterKeyDown($event)\"\n                       name=\"highlighted-search-input\" />\n            </div>\n\n            <button eclButton\n                    variant=\"primary\"\n                    size=\"m\"\n                    eclStyle=\"highlight\"\n                    type=\"submit\"\n                    class=\"ecl-highlighted-search__form-button\">\n                <span eclButtonLabel>{{ searchButtonLabel() }}</span>\n            </button>\n        </div>\n\n        @if (helperText()) {\n            <div class=\"ecl-highlighted-search__form-helper\" [id]=\"helperId()\">{{ helperText() }}</div>\n        }\n    </form>\n\n    @if (suggestionLabel()) {\n        <div class=\"ecl-highlighted-search__suggestion\">\n            <span class=\"ecl-highlighted-search__suggestion-label\" [id]=\"suggestionLabelId()\">{{ suggestionLabel() }}</span>\n            <ng-content select=\"[eclHighlightedSearchSuggestions]\"></ng-content>\n        </div>\n    }\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], searchButtonLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchButtonLabel", required: false }] }], searchEvent: [{ type: i0.Output, args: ["searchEvent"] }], suggestionLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionLabel", required: false }] }], suggestionsContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclHighlightedSearchSuggestionsDirective), { isSignal: true }] }] } });
+
+const EUI_ECL_HIGHLIGHTED_SEARCH = [
+    EclHighlightedSearchComponent,
+    EclHighlightedSearchSuggestionsDirective,
+];
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { EUI_ECL_HIGHLIGHTED_SEARCH, EclHighlightedSearchComponent, EclHighlightedSearchEvent, EclHighlightedSearchSuggestionsDirective };
+//# sourceMappingURL=eui-ecl-components-ecl-highlighted-search.mjs.map

package/fesm2022/eui-ecl-components-ecl-highlighted-search.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"eui-ecl-components-ecl-highlighted-search.mjs","sources":["../../components/ecl-highlighted-search/ecl-highlighted-search-suggestions.directive.ts","../../components/ecl-highlighted-search/events/ecl-highlighted-search.event.ts","../../components/ecl-highlighted-search/ecl-highlighted-search.component.ts","../../components/ecl-highlighted-search/ecl-highlighted-search.component.html","../../components/ecl-highlighted-search/index.ts","../../components/ecl-highlighted-search/eui-ecl-components-ecl-highlighted-search.ts"],"sourcesContent":["import { Directive, ElementRef, inject } from '@angular/core';\n\n/**\n * Marker directive for the suggestions content projection slot.\n * Applies the `ecl-highlighted-search__suggestion-list` class to the host element.\n * The parent `ecl-highlighted-search` component uses this to locate\n * the projected element and set `aria-labelledby`.\n */\n@Directive({\n    selector: '[eclHighlightedSearchSuggestions]',\n    host: {\n        'class': 'ecl-highlighted-search__suggestion-list',\n    },\n})\nexport class EclHighlightedSearchSuggestionsDirective {\n    private readonly el = inject(ElementRef);\n\n    /** Sets the aria-labelledby attribute on the host element. */\n    setAriaLabelledBy(id: string): void {\n        this.el.nativeElement.setAttribute('aria-labelledby', id);\n    }\n}\n","import { EclBaseEvent } from '@eui/ecl/core';\n\nexport class EclHighlightedSearchEvent extends EclBaseEvent {\n    constructor(public keyword: string) {\n        super();\n    }\n}\n","import {\n    afterNextRender,\n    Component,\n    computed,\n    contentChild,\n    forwardRef,\n    input,\n    output,\n    Provider,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EUI_ECL_BUTTON } from '@eui/ecl/components/ecl-button';\nimport { EUI_ECL_FORM_GROUP } from '@eui/ecl/components/ecl-form-group';\nimport { EUI_ECL_TEXT_INPUT } from '@eui/ecl/components/ecl-text-input';\nimport { EUI_ECL_ICON } from '@eui/ecl/components/ecl-icon';\nimport { EclHighlightedSearchSuggestionsDirective } from './ecl-highlighted-search-suggestions.directive';\nimport { EclHighlightedSearchEvent } from './events/ecl-highlighted-search.event';\n\nconst ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => EclHighlightedSearchComponent),\n    multi: true,\n};\n\n/**\n * Highlighted search component based on ECL design system.\n * Renders a prominent search banner with title, description, search form,\n * and an optional suggestion area via content projection.\n *\n * Implements ControlValueAccessor for use with ngModel and reactive forms.\n *\n * @example\n * ```html\n * <ecl-highlighted-search\n *     eclTitle=\"Find your next role\"\n *     description=\"Discover job opportunities in the EU institutions\"\n *     helperText=\"Enter the job you're looking for\"\n *     placeholder=\"Enter a search keyword\"\n *     suggestionLabel=\"Or explore:\"\n *     searchButtonLabel=\"Search\"\n *     (searchEvent)=\"onSearch($event)\">\n *\n *     <ul eclTagSet eclHighlightedSearchSuggestions>\n *         <li eclTagSetItem><a href=\"/traineeships\" eclTag>Traineeships</a></li>\n *         <li eclTagSetItem><a href=\"/it\" eclTag>IT &amp; Digital</a></li>\n *         <li eclTagSetItem><a href=\"/policy\" eclTag>Policy &amp; Law</a></li>\n *     </ul>\n *\n * </ecl-highlighted-search>\n * ```\n */\n@Component({\n    selector: 'ecl-highlighted-search',\n    templateUrl: './ecl-highlighted-search.component.html',\n    imports: [\n        FormsModule,\n        ...EUI_ECL_BUTTON,\n        ...EUI_ECL_FORM_GROUP,\n        ...EUI_ECL_TEXT_INPUT,\n        ...EUI_ECL_ICON,\n    ],\n    providers: [ECL_HIGHLIGHTED_SEARCH_VALUE_ACCESSOR],\n    host: {\n        'class': 'ecl-highlighted-search',\n        'style': 'display: block',\n    },\n})\nexport class EclHighlightedSearchComponent extends ECLBaseDirective implements ControlValueAccessor {\n\n    /** Subtitle text displayed below the title. */\n    description = input<string>('');\n\n    /** The heading text displayed above the search form. */\n    eclTitle = input<string>('');\n\n    /** Helper text displayed below the search input. */\n    helperText = input<string>('');\n\n    /** Placeholder text for the search input field. */\n    placeholder = input<string>('');\n\n    /** Label text for the search button. Defaults to \"Search\". */\n    searchButtonLabel = input<string>('Search');\n\n    /** Emitted when the user submits the search form. */\n    searchEvent = output<EclHighlightedSearchEvent>();\n\n    /** Label for the suggestion section (e.g. \"Or explore:\"). */\n    suggestionLabel = input<string>('');\n\n    /** ID for the helper text element. */\n    protected helperId = computed(() => `ehs-${this.instanceId()}-helper`);\n\n    /** ID for the search input element. */\n    protected inputId = computed(() => `ehs-${this.instanceId()}-input`);\n\n    /** Internal search text model. */\n    protected searchText = signal('');\n\n    /** ID for the suggestion label element. */\n    protected suggestionLabelId = computed(() => `ehs-${this.instanceId()}-suggestion-label`);\n\n    /** ID for the title element, used for aria-describedby on the form. */\n    protected titleId = computed(() => `ehs-${this.instanceId()}-title`);\n\n    /** Unique instance ID for generating element IDs. */\n    private readonly instanceId = signal(crypto.randomUUID());\n\n    private onChange: (value: string) => void = () => {};\n\n    private onTouched: () => void = () => {};\n\n    /** Reference to the projected suggestions content for aria wiring. */\n    private suggestionsContent = contentChild(EclHighlightedSearchSuggestionsDirective);\n\n    constructor() {\n        super();\n        afterNextRender(() => {\n            this.wireAriaOnSuggestions();\n        });\n    }\n\n    writeValue(value: string): void {\n        this.searchText.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    /** Handle Enter key on input for search submission. */\n    protected onEnterKeyDown(event: Event): void {\n        event.preventDefault();\n        this.searchEvent.emit(new EclHighlightedSearchEvent(this.searchText()));\n    }\n\n    /** Called when the input model changes. Propagates to CVA. */\n    protected onModelChange(value: string): void {\n        this.searchText.set(value);\n        this.onChange(value);\n    }\n\n    /** Handle form submission. */\n    protected onSubmit(event: Event): void {\n        event.preventDefault();\n        this.onTouched();\n        this.searchEvent.emit(new EclHighlightedSearchEvent(this.searchText()));\n    }\n\n    /**\n     * Programmatically sets aria-labelledby on the projected suggestions element\n     * so the consumer doesn't need to wire IDs manually.\n     */\n    private wireAriaOnSuggestions(): void {\n        const directive = this.suggestionsContent();\n        if (directive) {\n            directive.setAriaLabelledBy(this.suggestionLabelId());\n        }\n    }\n}\n","<div class=\"ecl-highlighted-search__content\">\n    <div class=\"ecl-highlighted-search__title\" [id]=\"titleId()\">{{ eclTitle() }}</div>\n\n    @if (description()) {\n        <div class=\"ecl-highlighted-search__description ecl-content-color\">{{ description() }}</div>\n    }\n\n    <form class=\"ecl-highlighted-search__form\" role=\"search\" [attr.aria-describedby]=\"titleId()\" (submit)=\"onSubmit($event)\">\n        <div class=\"ecl-highlighted-search__form-content\">\n            <ecl-icon iconSet=\"phosphor\" icon=\"magnifying-glass\" size=\"m\"\n                      class=\"ecl-highlighted-search__form-icon\"></ecl-icon>\n\n            <div eclFormGroup class=\"ecl-highlighted-search__form-group\">\n                <label [for]=\"inputId()\" [id]=\"inputId() + '-label'\"\n                       class=\"ecl-form-label ecl-form-label--hidden\">{{ placeholder() }}</label>\n                <input [id]=\"inputId()\"\n                       eclTextInput\n                       type=\"search\"\n                       eclSize=\"l\"\n                       [placeholder]=\"placeholder()\"\n                       [attr.aria-describedby]=\"helperId()\"\n                       class=\"ecl-highlighted-search__form-input\"\n                       [ngModel]=\"searchText()\"\n                       (ngModelChange)=\"onModelChange($event)\"\n                       (keydown.enter)=\"onEnterKeyDown($event)\"\n                       name=\"highlighted-search-input\" />\n            </div>\n\n            <button eclButton\n                    variant=\"primary\"\n                    size=\"m\"\n                    eclStyle=\"highlight\"\n                    type=\"submit\"\n                    class=\"ecl-highlighted-search__form-button\">\n                <span eclButtonLabel>{{ searchButtonLabel() }}</span>\n            </button>\n        </div>\n\n        @if (helperText()) {\n            <div class=\"ecl-highlighted-search__form-helper\" [id]=\"helperId()\">{{ helperText() }}</div>\n        }\n    </form>\n\n    @if (suggestionLabel()) {\n        <div class=\"ecl-highlighted-search__suggestion\">\n            <span class=\"ecl-highlighted-search__suggestion-label\" [id]=\"suggestionLabelId()\">{{ suggestionLabel() }}</span>\n            <ng-content select=\"[eclHighlightedSearchSuggestions]\"></ng-content>\n        </div>\n    }\n</div>\n","import { EclHighlightedSearchComponent } from './ecl-highlighted-search.component';\nimport { EclHighlightedSearchSuggestionsDirective } from './ecl-highlighted-search-suggestions.directive';\n\nexport * from './ecl-highlighted-search.component';\nexport * from './ecl-highlighted-search-suggestions.directive';\nexport * from './events/ecl-highlighted-search.event';\n\nexport const EUI_ECL_HIGHLIGHTED_SEARCH = [\n    EclHighlightedSearchComponent,\n    EclHighlightedSearchSuggestionsDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/eui-ecl-components-ecl-layout-wrapper.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Directive, inject, ElementRef, signal, computed, input, numberAttribute, booleanAttribute, contentChildren, contentChild, effect, Component } from '@angular/core';
+import { Directive, signal, computed, input, numberAttribute, booleanAttribute, contentChild, contentChildren, effect, Component } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 
 /**
@@ -81,7 +81,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  */
 class EclLayoutItemDirective {
     constructor() {
-        this.el = inject(ElementRef);
         /** Positional index (1-based), assigned by the parent layout wrapper. */
         this.index = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
@@ -112,7 +111,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *
  * @example
  * ```html
- * <section eclLayoutWrapper [columns]="3" direction="horizontal">
+ * <div eclLayoutWrapper [columns]="3" direction="horizontal">
  *   <h2 eclLayoutWrapperTitle>Heading</h2>
  *   <div eclLayoutWrapperDescription>Description text</div>
  *
@@ -121,7 +120,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
  *   <div eclLayoutItem><article eclCard>...</article></div>
  *
  *   <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
- * </section>
+ * </div>
  * ```
  */
 class EclLayoutWrapperComponent extends ECLBaseDirective {
@@ -130,7 +129,7 @@ class EclLayoutWrapperComponent extends ECLBaseDirective {
     get cssClasses() {
         return [
             super.getCssClasses('ecl-layout-wrapper'),
-            `col-${this.columns()}`,
+            `ecl-layout-wrapper--col-${this.columns()}`,
             this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',
             this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',
             this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',
@@ -151,26 +150,26 @@ class EclLayoutWrapperComponent extends ECLBaseDirective {
         ...(ngDevMode ? [{ debugName: "direction" }] : /* istanbul ignore next */ []));
         /** Display all the elements at full height. */
         this.fullHeight = input(true, { ...(ngDevMode ? { debugName: "fullHeight" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        /** Projected layout items that will be auto-indexed. */
-        this.items = contentChildren(EclLayoutItemDirective, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         /** Whether a view-all link is projected. */
         this.hasViewAll = contentChild(EclLayoutWrapperViewAllDirective, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasViewAll" }] : /* istanbul ignore next */ []));
+        /** Projected layout items that will be auto-indexed. */
+        this.items = contentChildren(EclLayoutItemDirective, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         effect(() => {
             const items = this.items();
             items.forEach((item, i) => item.index.set(i + 1));
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclLayoutWrapperComponent, isStandalone: true, selector: "div[eclLayoutWrapper]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, infoPosition: { classPropertyName: "infoPosition", publicName: "infoPosition", isSignal: true, isRequired: false, transformFunction: null }, forcedColumn: { classPropertyName: "forcedColumn", publicName: "forcedColumn", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "items", predicate: EclLayoutItemDirective, isSignal: true }, { propertyName: "hasViewAll", first: true, predicate: EclLayoutWrapperViewAllDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n", styles: [":host(.col-2),:host(.col-3),:host(.col-4){flex:unset;width:unset;max-width:unset;padding-right:unset;padding-left:unset}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: EclLayoutWrapperComponent, isStandalone: true, selector: "div[eclLayoutWrapper]", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, infoPosition: { classPropertyName: "infoPosition", publicName: "infoPosition", isSignal: true, isRequired: false, transformFunction: null }, forcedColumn: { classPropertyName: "forcedColumn", publicName: "forcedColumn", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, fullHeight: { classPropertyName: "fullHeight", publicName: "fullHeight", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "cssClasses" } }, queries: [{ propertyName: "hasViewAll", first: true, predicate: EclLayoutWrapperViewAllDirective, descendants: true, isSignal: true }, { propertyName: "items", predicate: EclLayoutItemDirective, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: EclLayoutWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'div[eclLayoutWrapper]', host: {
                         '[class]': 'cssClasses',
-                    }, template: "<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n", styles: [":host(.col-2),:host(.col-3),:host(.col-4){flex:unset;width:unset;max-width:unset;padding-right:unset;padding-left:unset}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], infoPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoPosition", required: false }] }], forcedColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "forcedColumn", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclLayoutItemDirective), { isSignal: true }] }], hasViewAll: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclLayoutWrapperViewAllDirective), { isSignal: true }] }] } });
+                    }, template: "<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n" }]
+        }], ctorParameters: () => [], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }], infoPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "infoPosition", required: false }] }], forcedColumn: [{ type: i0.Input, args: [{ isSignal: true, alias: "forcedColumn", required: false }] }], direction: [{ type: i0.Input, args: [{ isSignal: true, alias: "direction", required: false }] }], fullHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "fullHeight", required: false }] }], hasViewAll: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclLayoutWrapperViewAllDirective), { isSignal: true }] }], items: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclLayoutItemDirective), { isSignal: true }] }] } });
 
 const EUI_ECL_LAYOUT_WRAPPER = [
     EclLayoutWrapperComponent,

package/fesm2022/eui-ecl-components-ecl-layout-wrapper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"eui-ecl-components-ecl-layout-wrapper.mjs","sources":["../../components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.html","../../components/ecl-layout-wrapper/index.ts","../../components/ecl-layout-wrapper/eui-ecl-components-ecl-layout-wrapper.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n    readonly el = inject(ElementRef);\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n","import { Component, contentChild, contentChildren, effect, input, numberAttribute, booleanAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <section eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * </section>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n    // TODO: remove after ECL fix the usage of bootstrap classes (col-2, col-3, etc.)\n    styles: [`\n        :host(.col-2), :host(.col-3), :host(.col-4) {\n            flex: unset;\n            width: unset;\n            max-width: unset;\n            padding-right: unset;\n            padding-left: unset;\n        }\n    `],\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Projected layout items that will be auto-indexed. */\n    items = contentChildren(EclLayoutItemDirective);\n\n    /** Whether a view-all link is projected. */\n    hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n","<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n","import { EclLayoutWrapperComponent } from './ecl-layout-wrapper.component';\nimport {\n    EclLayoutItemDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperViewAllDirective,\n} from './ecl-layout-wrapper.directives';\n\nexport * from './ecl-layout-wrapper.component';\nexport * from './ecl-layout-wrapper.directives';\n\nexport const EUI_ECL_LAYOUT_WRAPPER = [\n    EclLayoutWrapperComponent,\n    EclLayoutItemDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperViewAllDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"eui-ecl-components-ecl-layout-wrapper.mjs","sources":["../../components/ecl-layout-wrapper/ecl-layout-wrapper.directives.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.ts","../../components/ecl-layout-wrapper/ecl-layout-wrapper.component.html","../../components/ecl-layout-wrapper/index.ts","../../components/ecl-layout-wrapper/eui-ecl-components-ecl-layout-wrapper.ts"],"sourcesContent":["import { computed, Directive, ElementRef, inject, signal } from '@angular/core';\n\n/**\n * Directive for the layout wrapper title.\n * Applies the `ecl-layout-wrapper__title` class to the host element.\n *\n * @example\n * ```html\n * <h2 eclLayoutWrapperTitle>Heading</h2>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperTitle]',\n    host: {\n        class: 'ecl-layout-wrapper__title',\n    },\n})\nexport class EclLayoutWrapperTitleDirective {}\n\n/**\n * Directive for the layout wrapper description.\n * Applies the `ecl-layout-wrapper__description` class to the host element.\n *\n * @example\n * ```html\n * <div eclLayoutWrapperDescription>Lorem ipsum...</div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperDescription]',\n    host: {\n        class: 'ecl-layout-wrapper__description',\n    },\n})\nexport class EclLayoutWrapperDescriptionDirective {}\n\n/**\n * Directive for the layout wrapper \"view all\" link.\n * Applies the `ecl-layout-wrapper__view-all-link` class to the link element.\n *\n * @example\n * ```html\n * <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutWrapperViewAll]',\n    host: {\n        class: 'ecl-layout-wrapper__view-all-link',\n    },\n})\nexport class EclLayoutWrapperViewAllDirective {}\n\n/**\n * Directive for individual items inside the layout wrapper grid.\n * Wraps each content element (e.g., card) and applies positional CSS classes.\n *\n * The index is automatically assigned by the parent `EclLayoutWrapperComponent`.\n *\n * @example\n * ```html\n * <div eclLayoutItem><article eclCard>...</article></div>\n * ```\n */\n@Directive({\n    selector: '[eclLayoutItem]',\n    host: {\n        '[class]': 'cssClasses()',\n    },\n})\nexport class EclLayoutItemDirective {\n\n    /** Positional index (1-based), assigned by the parent layout wrapper. */\n    readonly index = signal(0);\n\n    /** Computed CSS classes based on the assigned index. */\n    readonly cssClasses = computed(() => {\n        const idx = this.index();\n        return idx > 0 ? `ecl-layout-item ecl-layout-item--${idx}` : 'ecl-layout-item';\n    });\n}\n","import { booleanAttribute, Component, contentChild, contentChildren, effect, input, numberAttribute } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { EclLayoutItemDirective, EclLayoutWrapperViewAllDirective } from './ecl-layout-wrapper.directives';\n\n/**\n * ECL Layout Wrapper component.\n * Arranges projected content into a responsive grid layout with configurable columns.\n * Includes optional title, description, and \"view all\" link areas.\n *\n * @example\n * ```html\n * <div eclLayoutWrapper [columns]=\"3\" direction=\"horizontal\">\n *   <h2 eclLayoutWrapperTitle>Heading</h2>\n *   <div eclLayoutWrapperDescription>Description text</div>\n *\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *   <div eclLayoutItem><article eclCard>...</article></div>\n *\n *   <a eclLayoutWrapperViewAll eclLink [standalone]=\"true\" icon=\"arrow-left\">View all</a>\n * </div>\n * ```\n */\n@Component({\n    // eslint-disable-next-line @angular-eslint/component-selector\n    selector: 'div[eclLayoutWrapper]',\n    templateUrl: './ecl-layout-wrapper.component.html',\n    host: {\n        '[class]': 'cssClasses',\n    },\n})\nexport class EclLayoutWrapperComponent extends ECLBaseDirective {\n    /** Number of columns for the grid layout. Accepts 2, 3, or 4. Defaults to 3. */\n    columns = input(3, { transform: numberAttribute });\n\n    /** Position of the info block (title + description). */\n    infoPosition = input<'top' | 'side'>('top');\n\n    /** Force column number instead of dynamic management. Use with caution. */\n    forcedColumn = input(false, { transform: booleanAttribute });\n\n    /** Flow of items. */\n    direction = input<'horizontal' | 'vertical'>('horizontal');\n\n    /** Display all the elements at full height. */\n    fullHeight = input(true, { transform: booleanAttribute });\n\n    /** Whether a view-all link is projected. */\n    protected hasViewAll = contentChild(EclLayoutWrapperViewAllDirective);\n\n    /** Projected layout items that will be auto-indexed. */\n    private items = contentChildren(EclLayoutItemDirective);\n\n    /** Host CSS classes based on inputs. */\n    // TODO: change this to computed, when the BaseDirective is migrated to signals.\n    get cssClasses(): string {\n        return [\n            super.getCssClasses('ecl-layout-wrapper'),\n            `ecl-layout-wrapper--col-${this.columns()}`,\n            this.infoPosition() === 'side' ? 'ecl-layout-wrapper--info-side' : '',\n            this.direction() === 'vertical' ? 'ecl-layout-wrapper--vertical' : '',\n            this.fullHeight() ? '' : 'ecl-layout-wrapper--height-auto',\n            this.forcedColumn() ? 'ecl-layout-wrapper--forced' : '',\n        ].filter(Boolean).join(' ');\n    }\n\n    constructor() {\n        super();\n        effect(() => {\n            const items = this.items();\n            items.forEach((item, i) => item.index.set(i + 1));\n        });\n    }\n}\n","<div class=\"ecl-layout-wrapper__grid\">\n    <div class=\"ecl-layout-wrapper__info\">\n        <ng-content select=\"[eclLayoutWrapperTitle]\" />\n        <ng-content select=\"[eclLayoutWrapperDescription]\" />\n    </div>\n    <div class=\"ecl-layout-wrapper__container\">\n        <div class=\"ecl-layout-wrapper__content\">\n            <ng-content select=\"[eclLayoutItem]\" />\n        </div>\n        @if (hasViewAll()) {\n            <div class=\"ecl-layout-wrapper__view-all\">\n                <ng-content select=\"[eclLayoutWrapperViewAll]\" />\n            </div>\n        }\n    </div>\n</div>\n","import { EclLayoutWrapperComponent } from './ecl-layout-wrapper.component';\nimport {\n    EclLayoutItemDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperViewAllDirective,\n} from './ecl-layout-wrapper.directives';\n\nexport * from './ecl-layout-wrapper.component';\nexport * from './ecl-layout-wrapper.directives';\n\nexport const EUI_ECL_LAYOUT_WRAPPER = [\n    EclLayoutWrapperComponent,\n    EclLayoutItemDirective,\n    EclLayoutWrapperTitleDirective,\n    EclLayoutWrapperDescriptionDirective,\n    EclLayoutWrapperViewAllDirective,\n] as const;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}