EVOMRKT-8582: Вынести evo-quantity из админки (v7)

projects/evo-ui-kit/src/lib/components/evo-quantity/enums/input-mode.ts

@@ -0,0 +1,9 @@
+/**
+ * Режим ввода для компонента evo-quantity
+ */
+export enum InputMode {
+    /** Значение обновляется только при завершении ручного ввода (confirm/cancel) */
+    MANUAL = 'MANUAL',
+    /** Значение обновляется при нажатии на кнопки +/- */
+    PER_BUTTONS = 'PER_BUTTONS',
+}

projects/evo-ui-kit/src/lib/components/evo-quantity/evo-quantity.component.html

@@ -0,0 +1,67 @@
+<div class="evo-quantity">
+    <div
+        class="evo-quantity__wrap"
+        [ngClass]="wrapClasses"
+        (evoClickOutside)="onClickOutside()"
+    >
+        <div class="evo-quantity__control-wrap">
+            <ng-container *ngIf="mode === InputMode.PER_BUTTONS">
+                <!--
+                  there will be trash btn if quantity set to minimum and isDeletable === true
+                  p.s. isDeletable is false by default
+                -->
+                <button
+                    *ngIf="control.value > min || !isDeletable"
+                    class="evo-quantity__control"
+                    [disabled]="control.value <= min || control.disabled"
+                    (click)="onChangeValueByStepClick(-1 * step)"
+                >
+                    <evo-icon shape="minus" class="evo-quantity__control-icon"></evo-icon>
+                </button>
+                <button
+                    *ngIf="isDeletable && control.value <= min"
+                    class="evo-quantity__control"
+                    [disabled]="control.disabled"
+                    (click)="onDeleteBtnClick()"
+                >
+                    <evo-icon shape="delete" class="evo-quantity__control-icon"></evo-icon>
+                </button>
+            </ng-container>
+        </div>
+        <input
+            #inputElement
+            type="number"
+            step="1"
+            class="evo-quantity__field"
+            [class.evo-quantity__field_error]="control.invalid"
+            [class.evo-quantity__field_disabled]="control.disabled"
+            [readonly]="!isInputAllowed || control.disabled"
+            [formControl]="control"
+            [min]="min"
+            [max]="max"
+            (focus)="onInputFocus()"
+        />
+        <div class="evo-quantity__control-wrap">
+            <button
+                *ngIf="mode === InputMode.PER_BUTTONS"
+                class="evo-quantity__control"
+                [disabled]="control.value >= max || control.disabled"
+                (click)="onChangeValueByStepClick(step)"
+            >
+                <evo-icon shape="plus" class="evo-quantity__control-icon"></evo-icon>
+            </button>
+
+            <button
+                *ngIf="mode === InputMode.MANUAL"
+                class="evo-quantity__control"
+                (click)="onFinishManualModeBtnClick()"
+            >
+                <evo-icon shape="check-rounded" class="evo-quantity__control-icon"></evo-icon>
+            </button>
+        </div>
+    </div>
+
+    <div *ngIf="!!pricePerOne && !control.disabled" class="evo-quantity__hint">
+        {{ pricePerOne | currency:'RUB':'symbol':'1.0-0':'ru' }}/шт.
+    </div>
+</div>

projects/evo-ui-kit/src/lib/components/evo-quantity/evo-quantity.component.scss

@@ -0,0 +1,106 @@
+@import '../../styles/mixins';
+
+.evo-quantity {
+    $root: &;
+
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+
+    &__wrap {
+        display: flex;
+        justify-content: space-between;
+        gap: 4px;
+
+        width: 100%;
+        background: $color-white;
+        border-radius: 32px;
+
+        // Sizes
+        &_size-normal {
+            height: 40px;
+            padding: 0 8px;
+        }
+
+        &_size-small {
+            height: 32px;
+            padding: 0 4px;
+        }
+
+        // Themes
+        &_theme-default {
+            border: 1px solid $color-disabled;
+        }
+
+        &_theme-borderless {
+            border: none;
+        }
+
+        &_error#{&}_theme-default {
+            border-color: $color-error;
+        }
+    }
+
+    &__control-wrap {
+        flex: 0 0 24px;
+        width: 24px;
+        height: 24px;
+
+        align-self: center;
+    }
+
+    &__control {
+        width: 24px;
+        height: 24px;
+        padding: 0;
+
+        background: none;
+        border: none;
+
+        &:disabled #{$root}__control-icon {
+            fill: $color-disabled;
+        }
+    }
+
+    &__control-icon {
+        width: 100%;
+        height: 100%;
+        fill: $color-icon-dark;
+    }
+
+    &__field {
+        flex: 1 1 auto;
+        min-width: 0;
+
+        font-weight: 600;
+        font-size: 16px;
+        text-align: center;
+        border: none;
+
+        &_error {
+            color: $color-error;
+        }
+
+        &_disabled {
+            color: $color-disabled;
+        }
+
+        -moz-appearance:textfield; /* Firefox */
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            /* display: none; <- Crashes Chrome on hover */
+            -webkit-appearance: none;
+            margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+        }
+    }
+
+    &__hint {
+        flex: 0 0 auto;
+        margin-top: 4px;
+        color: $color-caption-text;
+
+        font-size: 12px;
+        line-height: 18px;
+    }
+}