@alauda/ui 6.2.1-beta.9 → 6.2.2-beta.1

package/bundles/alauda-ui.umd.js

@@ -106,15 +106,6 @@
     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.
@@ -575,6 +566,41 @@
         { type: i0.ChangeDetectorRef }
     ]; };
 
+    var RgbColorPipe = /** @class */ (function () {
+        function RgbColorPipe() {
+        }
+        RgbColorPipe.prototype.transform = function (color) {
+            return "rgb(var(--aui-color-" + color + "))";
+        };
+        return RgbColorPipe;
+    }());
+    RgbColorPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'auiRgbColor', pure: true },] }
+    ];
+    var RgbaColorPipe = /** @class */ (function () {
+        function RgbaColorPipe() {
+        }
+        RgbaColorPipe.prototype.transform = function (_a) {
+            var _b = __read(_a, 2), color = _b[0], opacity = _b[1];
+            return "rgba(var(--aui-color-" + color + "), " + opacity + ")";
+        };
+        return RgbaColorPipe;
+    }());
+    RgbaColorPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'auiRgbaColor', pure: true },] }
+    ];
+    var CssVarPipe = /** @class */ (function () {
+        function CssVarPipe() {
+        }
+        CssVarPipe.prototype.transform = function (value) {
+            return "var(--aui-" + value + ")";
+        };
+        return CssVarPipe;
+    }());
+    CssVarPipe.decorators = [
+        { type: i0.Pipe, args: [{ name: 'auiCssVar', pure: true },] }
+    ];
+
     var ThemeModule = /** @class */ (function () {
         function ThemeModule() {
         }
@@ -583,8 +609,8 @@
     ThemeModule.decorators = [
         { type: i0.NgModule, args: [{
                     imports: [common.CommonModule],
-                    declarations: [ThemePickerPipe],
-                    exports: [ThemePickerPipe],
+                    declarations: [ThemePickerPipe, RgbColorPipe, RgbaColorPipe, CssVarPipe],
+                    exports: [ThemePickerPipe, RgbColorPipe, RgbaColorPipe, CssVarPipe],
                 },] }
     ];
 
@@ -695,24 +721,26 @@
     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=\"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",
+                    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    [ngClass]=\"getClass(iconId)\"\n    [style.fill]=\"color\"\n    [style.width]=\"getWidth()\"\n    [style.height]=\"getHeight()\"\n  >\n    <rect\n      *ngIf=\"background\"\n      class=\"aui-icon__background\"\n      [ngClass]=\"background\"\n      [attr.fill]=\"backgroundColor\"\n      x=\"0\"\n      y=\"0\"\n    ></rect>\n    <use [attr.xlink:href]=\"link + '#' + iconId\"></use>\n  </svg>\n</ng-template>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     preserveWhitespaces: false,
-                    styles: ["aui-icon{vertical-align:bottom}.aui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor}.aui-icon--left{margin-left:var(--aui-spacing-s)}.aui-icon--right{margin-right:var(--aui-spacing-s)}.aui-icon-spinner{-webkit-animation:rotating .5s linear infinite;animation:rotating .5s linear infinite}aui-icon+aui-icon>.aui-icon{margin-left:var(--aui-spacing-s)}@-webkit-keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
+                    styles: ["aui-icon{vertical-align:bottom}.aui-icon{display:inline-block;width:1em;height:1em;vertical-align:-.125em;fill:currentColor}.aui-icon__background{width:1em;height:1em;fill:#fff}.aui-icon__background.circle{-webkit-clip-path:circle(calc(.5em - 1px));clip-path:circle(calc(.5em - 1px))}.aui-icon__background.triangle{-webkit-clip-path:polygon(.5em 1px,calc(1em - 1px) calc(1em - 1px),1px calc(1em - 1px));clip-path:polygon(.5em 1px,calc(1em - 1px) calc(1em - 1px),1px calc(1em - 1px))}.aui-icon--left{margin-left:var(--aui-spacing-s)}.aui-icon--right{margin-right:var(--aui-spacing-s)}.aui-icon-spinner{-webkit-animation:rotating .5s linear infinite;animation:rotating .5s linear infinite}aui-icon+aui-icon>.aui-icon{margin-left:var(--aui-spacing-s)}@-webkit-keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}"]
                 },] }
     ];
     IconComponent.ctorParameters = function () { return [
         { type: IconRegisterService }
     ]; };
     IconComponent.propDecorators = {
-        icon: [{ type: i0.HostBinding, args: ['attr.data-test',] }, { type: i0.Input }],
+        icon: [{ type: i0.Input }],
         light: [{ type: i0.Input }],
         dark: [{ type: i0.Input }],
         link: [{ type: i0.Input }],
         margin: [{ type: i0.Input }],
         size: [{ type: i0.Input }],
-        color: [{ type: i0.Input }]
+        color: [{ type: i0.Input }],
+        background: [{ type: i0.Input }],
+        backgroundColor: [{ type: i0.Input }]
     };
 
     var IconModule = /** @class */ (function () {
@@ -1511,13 +1539,6 @@
             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;
@@ -1638,7 +1659,6 @@
         { 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 }],
@@ -2697,7 +2717,7 @@
     ConfirmDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-confirm-dialog',
-                    template: "<div [class]=\"bem.block()\">\n  <div [class]=\"bem.element('title')\">\n    <span [class]=\"bem.element('icon', config.confirmType + '')\">\n      <aui-icon [icon]=\"iconMap(config.confirmType)\"></aui-icon>\n    </span>\n    <span>{{ config.title }}</span>\n  </div>\n  <div [class]=\"bem.element('content')\">{{ config.content }}</div>\n  <div [class]=\"bem.element('button-wrapper')\">\n    <div>\n      <button\n        [aui-button]=\"config.confirmType\"\n        [ngClass]=\"bem.element('confirm-button')\"\n        [loading]=\"waitConfirm\"\n        [disabled]=\"waitConfirm || waitCancel\"\n        (click)=\"confirm()\"\n      >\n        {{ config.confirmText }}\n      </button>\n      <button\n        *ngIf=\"config.cancelButton\"\n        aui-button\n        [ngClass]=\"bem.element('cancel-button')\"\n        [loading]=\"waitCancel\"\n        [disabled]=\"waitConfirm || waitCancel\"\n        (click)=\"cancel()\"\n      >\n        {{ config.cancelText }}\n      </button>\n    </div>\n  </div>\n</div>\n",
+                    template: "<div [class]=\"bem.block()\">\n  <div [class]=\"bem.element('title')\">\n    <span [class]=\"bem.element('icon', config.confirmType + '')\">\n      <aui-icon\n        [icon]=\"iconMap(config.confirmType)\"\n        [background]=\"\n          iconMap(config.confirmType).endsWith('_triangle_s')\n            ? 'triangle'\n            : 'circle'\n        \"\n      ></aui-icon>\n    </span>\n    <span>{{ config.title }}</span>\n  </div>\n  <div [class]=\"bem.element('content')\">{{ config.content }}</div>\n  <div [class]=\"bem.element('button-wrapper')\">\n    <div>\n      <button\n        [aui-button]=\"config.confirmType\"\n        [ngClass]=\"bem.element('confirm-button')\"\n        [loading]=\"waitConfirm\"\n        [disabled]=\"waitConfirm || waitCancel\"\n        (click)=\"confirm()\"\n      >\n        {{ config.confirmText }}\n      </button>\n      <button\n        *ngIf=\"config.cancelButton\"\n        aui-button\n        [ngClass]=\"bem.element('cancel-button')\"\n        [loading]=\"waitCancel\"\n        [disabled]=\"waitConfirm || waitCancel\"\n        (click)=\"cancel()\"\n      >\n        {{ config.cancelText }}\n      </button>\n    </div>\n  </div>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -2790,12 +2810,12 @@
     DialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-dialog',
-                    template: "<div [ngClass]=\"rootClass\" [ngStyle]=\"customStyle\" data-test=\"AUI-DIALOG\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n",
+                    template: "<div [ngClass]=\"rootClass\" [ngStyle]=\"customStyle\">\n  <ng-template cdkPortalOutlet></ng-template>\n</div>\n",
                     encapsulation: i0.ViewEncapsulation.None,
                     // tslint:disable-next-line:validate-decorators
                     changeDetection: i0.ChangeDetectionStrategy.Default,
                     preserveWhitespaces: false,
-                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop,html[aui-theme-mode=light] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.65)}}html[aui-theme-mode=dark] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.65)}.cdk-overlay-pane.aui-dialog-overlay-pane{justify-content:center;overflow:auto}.cdk-overlay-pane.aui-dialog-overlay-pane::-webkit-scrollbar{width:4px;height:4px}.cdk-overlay-pane.aui-dialog-overlay-pane::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-dialog{margin:18vh auto 20px;display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-l);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1))}:root .aui-dialog,html[aui-theme-mode=light] .aui-dialog{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-dialog{box-shadow:0 4px 16px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-dialog{box-shadow:0 4px 16px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-dialog aui-dialog-content{height:100%;overflow:auto}.aui-dialog aui-dialog-content::-webkit-scrollbar{width:4px;height:4px}.aui-dialog aui-dialog-content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-dialog aui-dialog-content:first-child .aui-dialog__content{padding-top:20px}.aui-dialog aui-dialog-content:last-child .aui-dialog__content{padding-bottom:20px}.aui-dialog__header{margin:0 20px;padding:20px 0 16px;display:flex;justify-content:space-between}.aui-dialog__header.hasDivider{margin-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-dialog__header-title{width:100%;font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);color:rgb(var(--aui-color-n-1));font-weight:var(--aui-font-weight-bold)}.aui-dialog__header-title>aui-icon:first-child{font-size:var(--aui-icon-size-xl);margin-right:var(--aui-spacing-m)}.aui-dialog__header-title>aui-icon:first-child[icon=info_circle_s]{color:rgb(var(--aui-color-primary))}.aui-dialog__header-title>aui-icon:first-child[icon=check_circle_s]{color:rgb(var(--aui-color-green))}.aui-dialog__header-title>aui-icon:first-child[icon=exclamation_circle_s]{color:rgb(var(--aui-color-yellow))}.aui-dialog__header-title>aui-icon:first-child[icon=exclamation_triangle_s]{color:rgb(var(--aui-color-red))}.aui-dialog__header-close{margin-left:var(--aui-spacing-xl);line-height:var(--aui-line-height-xl);font-size:var(--aui-font-size-l);color:rgb(var(--aui-color-n-4));cursor:pointer}.aui-dialog__header-close:hover{color:rgb(var(--aui-color-primary))}.aui-dialog__content{padding:0 20px;min-height:80px}.aui-dialog__footer{padding:16px 20px 20px;display:flex;justify-content:flex-end}.aui-dialog--small{width:400px}.aui-dialog--medium{width:600px}.aui-dialog--big{width:800px}.aui-dialog--large{width:960px}.aui-dialog--fit-content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.aui-dialog--fullscreen{width:90vw;height:calc(100vh - (20px * 2))}.aui-dialog--fit-viewport,.aui-dialog--fullscreen{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.aui-dialog--fit-viewport{max-width:90vw;max-height:calc(100vh - (20px * 2))}.aui-dialog--fit-viewport .aui-dialog__header{margin:0;padding:20px 20px 16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-dialog--fit-viewport .aui-dialog__footer{border-top:1px solid rgb(var(--aui-color-n-8))}.aui-dialog--fit-viewport aui-dialog-content:not(:first-child) .aui-dialog__content{padding-top:16px}.aui-dialog--fit-viewport aui-dialog-content:not(:last-child) .aui-dialog__content{padding-bottom:16px}.aui-dialog--fit-viewport>ng-component{display:flex;flex-direction:column;overflow:auto}.aui-dialog--fit-viewport>ng-component:after{clear:both}"]
+                    styles: [".cdk-global-overlay-wrapper,.cdk-overlay-container{pointer-events:none;top:0;left:0;height:100%;width:100%}.cdk-overlay-container{position:fixed;z-index:1000}.cdk-overlay-container:empty{display:none}.cdk-global-overlay-wrapper,.cdk-overlay-pane{display:flex;position:absolute;z-index:1000}.cdk-overlay-pane{pointer-events:auto;box-sizing:border-box;max-width:100%;max-height:100%}.cdk-overlay-backdrop{position:absolute;top:0;bottom:0;left:0;right:0;z-index:1000;pointer-events:auto;-webkit-tap-highlight-color:transparent;transition:opacity .4s cubic-bezier(.25,.8,.25,1);opacity:0}.cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:1}.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing{opacity:.6}.cdk-overlay-dark-backdrop{background:rgba(0,0,0,.32)}.cdk-overlay-transparent-backdrop,.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing{opacity:0}.cdk-overlay-connected-position-bounding-box{position:absolute;z-index:1000;display:flex;flex-direction:column;min-width:1px;min-height:1px}.cdk-global-scrollblock{position:fixed;width:100%;overflow-y:scroll}:root .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop,html[aui-theme-mode=light] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.4)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.65)}}html[aui-theme-mode=dark] .cdk-overlay-backdrop.cdk-overlay-backdrop-showing.aui-dialog-backdrop{background-color:rgba(var(--aui-color-origin-shadow),.65)}.cdk-overlay-pane.aui-dialog-overlay-pane{justify-content:center;overflow:auto}.cdk-overlay-pane.aui-dialog-overlay-pane::-webkit-scrollbar{width:4px;height:4px}.cdk-overlay-pane.aui-dialog-overlay-pane::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-dialog{margin:18vh auto 20px;display:flex;flex-direction:column;background-color:rgb(var(--aui-color-n-10));border-radius:var(--aui-border-radius-l);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m);color:rgb(var(--aui-color-n-1))}:root .aui-dialog,html[aui-theme-mode=light] .aui-dialog{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-dialog{box-shadow:0 4px 16px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-dialog{box-shadow:0 4px 16px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-dialog aui-dialog-content{height:100%;overflow:auto}.aui-dialog aui-dialog-content::-webkit-scrollbar{width:4px;height:4px}.aui-dialog aui-dialog-content::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.3)}.aui-dialog aui-dialog-content:first-child .aui-dialog__content{padding-top:20px}.aui-dialog aui-dialog-content:last-child .aui-dialog__content{padding-bottom:20px}.aui-dialog__header{margin:0 20px;padding:20px 0 16px;display:flex;justify-content:space-between}.aui-dialog__header.hasDivider{margin-bottom:16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-dialog__header-title{width:100%;font-size:var(--aui-font-size-xl);line-height:var(--aui-line-height-xl);color:rgb(var(--aui-color-n-1));font-weight:var(--aui-font-weight-bold)}.aui-dialog__header-title>aui-icon:first-child{font-size:var(--aui-icon-size-xl);margin-right:var(--aui-spacing-m)}.aui-dialog__header-title>aui-icon:first-child[icon=info_circle_s]{color:rgb(var(--aui-color-primary))}.aui-dialog__header-title>aui-icon:first-child[icon=check_circle_s]{color:rgb(var(--aui-color-green))}.aui-dialog__header-title>aui-icon:first-child[icon=exclamation_circle_s]{color:rgb(var(--aui-color-yellow))}.aui-dialog__header-title>aui-icon:first-child[icon=exclamation_triangle_s]{color:rgb(var(--aui-color-red))}.aui-dialog__header-close{margin-left:var(--aui-spacing-xl);line-height:var(--aui-line-height-xl);font-size:var(--aui-font-size-l);color:rgb(var(--aui-color-n-4));cursor:pointer}.aui-dialog__header-close:hover{color:rgb(var(--aui-color-primary))}.aui-dialog__content{padding:0 20px;min-height:80px}.aui-dialog__footer{padding:20px;display:flex;justify-content:flex-end}.aui-dialog--small{width:400px}.aui-dialog--medium{width:600px}.aui-dialog--big{width:800px}.aui-dialog--large{width:960px}.aui-dialog--fit-content{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.aui-dialog--fullscreen{width:90vw;height:calc(100vh - (20px * 2))}.aui-dialog--fit-viewport,.aui-dialog--fullscreen{margin:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.aui-dialog--fit-viewport{max-width:90vw;max-height:calc(100vh - (20px * 2))}.aui-dialog--fit-viewport .aui-dialog__header{margin:0;padding:20px 20px 16px;border-bottom:1px solid rgb(var(--aui-color-n-8))}.aui-dialog--fit-viewport .aui-dialog__footer{padding-top:16px;border-top:1px solid rgb(var(--aui-color-n-8))}.aui-dialog--fit-viewport aui-dialog-content:not(:first-child) .aui-dialog__content{padding-top:16px}.aui-dialog--fit-viewport aui-dialog-content:not(:last-child) .aui-dialog__content{padding-bottom:16px}.aui-dialog--fit-viewport>ng-component{display:flex;flex-direction:column;overflow:auto}.aui-dialog--fit-viewport>ng-component:after{clear:both}"]
                 },] }
     ];
     DialogComponent.ctorParameters = function () { return [
@@ -3371,10 +3391,9 @@
      */
     // tslint:disable-next-line:directive-class-suffix
     var CommonFormControl = /** @class */ (function () {
-        function CommonFormControl(cdr, elementRef) {
+        function CommonFormControl(cdr) {
             var _this = this;
             this.cdr = cdr;
-            this.elementRef = elementRef;
             this.valueChange = new i0.EventEmitter();
             this.value$$ = new rxjs.ReplaySubject(1);
             this._disabled = false;
@@ -3393,15 +3412,6 @@
             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;
@@ -3461,12 +3471,10 @@
         { type: i0.Directive }
     ];
     CommonFormControl.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     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 }]
@@ -3595,13 +3603,6 @@
             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) {
@@ -3647,7 +3648,6 @@
     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 },] }]
     };
 
@@ -3871,8 +3871,8 @@
     var uniqueId$2 = 0;
     var CheckboxComponent = /** @class */ (function (_super) {
         __extends(CheckboxComponent, _super);
-        function CheckboxComponent(cdr, checkboxGroup, focusMonitor, elementRef) {
-            var _this = _super.call(this, cdr, elementRef) || this;
+        function CheckboxComponent(cdr, checkboxGroup, focusMonitor) {
+            var _this = _super.call(this, cdr) || this;
             _this.focusMonitor = focusMonitor;
             _this.id = "aui-checkbox-" + uniqueId$2++;
             _this.name = '';
@@ -3968,13 +3968,12 @@
     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: i0.ElementRef }
+        { type: a11y.FocusMonitor }
     ]; };
     CheckboxComponent.propDecorators = {
         name: [{ type: i0.Input }],
         type: [{ type: i0.Input }],
-        label: [{ type: i0.HostBinding, args: ['attr.data-test',] }, { type: i0.Input }],
+        label: [{ type: i0.Input }],
         indeterminate: [{ type: i0.Input }],
         elRef: [{ type: i0.ViewChild, args: ['elRef', { static: true },] }]
     };
@@ -4007,16 +4006,6 @@
             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;
@@ -4072,7 +4061,6 @@
         { type: i0.Renderer2 }
     ]; };
     InputComponent.propDecorators = {
-        testId: [{ type: i0.HostBinding, args: ['attr.data-test',] }],
         size: [{ type: i0.Input }],
         disabled: [{ type: i0.Input }]
     };
@@ -4275,8 +4263,8 @@
     var INPUT_ERROR_KEY = 'input_data_error';
     var TagsInputComponent = /** @class */ (function (_super) {
         __extends(TagsInputComponent, _super);
-        function TagsInputComponent(cdr, fb, renderer, injector, elementRef) {
-            var _this = _super.call(this, cdr, elementRef) || this;
+        function TagsInputComponent(cdr, fb, renderer, injector) {
+            var _this = _super.call(this, cdr) || this;
             _this.fb = fb;
             _this.renderer = renderer;
             _this.injector = injector;
@@ -4535,8 +4523,7 @@
         { type: i0.ChangeDetectorRef },
         { type: forms.FormBuilder },
         { type: i0.Renderer2 },
-        { type: i0.Injector },
-        { type: i0.ElementRef }
+        { type: i0.Injector }
     ]; };
     TagsInputComponent.propDecorators = {
         placeholder: [{ type: i0.Input }],
@@ -5116,14 +5103,6 @@
             _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;
@@ -5181,7 +5160,6 @@
         { 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',] }],
@@ -5315,7 +5293,7 @@
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
-                    styles: ["aui-menu{display:none}.aui-menu{padding:var(--aui-spacing-m);max-width:280px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-menu,html[aui-theme-mode=light] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-menu--large .aui-menu-item,.aui-menu--large .aui-submenu{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l)}.aui-menu--medium .aui-menu-item,.aui-menu--medium .aui-submenu{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-l)}.aui-menu--small .aui-menu-item,.aui-menu--small .aui-submenu{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m)}.aui-menu--mini .aui-menu-item,.aui-menu--mini .aui-submenu{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s)}"]
+                    styles: ["aui-menu{display:none}.aui-menu{padding:var(--aui-spacing-m);max-width:280px;border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-popper-bg))}:root .aui-menu,html[aui-theme-mode=light] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.2)}@media (prefers-color-scheme:dark){html[aui-theme-mode=system] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}}html[aui-theme-mode=dark] .aui-menu{box-shadow:0 2px 8px 0 rgba(var(--aui-color-origin-shadow),.75)}.aui-menu--large .aui-menu-item,.aui-menu--large .aui-submenu{height:var(--aui-inline-height-l);font-size:var(--aui-font-size-l);line-height:var(--aui-line-height-l)}.aui-menu--large .aui-menu-item aui-icon,.aui-menu--large .aui-submenu aui-icon{height:var(--aui-line-height-l);font-size:var(--aui-icon-size-l)}.aui-menu--medium .aui-menu-item,.aui-menu--medium .aui-submenu{height:var(--aui-inline-height-m);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-menu--medium .aui-menu-item aui-icon,.aui-menu--medium .aui-submenu aui-icon{height:var(--aui-line-height-m);font-size:var(--aui-icon-size-m)}.aui-menu--small .aui-menu-item,.aui-menu--small .aui-submenu{height:var(--aui-inline-height-s);font-size:var(--aui-font-size-m);line-height:var(--aui-line-height-m)}.aui-menu--small .aui-menu-item aui-icon,.aui-menu--small .aui-submenu aui-icon{height:var(--aui-line-height-m);font-size:var(--aui-icon-size-m)}.aui-menu--mini .aui-menu-item,.aui-menu--mini .aui-submenu{height:var(--aui-inline-height-xs);font-size:var(--aui-font-size-s);line-height:var(--aui-line-height-s)}.aui-menu--mini .aui-menu-item aui-icon,.aui-menu--mini .aui-submenu aui-icon{height:var(--aui-line-height-s);font-size:var(--aui-icon-size-s)}"]
                 },] }
     ];
     MenuComponent.propDecorators = {
@@ -5358,7 +5336,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    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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -5564,13 +5542,6 @@
             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;
@@ -5638,7 +5609,6 @@
     ]; };
     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 }],
@@ -6002,8 +5972,8 @@
 
     var MultiSelectComponent = /** @class */ (function (_super) {
         __extends(MultiSelectComponent, _super);
-        function MultiSelectComponent(cdr, renderer, elementRef) {
-            var _this = _super.call(this, cdr, elementRef) || this;
+        function MultiSelectComponent(cdr, renderer) {
+            var _this = _super.call(this, cdr) || this;
             _this.renderer = renderer;
             _this.bem = buildBem('aui-multi-select');
             _this.bemSelectAll = buildBem('aui-option');
@@ -6300,7 +6270,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          [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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -6320,8 +6290,7 @@
     ];
     MultiSelectComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef },
-        { type: i0.Renderer2 },
-        { type: i0.ElementRef }
+        { type: i0.Renderer2 }
     ]; };
     MultiSelectComponent.propDecorators = {
         tagClassFn: [{ type: i0.Input }],
@@ -6458,7 +6427,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          [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",
+                    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",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -6827,7 +6796,7 @@
     InlineAlertComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-inline-alert',
-                    template: "<div\n  *ngIf=\"visible\"\n  [class]=\"bem.block(type)\"\n  [class.hasTitle]=\"title || titleRef\"\n>\n  <aui-icon class=\"aui-inline-alert__icon\" [icon]=\"iconMap(type)\"></aui-icon>\n  <div class=\"aui-inline-alert__body\">\n    <div class=\"aui-inline-alert__title\" *ngIf=\"title || titleRef\">\n      <ng-container *ngIf=\"title\">{{ title }}</ng-container>\n      <ng-content select=\"[auiInlineAlertTitle]\"></ng-content>\n    </div>\n    <div class=\"aui-inline-alert__content\">\n      <ng-container *ngIf=\"content\">{{ content }}</ng-container>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <aui-icon\n    *ngIf=\"closable\"\n    class=\"aui-inline-alert__close\"\n    icon=\"close\"\n    (click)=\"closeSelf()\"\n  ></aui-icon>\n</div>\n",
+                    template: "<div\n  *ngIf=\"visible\"\n  [class]=\"bem.block(type)\"\n  [class.hasTitle]=\"title || titleRef\"\n>\n  <aui-icon\n    class=\"aui-inline-alert__icon\"\n    [icon]=\"iconMap(type)\"\n    [background]=\"iconMap(type).endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n  ></aui-icon>\n  <div class=\"aui-inline-alert__body\">\n    <div class=\"aui-inline-alert__title\" *ngIf=\"title || titleRef\">\n      <ng-container *ngIf=\"title\">{{ title }}</ng-container>\n      <ng-content select=\"[auiInlineAlertTitle]\"></ng-content>\n    </div>\n    <div class=\"aui-inline-alert__content\">\n      <ng-container *ngIf=\"content\">{{ content }}</ng-container>\n      <ng-content></ng-content>\n    </div>\n  </div>\n  <aui-icon\n    *ngIf=\"closable\"\n    class=\"aui-inline-alert__close\"\n    icon=\"close\"\n    (click)=\"closeSelf()\"\n  ></aui-icon>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
                     preserveWhitespaces: false,
@@ -7118,7 +7087,7 @@
     MessageComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-message',
-                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId\"\n>\n  <div [class]=\"bem.element('icon', type)\">\n    <aui-icon [icon]=\"icon\"></aui-icon>\n  </div>\n  <div [class]=\"bem.element('content')\">{{ content }}</div>\n</div>\n",
+                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId\"\n>\n  <div [class]=\"bem.element('icon', type)\">\n    <aui-icon\n      [icon]=\"icon\"\n      [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n    ></aui-icon>\n  </div>\n  <div [class]=\"bem.element('content')\">{{ content }}</div>\n</div>\n",
                     animations: [MessageAnimations.inOut],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -7359,7 +7328,7 @@
     NotificationComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aui-notification',
-                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n>\n  <div [class]=\"bem.element('icon')\"><aui-icon [icon]=\"icon\"></aui-icon></div>\n  <div [class]=\"bem.element('body')\">\n    <div *ngIf=\"title\" [class]=\"bem.element('title')\">{{ title }}</div>\n    <div *ngIf=\"content\" [class]=\"bem.element('content')\">{{ content }}</div>\n    <ng-template cdkPortalHost></ng-template>\n    <ng-template #modalComponent></ng-template>\n  </div>\n  <div [class]=\"bem.element('close')\">\n    <div\n      *ngIf=\"duration <= 0 || isHover\"\n      [class]=\"bem.element('remove')\"\n      (click)=\"remove()\"\n    >\n      <aui-icon icon=\"close\"></aui-icon>\n    </div>\n    <div *ngIf=\"duration > 0 && !isHover\" [class]=\"bem.element('duration')\">\n      {{ remains > 0 ? remains : 1 }}s\n    </div>\n  </div>\n  <div *ngIf=\"footerPortal\" [class]=\"bem.element('footer')\">\n    <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n  </div>\n</div>\n",
+                    template: "<div\n  [@inOut]=\"animateState\"\n  (@inOut.done)=\"onAnimationEnd($event)\"\n  [class]=\"bem.block(type) + ' ' + uniqueId + ' ' + customClass\"\n>\n  <div [class]=\"bem.element('icon')\">\n    <aui-icon\n      [icon]=\"icon\"\n      [background]=\"icon.endsWith('_triangle_s') ? 'triangle' : 'circle'\"\n    ></aui-icon>\n  </div>\n  <div [class]=\"bem.element('body')\">\n    <div *ngIf=\"title\" [class]=\"bem.element('title')\">{{ title }}</div>\n    <div *ngIf=\"content\" [class]=\"bem.element('content')\">{{ content }}</div>\n    <ng-template cdkPortalHost></ng-template>\n    <ng-template #modalComponent></ng-template>\n  </div>\n  <div [class]=\"bem.element('close')\">\n    <div\n      *ngIf=\"duration <= 0 || isHover\"\n      [class]=\"bem.element('remove')\"\n      (click)=\"remove()\"\n    >\n      <aui-icon icon=\"close\"></aui-icon>\n    </div>\n    <div *ngIf=\"duration > 0 && !isHover\" [class]=\"bem.element('duration')\">\n      {{ remains > 0 ? remains : 1 }}s\n    </div>\n  </div>\n  <div *ngIf=\"footerPortal\" [class]=\"bem.element('footer')\">\n    <ng-template [cdkPortalOutlet]=\"footerPortal\"></ng-template>\n  </div>\n</div>\n",
                     animations: [MessageAnimations.inOut],
                     encapsulation: i0.ViewEncapsulation.None,
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
@@ -10912,8 +10881,8 @@
     var bem$3 = buildBem('aui-time-picker-panel');
     var TimePickerPanelComponent = /** @class */ (function (_super) {
         __extends(TimePickerPanelComponent, _super);
-        function TimePickerPanelComponent(cdr, elementRef) {
-            var _this = _super.call(this, cdr, elementRef) || this;
+        function TimePickerPanelComponent(cdr) {
+            var _this = _super.call(this, cdr) || this;
             _this.cdr = cdr;
             _this.hourStep = 1;
             _this.minuteStep = 1;
@@ -11109,8 +11078,7 @@
                 },] }
     ];
     TimePickerPanelComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef }
+        { type: i0.ChangeDetectorRef }
     ]; };
     TimePickerPanelComponent.propDecorators = {
         format: [{ type: i0.Input }],
@@ -12513,7 +12481,7 @@
                     template: "<div\n  class=\"aui-steps aui-steps--{{ orientation || 'horizontal' }} aui-steps--{{\n    type || 'step'\n  }}\"\n>\n  <ng-container *ngFor=\"let step of steps; let i = index; let isLast = last\">\n    <div\n      class=\"aui-step\"\n      (click)=\"select(i)\"\n      [class.isLastActive]=\"isLastActive(i, steps)\"\n      [class.clickable]=\"isSelectable(i)\"\n    >\n      <div class=\"aui-step__indicator\">\n        <ng-container *ngIf=\"isProgress\">\n          <ng-container [ngSwitch]=\"getIcon(i, step.state)\">\n            <span\n              class=\"aui-step__indicator-number aui-step__indicator-number--{{\n                step.state\n              }}\"\n              *ngSwitchCase=\"'number'\"\n              [class.selected]=\"getActiveIndex() === i\"\n            >\n              {{ i + 1 }}\n            </span>\n            <aui-icon\n              class=\"aui-step__indicator-icon aui-step__indicator-icon--{{\n                step.state\n              }}\"\n              *ngSwitchDefault\n              [class.selected]=\"getActiveIndex() === i\"\n              [icon]=\"getIcon(i, step.state)\"\n            ></aui-icon>\n          </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!isProgress\">\n          <span\n            class=\"aui-step__indicator-number\"\n            [class.selected]=\"_currentIndex === i\"\n            *ngIf=\"i >= _currentIndex\"\n          >\n            {{ i + 1 }}\n          </span>\n          <aui-icon\n            class=\"aui-step__indicator-icon aui-step__indicator-icon--done\"\n            [class.selected]=\"_currentIndex === i\"\n            *ngIf=\"i < _currentIndex\"\n            [icon]=\"getIcon(i, 'done')\"\n          ></aui-icon>\n        </ng-container>\n        <div\n          *ngIf=\"!isLast && isVertical\"\n          class=\"aui-steps__vertical-line aui-steps__vertical-line--{{\n            step.state\n          }}\"\n        ></div>\n      </div>\n      <div\n        class=\"aui-step__info aui-step__info--{{\n          isProgress\n            ? step.state || 'default'\n            : i < _currentIndex\n            ? 'done'\n            : 'default'\n        }}\"\n        [class.aui-step__info--selected]=\"getActiveIndex() === i\"\n      >\n        <div class=\"aui-step__name\">\n          {{ step.label }}\n        </div>\n        <div class=\"aui-step__description\" *ngIf=\"step.description\">\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n    <div\n      *ngIf=\"!isLast && !isVertical\"\n      class=\"aui-steps__horizontal-line\"\n    ></div>\n  </ng-container>\n</div>\n",
                     changeDetection: i0.ChangeDetectionStrategy.OnPush,
                     encapsulation: i0.ViewEncapsulation.None,
-                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator-number{border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);display:flex;justify-content:center;width:var(--aui-icon-size-xl);height:var(--aui-icon-size-xl);line-height:var(--aui-line-height-l)}.aui-step__indicator-number.selected{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary));color:#fff}.aui-step__indicator-icon{font-size:var(--aui-icon-size-xl);display:inline-flex;border-radius:50%}.aui-step__indicator-icon--done,.aui-step__indicator-icon--pending{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-step__indicator-icon--done.selected,.aui-step__indicator-icon--pending.selected{background-color:#fff}.aui-step__indicator-icon--error{background-color:rgb(var(--aui-color-r-6));color:rgb(var(--aui-color-red))}.aui-step__indicator-icon--error.selected{background-color:#fff}.aui-step__indicator-icon--pending{transform-origin:center;-webkit-animation:spin 4s linear infinite;animation:spin 4s linear infinite}.aui-step__name{font-size:var(--aui-font-size-l);max-width:128px}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--done,.aui-step__info--error,.aui-step__info--pending,.aui-step__info--selected{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;max-width:240px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 120px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}"]
+                    styles: ["@-webkit-keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.aui-step{display:flex;align-items:center;font-weight:var(--aui-font-weight-normal)}.aui-step__indicator{margin-right:var(--aui-spacing-m);width:24px;height:24px;display:inline-flex;color:rgb(var(--aui-color-n-4))}.aui-step__indicator-number{border-radius:50%;border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8));font-weight:var(--aui-font-weight-bold);font-size:var(--aui-font-size-l);display:flex;justify-content:center;width:var(--aui-icon-size-xl);height:var(--aui-icon-size-xl);line-height:var(--aui-line-height-l)}.aui-step__indicator-number.selected{border-color:rgb(var(--aui-color-primary));background-color:rgb(var(--aui-color-primary));color:#fff}.aui-step__indicator-icon{font-size:var(--aui-icon-size-xl);display:inline-flex;border-radius:50%}.aui-step__indicator-icon--done,.aui-step__indicator-icon--pending{background-color:rgb(var(--aui-color-p-6));color:rgb(var(--aui-color-primary))}.aui-step__indicator-icon--done.selected,.aui-step__indicator-icon--pending.selected{background-color:#fff}.aui-step__indicator-icon--error{background-color:rgb(var(--aui-color-r-6));color:rgb(var(--aui-color-red))}.aui-step__indicator-icon--error.selected{background-color:#fff}.aui-step__indicator-icon--pending{transform-origin:center;-webkit-animation:spin 2s linear infinite;animation:spin 2s linear infinite}.aui-step__name{font-size:var(--aui-font-size-l);max-width:128px}.aui-step__description{font-size:var(--aui-font-size-s);margin-top:var(--aui-spacing-s);line-height:var(--aui-line-height-s)}.aui-step__info{color:rgb(var(--aui-color-n-4))}.aui-step__info--done,.aui-step__info--error,.aui-step__info--pending,.aui-step__info--selected{color:rgb(var(--aui-color-n-1))}.aui-step__info--selected .aui-step__name{font-weight:var(--aui-font-weight-bold)}.aui-step.clickable{cursor:pointer}.aui-steps--progress .aui-step.clickable .aui-step__info:hover{color:rgb(var(--aui-color-primary))}.aui-steps__horizontal-line{height:1px;background-color:rgb(var(--aui-color-n-7));flex:1;max-width:240px;margin:0 var(--aui-spacing-l)}.aui-steps__vertical-line{min-height:12px;width:1px;background-color:rgb(var(--aui-color-n-7));margin-top:var(--aui-spacing-s);flex:1}.aui-steps__vertical-line--done{background-color:rgb(var(--aui-color-green))}.aui-steps__vertical-line--error{background-color:rgb(var(--aui-color-red))}.aui-steps__vertical-line--pending{background-color:rgb(var(--aui-color-primary))}.aui-steps--horizontal{padding:0 120px;display:flex;justify-content:center;align-items:center}.aui-steps--vertical{max-width:200px}.aui-steps--vertical .aui-step{align-items:stretch}.aui-steps--vertical .aui-step:not(:last-child){margin-bottom:var(--aui-spacing-s)}.aui-steps--vertical .aui-step__indicator{height:auto;display:flex;align-items:center;flex-direction:column}.aui-steps--vertical .aui-step__indicator-icon--done{color:rgb(var(--aui-color-green));background-color:rgb(var(--aui-color-g-6))}.aui-steps--vertical .aui-step__indicator-icon--done.selected{background-color:#fff}.aui-steps--vertical .aui-step__info{padding-bottom:13px}.aui-steps--vertical .aui-step.isLastActive .aui-steps__vertical-line{background-color:rgb(var(--aui-color-n-7))}"]
                 },] }
     ];
     StepsComponent.propDecorators = {
@@ -12797,38 +12765,40 @@
     exports.observeMutationOn = observeMutationOn;
     exports.observeResizeOn = observeResizeOn;
     exports.scrollIntoView = scrollIntoView;
-    exports.simplifyStringToTestId = simplifyStringToTestId;
     exports.sleep = sleep;
     exports.watchContentExist = watchContentExist;
     exports.zh = zh;
     exports.ɵ0 = ɵ0;
     exports.ɵ1 = ɵ1;
     exports.ɵ2 = ɵ2;
-    exports.ɵa = TablePlaceholderDefDirective;
-    exports.ɵb = TablePlaceholderOutlet;
-    exports.ɵc = TableExpandButtonCellComponent;
-    exports.ɵd = TableExpandPanelCellComponent;
-    exports.ɵe = TooltipCopyDirective;
-    exports.ɵf = DialogComponent;
-    exports.ɵg = ConfirmDialogComponent;
-    exports.ɵh = BaseRadio;
-    exports.ɵi = InputAddonBeforeDirective;
-    exports.ɵj = InputAddonAfterDirective;
-    exports.ɵk = InputPrefixDirective;
-    exports.ɵl = InputSuffixDirective;
-    exports.ɵm = SharedModule;
-    exports.ɵn = ClickOutsideDirective;
-    exports.ɵo = AutosizeDirective;
-    exports.ɵp = BaseSelect;
-    exports.ɵq = MenuGroupTitleDirective;
-    exports.ɵr = MessageWrapperComponent;
-    exports.ɵs = MessageComponent;
-    exports.ɵt = MessageAnimations;
-    exports.ɵu = BaseMessage;
-    exports.ɵv = NotificationWrapperComponent;
-    exports.ɵw = VirtualForOfDirective;
-    exports.ɵx = _isNumberValue;
-    exports.ɵy = DatePickerComponent;
+    exports.ɵa = RgbColorPipe;
+    exports.ɵb = RgbaColorPipe;
+    exports.ɵba = _isNumberValue;
+    exports.ɵbb = DatePickerComponent;
+    exports.ɵc = CssVarPipe;
+    exports.ɵd = TablePlaceholderDefDirective;
+    exports.ɵe = TablePlaceholderOutlet;
+    exports.ɵf = TableExpandButtonCellComponent;
+    exports.ɵg = TableExpandPanelCellComponent;
+    exports.ɵh = TooltipCopyDirective;
+    exports.ɵi = DialogComponent;
+    exports.ɵj = ConfirmDialogComponent;
+    exports.ɵk = BaseRadio;
+    exports.ɵl = InputAddonBeforeDirective;
+    exports.ɵm = InputAddonAfterDirective;
+    exports.ɵn = InputPrefixDirective;
+    exports.ɵo = InputSuffixDirective;
+    exports.ɵp = SharedModule;
+    exports.ɵq = ClickOutsideDirective;
+    exports.ɵr = AutosizeDirective;
+    exports.ɵs = BaseSelect;
+    exports.ɵt = MenuGroupTitleDirective;
+    exports.ɵu = MessageWrapperComponent;
+    exports.ɵv = MessageComponent;
+    exports.ɵw = MessageAnimations;
+    exports.ɵx = BaseMessage;
+    exports.ɵy = NotificationWrapperComponent;
+    exports.ɵz = VirtualForOfDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });