chromium/chrome/browser/resources/webui_gallery/demos/side_panel/sp_components_demo.ts

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

import '//resources/cr_elements/icons_lit.html.js';
import '//resources/cr_elements/cr_button/cr_button.js';
import '//resources/cr_elements/cr_checkbox/cr_checkbox.js';
import '//resources/cr_elements/cr_icon/cr_icon.js';
import '//resources/cr_elements/cr_icon_button/cr_icon_button.js';
import '//resources/cr_elements/cr_slider/cr_slider.js';
import '//resources/cr_elements/cr_url_list_item/cr_url_list_item.js';
import '//webui-gallery/shared/sp_empty_state.js';
import '//webui-gallery/shared/sp_footer.js';
import '//webui-gallery/shared/sp_heading.js';
import '//webui-gallery/shared/sp_icons.html.js';
import '//webui-gallery/shared/sp_list_item_badge.js';

import type {CrSliderElement} from '//resources/cr_elements/cr_slider/cr_slider.js';
import {CrUrlListItemSize} from '//resources/cr_elements/cr_url_list_item/cr_url_list_item.js';
import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';
import type {PropertyValues} from '//resources/lit/v3_0/lit.rollup.js';

import {getCss} from './sp_components_demo.css.js';
import {getHtml} from './sp_components_demo.html.js';

interface UrlItem {
  title: string;
  url: string;
}

export interface SpComponentsDemoElement {
  $: {
    itemSizeSelect: HTMLSelectElement,
    urlCountSlider: CrSliderElement,
  };
}

export class SpComponentsDemoElement extends CrLitElement {
  static get is() {
    return 'sp-components-demo';
  }

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

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

  static override get properties() {
    return {
      hideBackButton_: {type: Boolean},
      itemSize_: {type: String},
      itemSizeOptions_: {type: Array},
      showBadges_: {type: Boolean},
      urlCount_: {type: Number},
      urls_: {type: Array},
    };
  }

  protected hideBackButton_: boolean = true;
  protected itemSize_: CrUrlListItemSize = CrUrlListItemSize.COMPACT;
  protected itemSizeOptions_: CrUrlListItemSize[] = [
    CrUrlListItemSize.COMPACT,
    CrUrlListItemSize.MEDIUM,
    CrUrlListItemSize.LARGE,
  ];
  protected showBadges_: boolean = false;
  protected urlCount_: number = 15;
  protected urls_: UrlItem[] = [];

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

    const changedPrivateProperties =
        changedProperties as Map<PropertyKey, unknown>;

    if (changedPrivateProperties.has('urlCount_')) {
      this.urls_ = this.computeUrls_();
    }
  }

  private computeUrls_(): UrlItem[] {
    const urls: UrlItem[] = [];
    for (let i = 0; i < this.urlCount_; i++) {
      urls.push({
        title: 'Google',
        url: 'http://www.google.com',
      });
    }
    return urls;
  }

  protected onItemSizeChanged_() {
    this.itemSize_ = this.$.itemSizeSelect.value as CrUrlListItemSize;
  }

  protected onUrlCountChanged_() {
    this.urlCount_ = this.$.urlCountSlider.value;
  }

  protected onHideBackButtonChanged_(e: CustomEvent<{value: boolean}>) {
    this.hideBackButton_ = e.detail.value;
  }

  protected onShowBadgesChanged_(e: CustomEvent<{value: boolean}>) {
    this.showBadges_ = e.detail.value;
  }
}

export const tagName = SpComponentsDemoElement.is;

customElements.define(SpComponentsDemoElement.is, SpComponentsDemoElement);