digitalmarketplace-frontend/dist/digitalmarketplace/components/question-list-multiquestion-client-side/question-list-multiquestion-client-side.bundle.mjs

Digital Marketplace Frontend contains assets and components used in Digital Marketplace projects

class QuestionListMultiquestionQuestionInput {
    $question;
    canHideQuestion;
    constructor($question) {
        this.$question = $question;
        this.canHideQuestion = this.$question.hasClass('js-hidden');
    }
    toggleVisibility(isShown) {
        if (isShown) {
            this.showInput();
        }
        else {
            this.hideInput();
            this.hideQuestion();
        }
    }
    hideQuestion() {
        if (this.canHideQuestion) {
            this.$question.toggleClass('govuk-visually-hidden', true);
            this.$question.attr('aria-hidden', 'true');
            this.$question.attr('hidden', '');
        }
    }
}
class QuestionListMultiquestionQuestionInputWithField extends QuestionListMultiquestionQuestionInput {
    $input;
    constructor($question, $input) {
        super($question);
        this.$input = $input;
    }
    hasValue() {
        return !!this.$input.val();
    }
    showInput() {
        this.$input.removeAttr('tabindex');
    }
    hideInput() {
        this.$input.val('');
        this.$input.attr('value', '');
        this.$input.attr('tabindex', -1);
    }
    focusOnInput() {
        this.$input.focus();
    }
}
class QuestionListMultiquestionQuestionInputWithItems extends QuestionListMultiquestionQuestionInput {
    inputs;
    constructor($question, inputs) {
        super($question);
        this.inputs = inputs;
    }
    hasValue() {
        return this.inputs.some($input => $input.is(':checked'));
    }
    showInput() {
        this.inputs.forEach($input => $input.removeAttr('tabindex'));
    }
    hideInput() {
        this.inputs.forEach(($input) => {
            $input.prop('checked', false);
            $input.attr('tabindex', -1);
        });
    }
    focusOnInput() {
        this.inputs[0].focus();
    }
}
class QuestionListMultiquestionQuestionInputFactory {
    static getQuestionListMultiquestionQuestionInput($question) {
        const inputs = $question.find('input').get().map((input) => $(input));
        if (inputs.length == 1) {
            return new QuestionListMultiquestionQuestionInputWithField($question, inputs[0]);
        }
        else {
            return new QuestionListMultiquestionQuestionInputWithItems($question, inputs);
        }
    }
}
class QuestionListMultiquestionRow {
    answerList;
    $row;
    answerListRowInputs;
    constructor(answerList, $row) {
        this.answerList = answerList;
        this.$row = $row;
        this.answerListRowInputs = $row.find('.question').get().map((question) => QuestionListMultiquestionQuestionInputFactory.getQuestionListMultiquestionQuestionInput($(question)));
    }
    toggleVisibility(isShown) {
        this.$row.toggleClass('govuk-visually-hidden', !isShown);
        this.answerListRowInputs.forEach((answerListRowInput) => answerListRowInput.toggleVisibility(isShown));
    }
    isRowVisible() {
        return !this.$row.hasClass('govuk-visually-hidden');
    }
    rowHasValues() {
        return this.answerListRowInputs.some((answerListRowInput) => answerListRowInput.hasValue());
    }
}
class QuestionListMultiquestionButton {
    answerList;
    $button;
    $buttonCounter;
    constructor(answerList, $button, buttonType) {
        this.answerList = answerList;
        this.$button = $button;
        this.$buttonCounter = $button.find(`.dm-list-multiquestion__item-${buttonType}-counter`);
    }
    updateButtonText(numberOfRows) {
        this.$buttonCounter.text(numberOfRows);
    }
    toggleVisibility(isShown) {
        this.$button.toggleClass('govuk-visually-hidden', !isShown);
        if (isShown) {
            this.$button.removeAttr('tabindex');
        }
        else {
            this.$button.attr('tabindex', -1);
        }
    }
}
class QuestionListMultiquestionRemoveButton extends QuestionListMultiquestionButton {
    constructor(answerList, $button) {
        super(answerList, $button, 'remove');
    }
    init(numberOfRows) {
        this.$button.on('click', () => {
            this.answerList.hideRow();
        });
        this.updateButtonText(numberOfRows);
    }
}
class QuestionListMultiquestionAddButton extends QuestionListMultiquestionButton {
    maxNumberOfItems;
    constructor(answerList, $button, maxNumberOfItems) {
        super(answerList, $button, 'add');
        this.maxNumberOfItems = maxNumberOfItems;
    }
    init(numberOfRows) {
        this.$button.on('click', () => {
            this.answerList.addRow();
        });
        this.updateButtonText(this.maxNumberOfItems - numberOfRows);
    }
}
class QuestionListMultiquestionClientSide {
    static moduleName = 'dm-question-list-multiquestion-client-side';
    $answerList;
    maxNumberOfItems;
    answerListRows;
    answerListAddButton;
    answerListRemoveButton;
    constructor($answerList) {
        this.$answerList = $answerList;
        this.maxNumberOfItems = this.$answerList.data('maxNumberOfItems');
        this.answerListRows = this.$answerList.find('.dm-list-multiquestion__item').get().map((row) => new QuestionListMultiquestionRow(this, $(row)));
        this.answerListAddButton = new QuestionListMultiquestionAddButton(this, this.$answerList.find('.dm-list-multiquestion__item-add'), this.maxNumberOfItems);
        this.answerListRemoveButton = new QuestionListMultiquestionRemoveButton(this, this.$answerList.find('.dm-list-multiquestion__item-remove'));
    }
    init() {
        const rowsVisible = this.answerListRows.map((answerListRow) => answerListRow.rowHasValues());
        let indexToHideFrom = -1;
        if (rowsVisible.every((rowVisible) => !rowVisible)) {
            indexToHideFrom = 1;
        }
        else {
            let previousRowVisible = true;
            rowsVisible.forEach((rowVisible, index) => {
                if (previousRowVisible && !rowVisible) {
                    indexToHideFrom = index;
                }
                previousRowVisible = rowVisible;
            });
        }
        if (indexToHideFrom >= 0) {
            this.answerListRows.slice(indexToHideFrom).forEach((answerListRow) => answerListRow.toggleVisibility(false));
        }
        const numberOfRows = this.visibleRowsCount();
        this.answerListAddButton.init(numberOfRows);
        this.answerListRemoveButton.init(numberOfRows);
        this.updateRemoveButton(numberOfRows);
        this.updateAnswerButton(numberOfRows);
    }
    hideRow() {
        const numberOfRows = this.visibleRowsCount();
        if (numberOfRows > 1) {
            this.answerListRows[numberOfRows - 1].toggleVisibility(false);
            this.updateRemoveButton(numberOfRows - 1);
            this.updateAnswerButton(numberOfRows - 1);
            this.focusOnRow(numberOfRows - 1);
        }
    }
    addRow() {
        const numberOfRows = this.visibleRowsCount();
        if (numberOfRows < this.maxNumberOfItems) {
            this.answerListRows[numberOfRows].toggleVisibility(true);
            this.updateRemoveButton(numberOfRows + 1);
            this.updateAnswerButton(numberOfRows + 1);
            this.focusOnRow(numberOfRows + 1);
        }
    }
    visibleRowsCount() {
        return this.answerListRows.reduce((count, answerListRow) => count += answerListRow.isRowVisible() ? 1 : 0, 0);
    }
    updateRemoveButton(numberOfRows) {
        if (numberOfRows === 1) {
            this.answerListRemoveButton.toggleVisibility(false);
        }
        else {
            this.answerListRemoveButton.toggleVisibility(true);
            this.answerListRemoveButton.updateButtonText(numberOfRows);
        }
    }
    updateAnswerButton(numberOfRows) {
        if (numberOfRows === this.maxNumberOfItems) {
            this.answerListAddButton.toggleVisibility(false);
        }
        else {
            this.answerListAddButton.toggleVisibility(true);
            this.answerListAddButton.updateButtonText(this.maxNumberOfItems - numberOfRows);
        }
    }
    focusOnRow(numberOfRows) {
        this.answerListRows[numberOfRows - 1].answerListRowInputs[0].focusOnInput();
    }
}

export { QuestionListMultiquestionClientSide };
//# sourceMappingURL=question-list-multiquestion-client-side.bundle.mjs.map