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

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

@@ -1,8 +0,0 @@
-.CopySiteWidget
-  :is(
-    .addButtonContainer,
-    [data-field-name='configurationTypeId'],
-    [data-field-name='count']
-  ) {
-  @apply hidden;
-}

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

@@ -1,23 +0,0 @@
-# CopyToClipboard Web Component
-
-This is a web component that handles copying text to the system clipboard.
-
-## Properties
-
-| Name           | Type    | Description                                                                                                                                              |
-| -------------- | ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `copydata`     | string  | The text to be copied to the system clipboard.                                                                                                           |
-| `internallink` | boolean | Represents whether the `copydata` is a reference to an internal link to determine if the window's origin should be prepended to it. Defaults to `false`. |
-| `label`        | string? | Optional label to display in the button. Defaults to `undefined`.                                                                                        |
-
-## Methods
-
-| Name     | Params | Description                                    |
-| -------- | ------ | ---------------------------------------------- |
-| `copy()` | none   | Copies the `copydata` to the system clipboard. |
-
-## States
-
-| Name                          | Description                                                                                            |
-| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `btu-copy-to-clipbard-copied` | Indicates that the `copydata` was recently copied to the system clipboard. Resets after a few seconds. |

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

@@ -1,54 +0,0 @@
-import { LitElement, html } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ComponentStatesMixin } from '../ComponentStatesMixin'
-import { EventEmitterMixin } from '../EventEmitterMixin'
-
-@customElement('btu-copy-to-clipboard')
-export default class CopyToClipboard extends ComponentStatesMixin(
-  EventEmitterMixin(LitElement),
-) {
-  @property({ type: String })
-  copydata?: string
-
-  @property({ type: Boolean })
-  internallink = false
-
-  @property({ type: String })
-  label?: string
-
-  createRenderRoot() {
-    return this
-  }
-
-  copy() {
-    if (!this.copydata) return
-    if (this.states.has('btu-copy-to-clipboard-copied')) return
-
-    navigator.clipboard.writeText(
-      (this.internallink ? window.location.origin : '') + this.copydata,
-    )
-
-    this.states.add('btu-copy-to-clipboard-copied')
-    this.emit('btu-copy-to-clipboard-copied')
-
-    setTimeout(() => {
-      this.states.delete('btu-copy-to-clipboard-copied')
-    }, 3000)
-  }
-
-  render() {
-    return html`<button
-      type="button"
-      @click=${this.copy}
-      ?disabled=${this.states.has('btu-copy-to-clipboard-copied')}
-    >
-      ${this.label}
-    </button>`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-copy-to-clipboard': CopyToClipboard
-  }
-}

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

@@ -1,10 +0,0 @@
-btu-copy-to-clipboard {
-  @apply flex gap-4;
-}
-btu-copy-to-clipboard button {
-  @apply btu-button-fill-none btu-button-gray border-0 p-0 before:btu-icon before:btu-icon-clipboard-copy;
-}
-
-btu-copy-to-clipboard:state(btu-copy-to-clipboard-copied) button {
-  @apply btu-button-success before:btu-icon-clipboard-check;
-}

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

@@ -1,486 +0,0 @@
-/* Term Finder page styles */
-#term-finder {
-  @apply size-full;
-
-  .crosslinker.withLeftNav {
-    --Admin-navWidth: 50%;
-  }
-
-  form[action*='crosslinker/terms'] {
-    @apply mt-0;
-  }
-
-  .CIG-row {
-    @apply mb-0 gap-1.5;
-
-    > .label {
-      @apply h-7 content-center text-sm font-semibold text-gray-700;
-    }
-  }
-
-  .searchAlgorithmFields {
-    @apply mb-0 mt-4 flex flex-col gap-4;
-
-    > .inputContainer {
-      @apply flex flex-col gap-1.5;
-    }
-
-    .label {
-      @apply h-7 content-center text-sm font-semibold text-gray-700;
-    }
-  }
-
-  hr {
-    @apply hidden;
-  }
-
-  .ActionBar {
-    @apply mb-0 bg-gray-50;
-
-    > input[type='submit'] {
-      @apply btu-button btu-button-primary btu-button-md;
-    }
-  }
-
-  .RTI-add > input[type='text'] {
-    @apply ps-9;
-  }
-}
-
-.find-terms-history {
-  @apply !mt-4 mb-4;
-
-  > form {
-    @apply grid grid-cols-[repeat(4,auto)_1fr] items-center; /* grid used to position radio inputs */
-  }
-
-  input[type='radio'] {
-    @apply me-3 inline-flex;
-
-    + label {
-      @apply text-md font-medium text-gray-700;
-
-      &:has(+ input[type='radio']) {
-        @apply me-3;
-      }
-    }
-  }
-
-  .SearchInput {
-    @apply col-span-full mb-6 mt-4;
-  }
-
-  .Widget.cl-running-tasks {
-    @apply text-sm text-gray-700;
-
-    > ol {
-      @apply mb-6;
-    }
-  }
-
-  /* Allow scrolling of saved search table */
-  .frame:has(> div > table.tfr-history) {
-    @apply relative;
-
-    > div:has(> table.tfr-history) {
-      @apply btu-scrollshadow-50 overscroll-contain before:absolute before:bottom-0 before:top-0 before:content-[--whitespace] after:absolute after:bottom-0 after:top-0 after:content-[--whitespace];
-    }
-  }
-
-  table > tbody > tr:last-child {
-    @apply border-b-0;
-  }
-
-  .tfr-history td {
-    @apply p-4;
-  }
-
-  .tfr-submit {
-    @apply btu-button btu-button-error btu-button-sm before:btu-icon before:btu-icon-trash;
-  }
-}
-
-/* Result frame on the right side of the Term Finder page */
-#term-finder-result {
-  /* Styles "created terms" frame */
-  > .Widget:has(.LinkTable) {
-    @apply mb-6 grid-cols-[[fullbleed-start]_var(--space)_[content-start]_auto_[first-button-end]_auto_[second-button-start]_auto_[second-button-end]_1fr_[content-end]_var(--space)_[fullbleed-end]] items-center text-sm text-gray-500;
-
-    > h2 {
-      @apply mt-6 h-7 content-center text-sm font-semibold text-gray-700;
-    }
-
-    > .LinkTable {
-      @apply mb-6;
-
-      > li {
-        @apply contents;
-
-        > a {
-          @apply px-0 text-sm text-primary-600 underline;
-        }
-      }
-    }
-
-    > a.Button {
-      @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray btu-button-md col-[second-button-start/second-button-end] first-of-type:col-[content-start/first-button-end] first-of-type:me-2 last-of-type:ms-2;
-    }
-  }
-
-  /* Styles the results frame */
-  > form > .Widget {
-    .legend {
-      @apply me-3 inline-block size-2 rounded;
-
-      &:not(:first-of-type) {
-        @apply ms-2;
-      }
-    }
-
-    > .ActionBar {
-      @apply order-1;
-    }
-
-    .LinkList-wrapper {
-      @apply btu-scrollshadow-50 py-6 before:absolute before:bottom-6 before:left-[var(--space)] before:top-6 before:row-[2/3] before:content-[--whitespace] after:absolute after:bottom-6 after:right-[var(--space)] after:top-6 after:row-[2/3] after:content-[--whitespace];
-    }
-
-    /* Styles the colored bubbles used to denote dictionary presence */
-    .legend-placeholder:not(th) {
-      @apply box-content w-1 bg-clip-text p-4;
-
-      > a {
-        @apply h-[22px] w-1 rounded-lg bg-inherit;
-
-        > span {
-          @apply hidden;
-        }
-      }
-    }
-
-    th.legend-placeholder {
-      @apply box-content w-1 !bg-gray-50 p-0;
-    }
-  }
-}
-
-#TermOccurrenceSearch,
-#TermProximitySearch {
-  @apply flex items-center gap-3 text-md font-medium text-gray-700;
-}
-
-/* Terms page styles */
-#terms-search-result {
-  @apply flex flex-col;
-
-  > h3 {
-    @apply my-2 text-xs font-medium text-gray-600;
-
-    strong {
-      @apply font-medium;
-    }
-  }
-
-  > ul.pagination ~ table {
-    @apply relative mb-2 after:absolute after:-bottom-2 after:-left-[var(--space)] after:-right-[var(--space)] after:h-px after:bg-gray-200;
-  }
-
-  table:last-child {
-    @apply mb-2;
-  }
-
-  tbody > tr {
-    @apply bg-gray-50;
-  }
-
-  tr:has(.legend-label) {
-    @apply flex items-center gap-1 border-b-0 hover:bg-gray-50;
-
-    > td {
-      @apply p-0;
-
-      &.legend-label {
-        @apply line-clamp-2 grow rounded-lg px-2 py-1 text-sm font-medium text-gray-700 [word-break:break-word] hover:bg-gray-100 hover:text-gray-900;
-
-        &:not(:has(> a)) {
-          @apply py-2;
-        }
-
-        > a {
-          @apply line-clamp-2 py-1 no-underline [word-break:break-word];
-        }
-      }
-    }
-
-    &.selected {
-      > td.legend-label {
-        @apply bg-primary-50 text-gray-900;
-      }
-    }
-
-    &:not(:last-child) {
-      @apply mb-2;
-    }
-  }
-
-  .legend-placeholder {
-    @apply my-0.5 h-8 w-1 flex-none rounded;
-  }
-}
-
-/* Carrover from v4 */
-div[data-type='com.psddev.crosslinker.db.Term'] > div[data-field='mappings'] {
-  @apply hidden;
-}
-
-#terms-search-result {
-  @apply mt-2;
-}
-
-/* Dictionaries page styles */
-/* Replaced expensive :has() selector with runtime class for better performance */
-.Widget.has-crosslinker-dictionaries {
-  @apply h-full grid-rows-[auto_1fr_auto];
-
-  /* Fix the action bar to the bottom of the page */
-  > form {
-    @apply row-[2/4] grid-rows-subgrid;
-
-    &:has(> .CIG-row + .CIG-row) {
-      @apply grid-rows-none;
-    }
-
-    > .ActionBar {
-      @apply self-end;
-
-      > input:where([type='submit']) {
-        @apply btu-button btu-button-primary btu-button-md;
-      }
-    }
-
-    > .CIG {
-      @apply content-start;
-    }
-  }
-}
-
-form[action*='crosslinker/dictionaries'] {
-  @apply content-baseline;
-
-  .CIG-row {
-    > small {
-      @apply order-1 text-sm text-gray-500 first-of-type:mt-1.5;
-
-      > strong {
-        @apply font-normal;
-      }
-    }
-
-    > .label {
-      @apply mb-1.5 h-7 content-center text-sm font-semibold text-gray-700;
-    }
-  }
-}
-
-/* Term Mappings page style */
-/* Replaced expensive :has() selector with runtime class for better performance */
-.Widget.has-crosslinker-mappings {
-  @apply grid-rows-[auto_1fr];
-
-  /* Additional styles when form is a direct child */
-  &:has(> form[action*='crosslinker/mappings']) {
-    @apply grid-rows-[auto_auto_1fr];
-  }
-
-  > form {
-    @apply mt-6;
-
-    &:has(+ .frame:empty),
-    &:has(+ .frame > textarea:empty) {
-      @apply mb-6;
-    }
-  }
-
-  > .frame {
-    @apply col-[fullbleed-start/fullbleed-end] grid grid-cols-subgrid;
-  }
-
-  form:has(.ActionBar) {
-    @apply col-[fullbleed-start/fullbleed-end] grid grid-cols-subgrid content-between;
-
-    > :where(.CIG, .TC) {
-      @apply col-[content-start/content-end] mb-6;
-    }
-
-    > .ActionBar {
-      @apply col-[fullbleed-start/fullbleed-end];
-    }
-  }
-}
-
-.term-mapping-hero {
-  @apply btu-heading-5 w-full border-b px-6 py-5 text-gray-700;
-}
-
-/* Styles the Simulations page */
-.simulations {
-  --Admin-navWidth: 320px;
-
-  .Admin-main > .Widget {
-    @apply grid-rows-none; /* Simulations has a non-standard layout, compared to other widgets */
-
-    > hr {
-      @apply hidden;
-
-      + .Widget-title {
-        @apply py-3;
-      }
-
-      ~ .RCIG {
-        @apply flex flex-col gap-6 py-6;
-
-        > .inputContainer {
-          @apply flex flex-col gap-1.5;
-
-          > .label {
-            @apply truncate py-1 text-sm font-semibold text-gray-700;
-          }
-
-          /*
-            Read-only RTI fields get special styles.
-            TODO: formalize readonly style into a TWCSS utility?
-          */
-          > .RTI.readonly {
-            btu-input {
-              @apply contents;
-
-              > input:where([readonly]) {
-                @apply w-full rounded-none border-0 p-0 text-sm text-gray-400 transition-none hover:bg-white focus:border-none focus-visible:[box-shadow:none];
-              }
-            }
-
-            ul > li {
-              @apply flex items-center gap-2 rounded-none p-2 after:static after:-order-1 after:size-5 after:p-0 after:text-gray-400;
-            }
-
-            .RTI-remove {
-              @apply pointer-events-none static m-0 size-5 bg-white p-0 text-gray-400 after:hidden;
-            }
-
-            .RTI-add {
-              @apply hidden;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-/* Existing simluations table */
-.simulations-table {
-  th {
-    > strong {
-      @apply text-xs font-medium text-gray-500;
-    }
-  }
-
-  td {
-    @apply text-sm text-gray-500;
-
-    > a {
-      @apply font-medium text-gray-900 no-underline;
-    }
-  }
-
-  th,
-  td {
-    @apply p-4;
-  }
-
-  > thead,
-  > tbody {
-    > tr {
-      @apply border-b-0;
-    }
-  }
-
-  thead tr th {
-    @apply bg-gray-100;
-
-    &.left {
-      @apply rounded-tl-lg;
-    }
-
-    &.right {
-      @apply rounded-tr-lg;
-    }
-  }
-
-  tbody tr {
-    @apply bg-gray-50;
-  }
-
-  .newSection {
-    &.selected {
-      @apply bg-primary-50;
-    }
-  }
-}
-
-/* Content Edit widget */
-.Widget.cl-widget {
-  .Widget-title {
-    @apply box-content h-7 content-center bg-primary-50 py-2 text-primary-800;
-  }
-
-  > :where(:not(.Widget-title)) {
-    @apply last:mb-6 first-of-type:mt-6;
-  }
-
-  .cl-widget-toggle {
-    @apply grid grid-cols-[repeat(4,auto)_minmax(0,1fr)] items-center;
-
-    > :where(:not(input[type='radio'], label)) {
-      @apply col-span-full;
-    }
-
-    > label {
-      @apply text-sm font-medium text-gray-700;
-
-      &:has(+ input[type='radio']) {
-        @apply me-6;
-      }
-    }
-
-    > .Widget-heading {
-      @apply mt-6 h-7 content-center truncate p-0 text-sm font-semibold text-gray-700;
-    }
-
-    > .cl-simulation-select {
-      @apply mt-1.5;
-    }
-
-    ol.cl-all-terms {
-      > li {
-        &:not(:last-child) {
-          @apply border-b;
-        }
-
-        > a {
-          @apply my-4 block text-sm font-medium;
-        }
-      }
-    }
-  }
-}
-
-/* Miscellanious styles */
-.crosslinker > .Admin-nav > .Widget > .Widget-title {
-  @apply content-center;
-}
-
-/* Carryover from v4 */
-.crosslinker-heading + h1 {
-  @apply hidden;
-}

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

@@ -1,46 +0,0 @@
-import onFind from './dom/onFind'
-
-/**
- * Adds runtime classes to Widget elements based on their crosslinker form descendants.
- * This replaces expensive :has() selectors for better performance.
- *
- * Performance considerations:
- * - onFind callbacks execute once per element (via unique data attributes)
- * - Classes added at page load and when new widgets are dynamically added
- * - No recalculation needed unlike :has() selectors which recalculate on every DOM mutation
- * - Single-pass approach reduces DOM traversals
- *
- * Original expensive selectors:
- * - .Widget:has(> form[action*='crosslinker/dictionaries'] .ActionBar)
- * - .Widget:has(form[action*='crosslinker/mappings'])
- *
- * New performant selectors:
- * - .Widget.has-crosslinker-dictionaries .ActionBar
- * - .Widget.has-crosslinker-mappings
- */
-
-/**
- * Single-pass Widget classification for crosslinker forms.
- * More efficient than multiple onFind callbacks - one DOM traversal per Widget.
- */
-onFind('.Widget', (widget: HTMLElement) => {
-  // Check for dictionaries form (direct child with ActionBar)
-  // Original selector: .Widget:has(> form[action*='crosslinker/dictionaries'] .ActionBar)
-  const dictionariesForm = widget.querySelector<HTMLElement>(
-    ':scope > form[action*="crosslinker/dictionaries"]',
-  )
-
-  if (dictionariesForm) {
-    // Verify the form contains an ActionBar (matching original :has() logic)
-    const hasActionBar = dictionariesForm.querySelector('.ActionBar')
-    if (hasActionBar) {
-      widget.classList.add('has-crosslinker-dictionaries')
-    }
-  }
-
-  // Check for mappings form (any descendant)
-  // Original selector: .Widget:has(form[action*='crosslinker/mappings'])
-  if (widget.querySelector('form[action*="crosslinker/mappings"]')) {
-    widget.classList.add('has-crosslinker-mappings')
-  }
-})

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

@@ -1,25 +0,0 @@
-.CustomKeyboard {
-  @apply grid gap-2 [grid-template-columns:repeat(auto-fill,minmax(40px,1fr))];
-}
-
-.CustomKeyboard li {
-  @apply inline-block;
-}
-
-.CustomKeyboard li button {
-  @apply btu-button btu-button-outline btu-button-gray size-10 bg-white transition;
-
-  /* Enlarge buttons on hover */
-  @apply hover:z-[1] hover:scale-150 hover:shadow-md;
-}
-
-/* Popup styles */
-[data-popup-source-class='rte2-toolbar-custom-keyboard'] {
-  .plugin-popup {
-    @apply col-span-full overflow-y-auto border-t bg-gray-50 py-6;
-
-    .Widget {
-      @apply bg-gray-50;
-    }
-  }
-}

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

@@ -1,54 +0,0 @@
-.DashboardRow {
-  @apply flex flex-wrap overflow-x-auto bg-gray-25 px-0 xs:p-2 sm:p-3 md:flex-nowrap;
-
-  + .DashboardRow {
-    @apply -mt-4 sm:-mt-6;
-  }
-}
-
-.DashboardRow-column {
-  @apply min-w-[375px] grow md:min-w-[calc(theme(screens.xs)_-_theme(padding.8))];
-}
-
-.DashboardRow-cell {
-  @apply px-0 py-2 xs:p-2 sm:p-3;
-}
-
-/* Quick Start widget styles */
-.DashboardRow:has(.CreateNewWidget),
-.DashboardRow-cell:has(.CreateNewWidget) {
-  @apply p-0;
-}
-
-.DashboardRow-cell.is-maximized {
-  @apply absolute inset-0 z-20; /* z-index needs to be higher than the scroll shadows on widgets. */
-}
-
-/* Alerts Widget styles (move to backend eventually) */
-.DashboardRow-cell[data-dashboard-widget-url*='AlertsDashboardWidget'] {
-  .LinkList tr {
-    @apply flex;
-
-    td.LinkList-main {
-      @apply flex-[2] flex-col items-start gap-1;
-    }
-
-    td.date,
-    td.time {
-      @apply flex-1;
-    }
-
-    td.LinkList-image {
-      @apply h-min;
-    }
-
-    /* Main text element should sit flush-left with an icon. */
-    &:has(.LinkList-image.is-icon) .LinkList-main {
-      @apply pl-0;
-    }
-  }
-
-  .LinkList th {
-    @apply w-1/4;
-  }
-}