chromium/ui/webui/resources/cr_elements/cr_loading_gradient/cr_loading_gradient.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 {assert} from '//resources/js/assert.js';
import {CrLitElement} from '//resources/lit/v3_0/lit.rollup.js';

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

/* Count of cr-loading-gradient elements created. Used to assign unique IDs.
 * Unique IDs are necessary since clipPaths are slotted in from the light DOM,
 * so there can be leakages across multiple <cr-loading-gradient> instances. */
let count = 0;

export class CrLoadingGradientElement extends CrLitElement {
  static get is() {
    return 'cr-loading-gradient';
  }

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

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

  protected onSlotchange_() {
    const clipPath = this.querySelector('svg clipPath');
    assert(clipPath);
    const generatedId = `crLoadingGradient${count++}`;
    clipPath.id = generatedId;
    this.style.clipPath = `url(#${generatedId})`;
  }
}

declare global {
  interface HTMLElementTagNameMap {
    'cr-loading-gradient': CrLoadingGradientElement;
  }
}

customElements.define(CrLoadingGradientElement.is, CrLoadingGradientElement);