<commit_before><template lang="jade">
    .FAQ
        .FAQ-left-part
        .FAQ-themes
            .FAQ-theme(v-bind:class="{active: isThemeActive(theme)}" v-for="(questions, theme, index) in themes", :style="themeStyle[theme]", ref="theme", v-on:click="selectTheme(theme)")
                .FAQ-theme-title-number(v-if="!isWidthCompact", :is="svgComponent('BulletTransparentWhite' + (index + 1))")
                .FAQ-theme-title
                    .FAQ-theme-title-label(v-html="theme")
                    .FAQ-theme-title-picto(:is="svgComponent(isThemeActive(theme) ? 'IconCircledArrowUp' : 'IconCircledArrowDown')")
                .FAQ-theme-questions
                    .FAQ-theme-question(v-for="question in questions")
                        .FAQ-theme-question-title(v-html="question.title")
                        .FAQ-theme-question-body(v-html="question.answer")
            CTAButton.FAQ-question-button(:label="questionButtonLabel", :link="'mailto:<EMAIL>'", :newTab="false", :type="'primary'")
</template>

<script>
    import { nextTick } from 'vue';
    import _ from 'lodash';
    import { domHeight } from '@alexistessier/dom';

    import CTAButton from 'components/CTAButton';

    import { mixin as fontLoader } from 'tools/font-loader';
    import { mixin as svgComponent } from 'tools/svg-component';
    import { mixin as sizeClassHelper } from 'tools/size-class-helper';
    import { mixin as scrollController } from 'tools/scroll-controller';

    import animatedScrollTo from 'xebia-web-common/tools/animated-scroll-to';
    import centralEventBus from 'xebia-web-common/tools/central-event-bus';

    export default {
        name: 'FAQ',
        mixins: [fontLoader, svgComponent, sizeClassHelper, scrollController],
        props: {
            themes: {
                type: Object,
                required: true
            },
            questionButtonLabel: {
                type: String,
                required: true
            }
        },
        data: function () {
            return {
                isWidthCompact: this.getSizeClassHelper().isActive('width-compact'),
                themeStyle: _.mapValues(this.themes, () => undefined),
                selectedThemeLabel: _.keys(this.themes)[0]
            };
        },
        methods: {
            isThemeActive: function (themeLabel) {
                return _.isEqual(themeLabel, this.selectedThemeLabel);
            },
            selectTheme: function (themeLabel) {
                this.selectedThemeLabel = themeLabel;
            },
            updateLayoutOnResize: function () {
                const temporaryThemeStyle = {};
                _.keys(this.themes).forEach((themeLabel) => {
                    this.themeStyle[themeLabel] = {height: 'auto'};
                });
                nextTick(() => {
                    if(this.$refs.theme) {
                        _.keys(this.themes).forEach((themeLabel, index) => {
                            temporaryThemeStyle[themeLabel] = {height: domHeight(this.$refs.theme[index])+'px'};
                            this.themeStyle = _.mapValues(this.themes, () => {return {height: undefined};});
                        });
                    }
                    requestAnimationFrame(() => {
                        this.themeStyle = _.cloneDeep(temporaryThemeStyle);
                    });
                });
            }
        },
        computed: {
            selectedThemeIndex: function () {
                const selectedThemeIndex = -1;
                for(const themeLabel in this.themes) {
                    if(this.isThemeActive(themeLabel)) {
                        return _.indexOf(_.keys(this.themes), themeLabel);
                    }
                }
                return selectedThemeIndex;
            }
        },
        created: function () {
            this.loadFont({
                'text': ['light', 'regular', 'bold'],
                'title': ['light', 'bold']
            });
            this.getSizeClassHelper().on('resize', () => {<commit_msg>Fix style array assignment for FAQ component<commit_after><template lang="jade">
    .FAQ
        .FAQ-left-part
        .FAQ-themes
            .FAQ-theme(v-bind:class="{active: isThemeActive(theme)}" v-for="(questions, theme, index) in themes", :style="themeStyle[theme]", ref="theme", v-on:click="selectTheme(theme)")
                .FAQ-theme-title-number(v-if="!isWidthCompact", :is="svgComponent('BulletTransparentWhite' + (index + 1))")
                .FAQ-theme-title
                    .FAQ-theme-title-label(v-html="theme")
                    .FAQ-theme-title-picto(:is="svgComponent(isThemeActive(theme) ? 'IconCircledArrowUp' : 'IconCircledArrowDown')")
                .FAQ-theme-questions
                    .FAQ-theme-question(v-for="question in questions")
                        .FAQ-theme-question-title(v-html="question.title")
                        .FAQ-theme-question-body(v-html="question.answer")
            CTAButton.FAQ-question-button(:label="questionButtonLabel", :link="'mailto:<EMAIL>'", :newTab="false", :type="'primary'")
</template>

<script>
    import { nextTick } from 'vue';
    import _ from 'lodash';
    import { domHeight } from '@alexistessier/dom';

    import CTAButton from 'components/CTAButton';

    import { mixin as fontLoader } from 'tools/font-loader';
    import { mixin as svgComponent } from 'tools/svg-component';
    import { mixin as sizeClassHelper } from 'tools/size-class-helper';
    import { mixin as scrollController } from 'tools/scroll-controller';

    import animatedScrollTo from 'xebia-web-common/tools/animated-scroll-to';
    import centralEventBus from 'xebia-web-common/tools/central-event-bus';

    export default {
        name: 'FAQ',
        mixins: [fontLoader, svgComponent, sizeClassHelper, scrollController],
        props: {
            themes: {
                type: Object,
                required: true
            },
            questionButtonLabel: {
                type: String,
                required: true
            }
        },
        data: function () {
            return {
                isWidthCompact: this.getSizeClassHelper().isActive('width-compact'),
                themeStyle: _.mapValues(this.themes, () => undefined),
                selectedThemeLabel: _.keys(this.themes)[0]
            };
        },
        methods: {
            isThemeActive: function (themeLabel) {
                return _.isEqual(themeLabel, this.selectedThemeLabel);
            },
            selectTheme: function (themeLabel) {
                this.selectedThemeLabel = themeLabel;
            },
            updateLayoutOnResize: function () {
                const temporaryThemeStyle = {};
                _.keys(this.themes).forEach((themeLabel) => {
                    this.themeStyle[themeLabel] = {height: 'auto'};
                });
                nextTick(() => {
                    if(this.$refs.theme) {
                        _.keys(this.themes).forEach((themeLabel, index) => {
                            temporaryThemeStyle[themeLabel] = {height: domHeight(this.$refs.theme[index])+'px'};
                            this.themeStyle = _.mapValues(this.themes, () => {return {height: undefined};});
                        });
                    }
                    requestAnimationFrame(() => {
                        this.themeStyle = temporaryThemeStyle;
                    });
                });
            }
        },
        computed: {
            selectedThemeIndex: function () {
                const selectedThemeIndex = -1;
                for(const themeLabel in this.themes) {
                    if(this.isThemeActive(themeLabel)) {
                        return _.indexOf(_.keys(this.themes), themeLabel);
                    }
                }
                return selectedThemeIndex;
            }
        },
        created: function () {
            this.loadFont({
                'text': ['light', 'regular', 'bold'],
                'title': ['light', 'bold']
            });
            this.getSizeClassHelper().on('resize', () => {
{'fraction_non_alphanumeric': 0.13069573738363546, 'fraction_numerical': 0.0007349338559529642, 'mean_word_length': 1.6893939393939394, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 25, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7432202', 'n_tokens_mistral': 2215, 'n_tokens_neox': 2099, 'n_words': 356}