@eui/components 19.0.3 → 19.0.4

package/fesm2022/eui-components-directives.mjs

@@ -1,11 +1,11 @@
 import * as i0 from '@angular/core';
-import { Directive, Input, NgModule, Component, ChangeDetectionStrategy, ViewEncapsulation, HostBinding, numberAttribute, booleanAttribute, HostListener, EventEmitter, Self, Optional, Output, Inject, PLATFORM_ID } from '@angular/core';
+import { Input, Directive, NgModule, HostBinding, ViewEncapsulation, ChangeDetectionStrategy, Component, booleanAttribute, numberAttribute, HostListener, EventEmitter, Output, Self, Optional, Inject, PLATFORM_ID } from '@angular/core';
 import { CommonModule, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import * as i1 from '@angular/cdk/overlay';
 import { ConnectionPositionPair } from '@angular/cdk/overlay';
 import { Subject, BehaviorSubject, Subscription, timer, fromEvent, take } from 'rxjs';
 import { ComponentPortal } from '@angular/cdk/portal';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
 import * as i1$1 from '@angular/forms';
 import { NgControl, NgModel } from '@angular/forms';
 import * as i1$2 from '@eui/core';
@@ -361,13 +361,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 }]
         }] });
 
-/* eslint-disable */
+/**
+ * @description
+ * A directive that adds maxLength functionality to input and textarea elements with visual feedback.
+ * It shows the remaining characters count and provides visual indication when the limit is reached.
+ *
+ * @selector input[euiMaxlength], textarea[euiMaxlength], [ngModel][euiMaxlength], [formControlName][euiMaxlength]
+ *
+ * @example
+ * ```html
+ * <!-- Basic usage -->
+ * <input [euiMaxlength]="50">
+ *
+ * <!-- With form control -->
+ * <input [formControlName]="'name'" [euiMaxlength]="100">
+ *
+ * <!-- Hide maxlength indicator -->
+ * <textarea [euiMaxlength]="200" [isShowMaxlength]="false"></textarea>
+ * ```
+ *
+ * @publicApi
+ */
 class EuiMaxLengthDirective {
     constructor(el, renderer, control) {
         this.el = el;
         this.renderer = renderer;
         this.control = control;
+        /**
+         * @description
+         * Controls the visibility of the maxLength indicator.
+         * When true, shows a counter with remaining characters.
+         * When false, hides the counter but maintains the maxLength restriction.
+         *
+         * @default true
+         */
         this.isShowMaxlength = true;
+        /**
+         * @description
+         * Emits when the input value length reaches or exceeds the maxLength limit.
+         * Emits true when limit is reached, false when below limit.
+         *
+         * @emits {boolean} True when max length is reached, false otherwise
+         */
         this.maxLengthReached = new EventEmitter();
         // set default length calculation behavior
         this.setLengthCalcFactory((value) => value?.length || 0);
@@ -432,13 +467,25 @@ class EuiMaxLengthDirective {
     }
     onPaste(event) {
         // get the value from clipboard
-        let value = (event.clipboardData || window['clipboardData']).getData('text');
+        const value = (event.clipboardData || window['clipboardData']).getData('text');
         // calculate and set the maxLength based on the clipboard value
-        let input = this.el.nativeElement;
+        const input = this.el.nativeElement;
         if (this.maxLength) {
             this.renderer.setProperty(input, 'maxLength', this.calculateMaxLength(value));
         }
     }
+    /**
+     * Sets a custom function to calculate the length of the input value.
+     * Useful for implementing custom length calculation logic (e.g., counting characters differently).
+     *
+     * @param fn Function that takes a string input and returns its calculated length
+     *
+     * @example
+     * ```typescript
+     * // Custom length calculation excluding spaces
+     * directive.setLengthCalcFactory((value: string) => value.replace(/\s/g, '').length);
+     * ```
+     */
     setLengthCalcFactory(fn) {
         this.lengthCalcFn = () => {
             const value = this.getValue();
@@ -446,22 +493,33 @@ class EuiMaxLengthDirective {
         };
     }
     /**
-     * calculates the maxLength of an input element. Calculation is made
-     * against the value of the Model or Input Element.
-     * @param value Optional the value to calculate max length against (override the Model one)
+     * Calculates the maximum length for the input element based on current value or provided value.
+     *
+     * @param value Optional value to calculate max length against (overrides the current input value)
+     * @returns {number} Calculated maximum length
      * @private
      */
     calculateMaxLength(value) {
         const inputValue = this.getValue();
         return (value?.length || (inputValue?.length || 0) - this.lengthCalcFn()) + this.maxLength;
     }
+    /**
+     * @description
+     * Refreshes the visual state of the maxLength indicator and updates input restrictions.
+     * - Updates the remaining characters count
+     * - Applies/removes error styling
+     * - Emits maxLengthReached event
+     * - Truncates value if it exceeds maxLength
+     *
+     * @private
+     */
     _refreshValue() {
         if (isNaN(this.maxLength)) {
             return;
         }
-        let input = this.el.nativeElement;
-        let valueLength = this.lengthCalcFn();
-        let remainingLength = this.maxLength - valueLength;
+        const input = this.el.nativeElement;
+        const valueLength = this.lengthCalcFn();
+        const remainingLength = this.maxLength - valueLength;
         this.renderer.setProperty(input, 'maxLength', this.calculateMaxLength());
         if (this.maxLengthSpan) {
             // based on the remaining length add/remove the error class
@@ -491,8 +549,10 @@ class EuiMaxLengthDirective {
         }
     }
     /**
-     * creates the maxLength box by adding it to DOM and attaching correct Classes
-     * for Wrapper and Span (actual box holding max length)
+     * @description
+     * Creates the maxLength indicator box in the DOM.
+     * Wraps the input element and adds the counter span with appropriate styling.
+     *
      * @private
      */
     createMaxLengthBox() {
@@ -504,11 +564,11 @@ class EuiMaxLengthDirective {
         this.renderer.addClass(this.maxLengthSpan, 'eui-input-maxlength');
         this.renderer.setAttribute(this.maxLengthSpan, 'innerHTML', this.maxLength.toString());
         // create wrapper element
-        let nativeElement = this.el.nativeElement;
+        const nativeElement = this.el.nativeElement;
         if (nativeElement != null) {
             // set width to 100%
             this.renderer.setStyle(nativeElement, 'width', '100%');
-            let parent = nativeElement.parentNode;
+            const parent = nativeElement.parentNode;
             if (parent != null && this.isShowMaxlength) {
                 // creates wrapper div of input and maxLength span
                 this.wrapper = this.renderer.createElement('div');
@@ -521,7 +581,10 @@ class EuiMaxLengthDirective {
         }
     }
     /**
-     * destroys the maxLength box from DOM
+     * @description
+     * Removes the maxLength indicator box from the DOM.
+     * Restores the original DOM structure by unwrapping the input element.
+     *
      * @private
      */
     destroyMaxLengthBox() {
@@ -533,8 +596,8 @@ class EuiMaxLengthDirective {
         // remove wrapper from DOM
         if (this.wrapper) {
             // get parent node of wrapper
-            let parent = this.wrapper.parentNode;
-            let nativeElement = this.el.nativeElement;
+            const parent = this.wrapper.parentNode;
+            const nativeElement = this.el.nativeElement;
             // swap wrapper and nativeElement
             parent?.replaceChild(nativeElement, this.wrapper);
             // removes wrapper element from DOM
@@ -543,16 +606,19 @@ class EuiMaxLengthDirective {
         }
     }
     /**
-     * returns the value based on whether control is present and control's
-     * updateOn strategy.
+     * @description
+     * Returns the current value of the input element.
+     * Handles different update strategies when used with forms.
+     *
+     * @returns {string} Current input value
      * @private
      */
     getValue() {
-        let input = this.el.nativeElement;
+        const input = this.el.nativeElement;
         return this.control && this.control.control.updateOn === 'change' ? this.control.value : input.value;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i1$1.NgControl, optional: true, self: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: EuiMaxLengthDirective, isStandalone: false, selector: "\n    input[euiMaxlength],\n    textarea[euiMaxlength],\n    [ngModel][euiMaxlength],\n    [formControlName][euiMaxlength]", inputs: { maxLength: ["euiMaxlength", "maxLength", numberAttribute], isShowMaxlength: ["isShowMaxlength", "isShowMaxlength", booleanAttribute] }, outputs: { maxLengthReached: "maxLengthReached" }, host: { listeners: { "change": "onChange($event)", "input": "onInput($event)", "paste": "onPaste($event)" } }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.0.5", type: EuiMaxLengthDirective, isStandalone: true, selector: "\n    input[euiMaxlength],\n    textarea[euiMaxlength],\n    [ngModel][euiMaxlength],\n    [formControlName][euiMaxlength]", inputs: { maxLength: ["euiMaxlength", "maxLength", numberAttribute], isShowMaxlength: ["isShowMaxlength", "isShowMaxlength", booleanAttribute] }, outputs: { maxLengthReached: "maxLengthReached" }, host: { listeners: { "change": "onChange($event)", "input": "onInput($event)", "paste": "onPaste($event)" } }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirective, decorators: [{
             type: Directive,
@@ -562,7 +628,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
     textarea[euiMaxlength],
     [ngModel][euiMaxlength],
     [formControlName][euiMaxlength]`,
-                    standalone: false,
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i1$1.NgControl, decorators: [{
                     type: Self
@@ -573,7 +639,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 args: [{ alias: 'euiMaxlength', transform: numberAttribute }]
             }], isShowMaxlength: [{
                 type: Input,
-                args: [{ alias: 'isShowMaxlength', transform: booleanAttribute }]
+                args: [{ transform: booleanAttribute }]
             }], maxLengthReached: [{
                 type: Output
             }], onChange: [{
@@ -586,34 +652,92 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImpor
                 type: HostListener,
                 args: ['paste', ['$event']]
             }] } });
+/**
+ * @description
+ * Module that provides the EuiMaxLengthDirective.
+ * Import this module to use the directive in your application.
+ *
+ * @example
+ * ```typescript
+ * @NgModule({
+ *   imports: [EuiMaxLengthDirectiveModule]
+ * })
+ * export class MyModule { }
+ * ```
+ *
+ * @deprecated Use {@link `EuiMaxLengthDirective`} instead.
+ * @publicApi
+ */
 class EuiMaxLengthDirectiveModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirectiveModule, declarations: [EuiMaxLengthDirective], imports: [CommonModule], exports: [EuiMaxLengthDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirectiveModule, imports: [CommonModule, EuiMaxLengthDirective], exports: [EuiMaxLengthDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirectiveModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiMaxLengthDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, EuiMaxLengthDirective],
                     exports: [EuiMaxLengthDirective],
-                    declarations: [EuiMaxLengthDirective]
                 }]
         }] });
 
-/* eslint-disable */
-/* eslint-enable */
+/**
+ * @description
+ * A structural directive that conditionally renders content based on user permissions.
+ * Similar to *ngIf, but checks against a permission service to determine visibility.
+ *
+ * @example
+ * ```html
+ * <!-- Single permission check -->
+ * <div *euiHasPermission="['READ_USERS']">
+ *   Content only visible to users with READ_USERS permission
+ * </div>
+ *
+ * <!-- Multiple permission check (AND operation) -->
+ * <div *euiHasPermission="['READ_USERS', 'WRITE_USERS']">
+ *   Content only visible to users with both permissions
+ * </div>
+ * ```
+ *
+ * @usageNotes
+ * The directive performs an AND operation when multiple permissions are provided,
+ * meaning all permissions must be granted for the content to be displayed.
+ */
 class EuiHasPermissionDirective {
     constructor(templateRef, viewContainer, permissionService) {
         this.templateRef = templateRef;
         this.viewContainer = viewContainer;
         this.permissionService = permissionService;
+        /**
+         * @internal
+         * Array storing the current permission requirements
+         */
         this.permissions = [];
+        /**
+         * @internal
+         * Flag tracking whether the content is currently hidden
+         */
         this.isHidden = true;
     }
+    /**
+     * @input
+     * @description
+     * Sets the permissions required to display the content. Can be a single permission
+     * string or an array of permission strings.
+     *
+     * @param val - Permission or array of permissions to check
+     */
     set euiHasPermission(val) {
         this.permissions = val;
         this.updateView();
     }
+    /**
+     * @internal
+     * @description
+     * Updates the view based on the current permission check results.
+     * If permissions are granted, displays the content.
+     * If permissions are not granted, hides the content.
+     */
     updateView() {
         if (this.checkPermission()) {
             if (this.isHidden) {
@@ -626,6 +750,14 @@ class EuiHasPermissionDirective {
             this.viewContainer.clear();
         }
     }
+    /**
+     * @internal
+     * @description
+     * Checks if all required permissions are granted.
+     * Uses AND logic - all permissions must be granted for the method to return true.
+     *
+     * @returns {boolean} True if all permissions are granted, false otherwise
+     */
     checkPermission() {
         let hasPermission = true;
         // for start, it checks with and operator
@@ -635,28 +767,42 @@ class EuiHasPermissionDirective {
         return hasPermission;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i1$2.EuiPermissionService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: EuiHasPermissionDirective, isStandalone: false, selector: "[euiHasPermission]", inputs: { euiHasPermission: "euiHasPermission" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: EuiHasPermissionDirective, isStandalone: true, selector: "[euiHasPermission]", inputs: { euiHasPermission: "euiHasPermission" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[euiHasPermission]',
-                    standalone: false,
+                    standalone: true,
                 }]
         }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i1$2.EuiPermissionService }], propDecorators: { euiHasPermission: [{
                 type: Input
             }] } });
+/**
+ * @description
+ * Angular module that declares and exports the EuiHasPermissionDirective.
+ * Import this module to use the euiHasPermission directive in your components.
+ *
+ * @example
+ * ```typescript
+ * import { EuiHasPermissionDirectiveModule } from '@eui/components';
+ *
+ * @NgModule({
+ *    imports: [EuiHasPermissionDirectiveModule],
+ * })
+ * export class MyModule {}
+ * ```
+ */
 class EuiHasPermissionDirectiveModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirectiveModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirectiveModule, declarations: [EuiHasPermissionDirective], imports: [CommonModule], exports: [EuiHasPermissionDirective] }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirectiveModule, imports: [CommonModule, EuiHasPermissionDirective], exports: [EuiHasPermissionDirective] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirectiveModule, imports: [CommonModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: EuiHasPermissionDirectiveModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [CommonModule],
+                    imports: [CommonModule, EuiHasPermissionDirective],
                     exports: [EuiHasPermissionDirective],
-                    declarations: [EuiHasPermissionDirective],
                 }]
         }] });