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

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

@@ -0,0 +1,68 @@
+/* Hierarchy search result styles */
+.Hierarchy {
+  @apply col-span-full grid size-full auto-cols-[minmax(auto,2fr)] grid-flow-col grid-cols-[minmax(262px,1fr)_minmax(262px,1fr)] gap-1 overflow-x-auto overflow-y-hidden px-2.5 [grid-row:2/4];
+
+  .watch-button {
+    @apply hidden;
+  }
+}
+
+.Hierarchy-column {
+  @apply max-h-full min-w-[262px] overflow-y-auto;
+
+  /* Hacky way to make sure that a single column will span full width */
+  .Hierarchy > & {
+    &:has(+ .Hierarchy-children) {
+      @apply col-span-2;
+    }
+  }
+
+  a[data-mismatch-hierarchy-type] {
+    @apply pointer-events-none cursor-none opacity-30;
+  }
+
+  ul {
+    @apply mx-1.5 mb-4 overflow-hidden rounded-lg shadow-md before:block before:h-[42px] before:w-full before:bg-gray-100;
+  }
+
+  li {
+    @apply flex items-center bg-white px-4 before:me-2 before:ms-4 before:block before:h-7 before:w-px before:bg-gray-200 hover:bg-gray-100 [&:not(:last-child)]:border-b;
+
+    a:not(.Hierarchy-expand) {
+      @apply -order-1 flex-grow truncate py-3.5 text-sm font-medium text-gray-900 no-underline hover:underline;
+    }
+
+    &.is-selected {
+      @apply bg-primary-50;
+
+      .Hierarchy-expand {
+        @apply text-primary-800;
+      }
+    }
+
+    &:has(.Hierarchy-expand:hover) {
+      @apply bg-white;
+    }
+
+    &:not(:has(.Hierarchy-expand)) {
+      @apply after:btu-icon after:btu-icon-chevron-right rtl:after:btu-icon-chevron-left after:block after:p-1 after:text-gray-300;
+    }
+  }
+}
+
+.Hierarchy-children {
+  @apply contents;
+
+  /* Shows the user that the selected item has no loadable children */
+  :has(li.is-selected) + &.loaded:empty {
+    @apply block h-[42px] min-w-[262px] flex-1 rounded-lg bg-gray-100 shadow-md;
+  }
+}
+
+.Hierarchy-expand {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-chevron-right touch-device:btu-button-sm rtl:before:btu-icon-chevron-left hover:bg-gray-200;
+}
+
+.Hierarchy-moreElements {
+  @apply hidden;
+}

package/src/legacy/tool-ui/src/Icon/index.css

@@ -0,0 +1,11 @@
+btu-icon {
+  @apply aspect-square [inline-size:_var(--Icon-size,_--size)];
+}
+
+btu-icon[fill='solid'] svg {
+  @apply size-[20px];
+}
+
+btu-icon[fill='gradient'] {
+  @apply btu-icon-gradient-primary [mask-image:var(--mask-url)] [mask-mode:alpha];
+}

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

@@ -0,0 +1,69 @@
+import { LitElement, html } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { ComponentStatesMixin } from '../ComponentStatesMixin'
+import { EventEmitterMixin } from '../EventEmitterMixin'
+import { getIcon } from '../LucideDynamicLoader'
+import { addMask } from '../util/svg'
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js'
+
+import './index.css'
+
+@customElement('btu-icon')
+export default class Icon extends ComponentStatesMixin(
+  EventEmitterMixin(LitElement),
+) {
+  static get tagName() {
+    return 'BTU-ICON'
+  }
+
+  @property({ type: Number })
+  public size = 20
+
+  @property({ type: String, reflect: true })
+  public fill = 'solid'
+
+  @property({ type: String })
+  public symbol = 'circle-dashed'
+
+  private _getScaledSize() {
+    const defaultSize = 24 // Lucide default size
+    return this.size / defaultSize
+  }
+
+  async connectedCallback() {
+    super.connectedCallback()
+  }
+
+  async disconnectedCallback() {
+    super.disconnectedCallback()
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  render() {
+    const data = getIcon(
+      window.BRIGHTSPOT.icons?.materialToLucide?.[this.symbol] || this.symbol,
+      this,
+    )
+
+    if (this.fill === 'gradient') {
+      const scale = this._getScaledSize()
+      this.style.setProperty('transform', `scale(${scale})`)
+      this.style.setProperty('--mask-url', `url(#${this.symbol})`)
+    }
+
+    return html`${unsafeSVG(
+      this.fill === 'gradient'
+        ? addMask(data?.svg || '', this.symbol)
+        : data?.svg || '',
+    )}`
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'btu-icon': Icon
+  }
+}

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

@@ -0,0 +1,522 @@
+/* Customizing default cropper ui styles for image editor in v5 */
+.ImageEditor {
+  .cropper-drag-box {
+    @apply bg-white-light;
+  }
+
+  .cropper-modal {
+    @apply bg-transparent;
+  }
+
+  .cropper-center {
+    --cropper-center-bg: light-dark(
+      theme(colors.primary.600),
+      theme(colors.primary.200)
+    );
+    @apply opacity-100 before:size-3.5 before:rounded-full before:bg-white-light before:shadow-border after:-left-px after:top-[2px] after:size-2.5 after:rounded-full after:bg-[--cropper-center-bg];
+  }
+
+  .cropper-line {
+    @apply hidden;
+  }
+
+  .cropper-face {
+    @apply bg-white-light opacity-30 mix-blend-overlay;
+  }
+
+  .cropper-view-box {
+    @apply opacity-50 outline outline-1 outline-white-light;
+  }
+
+  .cropper-dashed {
+    @apply border border-white-light opacity-100;
+  }
+
+  .cropper-dashed.dashed-v {
+    @apply border-y-0;
+  }
+
+  .cropper-dashed.dashed-h {
+    @apply border-x-0;
+  }
+
+  .cropper-bg {
+    @apply bg-gray-50 bg-none;
+  }
+
+  .cropper-point {
+    @apply bg-white-light opacity-100;
+
+    &.point-se {
+      @apply before:bg-white-light;
+    }
+  }
+
+  /* Animation for when hotspot is added */
+  @keyframes isAdded {
+    from {
+      --hotspot-bg: light-dark(
+        theme(colors.primary.50),
+        theme(colors.primary.800)
+      );
+      --hotspot-border: light-dark(
+        theme(colors.primary.600),
+        theme(colors.primary.200)
+      );
+    }
+
+    to {
+      --hotspot-bg: theme(colors.white.light);
+      --hotspot-border: light-dark(
+        theme(colors.gray.200),
+        theme(colors.gray.600)
+      );
+    }
+  }
+}
+
+/* Image preview */
+.is-imagePreview {
+  --icon-button-w: 37px;
+
+  @apply relative grid max-w-[calc(360px-theme(spacing.8))] items-center overflow-hidden [grid-template-areas:'preview_preview_preview''groups_open_edit''message_message_message'] [grid-template-columns:calc(100%-var(--icon-button-w)*2)_auto_auto] before:relative before:h-full before:rounded-t-lg before:border before:border-b-0 before:border-gray-300 before:[grid-area:preview];
+}
+
+.ImageEditor-editToggle,
+.ImageEditor-open {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs ml-1 mr-[5px] overflow-visible before:btu-icon touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-1 after:-right-[5px] after:-top-1 after:border after:border-l-0 after:border-gray-300;
+}
+
+.ImageEditor-open {
+  @apply relative [grid-area:open] before:btu-icon-pencil-ruler after:border-r-gray-200;
+}
+
+.ImageEditor-editToggle {
+  @apply [grid-area:edit] before:btu-icon-ellipsis after:rounded-br-lg;
+}
+
+.ImageEditor-editTools {
+  @apply Dropdown;
+
+  &.is-open {
+    @apply Dropdown-is-open;
+
+    [role='menuitem'] {
+      @apply Dropdown-item;
+    }
+  }
+}
+
+.ImageEditor-preview {
+  @apply relative mx-px mt-px overflow-hidden rounded-t-lg bg-gray-50 [grid-area:preview];
+  img,
+  canvas {
+    --gray-1: light-dark(theme(colors.gray.200), theme(colors.gray.600));
+    --gray-2: light-dark(theme(colors.gray.300), theme(colors.gray.500));
+    @apply m-auto block max-h-[60vh] max-w-full bg-[light-dark(theme(colors.gray.50),_theme(colors.gray.800))] bg-[linear-gradient(45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-2)_75%,var(--gray-2)),linear-gradient(-45deg,var(--gray-2)_25%,transparent_25%,transparent_75%,var(--gray-1)_75%,var(--gray-2))] bg-[length:10px_10px];
+  }
+
+  &.is-hidden img {
+    @apply hidden;
+  }
+}
+
+.ImageEditor-preview-loader {
+  @apply absolute left-0 top-0 z-[1] hidden size-full rounded-t-lg bg-gray-50/40 after:btu-loader after:absolute after:left-[calc(50%_-_var(--Loader-size)_/_2)] after:top-[calc(50%_-_var(--Loader-size)_/_2)] after:z-[2] after:size-[--Loader-size];
+}
+
+.is-imageEditorLoading .ImageEditor-preview-loader {
+  @apply block;
+}
+
+.is-imageEditorReady .ImageEditor-preview-loader {
+  @apply hidden after:content-none;
+}
+
+/* Focus UI & controls */
+.ImageEditor-focusToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs relative my-1 ml-[5px] mr-1 overflow-visible before:btu-icon before:btu-icon-focus touch-device:btu-button-sm after:absolute after:-bottom-1 after:-left-[5px] after:-right-1 after:-top-1 after:box-border after:rounded-bl-lg after:border after:border-r-0 after:border-gray-300;
+}
+
+/* size groups dropdown */
+.ImageEditor-groups {
+  @apply flex items-center [grid-area:groups];
+
+  .ComboInput {
+    @apply pointer-events-none relative !inline-flex h-9 min-w-[auto] rounded-none border-x-gray-200 focus:z-10 focus:border-x-primary-600 focus-visible:z-10 aria-expanded:z-10 aria-expanded:border-x-primary-600;
+
+    > .ComboInput-label,
+    > .ComboInput-icon {
+      @apply invisible;
+    }
+
+    .CIG & {
+      @apply w-[calc(100%_-_var(--icon-button-w))];
+    }
+  }
+}
+
+.ImageEditor-groups.is-focus-active {
+  .ComboInput {
+    @apply pointer-events-auto;
+
+    > .ComboInput-label,
+    > .ComboInput-icon {
+      @apply visible;
+    }
+  }
+
+  .ImageEditor-focusToggle {
+    @apply btu-button-pressed;
+  }
+}
+
+.ImageEditor-focus-container {
+  @apply cursor-pointer;
+}
+
+.ImageEditor-preview-border {
+  @apply absolute inset-0 rounded-t-lg border border-black-light opacity-40 mix-blend-hard-light;
+}
+
+/* Hide focus controls & helper text when focus toggle is off */
+.is-imagePreview:not(:has(.ImageEditor-groups.is-focus-active)) {
+  .ImageEditor-focus-container {
+    @apply pointer-events-none hidden;
+  }
+  .ImageEditor-focus-point,
+  .ImageEditor-implicitMessage,
+  .ImageEditor-focusMessage,
+  .ImageEditor-preview-border {
+    @apply hidden;
+  }
+}
+
+/* setting focus point helper text */
+.ImageEditor-focusMessage {
+  @apply mt-1.5 text-sm text-gray-500 [grid-area:message];
+}
+
+/* Focus message styling for reference field */
+.CIG-small:has(> .ContentSelector-search ~ .ImageEditor-container)
+  .ImageEditor-container
+  .ImageEditor-focusMessage {
+  @apply mt-0 border-t p-1.5;
+}
+
+.ImageEditor-implicitMessage {
+  @apply absolute left-1/2 top-2 z-[3] -translate-x-1/2 bg-gray-900 px-3 py-2 text-sm text-white;
+}
+
+.ImageEditor-implicitMessage.is-hidden {
+  @apply hidden;
+}
+
+.ImageEditor-focus-point {
+  --focus-point-color: light-dark(
+    theme(colors.primary.600),
+    theme(colors.primary.200)
+  );
+
+  @apply absolute z-[3] size-3.5 rounded-full bg-[radial-gradient(var(--focus-point-color),var(--focus-point-color)_5px,white_5px,white_7px)] [grid-area:preview];
+
+  &.is-implicit {
+    --focus-point-color: light-dark(
+      theme(colors.gray.700),
+      theme(colors.gray.100)
+    );
+  }
+
+  &.is-hidden:not(.is-implicit) {
+    @apply hidden;
+  }
+}
+
+/* Image Editor popup layout */
+.ImageEditor {
+  --margin: 68px;
+  @apply fixed inset-[--margin] z-[1000] grid origin-bottom scale-y-0 rounded-lg bg-white opacity-0 [grid-template-areas:'title_title''aside_editor''actions_editor'] [grid-template-columns:280px_auto] [grid-template-rows:auto_1fr_auto] [transition:opacity_theme(transitionDuration.500)_theme(transitionTimingFunction.in),transform_theme(transitionDuration.500)_theme(transitionTimingFunction.out)];
+
+  > * {
+    @apply z-[1];
+  }
+
+  .is-imageEditorOpen & {
+    @apply transform-none opacity-100 shadow-lg before:absolute before:-inset-[--margin] before:z-0 before:bg-gray-300/70 before:backdrop-blur;
+  }
+
+  .ActionBar {
+    @apply gap-2 rounded-bl-lg border-r [grid-area:actions];
+
+    .ImageEditor-resetButton {
+      @apply btu-button-fill-none !btu-button-error -order-1 me-auto btu-button-container-none before:btu-icon before:btu-icon-rotate-ccw;
+    }
+  }
+}
+
+.ImageEditor-main {
+  @apply relative overflow-x-auto rounded-br-lg [grid-area:editor];
+
+  img {
+    @apply block max-h-full max-w-full;
+  }
+}
+
+.ImageEditor-focus-container,
+.ImageEditor-hotspot-container,
+.ImageEditor-editableArea {
+  @apply absolute left-0 top-0 size-full;
+
+  &.is-hidden {
+    @apply hidden;
+  }
+}
+
+.ImageEditor-title {
+  @apply btu-heading-5 rounded-t-lg border-b bg-white px-6 py-3.5 text-gray-900 [grid-area:title];
+}
+
+.ImageEditor-aside {
+  @apply overflow-y-auto border-r bg-white [grid-area:aside];
+  .TC-unselected {
+    @apply hidden;
+  }
+
+  .TabBar {
+    @apply my-0 px-4;
+    > .TabBar-item {
+      @apply __tab-item-xs;
+    }
+  }
+}
+
+/* Image adjustments & filters UI */
+.ImageEditor-edit {
+  @apply px-4;
+  > h2,
+  > table {
+    @apply hidden;
+  }
+
+  > .CIG-row {
+    @apply py-4;
+  }
+
+  .CIG-label {
+    @apply text-sm font-semibold text-gray-700;
+
+    &:has(input[type='range']) {
+      @apply w-full justify-between;
+    }
+  }
+
+  .CIG-small {
+    @apply mt-2 text-sm text-gray-700;
+  }
+}
+
+.ImageEditor-editGroup {
+  input[type='checkbox'] {
+    @apply rounded-full after:btu-icon checked:after:btu-icon-dot after:btu-icon-xl checked:after:scale-[1];
+  }
+
+  input[type='range'] {
+    @apply appearance-none [--webkit-appearance:none];
+
+    &::-webkit-slider-container {
+      @apply h-2 [background:linear-gradient(to_right,transparent,transparent_50%,theme(colors.gray.300)_50%,theme(colors.gray.300)_calc(50%_+_1px),transparent_calc(50%_+_1px),transparent)];
+    }
+
+    &::-webkit-slider-runnable-track {
+      @apply h-px w-full cursor-pointer bg-gray-300;
+    }
+    &::-moz-range-track {
+      @apply h-px w-full cursor-pointer bg-gray-300;
+    }
+
+    &::-webkit-slider-thumb {
+      @apply -mt-[6.5px] size-3.5 rounded-full [-webkit-appearance:none] [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
+    }
+    &::-moz-range-thumb {
+      @apply -mt-[6.5px] size-3.5 rounded-full [background:radial-gradient(theme(colors.white.DEFAULT),theme(colors.white.DEFAULT)_5px,theme(colors.gray.700)_5px,theme(colors.gray.700)_7px)];
+    }
+  }
+}
+
+/* Image editor crops tab */
+.ImageEditor-sizes {
+  > table {
+    @apply hidden;
+  }
+
+  > .Message {
+    @apply rounded-none border-r-0 border-t-0;
+  }
+}
+
+.ImageEditor-sizeSelectors {
+  @apply grid gap-2 p-4;
+}
+
+.ImageEditor-size {
+  @apply relative flex w-full animate-slide-fade-scroll cursor-pointer flex-wrap rounded-lg border border-gray-300 bg-white shadow-sm [animation-range:entry_10%_contain_10dvh] [animation-timeline:--image-size-scroll] [view-timeline-name:--image-size-scroll];
+
+  &.imageEditor-sizeSelected {
+    @apply border-primary-500 bg-primary-50;
+  }
+
+  &:hover {
+    @apply bg-gray-100;
+  }
+
+  &.ImageEditor-sizeModified {
+    .ImageEditor-sizeDescription .is-inherit {
+      @apply hidden;
+    }
+
+    .ImageEditor-sizeDescription .is-override {
+      @apply block;
+    }
+  }
+}
+
+.ImageEditor-sizePreview {
+  @apply order-1 flex h-[168px] w-full items-center justify-center overflow-hidden rounded-t-lg bg-gray-50;
+
+  canvas,
+  img {
+    @apply max-h-full max-w-full;
+  }
+}
+
+.ImageEditor-sizeContainer {
+  @apply order-2 flex w-full gap-2 border-t px-4 py-3;
+
+  &:has(+ .ImageEditor-sizeDescription:not(:empty)) {
+    @apply pb-0;
+  }
+}
+
+.ImageEditor-sizeLabel {
+  @apply w-[calc(100%-theme(iconSize.md)-theme(spacing.4))] grow self-center text-sm font-medium capitalize text-gray-900;
+  br {
+    @apply hidden;
+  }
+
+  > *:not(:last-child) {
+    @apply after:[--tw-content:',_'];
+  }
+}
+
+.ImageEditor-sizeDescription {
+  @apply order-2 basis-full px-4 pb-4 text-xs capitalize text-gray-500 empty:hidden;
+  .is-inherit {
+    @apply block;
+  }
+
+  .is-override {
+    @apply hidden;
+  }
+}
+
+.ImageEditor-renditionResetButton {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs pointer-events-none invisible before:btu-icon before:btu-icon-rotate-ccw touch-device:btu-button-sm;
+
+  &.is-visible {
+    @apply pointer-events-auto visible;
+  }
+}
+
+.ImageEditor-rotate-left,
+.ImageEditor-rotate-right,
+.ImageEditor-flip-h,
+.ImageEditor-flip-v {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon;
+}
+
+.ImageEditor-rotate-left {
+  @apply before:btu-icon-rotate-ccw;
+}
+
+.ImageEditor-rotate-right {
+  @apply before:btu-icon-rotate-cw;
+}
+
+.ImageEditor-flip-h {
+  @apply before:btu-icon-flip-horizontal-2;
+}
+
+.ImageEditor-flip-v {
+  @apply before:btu-icon-flip-vertical-2;
+}
+
+/* Hotspots UI */
+.ImageEditor-hotspotableArea {
+  @apply relative;
+}
+
+.ImageEditor-hotspotableArea.is-dragging
+  .ImageEditor-hotspot.is-draggable:not(.is-dragging) {
+  @apply opacity-30;
+}
+
+.ImageEditor-hotspots {
+  @apply p-4;
+  /* Hide the Transient hotspot region option since it isn't used. */
+  .ComboInput-option[data-value^='Transient'],
+  /* Hide the hotspot item's x/y inputs since those values will come from dragging hotspot overlays. */
+  .CIG-row[data-name$='/cms.image.x'],
+  .CIG-row[data-name$='/cms.image.y'] {
+    @apply hidden;
+  }
+}
+
+.ImageEditor-hotspot {
+  --hotspot-bg: theme(colors.white.light);
+  --hotspot-border: light-dark(theme(colors.gray.200), theme(colors.gray.600));
+
+  @apply absolute z-[1] flex size-9 items-center justify-center rounded-full border border-[--hotspot-border] bg-[--hotspot-bg] text-sm font-semibold text-black-light opacity-100 shadow-lg [transition:opacity_theme(transitionDuration.500)_ease];
+}
+
+.ImageEditor-hotspot.is-hidden {
+  @apply opacity-0;
+}
+
+.ImageEditor-hotspot.is-hovered {
+  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
+}
+
+.ImageEditor-hotspot.is-removing {
+  --hotspot-bg: light-dark(theme(colors.error.25), theme(colors.error.900));
+  @apply pointer-events-none text-error-400 line-through;
+}
+
+.ImageEditor-hotspot.is-added {
+  --bg-from: light-dark(theme(colors.primary.50), theme(colors.primary.800));
+  --border-from: light-dark(
+    theme(colors.primary.600),
+    theme(colors.primary.200)
+  );
+
+  --bg-to: theme(colors.white.light);
+  --border-to: light-dark(theme(colors.gray.200), theme(colors.gray.600));
+  @apply animate-hotspot-added;
+}
+
+.ImageEditor-hotspot.is-dragging {
+  --hotspot-bg: light-dark(theme(colors.primary.50), theme(colors.primary.800));
+  --hotspot-border: light-dark(
+    theme(colors.primary.600),
+    theme(colors.primary.200)
+  );
+}
+
+.ImageEditor-hotspot.is-moving {
+  --hotspot-bg: light-dark(theme(colors.gray.100), theme(colors.gray.700));
+  @apply opacity-75;
+}
+
+/* When displayed within a dialog, just use the dialog's backdrop and margin. */
+dialog:modal .ImageEditor {
+  @apply [--margin:0];
+}

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

@@ -0,0 +1,11 @@
+.RecognitionResultsLink {
+  @apply py-4 text-sm;
+}
+
+.RecognitionResultsErrors {
+  @apply [&:not(:empty)]:pt-4;
+}
+
+.Widget[name='imageRecognitionResults'] .CIG {
+  @apply !flex;
+}