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

package/src/legacy/tool-ui/src/main/webapp/v4/CIGCluster.less

@@ -0,0 +1,55 @@
+btu-cig-cluster {
+  .CIG-title {
+    padding: 0;
+  }
+
+  &:state(btu-error) {
+    .CIG-title {
+      color: var(--color-red6);
+
+      .CIG-titleText::after {
+        .Icon;
+
+        content: 'error';
+        margin-left: var(--gap-s);
+        vertical-align: middle;
+      }
+    }
+  }
+
+  button {
+    background: transparent;
+    border: 0;
+    color: inherit;
+    display: flex;
+    justify-content: space-between;
+    padding: 0 var(--gap-m);
+    text-transform: none;
+    width: 100%;
+
+    .CIG-titleToggle {
+      .IconButton;
+
+      --IconButton-name: 'keyboard_arrow_up';
+
+      position: absolute;
+      right: calc(var(--CIG-padding) - var(--gap-l) - var(--gap-s));
+      top: calc(50% - var(--Icon-size) / 2 - var(--gap-s));
+      transform: rotate(180deg);
+      transition: transform var(--time-xs);
+    }
+
+    &:hover,
+    &:focus {
+      color: inherit;
+
+      .CIG-titleToggle {
+        .IconButton.is-focus;
+      }
+    }
+
+    &[aria-expanded='true'] > .CIG-titleToggle {
+      transform: none;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Card.less

@@ -0,0 +1,53 @@
+.Card {
+  background: var(--color-white);
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+
+  &:hover {
+    box-shadow: var(--shadow-2);
+  }
+}
+
+.Card-media {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+
+  img {
+    display: block;
+    height: auto;
+    width: 100%;
+  }
+
+  // Supply a max size because in some instances the image is not constrained by a wrapping element.
+  > img {
+    max-width: 120px;
+  }
+}
+
+.Card-media.is-missing {
+  margin: auto;
+  min-height: 75px;
+
+  &::before {
+    .Icon;
+
+    color: var(--color-gray3);
+    content: 'widgets';
+    display: flex;
+    font-size: var(--fontSize-xxl);
+    text-decoration: none;
+  }
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.Card-title {
+  background: var(--color-gray2);
+  padding: var(--gap-m) var(--gap-l);
+}

package/src/legacy/tool-ui/src/main/webapp/v4/Checkbox.less

@@ -0,0 +1,99 @@
+.Checkbox {
+  -webkit-appearance: none;
+  border: 0;
+  cursor: pointer;
+  display: inline-block;
+  height: var(--Icon-size) !important;
+  padding: 0;
+  position: relative;
+  vertical-align: middle;
+  width: var(--Icon-size) !important;
+
+  &:focus {
+    background: transparent;
+    padding: 0;
+  }
+
+  &::before {
+    border: 1px solid currentcolor;
+    border-radius: 2px;
+    bottom: 3px;
+    content: '';
+    left: 3px;
+    position: absolute;
+    right: 3px;
+    top: 3px;
+  }
+
+  &::after {
+    .Icon;
+
+    display: block;
+    top: 0;
+  }
+
+  &:checked::after {
+    content: 'check_box';
+  }
+
+  &:indeterminate::after {
+    content: 'indeterminate_check_box';
+  }
+}
+
+.Checkbox.is-toggle {
+  .Icon.is-l;
+
+  margin: calc(0px - var(--Icon-size) * 0.1) 0
+    calc(0px - var(--Icon-size) * 0.1) calc(0px - var(--Icon-size) * 0.1);
+
+  &::before {
+    background: var(--color-gray5);
+    border: 0;
+    border-radius: 50%;
+    bottom: auto;
+    height: var(--Icon-size);
+    left: calc(50% - var(--Icon-size) / 2);
+    opacity: 0;
+    right: auto;
+    top: calc(50% - var(--Icon-size) / 2);
+    transform: scale(0);
+    transition:
+      opacity var(--time-xs) var(--ease-in),
+      transform var(--time-s) var(--ease-out);
+    width: var(--Icon-size);
+  }
+
+  &::after {
+    color: var(--color-gray5);
+    content: 'toggle_off';
+  }
+
+  &:checked::after {
+    color: var(--Link-hoverColor);
+    content: 'toggle_on';
+  }
+
+  &:checked::before {
+    background: var(--Link-hoverColor);
+  }
+
+  &:focus,
+  &:hover {
+    &::before {
+      transform: none;
+    }
+  }
+
+  &:hover::before {
+    opacity: 0.08;
+  }
+
+  &:focus::before {
+    opacity: 0.16;
+  }
+}
+
+input[type='checkbox'] {
+  &:extend(.Checkbox all);
+}

package/src/legacy/tool-ui/src/main/webapp/v4/CheckboxInput.js

@@ -0,0 +1,22 @@
+import onFind from './dom/onFind'
+
+// Manages "toggle on"/"toggle off" tooltips
+onFind(
+  [
+    '.ContentEdit-left input[type="checkbox"]',
+    '.SearchWidget-filter input[type="checkbox"]',
+  ],
+  (checkbox) => {
+    const updateTooltip = () => {
+      checkbox.setAttribute(
+        'title',
+        checkbox.checked
+          ? window.BRIGHTSPOT?.ui.tooltips.toggleOff
+          : window.BRIGHTSPOT?.ui.tooltips.toggleOn,
+      )
+    }
+
+    updateTooltip()
+    checkbox.addEventListener('change', updateTooltip)
+  },
+)

package/src/legacy/tool-ui/src/main/webapp/v4/Collections.less

@@ -0,0 +1,49 @@
+.AddToCollectionWidget-collectionsList {
+  margin: var(--gap-m);
+
+  &-title {
+    margin-bottom: 0;
+  }
+}
+
+.CollectionsWidget {
+  .CollectionList {
+    &-item {
+      align-items: center;
+      display: flex;
+
+      &-edit {
+        align-items: center;
+        display: flex;
+        justify-content: center;
+        margin-left: auto;
+
+        &::before {
+          padding: 0;
+        }
+      }
+    }
+  }
+
+  .searchCollectionForm {
+    padding-top: var(--gap-s);
+  }
+
+  .SearchResult {
+    background: var(--color-white);
+
+    &-fullscreen {
+      display: none;
+    }
+
+    &-limit {
+      .ComboInput {
+        width: auto;
+      }
+    }
+  }
+
+  .pagination {
+    right: var(--gap-s) !important;
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/ColorInput.js

@@ -0,0 +1,5 @@
+import onFindOnce from './dom/onFindOnce'
+
+onFindOnce('input.color', async () => {
+  await import(/* webpackChunkName: 'CISpectrum', */ './ColorInputSpectrum')
+})

package/src/legacy/tool-ui/src/main/webapp/v4/ColorInputSpectrum.js

@@ -0,0 +1,107 @@
+import onVisible from './dom/onVisible'
+import 'spectrum-colorpicker'
+
+if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
+  await import('./ColorInputSpectrum.less')
+}
+
+const setColorAttributes = ($input, color) => {
+  const $preview = $input.next('.sp-replacer').find('.sp-preview')
+
+  if (color) {
+    $preview.attr('data-color', color)
+  } else {
+    $preview.removeAttr('data-color')
+    const placeholder = $input.prop('placeholder')
+    color = (placeholder?.startsWith('#') && placeholder) || 'transparent'
+  }
+
+  $preview.find('.sp-preview-inner').css('background-color', color)
+}
+
+let idIndex = 0
+onVisible('btu-input > input[type="text"].color', (input) => {
+  const $input = $(input)
+  const update = () => $input.spectrum('reflow')
+
+  $input.spectrum({
+    allowEmpty: true,
+    cancelText: 'Cancel',
+    chooseText: 'OK',
+    clickoutFiresChange: false,
+    palette: (window.THEME_BUNDLE_COLOR_SWATCHES || []).map((s) => s.color),
+    preferredFormat: 'hex6',
+    showInitial: false,
+    showInput: true,
+    showPalette: true,
+
+    show: function () {
+      const zIndex =
+        Number.parseInt(
+          this.closest('.Popup')
+            ? this.closest('.Popup').style.zIndex
+            : '100007',
+        ) + 1
+      $input.spectrum('container').css('z-index', zIndex)
+      window.addEventListener('resize', update, true)
+      window.addEventListener('scroll', update, true)
+      setColorAttributes($input, $input.val())
+    },
+
+    hide: function () {
+      window.removeEventListener('resize', update)
+      window.removeEventListener('scroll', update)
+      setColorAttributes($input, $input.val())
+    },
+
+    change: function (color) {
+      setColorAttributes($input, color)
+      $input[0].dispatchEvent(new Event('change', { bubbles: true }))
+    },
+
+    move: function (color) {
+      setColorAttributes($input, color)
+    },
+  })
+
+  $input
+    .next('.sp-replacer')
+    .find('.sp-preview')
+    .attr('data-placeholder', $input.prop('placeholder'))
+
+  setColorAttributes($input, $input.val())
+
+  $input.on('placeholderUpdate', () => {
+    const $preview = $input.next('.sp-replacer').find('.sp-preview')
+    $preview.attr('data-placeholder', $input.attr('placeholder'))
+    setColorAttributes($input, $preview.attr('data-color'))
+  })
+
+  const control = input.parentNode?.querySelector(':scope > .sp-replacer')
+  if (!control) return
+  const popoverId = `sp-container-${idIndex++}`
+  const container = $input.spectrum('container')[0]
+  if (!container) return
+  container.id = popoverId
+  control.setAttribute('aria-controls', popoverId)
+  const parentDialog = input.closest('dialog')
+  if (parentDialog) {
+    parentDialog.appendChild(container)
+  }
+})
+
+$(window).on('resize', () => {
+  $(document)
+    .find('input[type="text"].color')
+    .each(function () {
+      var $input = $(this)
+
+      if ($input.spectrum) {
+        if ($input.prop('disabled')) {
+          $input.spectrum('disable')
+        } else {
+          $input.spectrum('enable')
+        }
+      }
+    })
+})

package/src/legacy/tool-ui/src/main/webapp/v4/ColorInputSpectrum.less

@@ -0,0 +1,319 @@
+@import (reference) './Icon';
+
+.sp-hidden,
+.sp-initial {
+  display: none;
+}
+
+.sp-replacer {
+  cursor: pointer;
+  max-width: 100%;
+  padding: var(--gap-s) calc(var(--gap-s) + var(--Icon-size)) var(--gap-s) 0;
+  position: relative;
+  user-select: none;
+  width: 200px;
+
+  &::before {
+    background: var(--Input-borderColor);
+    bottom: 0;
+    content: '';
+    height: 1px;
+    left: 0;
+    position: absolute;
+    right: 0;
+  }
+
+  &.sp-active {
+    background: var(--Input-focusBackground);
+
+    &::before {
+      background: var(--Input-focusColor);
+      height: 2px;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    &::before {
+      background: var(--Input-focusColor);
+    }
+
+    .sp-dd {
+      color: var(--Input-focusColor);
+    }
+  }
+
+  .SearchWidget-filter & {
+    width: 100%;
+  }
+}
+
+.sp-preview {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  user-select: none;
+  white-space: nowrap;
+  width: 100%;
+
+  &::before {
+    content: '';
+  }
+
+  &[data-placeholder]::after {
+    content: attr(data-placeholder);
+    font-style: italic;
+    padding-left: 30px;
+  }
+
+  &[data-color]::after {
+    content: attr(data-color);
+    font-style: normal;
+    padding-left: 30px;
+  }
+
+  &[data-placeholder]:not([data-color])::after {
+    color: var(--color-gray5);
+  }
+}
+
+.sp-preview::before,
+.sp-preview-inner {
+  border-radius: 50%;
+  height: var(--Text-height);
+  left: 0;
+  position: absolute;
+  top: var(--gap-s);
+  width: var(--Text-height);
+}
+
+.sp-preview:not([data-placeholder^='#']) {
+  .sp-preview-inner.sp-clear-display::before {
+    .Icon;
+
+    content: 'block';
+    font-size: var(--Text-height);
+    top: 0;
+  }
+}
+
+.sp-dd {
+  bottom: calc(var(--gap-s) + (var(--Text-height) - var(--Icon-size)) / 2);
+  height: var(--Icon-size);
+  overflow: hidden;
+  position: absolute;
+  right: var(--gap-s);
+  width: var(--Icon-size);
+
+  &::before {
+    .Icon;
+
+    content: 'arrow_drop_down';
+    top: 0;
+    transition: transform var(--time-xs);
+
+    .sp-active & {
+      color: var(--Input-focusColor);
+      transform: rotate(-180deg);
+    }
+  }
+}
+
+.sp-container {
+  background: var(--color-white);
+  box-shadow: var(--shadow-3);
+  padding: var(--gap-m);
+  width: auto;
+  z-index: 100001;
+
+  &,
+  button {
+    user-select: none;
+  }
+}
+
+.sp-top {
+  position: relative;
+  width: 100%;
+}
+
+.sp-fill {
+  padding-top: 100%;
+}
+
+.sp-color {
+  bottom: calc(var(--gap-s) + var(--Icon-size));
+  left: 0;
+  position: absolute;
+  right: calc(var(--gap-s) + var(--Icon-size));
+  top: 0;
+}
+
+.sp-sat,
+.sp-val {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.sp-sat {
+  background-image: linear-gradient(to right, #fff, rgb(204 154 129 / 0%));
+}
+
+.sp-val {
+  background-image: linear-gradient(to top, #000, rgb(204 154 129 / 0%));
+}
+
+.sp-dragger,
+.sp-slider,
+.sp-alpha-handle {
+  background: var(--color-white);
+  border: 1px solid var(--color-black);
+  cursor: pointer;
+  opacity: 0.5;
+  position: absolute;
+  user-select: none;
+}
+
+.sp-dragger {
+  border-radius: 50%;
+  height: 10px;
+  left: 0;
+  top: 0;
+  width: 10px;
+}
+
+.sp-clear {
+  position: absolute;
+  right: 0;
+  top: 0;
+  user-select: none;
+
+  &::before {
+    .Icon;
+
+    content: 'block';
+  }
+}
+
+.sp-hue {
+  background: linear-gradient(
+    to bottom,
+    #f00 0%,
+    #ff0 17%,
+    #0f0 33%,
+    #0ff 50%,
+    #00f 67%,
+    #f0f 83%,
+    #f00 100%
+  );
+  bottom: calc(var(--gap-s) + var(--Icon-size));
+  position: absolute;
+  right: 0;
+  top: calc(var(--Icon-size) + var(--gap-s));
+  width: var(--Icon-size);
+}
+
+.sp-slider {
+  height: 7px;
+  left: -1px;
+  right: -1px;
+  top: 0;
+}
+
+.sp-alpha {
+  background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==')
+    center;
+  bottom: 0;
+  display: none;
+  height: var(--Icon-size);
+  left: 0;
+  position: absolute;
+  right: 0;
+  user-select: none;
+}
+
+.sp-alpha-inner {
+  height: 100%;
+  width: 100%;
+}
+
+.sp-alpha-handle {
+  bottom: -1px;
+  left: 50%;
+  top: -1px;
+  width: 7px;
+}
+
+.sp-input-container {
+  margin: calc(0px - var(--gap-m)) 0 var(--gap-m) 0;
+}
+
+.sp-container .sp-input {
+  box-sizing: border-box;
+}
+
+.sp-cancel {
+  float: right;
+  line-height: calc(var(--gap-s) * 2 + var(--Text-height));
+}
+
+.sp-palette {
+  max-width: calc((var(--gap-s) + var(--gap-m)) * 4);
+}
+
+.sp-picker-container {
+  float: left;
+}
+
+.sp-palette-container {
+  float: right;
+  position: relative;
+}
+
+.sp-cf::before,
+.sp-cf::after {
+  content: '';
+  display: table;
+}
+
+.sp-container * {
+  box-sizing: content-box;
+}
+
+.sp-palette .sp-thumb-el {
+  cursor: pointer;
+  display: block;
+  float: left;
+  height: var(--gap-l);
+  margin: 0 0 var(--gap-s) var(--gap-s);
+  position: relative;
+  width: var(--gap-l);
+}
+
+.sp-preview,
+.sp-alpha,
+.sp-thumb-el {
+  position: relative;
+}
+
+.sp-preview-inner,
+.sp-alpha-inner,
+.sp-thumb-inner {
+  bottom: 0;
+  display: block;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.sp-palette .sp-thumb-inner {
+  background-position: 50% 50%;
+  background-repeat: no-repeat;
+}
+
+.sp-palette-button-container {
+  display: none;
+}