Copy environment

Number Input 

<div class="number-input js-number-input">

    <label class="number-input__label" for="product-amount">Renditava toote arv</label>

    <button class="number-input__change number-input__change--disabled js-number-input-decrease" type="button" aria-label="Vähenda kogust">
        <span class="number-input__sign number-input__sign--horizontal"></span>
    </button>

    <input id="product-amount" class="number-input__input js-number-input-field" type="number" value="1" max="99" min="1" step="1" inputmode="numeric">

    <button class="number-input__change js-number-input-increase" type="button" aria-label="Suurenda kogust">
        <span class="number-input__sign number-input__sign--vertical"></span>
        <span class="number-input__sign number-input__sign--horizontal"></span>
    </button>
</div>
 
<div class="number-input js-number-input">

    <label class="number-input__label" for="product-amount">Renditava toote arv</label>

    <button class="number-input__change number-input__change--disabled js-number-input-decrease" type="button" aria-label="Vähenda kogust">
        <span class="number-input__sign number-input__sign--horizontal"></span>
    </button>

    <input
        id="product-amount"
        class="number-input__input js-number-input-field"
        type="number"
        value="1"
        max="99"
        min="1"
        step="1"
        inputmode="numeric"
    >

    <button class="number-input__change js-number-input-increase" type="button" aria-label="Suurenda kogust">
        <span class="number-input__sign number-input__sign--vertical"></span>
        <span class="number-input__sign number-input__sign--horizontal"></span>
    </button>
</div>

{
  "language": "en-US"
}
  • Content: 
    .number-input {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    > * {
        margin-right: 16px;

        &:last-child {
            margin-right: 0;
        }
    }
}

.number-input__label {
    width: 100%;
    font-size: $font-size-small;
    color: $L-text-black;
    margin-bottom: 8px;
}

.number-input__change {
    height: 32px;
    width: 32px;
    background: $L-background;
    border-radius: $border-radius-small;
    box-shadow: $elevation-01;
    position: relative;
    cursor: pointer;
    border: none;

    > * {
        background: $L-background-strong;
    }

    &:hover {
        background: $L-background-hover;
    }
}

.number-input__change.number-input__change--disabled {
    background: $L-background-disabled;
    box-shadow: none;

    > * {
        background: $L-icon-disabled;
    }
}

.number-input__input {
    background: $L-background;
    height: 32px;
    width: 32px;
    font-size: $font-size-base;
    color: $L-text-strong;
    border: none;
    box-shadow: $elevation-01;
    border-radius: $border-radius-small;
    text-align: center;
    -moz-appearance: textfield;

    &::-webkit-outer-spin-button,
    &::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }
}

.number-input__sign {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}

.number-input__sign--horizontal {
    height: 2px;
    width: 8px;
}

.number-input__sign--vertical {
    height: 8px;
    width: 2px;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
  • URL: /components/raw/number-input/number-input.scss
  • Filesystem Path: src/patterns/components/forms/number-input/number-input.scss
  • Size: 1.7 KB
  • Content: 
    import './number-input.scss';

import Component from '../../component/component';

export default class NumberInput extends Component {
    static initSelector: string = '.js-number-input';

    decreaseInput: HTMLElement;
    increaseInput: HTMLElement;
    numberInput: HTMLInputElement;
    el: HTMLElement;

    constructor(target: HTMLElement) {
        super(target);

        this.numberInput = target.querySelector('.js-number-input-field');
        this.decreaseInput = target.querySelector('.js-number-input-decrease');
        this.increaseInput = target.querySelector('.js-number-input-increase');

        this.init();
    }

    changeInputValue(isIncreasing: boolean): void {
        if (!this.numberInput.value) {
            this.numberInput.value = '1';
        }
        if (isIncreasing) {
            const newValue: number = parseInt(this.numberInput.value) + 1;

            this.numberInput.value = newValue.toString();
            this.numberInput.setAttribute('value', newValue.toString());
            this.decreaseInput.classList.remove('number-input__change--disabled');
        } else {
            const newValue: number = parseInt(this.numberInput.value) - 1;

            if (newValue <= 1) {
                this.decreaseInput.classList.add('number-input__change--disabled');
                this.numberInput.setAttribute('value', '1');
                this.numberInput.value = '1';
            } else {
                this.numberInput.value = newValue.toString();
                this.numberInput.setAttribute('value', newValue.toString());
            }
        }
    }

    init(): void {
        this.numberInput.addEventListener('change', () => {
            this.numberInput.setAttribute('value', this.numberInput.value.toString());
        });

        this.decreaseInput.addEventListener('click', () => {
            this.changeInputValue(false);
        });

        this.increaseInput.addEventListener('click', () => {
            this.changeInputValue(true);
        });
    }
}
  • URL: /components/raw/number-input/number-input.ts
  • Filesystem Path: src/patterns/components/forms/number-input/number-input.ts
  • Size: 2 KB
  • Handle: @number-input--default
  • Filesystem Path: src/patterns/components/forms/number-input/number-input.twig
  • Referenced by (1): @pickup-method