@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/BulkWorkflow.ts

@@ -1,110 +0,0 @@
-import onFind from './dom/onFind'
-import create from './dom/create'
-import Cookies from 'js-cookie'
-import Tether from './dom/Tether'
-import getZindex from './main/webapp/script/v3/plugin/popup'
-
-onFind('.BulkWorkflow-button', (button: HTMLElement) => {
-  let workflowActions: HTMLElement | null = null
-
-  button.addEventListener('keydown', (event) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault()
-      button.click()
-    }
-  })
-
-  button.addEventListener('click', async (event) => {
-    event.preventDefault()
-    event.stopPropagation()
-
-    const target = event.target
-    let url
-
-    if (target instanceof HTMLElement) {
-      url = target.getAttribute('action-url')
-    }
-
-    if (!url) {
-      return
-    }
-
-    if (!workflowActions) {
-      const headers = new Headers()
-      const cookie = Cookies.get('bsp.csrf')
-
-      if (cookie) {
-        headers.append('Brightspot-CSRF', cookie)
-      }
-
-      const response = await fetch(url, { headers })
-
-      const body = await response.text()
-
-      workflowActions = create('div', {
-        className: 'BulkWorkflow',
-        innerHTML: body,
-        role: 'dialog',
-        'aria-modal': 'true',
-      })
-
-      document.body.appendChild(workflowActions)
-
-      workflowActions.addEventListener('keydown', (e) => {
-        if (e.key === 'Escape') {
-          e.stopPropagation()
-
-          const closeButton =
-            workflowActions?.querySelector<HTMLElement>('.closeButton')
-          if (closeButton) {
-            closeButton.click()
-          }
-        }
-      })
-    }
-
-    const popup = button.closest('.Popup')
-    if (popup) {
-      workflowActions.style.zIndex = getZindex().toString()
-    }
-
-    Tether.toggle(button, workflowActions, () => {
-      const isOpen = button.classList.toggle('is-open')
-      workflowActions?.classList.toggle('is-open')
-
-      if (isOpen) {
-        requestAnimationFrame(() => {
-          const firstFocusableElement =
-            workflowActions?.querySelector<HTMLElement>('.closeButton')
-          if (firstFocusableElement) {
-            firstFocusableElement.focus()
-          }
-        })
-      }
-      return isOpen
-    })
-
-    const closeButton =
-      workflowActions.querySelector<HTMLElement>('.closeButton')
-
-    closeButton?.addEventListener('click', () => {
-      const t = Tether.toggles.get(button)
-
-      if (t && t.closeListener) {
-        window.removeEventListener('click', t.closeListener, true)
-      }
-
-      button.classList.remove('is-open')
-      workflowActions?.classList.remove('is-open')
-      workflowActions?.remove()
-      workflowActions = null
-
-      const searchToggle = button
-        .closest('.SearchResult')
-        ?.querySelector<HTMLElement>('.SearchResult-actions-toggle')
-      if (searchToggle) {
-        searchToggle.focus()
-      }
-    })
-  })
-})

package/src/legacy/tool-ui/src/BulletedList.css

@@ -1,11 +0,0 @@
-.BulletedList {
-  @apply list-inside;
-
-  > li {
-    @apply list-disc py-2 text-sm text-gray-900;
-  }
-
-  > li.is-selected {
-    @apply bg-primary-50;
-  }
-}

package/src/legacy/tool-ui/src/CIGCluster/README.md

@@ -1,32 +0,0 @@
-# CIGCluster Web Component
-
-This is a web component that groups CIG rows together into a cluster. It also creates a title for the cluster that handles sticky expand/collapse behavior. Note that the cluster will be hidden if it does not have rows or if all rows are empty.
-
-## Examples
-
-HTML
-
-```html
-<btu-cig-cluster cluster-title="Example Title" tab="Main">
-  <div class="CIG-row" data-tab="Main">
-    <div class="CIG-small">Example Field 1</div>
-  </div>
-  <div class="CIG-row" data-tab="Main">
-    <div class="CIG-small">Example Field 2</div>
-  </div>
-</btu-cig-cluster>
-```
-
-## Properties
-
-| Name           | Type   | Description                                                    |
-| -------------- | ------ | -------------------------------------------------------------- |
-| `clusterTitle` | string | The text used for the title of the cluster.                    |
-| `tab`          | string | The name of the tab container that the cluster is assigned to. |
-
-## States
-
-| Name           | Description                                                                                          |
-| -------------- | ---------------------------------------------------------------------------------------------------- |
-| `btu-error`    | Indicates an error in one of the cluster's fields. For example, a blank entry into a required field. |
-| `btu-expanded` | Indicates that the cluster container is in the expanded state. Otherwise the cluster is collapsed.   |

package/src/legacy/tool-ui/src/CIGCluster/index.ts

@@ -1,144 +0,0 @@
-import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ComponentStatesMixin } from '../ComponentStatesMixin'
-import { EventEmitterMixin } from '../EventEmitterMixin'
-import ifUnmodified from '../dom/ifUnmodified'
-
-const ls = window.localStorage
-const collapseTooltip = window.BRIGHTSPOT?.ui.tooltips.collapse
-const expandTooltip = window.BRIGHTSPOT?.ui.tooltips.expand
-
-@customElement('btu-cig-cluster')
-export default class CIGCluster extends ComponentStatesMixin(
-  EventEmitterMixin(LitElement),
-) {
-  private _collapsed = true
-
-  @property({ type: String, reflect: true, attribute: 'cluster-title' })
-  clusterTitle?: string
-
-  @property({ type: String })
-  tab?: string
-
-  @property()
-  set collapsed(isCollapsed: boolean) {
-    this._collapsed = isCollapsed
-
-    const cig = this.closest<HTMLElement>('.CIG')
-    const type = cig?.dataset.type
-    const text = this.clusterTitle?.trim()
-
-    const key = `BSP.ContentEdit.clusterExpanded.${type}.${text}`
-    if (type && text) {
-      if (isCollapsed) {
-        ls.removeItem(key)
-      } else {
-        ls.setItem(key, '1')
-      }
-    }
-
-    if (!this._collapsed) {
-      this.states.add('btu-expanded')
-    } else {
-      this.states.delete('btu-expanded')
-    }
-
-    this.requestUpdate()
-  }
-
-  get collapsed() {
-    return this._collapsed
-  }
-
-  private _toggleRowVisibility(force: boolean) {
-    this.querySelectorAll<HTMLElement>(':scope > :not(.CIG-title)').forEach(
-      (el) => {
-        if (el.childNodes.length) {
-          el.toggleAttribute('hidden', force)
-          el.classList.toggle('TC-unselected', force)
-        }
-      },
-    )
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    const cig = this.closest<HTMLElement>('.CIG')
-    const type = cig?.dataset.type
-    const text = this.clusterTitle
-
-    const key = `BSP.ContentEdit.clusterExpanded.${type}.${text}`
-    this.collapsed = ls.getItem(key) ? false : true
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  firstUpdated(): void {
-    this.emit('btu-cig-cluster-ready')
-
-    const title = this.querySelector<HTMLElement>('.CIG-title')
-
-    // Ensures that the title is always the first child of the cluster.
-    const firstChild = this.firstChild
-    if (
-      firstChild instanceof Element &&
-      !firstChild.classList.contains('CIG-title')
-    ) {
-      if (title) {
-        this.insertBefore(title, firstChild)
-      }
-    }
-
-    this.dataset.tab = this.tab
-
-    // Hide the component if all rows are empty.
-    const rows = Array.from(this.querySelectorAll('.CIG-row')).filter(
-      (row) => row.childNodes.length,
-    )
-    this.toggleAttribute('hidden', !rows.length)
-
-    // Hide empty rows.
-    const emptyRows = Array.from(this.querySelectorAll('.CIG-row')).filter(
-      (row) => !row.childNodes.length,
-    )
-    emptyRows.forEach((row) => row.toggleAttribute('hidden', true))
-
-    const errorFields = this.querySelectorAll('.CIG-row > .Message.is-error')
-    errorFields.length > 0
-      ? this.states.add('btu-error')
-      : this.states.delete('btu-error')
-  }
-
-  render() {
-    this._toggleRowVisibility(this.collapsed)
-
-    return html`<h2 class="CIG-title" data-tab=${this.tab}>
-      <button
-        type="button"
-        title="${this.collapsed ? expandTooltip : collapseTooltip}"
-        aria-expanded="${!this.collapsed}"
-        @click="${() => (this.collapsed = !this.collapsed)}"
-        @keydown=${ifUnmodified((e: unknown) => {
-          if (e instanceof KeyboardEvent) {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault()
-              this.collapsed = !this.collapsed
-            }
-          }
-        })}
-      >
-        <span class="CIG-titleText">${this.clusterTitle}</span>
-        <span class="CIG-titleToggle" aria-hidden="true"></span>
-      </button>
-    </h2>`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-cig-cluster': CIGCluster
-  }
-}

package/src/legacy/tool-ui/src/CIGCluster.css

@@ -1,60 +0,0 @@
-btu-cig-cluster {
-  @apply block flex-grow basis-full contain-layout contain-style;
-}
-
-btu-cig-cluster:state(btu-error) {
-  > .CIG-title .CIG-titleText {
-    @apply text-error-600 after:btu-icon after:btu-icon-circle-alert after:ms-1 after:align-middle;
-  }
-}
-
-btu-cig-cluster:state(btu-expanded) {
-  > .CIG-title {
-    @apply cursor-[unset] bg-primary-50 hover:bg-primary-50;
-  }
-
-  > .CIG-title .CIG-titleToggle {
-    @apply btu-button-pressed text-primary-800 before:-rotate-180;
-  }
-}
-
-btu-cig-cluster > *:not(.CIG-title):not(.is-filterResult) {
-  @apply [content-visibility:hidden];
-}
-
-btu-cig-cluster:state(btu-expanded) > *:not(.CIG-title) {
-  @apply [content-visibility:unset];
-}
-
-btu-cig-cluster .CIG-title {
-  @apply mt-6 cursor-pointer rounded-lg bg-gray-50 p-0 text-sm font-semibold [inline-size:100%] hover:bg-gray-100;
-
-  &:empty {
-    @apply hidden;
-  }
-}
-
-btu-cig-cluster .CIG-titleText {
-  @apply text-sm font-semibold text-gray-900;
-}
-
-btu-cig-cluster .CIG-titleToggle {
-  @apply btu-button btu-button-text-hidden btu-button-xs bg-white before:btu-icon before:btu-icon-chevron-down before:transition;
-}
-
-btu-cig-cluster .CIG-title button {
-  @apply flex w-full items-center justify-between gap-2 rounded-lg border-0 p-2 normal-case;
-}
-
-btu-cig-cluster .CIG-row {
-  @apply px-2; /* clustered rows are indented. */
-}
-
-/* Nested cluster side gaps */
-.CIG-row btu-cig-cluster {
-  @apply px-2;
-}
-
-.is-inHiddenCluster {
-  @apply hidden;
-}

package/src/legacy/tool-ui/src/Calendar.css

@@ -1,110 +0,0 @@
-.Calendar {
-  --bg-color: theme(colors.primary.600);
-  /* https://lea.verou.me/blog/2024/contrast-color/#using-rcs-to-automatically-compute-a-contrasting-text-color */
-  --l-threshold: 0.7;
-  --l: clamp(0, (var(--l-threshold, 0.623) / l - 1) * infinity, 1);
-  --text-color: theme(colors.white.DEFAULT);
-
-  .scheduledEvents-date {
-    @apply border-b;
-  }
-
-  .ColorManagerButton {
-    @apply btu-button btu-button-gray me-auto @calendar-lg/calendar:me-0;
-
-    & > a {
-      @apply text-inherit no-underline;
-    }
-  }
-
-  .calendarEvent + .calendarEvent {
-    @apply mt-0.5;
-  }
-
-  /* Calendar event container & label styling */
-  .calendarEvent {
-    @apply col-start-2 rounded bg-[--bg-color] text-[--text-color];
-
-    &[data-cancelled='true'] {
-      @apply line-through;
-    }
-
-    &[data-color] {
-      --text-color: oklch(from var(--bg-color) var(--l) 0 h);
-    }
-  }
-
-  .calendarEvent-time {
-    @apply order-1 whitespace-nowrap font-normal;
-  }
-
-  .calendarEvent-label {
-    @apply contents;
-
-    & > a {
-      @apply flex gap-1 truncate px-1 py-0.5 font-semibold text-[--text-color] no-underline;
-    }
-  }
-
-  .day-of-week-1.Month-day > .calendarEvent {
-    @apply ps-[15px] [clip-path:polygon(15px_0,100%_0,100%_100%,15px_100%,0_50%)];
-  }
-
-  .day-of-week-7.Month-day > .calendarEvent {
-    @apply pe-[15px] [clip-path:polygon(0_0,calc(100%-15px)_0,100%_50%,calc(100%-15px)_100%,0_100%)];
-  }
-
-  /* View all events link
-  Currently appears only in month view if there are more than 5 events in a day */
-  .viewAllEvents {
-    @apply contents;
-
-    & > a {
-      @apply col-start-2 mt-0.5 w-max max-w-full truncate rounded px-2 py-[3px] text-xs font-semibold text-gray-700 no-underline hover:bg-gray-100;
-    }
-  }
-
-  /* Month view inside Calendar Widget */
-  .Month-day {
-    --margin: theme(spacing.1);
-    --content-width: calc(100% - theme(spacing.2));
-
-    @apply grid aspect-auto min-h-[189px] cursor-auto grid-cols-[var(--margin)_var(--content-width)_var(--margin)] content-start pb-[11px] text-xs hover:bg-white;
-
-    &:hover .Month-dom {
-      @apply bg-primary-25;
-    }
-  }
-
-  .Month-dow {
-    @apply col-span-full text-xs font-semibold text-gray-500;
-  }
-
-  .Month-dom {
-    @apply col-start-2 mt-1 inline-flex size-6 items-center justify-center justify-self-center rounded-full;
-  }
-
-  .Month-row:first-child .Month-day:has(.Month-dow) {
-    @apply h-[215px] justify-start;
-
-    .Month-dom {
-      @apply aspect-auto w-6;
-    }
-  }
-
-  .Month-dom + .calendarEvent {
-    @apply mt-1.5;
-  }
-
-  .calendarDay-today.Month-day {
-    @apply bg-white hover:bg-white;
-
-    .Month-dom {
-      @apply bg-primary-600;
-    }
-
-    &:hover .Month-dom {
-      @apply bg-primary-800;
-    }
-  }
-}

package/src/legacy/tool-ui/src/Card.css

@@ -1,28 +0,0 @@
-.Card {
-  @apply flex basis-full animate-slide-fade-scroll flex-col overflow-clip rounded-lg border border-solid border-gray-300 bg-white text-gray-900 no-underline shadow-sm [animation-range:entry_10%_contain_10dvh] [animation-timeline:--card-timeline] [view-timeline-name:--card-timeline] hover:text-gray-900 focus:text-gray-900 dark:bg-gray-25;
-}
-
-.Card:hover .Card-title {
-  @apply bg-gray-100;
-}
-
-.Card-media {
-  @apply flex grow items-center justify-center bg-gray-50;
-}
-
-.Card-media img {
-  @apply block h-auto w-full;
-}
-
-/* Supply a max size because in some instances the image is not constrained by a wrapping element. */
-.Card > img {
-  @apply max-h-[7.5rem];
-}
-
-.Card-media.is-missing {
-  @apply m-auto min-h-[9.6875rem] before:btu-icon before:btu-icon-blocks before:rounded-full before:bg-gray-100 before:p-[.88rem] before:btu-icon-xl;
-}
-
-.Card-title {
-  @apply overflow-hidden text-ellipsis whitespace-nowrap rounded-b-lg border-t border-gray-200 p-4 text-sm;
-}

package/src/legacy/tool-ui/src/Celebrate.ts

@@ -1,87 +0,0 @@
-/*
-  Selectors to elements which we want to show the celebration animation when clicked.
-*/
-const triggerSelectors = [
-  '.ComboInput-option-favorite-icon',
-  '.LinkCarousel-item-favorite.is-unstarred',
-]
-
-const TRIGGER_SELECTOR = triggerSelectors.join(', ')
-
-const init = () => {
-  let runningTimerId: number | null = null
-  const animationDuration = 2000 // in millis.
-  const svg = `<svg id="ejX6QuT4CUp1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 300 300" shape-rendering="optimizeSpeed" text-rendering="optimizeSpeed" width="300" height="300" style="will-change: transform; transform: translateZ(0);">
-<style><![CDATA[
-#ejX6QuT4CUp2_to {animation: ejX6QuT4CUp2_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 37.5% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp2_ts {animation: ejX6QuT4CUp2_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_ts__ts { 0% {transform: scale(-0.966656,0.966656);animation-timing-function: cubic-bezier(0,0,0.58,1)} 25% {transform: scale(-2.192693,2.192693);animation-timing-function: cubic-bezier(0,0,0.58,1)} 37.5% {transform: scale(-1.551673,1.551673)} 100% {transform: scale(-1.551673,1.551673)}} #ejX6QuT4CUp2 {animation: ejX6QuT4CUp2_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp2_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 37.5% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp3_to {animation: ejX6QuT4CUp3_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp3_tr {animation: ejX6QuT4CUp3_tr__tr ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_tr__tr { 0% {transform: rotate(0deg);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {transform: rotate(305.83deg)} 100% {transform: rotate(305.83deg)}} #ejX6QuT4CUp3_ts {animation: ejX6QuT4CUp3_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_ts__ts { 0% {transform: scale(0.43962,0.43962)} 37.5% {transform: scale(1,1)} 100% {transform: scale(1,1)}} #ejX6QuT4CUp3 {animation: ejX6QuT4CUp3_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp3_c_o { 0% {opacity: 1} 37.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp4_to {animation: ejX6QuT4CUp4_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp4_tr {animation: ejX6QuT4CUp4_tr__tr ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_tr__tr { 0% {transform: rotate(0deg);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 37.5% {transform: rotate(-414.17deg)} 100% {transform: rotate(-414.17deg)}} #ejX6QuT4CUp4_ts {animation: ejX6QuT4CUp4_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_ts__ts { 0% {transform: scale(0.43962,0.43962)} 36.25% {transform: scale(0.75,0.75)} 50% {transform: scale(1,1)} 100% {transform: scale(1,1)}} #ejX6QuT4CUp4 {animation: ejX6QuT4CUp4_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp4_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp5_to {animation: ejX6QuT4CUp5_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp5_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp5 {animation: ejX6QuT4CUp5_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp5_c_o { 0% {opacity: 1} 37.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp6_to {animation: ejX6QuT4CUp6_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp6_to__to { 0% {transform: translate(150px,150px);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 25% {transform: translate(200px,170px)} 100% {transform: translate(200px,170px)}} #ejX6QuT4CUp6 {animation: ejX6QuT4CUp6_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp6_c_o { 0% {opacity: 1} 12.5% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 25% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp7_to {animation: ejX6QuT4CUp7_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp7_to__to { 0% {transform: translate(150px,150px);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {transform: translate(210px,100px)} 100% {transform: translate(210px,100px)}} #ejX6QuT4CUp7 {animation: ejX6QuT4CUp7_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp7_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp8_ts {animation: ejX6QuT4CUp8_ts__ts ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp8_ts__ts { 0% {transform: translate(150px,150px) scale(0.2,0.2);animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 16.25% {transform: translate(150px,150px) scale(4,4)} 100% {transform: translate(150px,150px) scale(4,4)}} #ejX6QuT4CUp8 {animation-name: ejX6QuT4CUp8_c_o, ejX6QuT4CUp8_f_p;animation-duration: ${animationDuration}ms;animation-fill-mode: forwards;animation-timing-function: linear;animation-direction: normal;animation-iteration-count: 1;}@keyframes ejX6QuT4CUp8_c_o { 0% {opacity: 0.75} 21.25% {opacity: 0} 100% {opacity: 0}}@keyframes ejX6QuT4CUp8_f_p { 0% {fill: #ffcba0} 11.25% {fill: #fdf900} 20% {fill: #fafafa} 100% {fill: #fafafa}} #ejX6QuT4CUp9_to {animation: ejX6QuT4CUp9_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp9_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.165,0.84,0.44,1)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp9 {animation: ejX6QuT4CUp9_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp9_c_o { 0% {opacity: 1} 25% {opacity: 1;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {opacity: 0} 100% {opacity: 0}} #ejX6QuT4CUp10_to {animation: ejX6QuT4CUp10_to__to ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp10_to__to { 0% {offset-distance: 0%;animation-timing-function: cubic-bezier(0.25,0.46,0.45,0.94)} 50% {offset-distance: 100%} 100% {offset-distance: 100%}} #ejX6QuT4CUp10 {animation: ejX6QuT4CUp10_c_o ${animationDuration}ms linear 1 normal forwards}@keyframes ejX6QuT4CUp10_c_o { 0% {opacity: 1} 25% {opacity: 1} 50% {opacity: 0} 100% {opacity: 0}}
-]]></style>
-<g id="ejX6QuT4CUp2_to" style="offset-path:path('M150,150C151.487307,98.723346,98.424658,83.160356,84.036214,131.511063');offset-rotate:0deg"><g id="ejX6QuT4CUp2_ts" transform="scale(-0.966656,0.966656)"><ellipse id="ejX6QuT4CUp2" rx="4.445235" ry="4.445235" transform="translate(0,0)" fill="none" stroke="#ed0606" stroke-width="2"/></g></g><g id="ejX6QuT4CUp3_to" style="offset-path:path('M150,150C170.853084,85.497808,215.912715,88.678086,240,150');offset-rotate:0deg"><g id="ejX6QuT4CUp3_tr" transform="rotate(0)"><g id="ejX6QuT4CUp3_ts" transform="scale(0.43962,0.43962)"><ellipse id="ejX6QuT4CUp3" rx="10.645289" ry="10.645289" transform="translate(0,0)" fill="none" stroke="#670bf4" stroke-width="6" stroke-dashoffset="280" stroke-dasharray="3"/></g></g></g><g id="ejX6QuT4CUp4_to" style="offset-path:path('M150,150C111.631802,121.393491,76.521788,145.563306,76,198');offset-rotate:0deg"><g id="ejX6QuT4CUp4_tr" transform="rotate(0)"><g id="ejX6QuT4CUp4_ts" transform="scale(0.43962,0.43962)"><ellipse id="ejX6QuT4CUp4" rx="10.645289" ry="10.645289" transform="translate(0,0)" fill="none" stroke="#1f0bf4" stroke-width="6" stroke-miterlimit="13" stroke-dashoffset="45" stroke-dasharray="8"/></g></g></g><g id="ejX6QuT4CUp5_to" style="offset-path:path('M150,150C159.106533,163.173822,180.909148,207.870275,179.358177,213.36311');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp5" rx="30" ry="30" transform="scale(0.155996,0.155996) translate(0,0)" fill="#fff400" stroke-width="0"/></g><g id="ejX6QuT4CUp6_to" transform="translate(150,150)"><ellipse id="ejX6QuT4CUp6" rx="30" ry="30" transform="scale(0.094146,0.094146) translate(0,0)" fill="#fc0" stroke-width="0"/></g><g id="ejX6QuT4CUp7_to" transform="translate(150,150)"><ellipse id="ejX6QuT4CUp7" rx="30" ry="30" transform="scale(0.069628,0.069628) translate(0,0)" fill="#fc0" stroke-width="0"/></g><g id="ejX6QuT4CUp8_ts" transform="translate(150,150) scale(0.2,0.2)"><ellipse id="ejX6QuT4CUp8" style="mix-blend-mode:multiply" rx="7.86004" ry="7.86004" transform="translate(0,0)" opacity="0.75" fill="#ffcba0" stroke-width="0"/></g><g id="ejX6QuT4CUp9_to" style="offset-path:path('M150,150C137.037773,122.096076,120.091659,81.569132,106,74');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp9" rx="30" ry="30" transform="scale(0.069628,0.069628) translate(0,0)" fill="#5800ff" stroke-width="0"/></g><g id="ejX6QuT4CUp10_to" style="offset-path:path('M152,153C128.044643,113.553169,69.737409,121.442089,39.459312,122.665002');offset-rotate:0deg"><ellipse id="ejX6QuT4CUp10" rx="30" ry="30" transform="scale(0.04,0.04) translate(0,0)" fill="#ff2100" stroke-width="0"/></g></svg>
-`
-  document.body.addEventListener(
-    'pointerdown',
-    (evt: PointerEvent) => {
-      // Only celebrate when a whitelisted element is clicked.
-      if (!evt.target || !(evt.target instanceof HTMLElement)) {
-        return
-      }
-
-      if (!evt.target.matches(TRIGGER_SELECTOR)) {
-        return
-      }
-
-      // Cleanup any existing timer.
-      if (runningTimerId !== null) {
-        clearTimeout(runningTimerId)
-        runningTimerId = null
-      }
-
-      // Create the celebration host element.
-      let wrapper = window.btuCelebrate
-      if (!wrapper) {
-        wrapper = document.createElement('div')
-        wrapper.id = 'btuCelebrate'
-        wrapper.style.cssText = `
-          background: transparent;
-          position: fixed;
-          pointer-events: none;
-          z-index: calc(infinity);
-          width: 300px;
-          height: 300px;
-          will-change: transform, opacity;
-          transform: translate3d(0,0,0);
-          contain: layout style paint;
-          backface-visibility: hidden;
-          perspective: 1000px;
-        `
-        document.body.appendChild(wrapper)
-      }
-
-      // Move where the pointer was pressed.
-      const left = evt.pageX
-      const top = evt.pageY
-      const widthSparkles = 150 // Pre-calculate half of 300px
-      const heightSparkles = 150
-
-      // Use requestAnimationFrame for smooth positioning and rendering
-      requestAnimationFrame(() => {
-        if (wrapper) {
-          wrapper.style.left = left - widthSparkles + 'px'
-          wrapper.style.top = top - heightSparkles + 'px'
-          wrapper.innerHTML = svg
-        }
-      })
-
-      // Remove the celebration after the animation completes.
-      runningTimerId = setTimeout(() => {
-        if (wrapper) {
-          document.body.removeChild(wrapper)
-        }
-      }, animationDuration)
-    },
-    false,
-  )
-}
-
-document.readyState === 'loading'
-  ? window.addEventListener('DOMContentLoaded', init)
-  : init()

package/src/legacy/tool-ui/src/Chart.ts

@@ -1,53 +0,0 @@
-import Highcharts from 'highcharts'
-import merge from 'lodash.merge'
-import enableAccessibilityMode from 'highcharts/modules/accessibility'
-import enableDataLoader from 'highcharts/modules/data'
-import create from './dom/create'
-
-Highcharts.theme = {
-  chart: {
-    height: 300,
-    style: {
-      fontFamily: 'inherit',
-      fontSize: '100%',
-    },
-  },
-  colors: [
-    'var(--color-blue6)',
-    'var(--color-gray6)',
-    'var(--color-red6)',
-    'var(--color-yellow6)',
-    'var(--color-green6)',
-  ],
-}
-
-enableAccessibilityMode(Highcharts)
-enableDataLoader(Highcharts)
-Highcharts.setOptions(Highcharts.theme)
-
-export default class Chart {
-  constructor(table: HTMLTableElement) {
-    const chart = create('div', { className: 'Chart' })
-    table.parentNode?.insertBefore(chart, table.nextSibling)
-    table.style.display = 'none'
-
-    const options = merge(
-      Chart.getDefaults(),
-      JSON.parse(table.dataset.options || '{}'),
-      {
-        data: {
-          table: table,
-        },
-      },
-    )
-
-    Highcharts.chart(chart, options)
-  }
-
-  static getDefaults() {
-    return {
-      credits: { enabled: false },
-      title: undefined,
-    }
-  }
-}