chrome/browser/resources/welcome/shared/step_indicator.ts

// Copyright 2018 The Chromium Authors
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

/**
 * @fileoverview This element contains a set of SVGs that together acts as an
 * animated and responsive background for any page that contains it.
 */

import {I18nMixinLit} from 'chrome://resources/cr_elements/i18n_mixin_lit.js';
import {assert} from 'chrome://resources/js/assert.js';
import {CrLitElement} from 'chrome://resources/lit/v3_0/lit.rollup.js';
import type {PropertyValues} from 'chrome://resources/lit/v3_0/lit.rollup.js';

import type {StepIndicatorModel} from './nux_types.js';
import {getCss} from './step_indicator.css.js';
import {getHtml} from './step_indicator.html.js';

const StepIndicatorElementBase = I18nMixinLit(CrLitElement);

export class StepIndicatorElement extends StepIndicatorElementBase {
  static get is() {
    return 'step-indicator';
  }

  static override get styles() {
    return getCss();
  }

  override render() {
    return getHtml.bind(this)();
  }

  static override get properties() {
    return {
      model: {type: Object},
      dots_: {type: Array},
    };
  }

  model?: StepIndicatorModel;
  protected dots_: number[] = [];

  override willUpdate(changedProperties: PropertyValues<this>) {
    super.willUpdate(changedProperties);

    if (changedProperties.has('model')) {
      this.dots_ = this.computeDots_();
    }
  }

  protected getLabel_(): string {
    return this.model ?
        this.i18n('stepsLabel', this.model!.active + 1, this.model!.total) :
        '';
  }

  private computeDots_(): number[] {
    assert(this.model);
    // If total is 1, show nothing.
    const array: number[] = new Array(this.model.total > 1 ? this.model.total : 0);
    array.fill(0);
    return array;
  }

  protected getActiveClass_(index: number): string {
    assert(this.model);
    return index === this.model.active ? 'active' : '';
  }
}

customElements.define(StepIndicatorElement.is, StepIndicatorElement);