@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

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

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

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

@@ -0,0 +1,23 @@
+# 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

@@ -0,0 +1,54 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,486 @@
+/* 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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,25 @@
+.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

@@ -0,0 +1,54 @@
+.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;
+  }
+}