@alauda/ui 6.2.0 → 6.2.1-beta.10

package/bundles/alauda-ui.umd.js

@@ -106,6 +106,15 @@
     var last = function (values) { return values === null || values === void 0 ? void 0 : values[values.length - 1]; };
     var isTemplateRef = function (label) { return label instanceof i0.TemplateRef; };
     var handlePixel = function (value) { return Number.isNaN(+value) ? value : value + 'px'; };
+    var simplifyStringToTestId = function (input) {
+        if (!input)
+            return '';
+        return input
+            .replaceAll('\r', '')
+            .replaceAll('\n', '')
+            .replaceAll('\\s', '')
+            .replaceAll(' ', '');
+    };
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -481,6 +490,39 @@
         return queryList.changes.pipe(operators.startWith(queryList), operators.map(function (list) { return !!list.length; }), operators.publishReplay(1), operators.refCount());
     }
 
+    var simplifyString = function (str) { return str
+        .replaceAll('\r', '')
+        .replaceAll('\n', '')
+        .replaceAll('\\s', '')
+        .replaceAll(' ', ''); };
+    var ɵ0 = simplifyString;
+    var E2eAttributeBindingDirective = /** @class */ (function () {
+        function E2eAttributeBindingDirective(el) {
+            this.el = el;
+        }
+        E2eAttributeBindingDirective.prototype.ngAfterViewInit = function () {
+            this.setId();
+        };
+        E2eAttributeBindingDirective.prototype.setId = function () {
+            var currentAttr = simplifyString(this.el.nativeElement.getAttribute('data-test') ||
+                simplifyString(this.el.nativeElement.nodeName +
+                    '/' +
+                    this.el.nativeElement.textContent));
+            if (currentAttr !== this.el.nativeElement.getAttribute('data-test')) {
+                this.el.nativeElement.dataset.test = currentAttr;
+            }
+        };
+        return E2eAttributeBindingDirective;
+    }());
+    E2eAttributeBindingDirective.decorators = [
+        { type: i0.Directive, args: [{
+                    selector: '[click]',
+                },] }
+    ];
+    E2eAttributeBindingDirective.ctorParameters = function () { return [
+        { type: i0.ElementRef }
+    ]; };
+
     var ThemeService = /** @class */ (function () {
         function ThemeService() {
             var _this = this;
@@ -547,6 +589,9 @@
             if (v instanceof Function) {
                 return v(this.currentTheme);
             }
+            if (Array.isArray(v)) {
+                return v[this.currentTheme === 'light' ? 0 : 1];
+            }
             return v[this.currentTheme];
         };
         ThemePickerPipe.prototype.ngOnDestroy = function () {
@@ -683,7 +728,7 @@
     IconComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-icon',
-                    template: "<svg\n  *ngIf=\"icon === 'spinner'; else icons\"\n  [attr.class]=\"getClass('aui-icon-spinner')\"\n  [style.fill]=\"color\"\n  [style.width]=\"getWidth()\"\n  [style.height]=\"getHeight()\"\n  viewBox=\"0 0 200 200\"\n>\n  <defs>\n    <linearGradient\n      [attr.id]=\"'right-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"150\"\n      y1=\"20\"\n      x2=\"150\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #000\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <linearGradient\n      [attr.id]=\"'left-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"50\"\n      y1=\"0\"\n      x2=\"50\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #fff\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <mask [attr.id]=\"'mask-' + id\">\n      <g>\n        <path\n          [attr.fill]=\"'url(#right-' + id + ')'\"\n          d=\"M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z\"\n        />\n        <path\n          [attr.fill]=\"'url(#left-' + id + ')'\"\n          d=\"M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z\"\n        />\n      </g>\n    </mask>\n  </defs>\n  <rect\n    x=\"0\"\n    y=\"0\"\n    width=\"200\"\n    height=\"200\"\n    [attr.mask]=\"'url(#mask-' + id + ')'\"\n  />\n</svg>\n\n<ng-template #icons>\n  <svg\n    *ngIf=\"\n      getIconId(\n        icon ? icon : ({ light: light, dark: dark } | auiThemePicker)\n      ) as iconId\n    \"\n    [attr.class]=\"getClass(iconId)\"\n    [style.fill]=\"color\"\n    [style.width]=\"getWidth()\"\n    [style.height]=\"getHeight()\"\n  >\n    <use [attr.xlink:href]=\"link + '#' + iconId\"></use>\n  </svg>\n</ng-template>\n",
+                    template: "<svg\n  *ngIf=\"icon === 'spinner'; else icons\"\n  [attr.class]=\"getClass('aui-icon-spinner')\"\n  [style.fill]=\"color\"\n  [style.width]=\"getWidth()\"\n  [style.height]=\"getHeight()\"\n  viewBox=\"0 0 200 200\"\n>\n  <defs>\n    <linearGradient\n      [attr.id]=\"'right-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"150\"\n      y1=\"20\"\n      x2=\"150\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #000\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <linearGradient\n      [attr.id]=\"'left-' + id\"\n      gradientUnits=\"userSpaceOnUse\"\n      x1=\"50\"\n      y1=\"0\"\n      x2=\"50\"\n      y2=\"180\"\n    >\n      <stop offset=\"0\" style=\"stop-color: #fff\" />\n      <stop offset=\"1\" style=\"stop-color: #808080\" />\n    </linearGradient>\n    <mask [attr.id]=\"'mask-' + id\">\n      <g>\n        <path\n          [attr.fill]=\"'url(#right-' + id + ')'\"\n          d=\"M100,0v20c44.1,0,80,35.9,80,80c0,44.1-35.9,80-80,80v20c55.2,0,100-44.8,100-100S155.2,0,100,0z\"\n        />\n        <path\n          [attr.fill]=\"'url(#left-' + id + ')'\"\n          d=\"M20,100c0-44.1,35.9-80,80-80V0C44.8,0,0,44.8,0,100s44.8,100,100,100v-20C55.9,180,20,144.1,20,100z\"\n        />\n      </g>\n    </mask>\n  </defs>\n  <rect\n    x=\"0\"\n    y=\"0\"\n    width=\"200\"\n    height=\"200\"\n    [attr.mask]=\"'url(#mask-' + id + ')'\"\n  />\n</svg>\n\n<ng-template #icons>\n  <svg\n    *ngIf=\"getIconId(icon ? icon : ([light, dark] | auiThemePicker)) as iconId\"\n    [attr.class]=\"getClass(iconId)\"\n    [style.fill]=\"color\"\n    [style.width]=\"getWidth()\"\n    [style.height]=\"getHeight()\"\n  >\n    <use [attr.xlink:href]=\"link + '#' + iconId\"></use>\n  </svg>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
@@ -694,7 +739,7 @@
         { type: IconRegisterService }
     ]; };
     IconComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
+        icon: [{ type: i0.HostBinding, args: ['attr.data-test',] }, { type: i0.Input }],
         light: [{ type: i0.Input }],
         dark: [{ type: i0.Input }],
         link: [{ type: i0.Input }],
@@ -1499,6 +1544,13 @@
             this.renderer.addClass(this.el.nativeElement, prefix + this.size);
             this.focusMonitor.monitor(this.el.nativeElement, false);
         }
+        Object.defineProperty(ButtonComponent.prototype, "testId", {
+            get: function () {
+                return ('AUI-BUTTON/' + simplifyStringToTestId(this.el.nativeElement.textContent));
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(ButtonComponent.prototype, "type", {
             get: function () {
                 return this._type;
@@ -1619,6 +1671,7 @@
         { type: a11y.FocusMonitor }
     ]; };
     ButtonComponent.propDecorators = {
+        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         type: [{ type: i0.Input, args: ['aui-button',] }],
         size: [{ type: i0.Input }],
         plain: [{ type: i0.Input }],
@@ -2770,7 +2823,7 @@
     DialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dialog',
-                    template: "<div [ngClass]=\"rootClass\" [ngStyle]=\"customStyle\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n",
+                    template: "<div [ngClass]=\"rootClass\" [ngStyle]=\"customStyle\" data-test=\"AUI-DIALOG\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     // tslint:disable-next-line:validate-decorators
                     changeDetection: i0.ChangeDetectionStrategy.Default,
@@ -3351,9 +3404,10 @@
      */
     // tslint:disable-next-line:directive-class-suffix
     var CommonFormControl = /** @class */ (function () {
-        function CommonFormControl(cdr) {
+        function CommonFormControl(cdr, elementRef) {
             var _this = this;
             this.cdr = cdr;
+            this.elementRef = elementRef;
             this.valueChange = new i0.EventEmitter();
             this.value$$ = new rxjs.ReplaySubject(1);
             this._disabled = false;
@@ -3372,6 +3426,15 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(CommonFormControl.prototype, "testId", {
+            get: function () {
+                return ('AUI-FORM-CONTROL/' +
+                    (this.elementRef.nativeElement.getAttribute('formControlName') ||
+                        this.elementRef.nativeElement.getAttribute('name')));
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(CommonFormControl.prototype, "readonly", {
             get: function () {
                 return this.disabled;
@@ -3431,10 +3494,12 @@
         { type: i0.Directive }
     ];
     CommonFormControl.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef }
     ]; };
     CommonFormControl.propDecorators = {
         disabled: [{ type: i0.Input }],
+        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         readonly: [{ type: i0.Input }],
         propValue: [{ type: i0.Input, args: ['value',] }],
         valueChange: [{ type: i0.Output }]
@@ -3563,6 +3628,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(BaseRadio.prototype, "_testId", {
+            get: function () {
+                return 'AUI-RADIO/' + this.value;
+            },
+            enumerable: false,
+            configurable: true
+        });
         BaseRadio.prototype.ngOnInit = function () {
             var _this = this;
             this.radioGroup.name$.pipe(operators.takeUntil(this.destroy$$)).subscribe(function (name) {
@@ -3608,6 +3680,7 @@
     BaseRadio.propDecorators = {
         disabled: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
+        _testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         elRef: [{ type: i0.ViewChild, args: ['elRef', { static: true },] }]
     };
 
@@ -3831,8 +3904,8 @@
     var uniqueId$2 = 0;
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
-        function CheckboxComponent(cdr, checkboxGroup, focusMonitor) {
-            var _this = _super.call(this, cdr) || this;
+        function CheckboxComponent(cdr, checkboxGroup, focusMonitor, elementRef) {
+            var _this = _super.call(this, cdr, elementRef) || this;
             _this.focusMonitor = focusMonitor;
             _this.id = "aui-checkbox-" + uniqueId$2++;
             _this.name = '';
@@ -3928,12 +4001,13 @@
     CheckboxComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
         { type: CheckboxGroupComponent, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [i0.forwardRef(function () { return CheckboxGroupComponent; }),] }] },
-        { type: a11y.FocusMonitor }
+        { type: a11y.FocusMonitor },
+        { type: i0.ElementRef }
     ]; };
     CheckboxComponent.propDecorators = {
         name: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
-        label: [{ type: i0.Input }],
+        label: [{ type: i0.HostBinding, args: ['attr.data-test',] }, { type: i0.Input }],
         indeterminate: [{ type: i0.Input }],
         elRef: [{ type: i0.ViewChild, args: ['elRef', { static: true },] }]
     };
@@ -3966,6 +4040,16 @@
             this.renderer.addClass(this.elementRef.nativeElement, 'aui-input');
             this.renderer.addClass(this.elementRef.nativeElement, 'aui-input--' + this.size);
         }
+        Object.defineProperty(InputComponent.prototype, "testId", {
+            get: function () {
+                return ('AUI-INPUT/' +
+                    (this.elementRef.nativeElement.getAttribute('formcontrolname') ||
+                        this.elementRef.nativeElement.getAttribute('name') ||
+                        ''));
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(InputComponent.prototype, "size", {
             get: function () {
                 return this._size;
@@ -4021,6 +4105,7 @@
         { type: i0.Renderer2 }
     ]; };
     InputComponent.propDecorators = {
+        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         size: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }]
     };
@@ -4223,8 +4308,8 @@
     var INPUT_ERROR_KEY = 'input_data_error';
     var TagsInputComponent = /** @class */ (function (_super) {
         __extends(TagsInputComponent, _super);
-        function TagsInputComponent(cdr, fb, renderer, injector) {
-            var _this = _super.call(this, cdr) || this;
+        function TagsInputComponent(cdr, fb, renderer, injector, elementRef) {
+            var _this = _super.call(this, cdr, elementRef) || this;
             _this.fb = fb;
             _this.renderer = renderer;
             _this.injector = injector;
@@ -4483,7 +4568,8 @@
         { type: i0.ChangeDetectorRef },
         { type: forms.FormBuilder },
         { type: i0.Renderer2 },
-        { type: i0.Injector }
+        { type: i0.Injector },
+        { type: i0.ElementRef }
     ]; };
     TagsInputComponent.propDecorators = {
         placeholder: [{ type: i0.Input }],
@@ -5063,6 +5149,14 @@
             _this.trigger = exports.TooltipTrigger.Click;
             return _this;
         }
+        Object.defineProperty(DropdownDirective.prototype, "testId", {
+            get: function () {
+                return ('AUI-DROPDOWN/' +
+                    simplifyStringToTestId(this.elRef.nativeElement.textContent));
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(DropdownDirective.prototype, "menu", {
             get: function () {
                 return this._menu;
@@ -5120,6 +5214,7 @@
         { type: i0.NgZone }
     ]; };
     DropdownDirective.propDecorators = {
+        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         menu: [{ type: i0.Input, args: ['auiDropdown',] }],
         lazyContentContext: [{ type: i0.Input, args: ['auiDropdownContext',] }],
         hideOnClick: [{ type: i0.Input, args: ['auiDropdownHideOnClick',] }],
@@ -5296,7 +5391,7 @@
     DropdownButtonComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dropdown-button',
-                    template: "<div [class]=\"bem.block(size)\">\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__content\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [loading]=\"loading\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick.emit($event)\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__trigger\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [auiDropdown]=\"menu\"\n    [disabled]=\"disableTrigger\"\n  >\n    <aui-icon icon=\"angle_down\"></aui-icon>\n  </button>\n</div>\n",
+                    template: "<div [class]=\"bem.block(size)\">\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__content\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [loading]=\"loading\"\n    [disabled]=\"disabled\"\n    (click)=\"buttonClick.emit($event)\"\n    data-test=\"DROPDOWN-BUTTON/\"\n  >\n    <ng-content></ng-content>\n  </button>\n  <button\n    type=\"button\"\n    class=\"aui-dropdown-button__trigger\"\n    [aui-button]=\"type\"\n    [plain]=\"plain\"\n    [size]=\"size\"\n    [auiDropdown]=\"menu\"\n    [disabled]=\"disableTrigger\"\n  >\n    <aui-icon icon=\"angle_down\"></aui-icon>\n  </button>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -5502,6 +5597,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(OptionComponent.prototype, "testId", {
+            get: function () {
+                return 'AUI-OPTION/' + (this.label || this.value);
+            },
+            enumerable: false,
+            configurable: true
+        });
         Object.defineProperty(OptionComponent.prototype, "labelContext", {
             get: function () {
                 return this._labelContext;
@@ -5569,6 +5671,7 @@
     ]; };
     OptionComponent.propDecorators = {
         label: [{ type: i0.Input }],
+        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         labelContext: [{ type: i0.Input }],
         value: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }],
@@ -5932,8 +6035,8 @@
 
     var MultiSelectComponent = /** @class */ (function (_super) {
         __extends(MultiSelectComponent, _super);
-        function MultiSelectComponent(cdr, renderer) {
-            var _this = _super.call(this, cdr) || this;
+        function MultiSelectComponent(cdr, renderer, elementRef) {
+            var _this = _super.call(this, cdr, elementRef) || this;
             _this.renderer = renderer;
             _this.bem = buildBem('aui-multi-select');
             _this.bemSelectAll = buildBem('aui-option');
@@ -6230,7 +6333,7 @@
     MultiSelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-multi-select',
-                    template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"close_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"selectedValues.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span #inputValueMirror [class]=\"bem.element('mirror')\">\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              [icon]=\"\n                (selectAllStatus$ | async) === 'checked'\n                  ? 'check_s'\n                  : 'square_s'\n              \"\n              [hidden]=\"!(selectAllStatus$ | async)\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n  (mousedown)=\"$event.preventDefault()\"\n  [style.max-height]=\"maxHeight\"\n>\n  <div class=\"aui-multi-select__suffix\">\n    <span class=\"aui-multi-select__icon-container\">\n      <aui-icon\n        class=\"aui-multi-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-multi-select__clear\"\n        icon=\"close_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n  </div>\n  <span\n    [hidden]=\"selectedValues.length || inputRef.value.length\"\n    [class]=\"bem.element('placeholder')\"\n  >\n    {{ placeholder }}\n  </span>\n  <aui-tag\n    *ngFor=\"let option of selectedOptions$ | async; trackBy: trackByValue\"\n    type=\"info\"\n    [round]=\"true\"\n    [border]=\"true\"\n    [size]=\"tagSize\"\n    [closeable]=\"!disabled\"\n    (close)=\"removeValue(option.value)\"\n    [ngClass]=\"tagClassFn && tagClassFn(option.label, option.value)\"\n  >\n    <ng-container\n      *ngIf=\"isTemplateRef(option.label); else label\"\n      [ngTemplateOutlet]=\"option.label\"\n      [ngTemplateOutletContext]=\"option.labelContext\"\n    ></ng-container>\n    <ng-template #label>\n      {{ option.label }}\n    </ng-template>\n  </aui-tag>\n  <input\n    #inputRef\n    autocomplete=\"off\"\n    [readonly]=\"inputReadonly\"\n    [class]=\"inputClass\"\n    (focus)=\"onInputFocus()\"\n    (blur)=\"onInputBlur()\"\n    (keydown)=\"onKeyDown($event)\"\n    (input)=\"onInput($event)\"\n  />\n  <span #inputValueMirror [class]=\"bem.element('mirror')\">\n    {{ inputValue }}\n  </span>\n</div>\n\n<ng-template #templateRef>\n  <div\n    class=\"aui-option-container\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <ng-container\n        *ngIf=\"\n          allowSelectAll &&\n          (hasEnabledOptions$ | async) &&\n          ((hasVisibleOption$ | async) ||\n            (allowCreate && (customCreatedOptions$ | async).length) ||\n            (allowCreate && filterString))\n        \"\n      >\n        <div\n          class=\"aui-option\"\n          [class]=\"bemSelectAll.block(size$ | async)\"\n          [class.isDisabled]=\"disabled\"\n          [class.isSelected]=\"!!(selectAllStatus$ | async)\"\n          [class.isMulti]=\"true\"\n          (click)=\"onSelectAllClick()\"\n        >\n          <i class=\"aui-option__pointer\">\n            <aui-icon\n              [icon]=\"\n                (selectAllStatus$ | async) === 'checked'\n                  ? 'check_s'\n                  : 'square_s'\n              \"\n              [hidden]=\"!(selectAllStatus$ | async)\"\n            ></aui-icon>\n          </i>\n          {{ 'select_all' | auiI18n }}\n        </div>\n        <hr class=\"divider\" />\n      </ng-container>\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n          [attr.data-test]=\"'aui-option/' + option.label\"\n          >AUI-FORM-CONTROL/\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -6250,7 +6353,8 @@
     ];
     MultiSelectComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: i0.Renderer2 }
+        { type: i0.Renderer2 },
+        { type: i0.ElementRef }
     ]; };
     MultiSelectComponent.propDecorators = {
         tagClassFn: [{ type: i0.Input }],
@@ -6387,7 +6491,7 @@
     SelectComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-select',
-                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span auiInputSuffix class=\"aui-select__icon-container\">\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"close_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
+                    template: "<div\n  [class]=\"rootClass\"\n  [class.isDisabled]=\"disabled\"\n  [class.isClearable]=\"isClearable(hasSelected$ | async)\"\n  [class.isFilterable]=\"filterable\"\n  [class.isOpened]=\"opened\"\n  #selectRef\n  #tooltipRef=\"auiTooltip\"\n  [auiTooltip]=\"templateRef\"\n  [auiTooltipDisabled]=\"disabled\"\n  auiTooltipTrigger=\"click\"\n  auiTooltipPosition=\"bottom start\"\n  auiTooltipType=\"plain\"\n  (auiTooltipShow)=\"onShowOptions()\"\n  (auiTooltipHide)=\"onHideOptions()\"\n>\n  <aui-input-group>\n    <input\n      #inputRef\n      class=\"aui-select__input\"\n      autocomplete=\"off\"\n      aui-input\n      [disabled]=\"disabled\"\n      [size]=\"size\"\n      [readonly]=\"inputReadonly\"\n      [placeholder]=\"!(hasSelected$ | async) ? placeholder : ''\"\n      (input)=\"onInput($event)\"\n      (keydown)=\"onKeyDown($event)\"\n      (blur)=\"closeOption()\"\n    />\n    <span auiInputSuffix class=\"aui-select__icon-container\">\n      <aui-icon\n        class=\"aui-select__indicator\"\n        [icon]=\"loading ? 'spinner' : 'caret_down_s'\"\n      ></aui-icon>\n      <aui-icon\n        class=\"aui-select__clear\"\n        icon=\"close_small\"\n        (click)=\"clearValue($event)\"\n      ></aui-icon>\n    </span>\n    <div\n      *ngIf=\"(selectedOption$ | async) && !filterString\"\n      class=\"aui-select__label-container aui-input aui-input--{{ size }}\"\n      [attr.disabled]=\"disabled ? true : null\"\n    >\n      <div class=\"aui-select__label\">\n        <ng-container *ngIf=\"(selectedOption$ | async).label as optionLabel\">\n          <ng-container\n            *ngIf=\"isTemplateRef(optionLabel); else label\"\n            [ngTemplateOutlet]=\"optionLabel\"\n            [ngTemplateOutletContext]=\"(selectedOption$ | async).labelContext\"\n          ></ng-container>\n          <ng-template #label>{{ optionLabel }}</ng-template>\n        </ng-container>\n      </div>\n    </div>\n  </aui-input-group>\n</div>\n\n<ng-template #templateRef>\n  <div\n    [class]=\"containerClass\"\n    [style.minWidth]=\"containerWidth\"\n    (mousedown)=\"$event.preventDefault()\"\n  >\n    <div #optionListRef class=\"aui-option-container__content\">\n      <aui-option\n        #inputtingOption\n        *ngIf=\"allowCreate && filterString && !(hasMatchedOption$ | async)\"\n        [value]=\"filterString\"\n      >\n        {{ filterString }}\n      </aui-option>\n      <ng-container *ngIf=\"allowCreate\">\n        <aui-option\n          *ngFor=\"let option of customCreatedOptions$ | async\"\n          [label]=\"option.label\"\n          [value]=\"option.value\"\n          [attr.data-test]=\"'aui-option/' + option.label\"\n        >\n          {{ option.label }}\n        </aui-option>\n      </ng-container>\n      <ng-content></ng-content>\n    </div>\n    <div\n      *ngIf=\"\n        !(\n          (hasVisibleOption$ | async) ||\n          (allowCreate && (customCreatedOptions$ | async).length) ||\n          (allowCreate && filterString)\n        )\n      \"\n      class=\"aui-option-container__placeholder\"\n    >\n      <ng-content select=\"aui-option-placeholder\"></ng-content>\n    </div>\n  </div>\n</ng-template>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -6669,7 +6773,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: [".aui-paginator{display:inline-flex;align-items:center;color:rgb(var(--aui-color-n-1))}.aui-paginator .aui-button{width:var(--aui-line-height-xl);height:var(--aui-line-height-xl);border:unset;background-color:transparent}.aui-paginator .aui-button .aui-button__content{padding:unset}.aui-paginator__fast-navigator[hidden]{display:none}.aui-paginator__fast-navigator .aui-icon{margin:0}.aui-paginator__fast-navigator:hover aui-icon:first-child,.aui-paginator__fast-navigator aui-icon:last-child{display:none}.aui-paginator__fast-navigator:hover aui-icon:last-child{display:inline}.aui-paginator__sizes{display:inline-flex;align-items:center}.aui-paginator__sizes .aui-select{width:80px;margin-right:var(--aui-spacing-s)}.aui-paginator__jumper .aui-input{width:80px}.aui-paginator__jumper span+input{margin-left:var(--aui-spacing-m)}.aui-paginator__jumper input+span{margin-left:var(--aui-spacing-s)}.aui-paginator__total{font-size:var(--aui-font-size-m)}.aui-paginator__navigator.aui-button{background-color:rgb(var(--aui-color-n-8))}.aui-paginator__navigator.aui-button aui-icon{font-size:var(--aui-font-size-l)}.aui-paginator__navigator.aui-button:hover{background-color:rgb(var(--aui-color-p-6))}.aui-paginator__pager{border:1px solid rgb(var(--aui-color-n-7));padding:3px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg))}.aui-paginator__layout{display:inline-block}.aui-paginator__layout+.aui-paginator__layout{margin-left:var(--aui-spacing-l)}"]
+                    styles: [".aui-paginator{display:inline-flex;align-items:center;color:rgb(var(--aui-color-n-1))}.aui-paginator .aui-button{width:var(--aui-line-height-xl);height:var(--aui-line-height-xl);border:unset}.aui-paginator .aui-button--default{background-color:transparent}.aui-paginator .aui-button .aui-button__content{padding:unset}.aui-paginator__fast-navigator[hidden]{display:none}.aui-paginator__fast-navigator .aui-icon{margin:0}.aui-paginator__fast-navigator:hover aui-icon:first-child,.aui-paginator__fast-navigator aui-icon:last-child{display:none}.aui-paginator__fast-navigator:hover aui-icon:last-child{display:inline}.aui-paginator__sizes{display:inline-flex;align-items:center}.aui-paginator__sizes .aui-select{width:80px;margin-right:var(--aui-spacing-s)}.aui-paginator__jumper .aui-input{width:80px}.aui-paginator__jumper span+input{margin-left:var(--aui-spacing-m)}.aui-paginator__jumper input+span{margin-left:var(--aui-spacing-s)}.aui-paginator__total{font-size:var(--aui-font-size-m)}.aui-paginator__navigator.aui-button{background-color:rgb(var(--aui-color-n-8))}.aui-paginator__navigator.aui-button aui-icon{font-size:var(--aui-font-size-l)}.aui-paginator__navigator.aui-button:hover{background-color:rgb(var(--aui-color-p-6))}.aui-paginator__pager{border:1px solid rgb(var(--aui-color-n-7));padding:3px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg))}.aui-paginator__layout{display:inline-block}.aui-paginator__layout+.aui-paginator__layout{margin-left:var(--aui-spacing-l)}"]
                 },] }
     ];
     PaginatorComponent.ctorParameters = function () { return [
@@ -9312,6 +9416,7 @@
                         AutocompletePlaceholderComponent,
                         SuggestionGroupComponent,
                         SuggestionGroupTitleDirective,
+                        E2eAttributeBindingDirective,
                     ],
                     exports: [
                         AutoCompleteDirective,
@@ -9947,7 +10052,7 @@
         table: [{ type: i0.ContentChild, args: [TableComponent, { static: false },] }]
     };
 
-    var ɵ0 = scrolling._fixedSizeVirtualScrollStrategyFactory;
+    var ɵ0$1 = scrolling._fixedSizeVirtualScrollStrategyFactory;
     var FixedSizeVirtualScrollDirective = /** @class */ (function (_super) {
         __extends(FixedSizeVirtualScrollDirective, _super);
         function FixedSizeVirtualScrollDirective() {
@@ -9962,7 +10067,7 @@
                     providers: [
                         {
                             provide: scrolling.VIRTUAL_SCROLL_STRATEGY,
-                            useFactory: ɵ0,
+                            useFactory: ɵ0$1,
                             deps: [i0.forwardRef(function () { return FixedSizeVirtualScrollDirective; })],
                         },
                     ],
@@ -10829,8 +10934,8 @@
         tooltipRef: [{ type: i0.ViewChild, args: ['tooltipRef',] }]
     };
 
-    var ɵ0$1 = function (_, index) { return index; };
-    var HOUR_ITEMS = Array.from({ length: 24 }).map(ɵ0$1);
+    var ɵ0$2 = function (_, index) { return index; };
+    var HOUR_ITEMS = Array.from({ length: 24 }).map(ɵ0$2);
     var ɵ1 = function (_, index) { return index; };
     var MINUTE_ITEMS = Array.from({ length: 60 }).map(ɵ1);
     var ɵ2 = function (_, index) { return index; };
@@ -10841,8 +10946,8 @@
     var bem$3 = buildBem('aui-time-picker-panel');
     var TimePickerPanelComponent = /** @class */ (function (_super) {
         __extends(TimePickerPanelComponent, _super);
-        function TimePickerPanelComponent(cdr) {
-            var _this = _super.call(this, cdr) || this;
+        function TimePickerPanelComponent(cdr, elementRef) {
+            var _this = _super.call(this, cdr, elementRef) || this;
             _this.cdr = cdr;
             _this.hourStep = 1;
             _this.minuteStep = 1;
@@ -11038,7 +11143,8 @@
                 },] }
     ];
     TimePickerPanelComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
+        { type: i0.ChangeDetectorRef },
+        { type: i0.ElementRef }
     ]; };
     TimePickerPanelComponent.propDecorators = {
         format: [{ type: i0.Input }],
@@ -12549,6 +12655,7 @@
     exports.DropdownButtonComponent = DropdownButtonComponent;
     exports.DropdownDirective = DropdownDirective;
     exports.DropdownModule = DropdownModule;
+    exports.E2eAttributeBindingDirective = E2eAttributeBindingDirective;
     exports.FixedSizeTableVirtualScrollDirective = FixedSizeTableVirtualScrollDirective;
     exports.FixedSizeTableVirtualScrollStrategy = FixedSizeTableVirtualScrollStrategy;
     exports.FixedSizeVirtualScrollDirective = FixedSizeVirtualScrollDirective;
@@ -12725,6 +12832,7 @@
     exports.observeMutationOn = observeMutationOn;
     exports.observeResizeOn = observeResizeOn;
     exports.scrollIntoView = scrollIntoView;
+    exports.simplifyStringToTestId = simplifyStringToTestId;
     exports.sleep = sleep;
     exports.watchContentExist = watchContentExist;
     exports.zh = zh;
@@ -12753,9 +12861,10 @@
     exports.ɵt = MessageAnimations;
     exports.ɵu = BaseMessage;
     exports.ɵv = NotificationWrapperComponent;
-    exports.ɵw = VirtualForOfDirective;
-    exports.ɵx = _isNumberValue;
-    exports.ɵy = DatePickerComponent;
+    exports.ɵw = E2eAttributeBindingDirective;
+    exports.ɵx = VirtualForOfDirective;
+    exports.ɵy = _isNumberValue;
+    exports.ɵz = DatePickerComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });