npm - @eui/ecl - Versions diffs - 22.0.0-alpha.40 → 22.0.0-alpha.42 - Mend

@eui/ecl 22.0.0-alpha.40 → 22.0.0-alpha.42

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.

Files changed (215) hide show

package/fesm2022/eui-ecl-components-ecl-featured.mjs CHANGED Viewed

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, HostBinding, Component, inject, ElementRef, Renderer2, Input, Directive, computed, contentChild, contentChildren } from '@angular/core';
+import { input, booleanAttribute, computed, Component, signal, Directive, contentChild, contentChildren } from '@angular/core';
 import { ECLBaseDirective } from '@eui/ecl/core';
 import { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';
 import { uniqueId } from '@eui/core';
@@ -28,36 +28,32 @@ class EclFeaturedComponent extends ECLBaseDirective {
         ...(ngDevMode ? [undefined, { debugName: "verticalAlign" }] : /* istanbul ignore next */ []));
         /** Gives a different display for the link in highlighted mode */
         this.isLinkHighlighted = input(false, { ...(ngDevMode ? { debugName: "isLinkHighlighted" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.role = 'article';
-    }
-    /**
-     * Adds specific classes to the component.
-     */
-    get cssClasses() {
-        const variant = this.variant();
-        return [
-            super.getCssClasses('ecl-featured-item'),
-            variant ? `ecl-featured-item--${variant}` : '',
-            this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',
-            this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',
-            this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',
-        ].join(' ').trim();
+        /**
+         * Adds specific classes to the component.
+         */
+        this.cssClasses = computed(() => {
+            const variant = this.variant();
+            return [
+                super.getCssClasses('ecl-featured-item'),
+                variant ? `ecl-featured-item--${variant}` : '',
+                this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',
+                this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',
+                this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',
+            ].join(' ').trim();
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "cssClasses" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured, article[eclFeatured]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isDynamicImage: { classPropertyName: "isDynamicImage", publicName: "isDynamicImage", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, isLinkHighlighted: { classPropertyName: "isLinkHighlighted", publicName: "isLinkHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-featured-item--link-highlighted": "isLinkHighlighted()", "attr.role": "this.role", "class": "this.cssClasses" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position() === 'right'\">\n    <ng-content></ng-content>\n</div>" }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.2", type: EclFeaturedComponent, isStandalone: true, selector: "ecl-featured, article[eclFeatured]", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isDynamicImage: { classPropertyName: "isDynamicImage", publicName: "isDynamicImage", isSignal: true, isRequired: false, transformFunction: null }, horizontalAlign: { classPropertyName: "horizontalAlign", publicName: "horizontalAlign", isSignal: true, isRequired: false, transformFunction: null }, verticalAlign: { classPropertyName: "verticalAlign", publicName: "verticalAlign", isSignal: true, isRequired: false, transformFunction: null }, isLinkHighlighted: { classPropertyName: "isLinkHighlighted", publicName: "isLinkHighlighted", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "article" }, properties: { "class": "cssClasses()", "class.ecl-featured-item--link-highlighted": "isLinkHighlighted()" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position() === 'right'\">\n    <ng-content></ng-content>\n</div>" }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ecl-featured, article[eclFeatured]', host: {
+                        'role': 'article',
+                        '[class]': 'cssClasses()',
                         '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',
                     }, template: "<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position() === 'right'\">\n    <ng-content></ng-content>\n</div>" }]
-        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isDynamicImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDynamicImage", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], isLinkHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLinkHighlighted", required: false }] }], role: [{
-                type: HostBinding,
-                args: ['attr.role']
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], isDynamicImage: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDynamicImage", required: false }] }], horizontalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "horizontalAlign", required: false }] }], verticalAlign: [{ type: i0.Input, args: [{ isSignal: true, alias: "verticalAlign", required: false }] }], isLinkHighlighted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLinkHighlighted", required: false }] }] } });
 /**
  * Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.
@@ -65,32 +61,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
 class EclFeaturedItemLinkDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
-        this.className = true;
-        this.el = inject(ElementRef);
-        this.renderer = inject(Renderer2);
-    }
-    set ariaDescribedBy(value) {
-        if (value) {
-            this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);
-        }
-        else {
-            this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');
-        }
+        /**
+         * The id of the element describing this link. Set imperatively by the parent
+         * featured item once the title id is known.
+         */
+        this.ariaDescribedBy = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : /* istanbul ignore next */ []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemLinkDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemLinkDirective, isStandalone: true, selector: "[eclFeaturedItemLink]", inputs: { ariaDescribedBy: "ariaDescribedBy" }, host: { properties: { "class.ecl-featured-item__link": "this.className" } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemLinkDirective, isStandalone: true, selector: "[eclFeaturedItemLink]", host: { properties: { "attr.aria-describedby": "ariaDescribedBy()" }, classAttribute: "ecl-featured-item__link" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemLinkDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[eclFeaturedItemLink]',
+                    host: {
+                        'class': 'ecl-featured-item__link',
+                        '[attr.aria-describedby]': 'ariaDescribedBy()',
+                    },
                 }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__link']
-            }], ariaDescribedBy: [{
-                type: Input
-            }] } });
+        }] });
 class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {
     constructor() {
         super(...arguments);
@@ -133,7 +123,6 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
         this.mediaContainer = contentChild(EclMediaContainerComponent, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "mediaContainer" }] : /* istanbul ignore next */ []));
         this.links = contentChildren(EclFeaturedItemLinkDirective, { ...(ngDevMode ? { debugName: "links" } : /* istanbul ignore next */ {}), descendants: true });
-        this.className = true;
         this.hasMedia = computed(() => {
             return !!this.mediaContainer();
         }, /* @ts-ignore */
@@ -151,40 +140,34 @@ class EclFeaturedItemComponent extends ECLBaseDirective {
         const links = this.links();
         if (describedBy && links) {
             links.forEach(link => {
-                link.ariaDescribedBy = describedBy;
+                link.ariaDescribedBy.set(describedBy);
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item, div[eclFeaturedItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclMicroTitle: { classPropertyName: "eclMicroTitle", publicName: "eclMicroTitle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.ecl-featured-item__item": "this.className" } }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true, isSignal: true }, { propertyName: "links", predicate: EclFeaturedItemLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.2", type: EclFeaturedItemComponent, isStandalone: true, selector: "ecl-featured-item, div[eclFeaturedItem]", inputs: { eclTitle: { classPropertyName: "eclTitle", publicName: "eclTitle", isSignal: true, isRequired: false, transformFunction: null }, eclMicroTitle: { classPropertyName: "eclMicroTitle", publicName: "eclMicroTitle", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "ecl-featured-item__item" }, queries: [{ propertyName: "mediaContainer", first: true, predicate: EclMediaContainerComponent, descendants: true, isSignal: true }, { propertyName: "links", predicate: EclFeaturedItemLinkDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured-item, div[eclFeaturedItem]', imports: [NgTemplateOutlet], template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclMicroTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclMicroTitle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mediaContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMediaContainerComponent), { isSignal: true }] }], links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclFeaturedItemLinkDirective), { ...{ descendants: true }, isSignal: true }] }], className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__item']
-            }] } });
+            args: [{ selector: 'ecl-featured-item, div[eclFeaturedItem]', imports: [NgTemplateOutlet], host: {
+                        'class': 'ecl-featured-item__item',
+                    }, template: "@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n    <div class=\"ecl-featured-item__info\">\n         @if(hasMicroTitle()) {\n        <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n         }\n        @if(hasTitle()) {\n        <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n            {{ eclTitle() }}\n        </div>\n        }\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </div>\n    <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>", styles: [":host{display:block}\n"] }]
+        }], propDecorators: { eclTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclTitle", required: false }] }], eclMicroTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "eclMicroTitle", required: false }] }], id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], mediaContainer: [{ type: i0.ContentChild, args: [i0.forwardRef(() => EclMediaContainerComponent), { isSignal: true }] }], links: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => EclFeaturedItemLinkDirective), { ...{ descendants: true }, isSignal: true }] }] } });
 /**
  * Applies specific additional class to style <ecl-featured-item-description> component, as a part of the
  *  <ecl-featured> component.
  */
 class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {
-    constructor() {
-        super(...arguments);
-        this.className = true;
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemDescriptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemDescriptionComponent, isStandalone: true, selector: "ecl-featured-item-description", host: { properties: { "class.ecl-featured-item__description": "this.className" } }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.2", type: EclFeaturedItemDescriptionComponent, isStandalone: true, selector: "ecl-featured-item-description", host: { classAttribute: "ecl-featured-item__description" }, usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclFeaturedItemDescriptionComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ecl-featured-item-description', template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
-        }], propDecorators: { className: [{
-                type: HostBinding,
-                args: ['class.ecl-featured-item__description']
-            }] } });
+            args: [{ selector: 'ecl-featured-item-description', host: {
+                        'class': 'ecl-featured-item__description',
+                    }, template: "<ng-content></ng-content>\n", styles: [":host{display:block}\n"] }]
+        }] });
 const EUI_ECL_FEATURED = [
     EclFeaturedComponent,

package/fesm2022/eui-ecl-components-ecl-featured.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"eui-ecl-components-ecl-featured.mjs","sources":["../../components/ecl-featured/ecl-featured.component.ts","../../components/ecl-featured/ecl-featured.component.html","../../components/ecl-featured/ecl-featured-item-link.directive.ts","../../components/ecl-featured/ecl-featured-item.component.ts","../../components/ecl-featured/ecl-featured-item.component.html","../../components/ecl-featured/ecl-featured-item-description.component.ts","../../components/ecl-featured/ecl-featured-item-description.component.html","../../components/ecl-featured/index.ts","../../components/ecl-featured/eui-ecl-components-ecl-featured.ts"],"sourcesContent":["import { booleanAttribute, Component, HostBinding, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/*\n Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n /\n@Component({\n selector: 'ecl-featured, article[eclFeatured]',\n templateUrl: './ecl-featured.component.html',\n host: {\n '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n },\n})\nexport class EclFeaturedComponent extends ECLBaseDirective {\n /\n The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n /\n readonly position = input<'left' \| 'right'>('left');\n /\n 'highligh' varian, applies class to make more stand out appearance of the component.\n /\n readonly variant = input<'highlight'>(undefined);\n\n isDynamicImage = input(false, { transform: booleanAttribute });\n\n horizontalAlign = input<'left' \| 'center' \| undefined>();\n\n verticalAlign = input<'top' \| 'center' \| undefined>();\n\n /* Gives a different display for the link in highlighted mode /\n readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\n\n @HostBinding('attr.role') role = 'article';\n\n /\n Adds specific classes to the component.\n /\n @HostBinding('class')\n get cssClasses(): string {\n const variant = this.variant();\n return [\n super.getCssClasses('ecl-featured-item'),\n variant ? `ecl-featured-item--${variant}`: '',\n this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\n ].join(' ').trim();\n }\n}\n","<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position() === 'right'\">\n <ng-content></ng-content>\n</div>","import { Directive, ElementRef, Input, Renderer2, HostBinding, inject, input, computed } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n /\n@Directive({\n selector: '[eclFeaturedItemLink]',\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n @HostBinding('class.ecl-featured-item__link') className = true;\n\n @Input()\n set ariaDescribedBy(value: string \| null) {\n if (value) {\n this.renderer.setAttribute(this.el.nativeElement, 'aria-describedby', value);\n } else {\n this.renderer.removeAttribute(this.el.nativeElement, 'aria-describedby');\n }\n }\n private el = inject(ElementRef);\n private renderer = inject(Renderer2);\n}\n\n@Directive({\n selector: '[eclFeaturedMediaAnchor]',\n host: {\n '[style.--ecl-image-anchor]': 'cssAnchor()',\n },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n eclFeaturedMediaAnchor = input<'left' \| 'right' \| '20%' \| 'center' \| undefined>();\n\n readonly cssAnchor = computed(() => {\n const value = this.eclFeaturedMediaAnchor();\n\n if (!value \|\| value === 'center') {\n return null;\n }\n\n return value;\n });\n}\n","import { AfterContentInit, Component, HostBinding, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/\n Container for the text part - title and description of the <ecl-featured> component.\n /\n@Component({\n selector: 'ecl-featured-item, div[eclFeaturedItem]',\n imports: [NgTemplateOutlet],\n templateUrl: './ecl-featured-item.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n eclTitle = input('');\n eclMicroTitle = input('');\n id = input<string>(`ecl-featured-item-${uniqueId()}`);\n mediaContainer = contentChild(EclMediaContainerComponent);\n readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n @HostBinding('class.ecl-featured-item__item') className = true;\n\n protected readonly hasMedia = computed(() => {\n return !!this.mediaContainer() \n });\n protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n ngAfterContentInit(): void {\n if (this.mediaContainer()) {\n this.mediaContainer().class.set('ecl-featured-item__media_container');\n }\n\n const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n const links = this.links();\n if (describedBy && links) {\n links.forEach(link => {\n link.ariaDescribedBy = describedBy;\n });\n }\n }\n}\n","@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n <div class=\"ecl-featured-item__info\">\n @if(hasMicroTitle()) {\n <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n }\n @if(hasTitle()) {\n <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n {{ eclTitle() }}\n </div>\n }\n <ng-container ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n <ng-container ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>","import { Component, HostBinding } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n * <ecl-featured> component.\n /\n@Component({\n selector: 'ecl-featured-item-description',\n templateUrl: './ecl-featured-item-description.component.html',\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {\n @HostBinding('class.ecl-featured-item__description') className = true;\n}\n","<ng-content></ng-content>\n","import { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemLinkDirective, EclFeaturedMediaAnchorDirective } from './ecl-featured-item-link.directive';\n\nexport from './ecl-featured.component';\nexport * from './ecl-featured-item.component';\nexport * from './ecl-featured-item-description.component';\nexport * from './ecl-featured-item-link.directive';\n\nexport const EUI_ECL_FEATURED = [\n EclFeaturedComponent,\n EclFeaturedItemComponent,\n EclFeaturedItemLinkDirective,\n EclFeaturedItemDescriptionComponent,\n EclFeaturedMediaAnchorDirective,\n] as const;","/*\n Generated bundle index. Do not edit.\n /\n\nexport from './index';\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"eui-ecl-components-ecl-featured.mjs","sources":["../../components/ecl-featured/ecl-featured.component.ts","../../components/ecl-featured/ecl-featured.component.html","../../components/ecl-featured/ecl-featured-item-link.directive.ts","../../components/ecl-featured/ecl-featured-item.component.ts","../../components/ecl-featured/ecl-featured-item.component.html","../../components/ecl-featured/ecl-featured-item-description.component.ts","../../components/ecl-featured/ecl-featured-item-description.component.html","../../components/ecl-featured/index.ts","../../components/ecl-featured/eui-ecl-components-ecl-featured.ts"],"sourcesContent":["import { booleanAttribute, Component, computed, input } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/*\n Custom ECL component, that adds visual support to a piece of content. Uses <ecl-media-container>.\n /\n@Component({\n selector: 'ecl-featured, article[eclFeatured]',\n templateUrl: './ecl-featured.component.html',\n host: {\n 'role': 'article',\n '[class]': 'cssClasses()',\n '[class.ecl-featured-item--link-highlighted]': 'isLinkHighlighted()',\n },\n})\nexport class EclFeaturedComponent extends ECLBaseDirective {\n /\n The position of the image in the component. Can be 'left' or 'right'. The default value is 'left'.\n /\n readonly position = input<'left' \| 'right'>('left');\n /\n 'highligh' varian, applies class to make more stand out appearance of the component.\n /\n readonly variant = input<'highlight'>(undefined);\n\n isDynamicImage = input(false, { transform: booleanAttribute });\n\n horizontalAlign = input<'left' \| 'center' \| undefined>();\n\n verticalAlign = input<'top' \| 'center' \| undefined>();\n\n /* Gives a different display for the link in highlighted mode /\n readonly isLinkHighlighted = input(false, { transform: booleanAttribute });\n\n /\n Adds specific classes to the component.\n /\n readonly cssClasses = computed(() => {\n const variant = this.variant();\n return [\n super.getCssClasses('ecl-featured-item'),\n variant ? `ecl-featured-item--${variant}`: '',\n this.horizontalAlign() === 'center' ? 'ecl-featured-item--hcenter' : '',\n this.verticalAlign() === 'center' ? 'ecl-featured-item--vcenter' : '',\n this.isDynamicImage() ? 'ecl-featured-item--dynamic' : '',\n ].join(' ').trim();\n });\n}\n","<div class=\"ecl-featured-item__container\" [class.ecl-featured-item__container--right]=\"position() === 'right'\">\n <ng-content></ng-content>\n</div>","import { Directive, computed, input, signal } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies specific additional class for the eclLink directive, used in <ecl-featured-item> construction.\n /\n@Directive({\n selector: '[eclFeaturedItemLink]',\n host: {\n 'class': 'ecl-featured-item__link',\n '[attr.aria-describedby]': 'ariaDescribedBy()',\n },\n})\nexport class EclFeaturedItemLinkDirective extends ECLBaseDirective {\n /\n The id of the element describing this link. Set imperatively by the parent\n * featured item once the title id is known.\n /\n readonly ariaDescribedBy = signal<string \| null>(null);\n}\n\n@Directive({\n selector: '[eclFeaturedMediaAnchor]',\n host: {\n '[style.--ecl-image-anchor]': 'cssAnchor()',\n },\n})\nexport class EclFeaturedMediaAnchorDirective extends ECLBaseDirective {\n eclFeaturedMediaAnchor = input<'left' \| 'right' \| '20%' \| 'center' \| undefined>();\n\n readonly cssAnchor = computed(() => {\n const value = this.eclFeaturedMediaAnchor();\n\n if (!value \|\| value === 'center') {\n return null;\n }\n\n return value;\n });\n}\n","import { AfterContentInit, Component, contentChild, computed, input, contentChildren } from '@angular/core';\nimport { EclMediaContainerComponent } from '@eui/ecl/components/ecl-media-container';\nimport { ECLBaseDirective } from '@eui/ecl/core';\nimport { uniqueId } from '@eui/core';\nimport { EclFeaturedItemLinkDirective } from './ecl-featured-item-link.directive';\nimport { NgTemplateOutlet } from '@angular/common';\n\n/\n Container for the text part - title and description of the <ecl-featured> component.\n /\n@Component({\n selector: 'ecl-featured-item, div[eclFeaturedItem]',\n imports: [NgTemplateOutlet],\n templateUrl: './ecl-featured-item.component.html',\n host: {\n 'class': 'ecl-featured-item__item',\n },\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclFeaturedItemComponent extends ECLBaseDirective implements AfterContentInit {\n eclTitle = input('');\n eclMicroTitle = input('');\n id = input<string>(`ecl-featured-item-${uniqueId()}`);\n mediaContainer = contentChild(EclMediaContainerComponent);\n readonly links = contentChildren(EclFeaturedItemLinkDirective, { descendants: true });\n\n protected readonly hasMedia = computed(() => {\n return !!this.mediaContainer() \n });\n protected readonly hasTitle = computed(() => this.eclTitle() !== '');\n protected readonly hasMicroTitle = computed(() => this.eclMicroTitle() !== '');\n\n ngAfterContentInit(): void {\n if (this.mediaContainer()) {\n this.mediaContainer().class.set('ecl-featured-item__media_container');\n }\n\n const describedBy = this.hasTitle() ? `${this.id()}-title` : null;\n const links = this.links();\n if (describedBy && links) {\n links.forEach(link => {\n link.ariaDescribedBy.set(describedBy);\n });\n }\n }\n}\n","@if (!hasMedia()) {\n<div class=\"ecl-featured-item__content\">\n <div class=\"ecl-featured-item__info\">\n @if(hasMicroTitle()) {\n <div class=\"ecl-featured-item__micro-title\">{{ eclMicroTitle() }}</div>\n }\n @if(hasTitle()) {\n <div class=\"ecl-featured-item__title\" [attr.id]=\"id() + '-title'\">\n {{ eclTitle() }}\n </div>\n }\n <ng-container ngTemplateOutlet=\"content\"></ng-container>\n </div>\n <ng-content select=\"[eclLink]\"></ng-content>\n</div>\n} @else {\n <ng-container ngTemplateOutlet=\"content\"></ng-container>\n}\n\n<ng-template #content>\n <ng-content></ng-content>\n</ng-template>","import { Component } from '@angular/core';\nimport { ECLBaseDirective } from '@eui/ecl/core';\n\n/\n Applies specific additional class to style <ecl-featured-item-description> component, as a part of the\n * <ecl-featured> component.\n /\n@Component({\n selector: 'ecl-featured-item-description',\n templateUrl: './ecl-featured-item-description.component.html',\n host: {\n 'class': 'ecl-featured-item__description',\n },\n styles: [\n `\n :host {\n display: block;\n }\n `,\n ],\n})\nexport class EclFeaturedItemDescriptionComponent extends ECLBaseDirective {}\n","<ng-content></ng-content>\n","import { EclFeaturedComponent } from './ecl-featured.component';\nimport { EclFeaturedItemComponent } from './ecl-featured-item.component';\nimport { EclFeaturedItemDescriptionComponent } from './ecl-featured-item-description.component';\nimport { EclFeaturedItemLinkDirective, EclFeaturedMediaAnchorDirective } from './ecl-featured-item-link.directive';\n\nexport from './ecl-featured.component';\nexport * from './ecl-featured-item.component';\nexport * from './ecl-featured-item-description.component';\nexport * from './ecl-featured-item-link.directive';\n\nexport const EUI_ECL_FEATURED = [\n EclFeaturedComponent,\n EclFeaturedItemComponent,\n EclFeaturedItemLinkDirective,\n EclFeaturedItemDescriptionComponent,\n EclFeaturedMediaAnchorDirective,\n] as const;","/*\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 CHANGED Viewed

@@ -52,7 +52,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  *
  * @example
  * ```html
- * <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
+ * <a eclLayoutWrapperViewAll eclLink icon="arrow-left">View all</a>
  * ```
  */
 class EclLayoutWrapperViewAllDirective {
@@ -119,7 +119,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImpor
  *   <div eclLayoutItem><article eclCard>...</article></div>
  *   <div eclLayoutItem><article eclCard>...</article></div>
  *
- *   <a eclLayoutWrapperViewAll eclLink [standalone]="true" icon="arrow-left">View all</a>
+ *   <a eclLayoutWrapperViewAll eclLink icon="arrow-left">View all</a>
  * </div>
  * ```
  */

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

	@@ -1 +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\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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"}
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 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 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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"}

package/fesm2022/eui-ecl-components-ecl-multiselect.mjs CHANGED Viewed

@@ -352,7 +352,7 @@ class EclMultiselectOptionComponent extends ECLBaseDirective {
         return crypto.randomUUID();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isChecked: "isCheckedChange", optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-checkbox--disabled": "disabled()", "attr.disabled": "disabled() || null", "style.display": "display()" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.1.2", type: EclMultiselectOptionComponent, isStandalone: true, selector: "div[eclMultiselectOption]", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, isChecked: { classPropertyName: "isChecked", publicName: "isChecked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isChecked: "isCheckedChange", optionClick: "optionClick", optionKeydown: "optionKeydown" }, host: { properties: { "class": "cssClasses", "class.ecl-checkbox--disabled": "disabled()", "attr.disabled": "disabled() || null", "style.display": "display()" } }, viewQueries: [{ propertyName: "eclCheckboxInput", first: true, predicate: ["checkboxInput"], descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: i1$1.EclCheckboxDirective }], ngImport: i0, template: "<input\n    eclCheckboxInput\n    type=\"checkbox\"\n    [id]=\"id\"\n    [value]=\"value()\"\n    (click)=\"onOptionClick()\"\n    (keydown)=\"onOptionKeydown($event)\"\n    [checked]=\"isChecked()\"\n    [disabled]=\"disabled()\"\n    #checkboxInput />\n<label [for]=\"id\" eclCheckboxLabel><span [innerHTML]=\"label() | boldText: keyword\"></span></label>\n", dependencies: [{ kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "pipe", type: BoldTextPipe, name: "boldText" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectOptionComponent, decorators: [{
             type: Component,
@@ -951,7 +951,7 @@ class EclMultiselectDropdownComponent extends ECLBaseDirective {
                 useExisting: forwardRef(() => EclMultiselectDropdownComponent),
                 multi: true,
             },
-        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class()\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class()\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["isCheckedChange", "optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItemsLabels", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isInvalid", "isDisabled", "isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
+        ], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, isSignal: true }, { propertyName: "eclMultiselectInput", first: true, predicate: ["eclMultiselectInput"], descendants: true, isSignal: true }, { propertyName: "selectAllCheckbox", first: true, predicate: ["selectAllCheckbox"], descendants: true, isSignal: true }, { propertyName: "closeBtn", first: true, predicate: ["closeBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "clearAllBtn", first: true, predicate: ["clearAllBtn"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "multiOptionComponents", predicate: EclMultiselectOptionComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div eclMultiselectInput #eclMultiselectInput [inputPlaceholder]=\"mainInputPlaceholder()\" [selectedItemsLabels]=\"selectedItemsLabels()\"\n    (mainInputClick)=\"onClickMainInput($event)\" (mainInputKeydown)=\"onKeydownMainInput($event)\" [isDisabled]=\"disabled()\"\n    [ariaDescribedby]=\"ariaDescribedby()\" [toggleLabel]=\"toggleLabel()\" [ariaControls]=\"dropdownId\" [isInvalid]=\"isInvalid()\"\n    [isDropdownExpanded]=\"isShowMultiselectDropdown\" [eclSize]=\"eclSize()\" [toggleId]=\"toggleId\" [counterLabel]=\"counterLabel()\"></div>\n<div\n    [style.display]=\"isShowMultiselectDropdown ? 'block' : 'none'\"\n    class=\"ecl-select__multiple-dropdown ecl-select__container ecl-select__container--{{eclSize()}}\"\n    [id]=\"dropdownId\">\n    @if(hasSearchBox()) {\n    <input class=\"ecl-text-input\" type=\"search\" #searchInput [placeholder]=\"searchFieldPlaceholder()\"\n        (input)=\"onSearch($event.target)\" (keydown.enter)=\"onEnterSearch($event)\" [attr.aria-label]=\"searchFieldPlaceholder()\"\n        (keydown.arrowup)=\"onArrowUpSearch($event)\" (keydown.arrowdown)=\"onArrowDownSearch($event)\" />\n    }\n    @if(hasSelectAll()) {\n    <div eclCheckbox [isDisabled]=\"isSelectAllDisabled\" class=\"ecl-select__multiple-all\">\n        <input eclCheckboxInput #selectAllCheckbox [id]=\"selectAllId\" type=\"checkbox\" [attr.disabled]=\"isSelectAllDisabled\"\n            (click)=\"onSelectAll()\" (keydown.arrowup)=\"onArrowUpSelectAll($event)\"\n            (keydown.arrowdown)=\"onArrowDownSelectAll($event)\" (keydown.enter)=\"onEnterSelectAll($event)\" />\n        <label [for]=\"selectAllId\" eclCheckboxLabel> {{ 'ecl.multiselect.SELECT-ALL' | translate }} ({{ optionsCount }})\n        </label>\n    </div>\n    }\n    <div class=\"ecl-select__multiple-options\" aria-live=\"polite\">\n        @for (item of multiOptionDirectives(); track item.label()) {\n                @if (item.isOptGroup()) {\n                    <fieldset eclMultiselectOptgroup [label]=\"item.label()\">\n                        @for (elem of item.eclOptionItems(); track elem.label()) {\n                            <div\n                                eclMultiselectOption\n                                [value]=\"elem.value()\"\n                                [label]=\"elem.label()\"\n                                [disabled]=\"elem.disabled()\"\n                                [isChecked]=\"elem.selected()\"\n                                [class]=\"elem.class()\"\n                                (optionClick)=\"onOptionSelected($event)\"\n                                (optionKeydown)=\"onKeydownOption($event)\"></div>\n                        }\n                    </fieldset>\n                } @else if (!item.isOptGroup()) {\n                    <div\n                        eclMultiselectOption\n                        [value]=\"item.value()\"\n                        [label]=\"item.label()\"\n                        [disabled]=\"item.disabled()\"\n                        [isChecked]=\"item.selected()\"\n                        [class]=\"item.class()\"\n                        (optionClick)=\"onOptionSelected($event)\"\n                        (optionKeydown)=\"onKeydownOption($event)\"></div>\n                }\n        }\n\n\n        @if (isShowNoResultsFound) {\n            <div class=\"ecl-select__multiple-no-results\">\n                <span>{{ 'ecl.multiselect.NO-RESULTS-FOUND' | translate }}</span>\n            </div>\n        }\n\n    </div>\n    @if (isShowToolbar()) {\n        <div class=\"ecl-select-multiple-toolbar\">\n            <button\n                eclButton\n                variant=\"primary\"\n                #closeBtn\n                [type]=\"isSubmitOnApply() ? 'submit' : 'button'\"\n                (keydown.arrowup)=\"onArrowUpClose($event)\"\n                (keydown.arrowDown)=\"onArrowDownClose($event)\"\n                (keydown.tab)=\"onTabClose($event)\"\n                (click)=\"onClickClose($event)\">\n                {{ 'ecl.common.APPLY' | translate }}\n            </button>\n            <button\n                eclButton\n                variant=\"tertiary\"\n                #clearAllBtn\n                (keydown.arrowup)=\"onArrowUpClear($event)\"\n                (keydown.arrowDown)=\"onArrowDownClear($event)\"\n                (keydown.tab)=\"onTabClear($event)\"\n                (keydown.enter)=\"onEnterClear($event)\"\n                (click)=\"onClickClearAll($event)\">\n                {{ 'ecl.multiselect.CLEAR-ALL' | translate }}\n            </button>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "component", type: i1.EclButtonComponent, selector: "button[eclButton], button[ecl-button], a[eclButton]", inputs: ["isIconOnly", "variant", "eclStyle", "size", "containerStyleClass"] }, { kind: "component", type: EclMultiselectOptionComponent, selector: "div[eclMultiselectOption]", inputs: ["value", "label", "disabled", "isChecked"], outputs: ["isCheckedChange", "optionClick", "optionKeydown"] }, { kind: "component", type: EclMultiselectOptgroupComponent, selector: "fieldset[eclMultiselectOptgroup]", inputs: ["label"] }, { kind: "component", type: EclMultiselectInputComponent, selector: "div[eclMultiselectInput]", inputs: ["eclSize", "counterLabel", "toggleId", "toggleLabel", "isDisabled", "isInvalid", "inputPlaceholder", "selectedItemsLabels", "isDropdownExpanded", "ariaControls", "ariaDescribedby"], outputs: ["mainInputClick", "mainInputKeydown"] }, { kind: "component", type: i1$1.EclCheckboxLabelComponent, selector: "label[eclCheckboxLabel]", inputs: ["isRequired"] }, { kind: "directive", type: i1$1.EclCheckboxInputDirective, selector: "input[eclCheckboxInput]" }, { kind: "directive", type: i1$1.EclCheckboxDirective, selector: "[eclCheckbox]", inputs: ["isDisabled", "isInvalid", "isSingle"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.2", ngImport: i0, type: EclMultiselectDropdownComponent, decorators: [{
             type: Component,