@alauda/ui 6.4.8-beta.34 → 6.4.8-beta.36

package/fesm2020/alauda-ui.mjs

@@ -4718,7 +4718,7 @@ NumberInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", v
             useExisting: forwardRef(() => NumberInputComponent),
             multi: true,
         },
-    ], queries: [{ propertyName: "addonBeforeRefs", predicate: InputAddonBeforeDirective }, { propertyName: "addonAfterRefs", predicate: InputAddonAfterDirective }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div [class]=\"bem.element('inner-wrapper')\">\n  <div\n    *ngIf=\"hasAddonBefore$ | async\"\n    [class]=\"bem.element('addon', 'before')\"\n  >\n    <ng-content select=\"[auiInputAddonBefore]\"></ng-content>\n  </div>\n  <div\n    [class]=\"bem.block(size)\"\n    [ngClass]=\"{\n      isFocus: isFocus,\n      isDisabled: disabled,\n      hasBefore: hasAddonBefore$ | async,\n      hasAfter: hasAddonAfter$ | async\n    }\"\n    auiClickOutside\n    (auiClickOutside)=\"isFocus = false\"\n  >\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('decrease')\"\n      [disabled]=\"disabled || model <= min\"\n      (click)=\"takeOneStep(false); isFocus = true\"\n    >\n      <aui-icon icon=\"minus\"></aui-icon>\n    </button>\n    <input\n      #inputRef\n      autocomplete=\"off\"\n      (change)=\"inputChanged($any($event).target.value)\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"bem.element('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"isFocus = true\"\n      (blur)=\"isFocus = false\"\n      [ngStyle]=\"{ 'text-align': angleControls ? 'left' : 'center' }\"\n    />\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('increase')\"\n      [disabled]=\"disabled || model >= max\"\n      (click)=\"takeOneStep(true); isFocus = true\"\n    >\n      <aui-icon icon=\"plus\"></aui-icon>\n    </button>\n    <div\n      *ngIf=\"controls && angleControls\"\n      class=\"aui-angle-container\"\n    >\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angleIncrease')\"\n        [disabled]=\"disabled || model >= max\"\n        (click)=\"takeOneStep(true); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_up\"></aui-icon>\n      </button>\n      <div class=\"separation\"></div>\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angleDecrease')\"\n        [disabled]=\"disabled || model <= min\"\n        (click)=\"takeOneStep(false); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_down\"></aui-icon>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"hasAddonAfter$ | async\"\n    [class]=\"bem.element('addon', 'after')\"\n  >\n    <ng-content select=\"[auiInputAddonAfter]\"></ng-content>\n  </div>\n</div>\n", styles: [".aui-number-input{display:flex;width:var(--aui-form-item-width-s);border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));z-index:1}.aui-number-input--small{width:132px}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:26px;height:26px}.aui-number-input--small .aui-number-input__angleDecrease.aui-button,.aui-number-input--small .aui-number-input__angleIncrease.aui-button{width:26px;height:12.5px}.aui-number-input--small .aui-number-input__input{line-height:26px}.aui-number-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input:hover .aui-angle-container{display:flex}.aui-number-input.isFocus{border-color:rgb(var(--aui-color-primary))}:root .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-number-input.isDisabled{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.isDisabled:hover{cursor:not-allowed}.aui-number-input.isDisabled .aui-number-input__input{color:rgb(var(--aui-color-n-6))}.aui-number-input.isDisabled .aui-number-input__input:hover{cursor:not-allowed}.aui-number-input.hasBefore{border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-number-input.hasAfter{border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input.hasBefore.hasAfter{border-radius:0}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{width:30px;height:30px;border-radius:0}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:0}.aui-number-input__decrease.aui-button{border-style:none solid none none}.aui-number-input__increase.aui-button{border-style:none none none solid}.aui-number-input .aui-angle-container{display:none;flex-direction:column;border-left:1px solid rgb(var(--aui-color-n-7))}.aui-number-input .aui-angle-container .separation{border-top:1px solid rgb(var(--aui-color-n-7))}.aui-number-input__angleDecrease.aui-button,.aui-number-input__angleIncrease.aui-button{width:30px;height:14.5px;border:0;border-radius:0;margin-left:0!important}.aui-number-input__angleDecrease.aui-button aui-icon,.aui-number-input__angleIncrease.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__angleDecrease.aui-button .aui-button__content,.aui-number-input__angleIncrease.aui-button .aui-button__content{padding:0}.aui-number-input__input{min-width:0;line-height:30px;border:0;margin:0;padding:0 var(--aui-spacing-m);color:rgb(var(--aui-color-main-text))}.aui-number-input__input:focus{border:0}.aui-number-input__input:focus-visible{outline:0}.aui-number-input__inner-wrapper{display:flex}.aui-number-input__addon{display:flex;align-items:center;flex-shrink:0;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-number-input__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}aui-number-input.ng-invalid.ng-dirty,.ng-submitted aui-number-input.ng-invalid{border-color:rgb(var(--aui-color-red))}\n"], components: [{ type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[auiClickOutside]", outputs: ["auiClickOutside"], exportAs: ["auiClickOutside"] }, { type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "addonBeforeRefs", predicate: InputAddonBeforeDirective }, { propertyName: "addonAfterRefs", predicate: InputAddonAfterDirective }], viewQueries: [{ propertyName: "inputRef", first: true, predicate: ["inputRef"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<div\n  [class]=\"bem.block(size)\"\n  [ngClass]=\"{\n    isFocused: isFocus,\n    isDisabled: disabled,\n    hasBefore: hasAddonBefore$ | async,\n    hasAfter: hasAddonAfter$ | async\n  }\"\n>\n  <div\n    *ngIf=\"hasAddonBefore$ | async\"\n    [class]=\"bem.element('addon', 'before')\"\n  >\n    <ng-content select=\"[auiInputAddonBefore]\"></ng-content>\n  </div>\n  <div\n    [class]=\"bem.element('inner')\"\n    auiClickOutside\n    (auiClickOutside)=\"isFocus = false\"\n  >\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('decrease')\"\n      [disabled]=\"disabled || model <= min\"\n      (click)=\"takeOneStep(false); isFocus = true\"\n    >\n      <aui-icon icon=\"minus\"></aui-icon>\n    </button>\n    <input\n      #inputRef\n      autocomplete=\"off\"\n      (change)=\"inputChanged($any($event).target.value)\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"bem.element('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"isFocus = true\"\n      (blur)=\"isFocus = false\"\n      [ngStyle]=\"{ 'text-align': angleControls ? 'left' : 'center' }\"\n    />\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('increase')\"\n      [disabled]=\"disabled || model >= max\"\n      (click)=\"takeOneStep(true); isFocus = true\"\n    >\n      <aui-icon icon=\"plus\"></aui-icon>\n    </button>\n    <div\n      *ngIf=\"controls && angleControls\"\n      class=\"aui-number-input__controls\"\n    >\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angle-increase')\"\n        [disabled]=\"disabled || model >= max\"\n        (click)=\"takeOneStep(true); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_up\"></aui-icon>\n      </button>\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angle-decrease')\"\n        [disabled]=\"disabled || model <= min\"\n        (click)=\"takeOneStep(false); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_down\"></aui-icon>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"hasAddonAfter$ | async\"\n    [class]=\"bem.element('addon', 'after')\"\n  >\n    <ng-content select=\"[auiInputAddonAfter]\"></ng-content>\n  </div>\n</div>\n", styles: [".aui-number-input{display:inline-flex;height:var(--aui-inline-height-m);color:rgb(var(--aui-color-main-text));background-color:rgb(var(--aui-color-main-bg));border-radius:var(--aui-border-radius-m)}.aui-number-input--small{height:var(--aui-inline-height-s)}.aui-number-input--small .aui-number-input__inner{width:132px}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:var(--aui-inline-height-s);height:var(--aui-inline-height-s)}.aui-number-input--small .aui-number-input__angle-decrease.aui-button,.aui-number-input--small .aui-number-input__angle-increase.aui-button{width:calc(var(--aui-inline-height-s) - 2px)}.aui-number-input__inner{display:flex;width:var(--aui-form-item-width-s);height:100%;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);color:inherit;background-color:inherit;z-index:1}.aui-number-input__inner:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input__input{margin:0;padding:0 var(--aui-spacing-m);min-width:0;height:100%;border:0;border-radius:inherit;background-color:inherit;color:inherit;cursor:inherit}.aui-number-input__input:focus{border:0}.aui-number-input__input:focus-visible{outline:0}.aui-number-input:hover:not(.isDisabled) .aui-number-input__inner .aui-number-input__controls{display:flex}.aui-number-input.isFocused .aui-number-input__inner{border-color:rgb(var(--aui-color-primary))}:root .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-number-input.isDisabled{cursor:not-allowed;color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-number-input.isDisabled .aui-number-input__inner{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.hasBefore .aui-number-input__inner{border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-number-input.hasAfter .aui-number-input__inner{border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input.hasBefore.hasAfter .aui-number-input__inner{border-radius:0}.aui-number-input:not(.hasAfter) .aui-number-input__angle-increase.aui-button{border-top-right-radius:var(--aui-border-radius-m)}.aui-number-input:not(.hasAfter) .aui-number-input__angle-decrease.aui-button{border-bottom-right-radius:var(--aui-border-radius-m)}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{margin-top:-1px;width:var(--aui-inline-height-m);height:var(--aui-inline-height-m);border-color:transparent}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:0}.aui-number-input__decrease.aui-button{margin-left:-1px;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m);background:linear-gradient(to left,rgb(var(--aui-color-border)) 1px,transparent 1px);background-position:1px;background-repeat:no-repeat}.aui-number-input__increase.aui-button{margin-right:-1px;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0;background:linear-gradient(to right,rgb(var(--aui-color-border)) 1px,transparent 1px);background-position:-1px;background-repeat:no-repeat}.aui-number-input__controls{display:none;flex-direction:column;border-left:1px solid rgb(var(--aui-color-border));position:relative}.aui-number-input__controls:after{content:\"\";display:block;width:100%;height:1px;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;background-color:rgb(var(--aui-color-border))}.aui-number-input__angle-decrease.aui-button,.aui-number-input__angle-increase.aui-button{width:calc(var(--aui-inline-height-m) - 2px);height:50%;border:0;border-radius:0;margin-left:0!important}.aui-number-input__angle-decrease.aui-button:focus,.aui-number-input__angle-increase.aui-button:focus{z-index:1}.aui-number-input__angle-decrease.aui-button aui-icon,.aui-number-input__angle-increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__angle-decrease.aui-button .aui-button__content,.aui-number-input__angle-increase.aui-button .aui-button__content{padding:0}.aui-number-input__addon{display:flex;align-items:center;flex-shrink:0;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-number-input__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}aui-number-input.ng-invalid.ng-dirty,.ng-submitted aui-number-input.ng-invalid{border-color:rgb(var(--aui-color-red))}\n"], components: [{ type: ButtonComponent, selector: "button[aui-button]", inputs: ["aui-button", "size", "plain", "loading", "round", "square"] }, { type: IconComponent, selector: "aui-icon", inputs: ["icon", "light", "dark", "link", "margin", "size", "color", "background", "backgroundColor"] }], directives: [{ type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: ClickOutsideDirective, selector: "[auiClickOutside]", outputs: ["auiClickOutside"], exportAs: ["auiClickOutside"] }, { type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "async": i2.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImport: i0, type: NumberInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'aui-number-input', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, preserveWhitespaces: false, providers: [
@@ -4727,7 +4727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.8", ngImpor
                             useExisting: forwardRef(() => NumberInputComponent),
                             multi: true,
                         },
-                    ], template: "<div [class]=\"bem.element('inner-wrapper')\">\n  <div\n    *ngIf=\"hasAddonBefore$ | async\"\n    [class]=\"bem.element('addon', 'before')\"\n  >\n    <ng-content select=\"[auiInputAddonBefore]\"></ng-content>\n  </div>\n  <div\n    [class]=\"bem.block(size)\"\n    [ngClass]=\"{\n      isFocus: isFocus,\n      isDisabled: disabled,\n      hasBefore: hasAddonBefore$ | async,\n      hasAfter: hasAddonAfter$ | async\n    }\"\n    auiClickOutside\n    (auiClickOutside)=\"isFocus = false\"\n  >\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('decrease')\"\n      [disabled]=\"disabled || model <= min\"\n      (click)=\"takeOneStep(false); isFocus = true\"\n    >\n      <aui-icon icon=\"minus\"></aui-icon>\n    </button>\n    <input\n      #inputRef\n      autocomplete=\"off\"\n      (change)=\"inputChanged($any($event).target.value)\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"bem.element('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"isFocus = true\"\n      (blur)=\"isFocus = false\"\n      [ngStyle]=\"{ 'text-align': angleControls ? 'left' : 'center' }\"\n    />\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('increase')\"\n      [disabled]=\"disabled || model >= max\"\n      (click)=\"takeOneStep(true); isFocus = true\"\n    >\n      <aui-icon icon=\"plus\"></aui-icon>\n    </button>\n    <div\n      *ngIf=\"controls && angleControls\"\n      class=\"aui-angle-container\"\n    >\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angleIncrease')\"\n        [disabled]=\"disabled || model >= max\"\n        (click)=\"takeOneStep(true); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_up\"></aui-icon>\n      </button>\n      <div class=\"separation\"></div>\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angleDecrease')\"\n        [disabled]=\"disabled || model <= min\"\n        (click)=\"takeOneStep(false); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_down\"></aui-icon>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"hasAddonAfter$ | async\"\n    [class]=\"bem.element('addon', 'after')\"\n  >\n    <ng-content select=\"[auiInputAddonAfter]\"></ng-content>\n  </div>\n</div>\n", styles: [".aui-number-input{display:flex;width:var(--aui-form-item-width-s);border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);background-color:rgb(var(--aui-color-main-bg));color:rgb(var(--aui-color-main-text));z-index:1}.aui-number-input--small{width:132px}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:26px;height:26px}.aui-number-input--small .aui-number-input__angleDecrease.aui-button,.aui-number-input--small .aui-number-input__angleIncrease.aui-button{width:26px;height:12.5px}.aui-number-input--small .aui-number-input__input{line-height:26px}.aui-number-input:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input:hover .aui-angle-container{display:flex}.aui-number-input.isFocus{border-color:rgb(var(--aui-color-primary))}:root .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-number-input.isFocus{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-number-input.isDisabled{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.isDisabled:hover{cursor:not-allowed}.aui-number-input.isDisabled .aui-number-input__input{color:rgb(var(--aui-color-n-6))}.aui-number-input.isDisabled .aui-number-input__input:hover{cursor:not-allowed}.aui-number-input.hasBefore{border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-number-input.hasAfter{border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input.hasBefore.hasAfter{border-radius:0}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{width:30px;height:30px;border-radius:0}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:0}.aui-number-input__decrease.aui-button{border-style:none solid none none}.aui-number-input__increase.aui-button{border-style:none none none solid}.aui-number-input .aui-angle-container{display:none;flex-direction:column;border-left:1px solid rgb(var(--aui-color-n-7))}.aui-number-input .aui-angle-container .separation{border-top:1px solid rgb(var(--aui-color-n-7))}.aui-number-input__angleDecrease.aui-button,.aui-number-input__angleIncrease.aui-button{width:30px;height:14.5px;border:0;border-radius:0;margin-left:0!important}.aui-number-input__angleDecrease.aui-button aui-icon,.aui-number-input__angleIncrease.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__angleDecrease.aui-button .aui-button__content,.aui-number-input__angleIncrease.aui-button .aui-button__content{padding:0}.aui-number-input__input{min-width:0;line-height:30px;border:0;margin:0;padding:0 var(--aui-spacing-m);color:rgb(var(--aui-color-main-text))}.aui-number-input__input:focus{border:0}.aui-number-input__input:focus-visible{outline:0}.aui-number-input__inner-wrapper{display:flex}.aui-number-input__addon{display:flex;align-items:center;flex-shrink:0;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-number-input__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}aui-number-input.ng-invalid.ng-dirty,.ng-submitted aui-number-input.ng-invalid{border-color:rgb(var(--aui-color-red))}\n"] }]
+                    ], template: "<div\n  [class]=\"bem.block(size)\"\n  [ngClass]=\"{\n    isFocused: isFocus,\n    isDisabled: disabled,\n    hasBefore: hasAddonBefore$ | async,\n    hasAfter: hasAddonAfter$ | async\n  }\"\n>\n  <div\n    *ngIf=\"hasAddonBefore$ | async\"\n    [class]=\"bem.element('addon', 'before')\"\n  >\n    <ng-content select=\"[auiInputAddonBefore]\"></ng-content>\n  </div>\n  <div\n    [class]=\"bem.element('inner')\"\n    auiClickOutside\n    (auiClickOutside)=\"isFocus = false\"\n  >\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('decrease')\"\n      [disabled]=\"disabled || model <= min\"\n      (click)=\"takeOneStep(false); isFocus = true\"\n    >\n      <aui-icon icon=\"minus\"></aui-icon>\n    </button>\n    <input\n      #inputRef\n      autocomplete=\"off\"\n      (change)=\"inputChanged($any($event).target.value)\"\n      [disabled]=\"disabled\"\n      [ngClass]=\"bem.element('input')\"\n      [placeholder]=\"placeholder\"\n      (focus)=\"isFocus = true\"\n      (blur)=\"isFocus = false\"\n      [ngStyle]=\"{ 'text-align': angleControls ? 'left' : 'center' }\"\n    />\n    <button\n      *ngIf=\"controls && !angleControls\"\n      aui-button\n      type=\"button\"\n      [ngClass]=\"bem.element('increase')\"\n      [disabled]=\"disabled || model >= max\"\n      (click)=\"takeOneStep(true); isFocus = true\"\n    >\n      <aui-icon icon=\"plus\"></aui-icon>\n    </button>\n    <div\n      *ngIf=\"controls && angleControls\"\n      class=\"aui-number-input__controls\"\n    >\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angle-increase')\"\n        [disabled]=\"disabled || model >= max\"\n        (click)=\"takeOneStep(true); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_up\"></aui-icon>\n      </button>\n      <button\n        aui-button\n        type=\"button\"\n        size=\"mini\"\n        [ngClass]=\"bem.element('angle-decrease')\"\n        [disabled]=\"disabled || model <= min\"\n        (click)=\"takeOneStep(false); isFocus = true\"\n      >\n        <aui-icon icon=\"angle_down\"></aui-icon>\n      </button>\n    </div>\n  </div>\n  <div\n    *ngIf=\"hasAddonAfter$ | async\"\n    [class]=\"bem.element('addon', 'after')\"\n  >\n    <ng-content select=\"[auiInputAddonAfter]\"></ng-content>\n  </div>\n</div>\n", styles: [".aui-number-input{display:inline-flex;height:var(--aui-inline-height-m);color:rgb(var(--aui-color-main-text));background-color:rgb(var(--aui-color-main-bg));border-radius:var(--aui-border-radius-m)}.aui-number-input--small{height:var(--aui-inline-height-s)}.aui-number-input--small .aui-number-input__inner{width:132px}.aui-number-input--small .aui-number-input__decrease.aui-button,.aui-number-input--small .aui-number-input__increase.aui-button{width:var(--aui-inline-height-s);height:var(--aui-inline-height-s)}.aui-number-input--small .aui-number-input__angle-decrease.aui-button,.aui-number-input--small .aui-number-input__angle-increase.aui-button{width:calc(var(--aui-inline-height-s) - 2px)}.aui-number-input__inner{display:flex;width:var(--aui-form-item-width-s);height:100%;border:1px solid rgb(var(--aui-color-n-7));border-radius:var(--aui-border-radius-m);color:inherit;background-color:inherit;z-index:1}.aui-number-input__inner:hover{border-color:rgb(var(--aui-color-primary))}.aui-number-input__input{margin:0;padding:0 var(--aui-spacing-m);min-width:0;height:100%;border:0;border-radius:inherit;background-color:inherit;color:inherit;cursor:inherit}.aui-number-input__input:focus{border:0}.aui-number-input__input:focus-visible{outline:0}.aui-number-input:hover:not(.isDisabled) .aui-number-input__inner .aui-number-input__controls{display:flex}.aui-number-input.isFocused .aui-number-input__inner{border-color:rgb(var(--aui-color-primary))}:root .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}html[aui-theme-mode=light] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.16)}@media (prefers-color-scheme: dark){html[aui-theme-mode=system] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}}html[aui-theme-mode=dark] .aui-number-input.isFocused .aui-number-input__inner{box-shadow:0 0 0 2px rgba(var(--aui-color-primary),.3)}.aui-number-input.isDisabled{cursor:not-allowed;color:rgb(var(--aui-color-disabled-text));background-color:rgb(var(--aui-color-n-8))}.aui-number-input.isDisabled .aui-number-input__inner{border:1px solid rgb(var(--aui-color-n-7))}.aui-number-input.hasBefore .aui-number-input__inner{border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}.aui-number-input.hasAfter .aui-number-input__inner{border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input.hasBefore.hasAfter .aui-number-input__inner{border-radius:0}.aui-number-input:not(.hasAfter) .aui-number-input__angle-increase.aui-button{border-top-right-radius:var(--aui-border-radius-m)}.aui-number-input:not(.hasAfter) .aui-number-input__angle-decrease.aui-button{border-bottom-right-radius:var(--aui-border-radius-m)}.aui-number-input__decrease.aui-button,.aui-number-input__increase.aui-button{margin-top:-1px;width:var(--aui-inline-height-m);height:var(--aui-inline-height-m);border-color:transparent}.aui-number-input__decrease.aui-button aui-icon,.aui-number-input__increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__decrease.aui-button .aui-button__content,.aui-number-input__increase.aui-button .aui-button__content{padding:0}.aui-number-input__decrease.aui-button{margin-left:-1px;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m);background:linear-gradient(to left,rgb(var(--aui-color-border)) 1px,transparent 1px);background-position:1px;background-repeat:no-repeat}.aui-number-input__increase.aui-button{margin-right:-1px;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0;background:linear-gradient(to right,rgb(var(--aui-color-border)) 1px,transparent 1px);background-position:-1px;background-repeat:no-repeat}.aui-number-input__controls{display:none;flex-direction:column;border-left:1px solid rgb(var(--aui-color-border));position:relative}.aui-number-input__controls:after{content:\"\";display:block;width:100%;height:1px;position:absolute;left:0;top:50%;transform:translateY(-50%);z-index:2;background-color:rgb(var(--aui-color-border))}.aui-number-input__angle-decrease.aui-button,.aui-number-input__angle-increase.aui-button{width:calc(var(--aui-inline-height-m) - 2px);height:50%;border:0;border-radius:0;margin-left:0!important}.aui-number-input__angle-decrease.aui-button:focus,.aui-number-input__angle-increase.aui-button:focus{z-index:1}.aui-number-input__angle-decrease.aui-button aui-icon,.aui-number-input__angle-increase.aui-button aui-icon{font-size:var(--aui-font-size-s)}.aui-number-input__angle-decrease.aui-button .aui-button__content,.aui-number-input__angle-increase.aui-button .aui-button__content{padding:0}.aui-number-input__addon{display:flex;align-items:center;flex-shrink:0;padding:0 var(--aui-inline-padding-xs);border:1px solid rgb(var(--aui-color-n-7));background-color:rgb(var(--aui-color-n-8))}.aui-number-input__addon--before{border-right:none;border-radius:var(--aui-border-radius-m) 0 0 var(--aui-border-radius-m)}.aui-number-input__addon--after{border-left:none;border-radius:0 var(--aui-border-radius-m) var(--aui-border-radius-m) 0}aui-number-input.ng-invalid.ng-dirty,.ng-submitted aui-number-input.ng-invalid{border-color:rgb(var(--aui-color-red))}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], min: [{