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

package/src/legacy/tool-ui/src/form/FormFilter/README.md

@@ -1,31 +0,0 @@
-# `<btu-form-filter>`
-
-Will display a search button that opens an input for users to filter the CIG-row(s) of a CIG form container.
-
-## Examples
-
-HTML
-
-```html
-<btu-form-filter
-  selector="form > .CIG"
-  nomatches="No matching items!"
-  placeholder="Find in Site"
-></btu-form-filter>
-<form class="StandardForm">
-  <div class="CIG">
-    <div class="CIG-row">...</div>
-    <div class="CIG-row">...</div>
-    <div class="CIG-row">...</div>
-    ...
-  </div>
-</form>
-```
-
-## Properties
-
-| Name        | Default          | Description                                          |
-| ----------- | ---------------- | ---------------------------------------------------- |
-| noMatches   | 'None Found'     | A localized not found message for user.              |
-| placeholder | 'Filter content' | Placeholder text for the input field                 |
-| selector    | 'form > .CIG'    | CSS selector to use to find the container to filter. |

package/src/legacy/tool-ui/src/form/FormFilter/index.ts

@@ -1,340 +0,0 @@
-import { html, LitElement, nothing } from 'lit'
-import { customElement, property, state } from 'lit/decorators.js'
-import onFind from '../../dom/onFind'
-import debounce from '../../util/debounce'
-import { v1 as uuid } from 'uuid'
-
-/**
- * Will display a search button that opens an input for users to filter the CIG-row(s) of a CIG form container.
- *
- * @element btu-form-filter
- * @property {string} noMatches - Localized message to display when no matches are found. Default: 'None found'
- * @property {string} placeholder - Placeholder text for the input field. Default: 'Filter content'
- * @property {string} selector - CSS selector to find the container to filter. Default: 'form > .CIG'
- */
-@customElement('btu-form-filter')
-export default class FormFilter extends LitElement {
-  static noFilterTypes = new Set(['option', 'textarea'])
-
-  @property()
-  noMatches = 'No Results!'
-
-  @property()
-  placeholder = 'Find in form'
-
-  @property()
-  selector = 'form > .CIG'
-
-  @state()
-  private container?: Element
-
-  constructor() {
-    super()
-  }
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    if (this.selector) {
-      onFind(this.selector, (container) => {
-        this.container = container
-        new FormFilter()
-      })
-    }
-  }
-
-  // Renders the template into the main DOM tree and not shadow root.
-  createRenderRoot() {
-    return this
-  }
-
-  handleClick = () => {
-    const filterContainer = this.querySelector('.FormFilter-container')
-    const input = this.querySelector('input')
-
-    if (input) {
-      input.focus()
-      const isOpen = this.classList.toggle('is-open')
-      this.querySelector('.FormFilter-icon')?.classList.toggle(
-        'is-open',
-        isOpen,
-      )
-      filterContainer?.classList.toggle('is-open', isOpen)
-
-      if (filterContainer?.classList.contains('is-open')) {
-        input.focus()
-      } else {
-        this.removeMessage()
-        this.container?.classList.remove('is-filtering')
-        this.container
-          ?.querySelectorAll('.is-filterResult')
-          .forEach((element) =>
-            element.classList.remove('is-filterResult', 'has-title'),
-          )
-
-        input.blur()
-        input.value = ''
-        unmarkText(this)
-      }
-    }
-  }
-
-  handleInput = () => {
-    const input = this.querySelector('input')
-
-    if (this.container && input) {
-      this.removeMessage()
-
-      this.querySelectorAll('.is-filterResult').forEach((element) =>
-        element.classList.remove('is-filterResult'),
-      )
-
-      this.container
-        .querySelectorAll('.is-filterResult')
-        .forEach((element) => element.classList.remove('is-filterResult'))
-
-      unmarkText(this)
-
-      if (input.value.length === 0) {
-        this.container.classList.remove('is-filtering')
-      } else {
-        this.container.classList.add('is-filtering', 'is-loading')
-        if (walkDom instanceof Function) {
-          walkDom(this, input?.value)
-        }
-      }
-    }
-  }
-
-  getContainer(): Element | undefined {
-    return this.container
-  }
-
-  private removeMessage(): void {
-    this.container?.parentElement
-      ?.querySelector('.FormFilter-message')
-      ?.remove()
-  }
-
-  render() {
-    const id = `i${uuid()}`
-    return html`<div class="FormFilter-container">
-        <label aria-label="${this.placeholder}"></label>
-        <input
-          type="text"
-          id="${id}"
-          name="formFilter"
-          @input="${this.handleInput}"
-          placeholder="${this.placeholder ?? nothing}"
-          autocomplete="off"
-        />
-      </div>
-      <button
-        class="FormFilter-icon"
-        data-icon-name="search"
-        type="button"
-        aria-controls="${id}"
-        aria-expanded="false"
-        aria-label="${this.placeholder}"
-        title="${this.placeholder}"
-        @click="${this.handleClick}"
-      ></button>`
-  }
-}
-
-const walkDom = debounce(800, (fn: unknown, value: unknown) => {
-  if (!(fn instanceof FormFilter) || !(typeof value === 'string')) return
-  const container = fn.getContainer()
-
-  if (!container) return
-
-  let isResults = false
-  const tabs = new Set<string>()
-  const nodes = new Set<Node>()
-
-  const walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, {
-    acceptNode: function (node: Text) {
-      if (
-        node !== null &&
-        node.textContent !== null &&
-        node.parentElement !== null &&
-        !FormFilter.noFilterTypes.has(
-          node.parentElement.nodeName.toLocaleLowerCase(),
-        ) &&
-        !node.parentElement.closest('.ComboInput, .RCIG-controls') &&
-        node.textContent.toLowerCase().indexOf(value.toLowerCase()) > -1
-      ) {
-        return NodeFilter.FILTER_ACCEPT
-      }
-
-      return NodeFilter.FILTER_REJECT
-    },
-  })
-
-  while (walker.nextNode()) {
-    const node = walker.currentNode
-    const element = node.parentElement
-    const parent = element?.parentElement
-    const cigTitle = furthestClass(element, 'CIG-title')
-    const cigRow = furthestClass(element, 'CIG-row')
-
-    if (cigTitle || cigRow) {
-      isResults = true
-      nodes.add(node)
-    }
-
-    if (cigTitle) {
-      let nextSibling = cigTitle.nextElementSibling
-      cigTitle.classList.add('is-filterResult')
-
-      if (nextSibling) {
-        do {
-          nextSibling.classList.add('is-filterResult', 'has-title')
-          nextSibling = nextSibling.nextElementSibling
-        } while (
-          nextSibling &&
-          nextSibling.classList &&
-          nextSibling.classList.contains('CIG-row')
-        )
-      }
-    }
-
-    if (
-      cigRow instanceof HTMLElement &&
-      !cigRow.classList.contains('is-filterResult')
-    ) {
-      let previousSibling = cigRow.previousElementSibling
-      const tab: string =
-        cigRow.dataset && cigRow.dataset.tab ? cigRow.dataset.tab : ''
-      let hasTitle = false
-
-      cigRow.classList.add('has-title')
-
-      while (previousSibling) {
-        if (
-          previousSibling instanceof HTMLElement &&
-          previousSibling.classList &&
-          previousSibling.classList.contains('CIG-title') &&
-          previousSibling.dataset.tab === tab
-        ) {
-          previousSibling.classList.add('is-filterResult')
-          previousSibling = null
-          hasTitle = true
-        } else {
-          previousSibling = previousSibling.previousElementSibling
-        }
-      }
-
-      if (!hasTitle && !tabs.has(tab)) {
-        cigRow.classList.remove('has-title')
-        tabs.add(tab)
-      }
-
-      cigRow.classList.add('is-filterResult')
-    }
-
-    // Checks for specific setting types.
-
-    // Plugins
-    if (parent && parent.classList && parent.classList.contains('PluginItem')) {
-      const tab = parent.closest('.Tab')
-      if (tab) {
-        tab.classList.add('is-filterResult')
-      }
-      parent.classList.add('is-filterResult')
-      if (parent?.parentElement?.previousElementSibling) {
-        parent.parentElement.previousElementSibling.classList.add(
-          'is-filterResult',
-        )
-      }
-    }
-  }
-
-  container.classList.remove('is-loading')
-
-  if (!isResults) {
-    const message = document.createElement('div')
-    message.setAttribute('class', 'Message message-warning FormFilter-message')
-    message.textContent = fn.noMatches
-
-    // V4: Maintain no-results message as a child of CIG
-    // V5: Adjust message's position so that CIG doesn't restrict its width
-    container.insertAdjacentElement(
-      window.BRIGHTSPOT?.ui?.cms?.enableV5UI ? 'beforebegin' : 'afterbegin',
-      message,
-    )
-  }
-
-  // This can end after user has cleared input so always check directly from element.
-  if (fn.querySelector('input')?.value) {
-    nodes.forEach((node) => markText(value, node))
-  } else {
-    unmarkText(fn)
-  }
-})
-
-/**
- * Remove any previously inserted <mark> tags.
- *
- * @param {FormFilter} instance Current instance of this plugin.
- */
-function unmarkText(instance: FormFilter) {
-  instance
-    .getContainer()
-    ?.querySelectorAll('mark')
-    .forEach((element: HTMLElement) => {
-      const parent = element.parentElement
-      element.insertAdjacentText('afterend', element.textContent || '')
-      element.remove()
-      if (parent) {
-        parent.normalize()
-      }
-    })
-}
-
-/**
- * Wrap the (case-insensitive) value in a <mark> tag.
- *
- * @param {String} value The users search string.
- * @param {Node} textNode The TextNode found by the Walker.
- */
-function markText(value: string, textNode: Node) {
-  const re = new RegExp(`(${value})`, 'i')
-  const str = textNode?.textContent?.replace(re, '<mark>$1</mark>')
-  const parent = textNode.parentElement
-  if (parent) {
-    parent.removeChild(textNode)
-    parent.insertAdjacentHTML('afterbegin', str || '')
-  }
-}
-
-/**
- * Return the outermost element in the DOM heirarchy with the matching class name.
- *
- * @param {Element} element The root Element to begin with.
- * @param {String} className The CSS class name to check against.
- */
-function furthestClass(
-  element: Element | null,
-  className: string,
-): Element | null {
-  if (element) {
-    const closest = element.parentElement
-      ? element.parentElement.closest(`.${className}`)
-      : null
-
-    return closest
-      ? furthestClass(closest, className)
-      : element.classList && element.classList.contains(className)
-        ? element
-        : null
-  }
-
-  return null
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-form-filter': FormFilter
-  }
-}

package/src/legacy/tool-ui/src/form/Input/index.less

@@ -1,43 +0,0 @@
-@import (reference) '../../main/webapp/v4/IconButton.less';
-@import (reference) '../../main/webapp/v4/TextInput.less';
-
-btu-input[type='password'] {
-  &:extend(.TextInput all);
-
-  display: inline-flex;
-  gap: var(--gap-m);
-  position: relative;
-  vertical-align: middle;
-  width: 100%;
-
-  > input {
-    border: none;
-
-    &:focus {
-      border: none;
-      padding-bottom: calc(var(--gap-s) - 1px);
-    }
-  }
-
-  .ShowPassword-toggle {
-    .IconButton;
-    .Link();
-
-    --Icon-size: var(--iconSize-xs);
-    --IconButton-name: 'visibility';
-
-    align-content: center;
-    border: none;
-    display: grid;
-    justify-content: center;
-    width: calc(var(--gap-s) * 2.8 + var(--Icon-size));
-
-    &::before {
-      padding: 0;
-    }
-
-    &.off {
-      --IconButton-name: 'visibility_off';
-    }
-  }
-}

package/src/legacy/tool-ui/src/form/Input/index.ts

@@ -1,92 +0,0 @@
-import { LitElement, html, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { WrappingMixin } from '../../WrappingMixin'
-import { PlaceholderEditableMixin } from '../../PlaceholderEditableMixin'
-import { EventEmitterMixin } from '../../EventEmitterMixin'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  await import('./index.less')
-}
-
-@customElement('btu-input')
-export default class Input extends PlaceholderEditableMixin(
-  EventEmitterMixin(WrappingMixin(LitElement)),
-) {
-  static get tagName() {
-    return 'btu-input'
-  }
-
-  @property({ type: Boolean, state: true })
-  autofocusInput
-  @property({ type: Boolean, state: true })
-  passwordVisible
-  @property({ reflect: true })
-  type?: string
-
-  private handleHidePassword(evt: Event) {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.type = 'password'
-      this.passwordVisible = false
-      this.emit('btu-input-password-hide')
-    }
-  }
-
-  private handleShowPassword(evt: Event) {
-    if (this.input instanceof HTMLInputElement) {
-      this.input.type = 'text'
-      this.passwordVisible = true
-      this.emit('btu-input-password-show')
-    }
-  }
-
-  // Overrides #find in superclass.
-  find() {
-    return this.querySelector<HTMLInputElement>(':scope > input')
-  }
-
-  // Overrides #child setter in superclass.
-  set child(_c: HTMLInputElement) {
-    super._child = _c
-    this.input = _c
-  }
-
-  constructor() {
-    super()
-    this.autofocusInput = false
-    this.passwordVisible = false
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  passwordToggleTemplate() {
-    return html`<button
-      type="button"
-      aria-label=${this.passwordVisible
-        ? window.BRIGHTSPOT?.ui?.input?.secretHide ?? 'Hide'
-        : window.BRIGHTSPOT?.ui?.input?.secretShow ?? 'Show'}
-      @click=${this.passwordVisible
-        ? this.handleHidePassword
-        : this.handleShowPassword}
-      class="ShowPassword-toggle ${this.passwordVisible ? 'off' : 'on'}"
-    ></button>`
-  }
-
-  render() {
-    if (this.autofocusInput) {
-      this.input?.focus()
-    }
-    return html`${this.type === 'password'
-      ? this.passwordToggleTemplate()
-      : nothing}`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-input': Input
-  }
-}

package/src/legacy/tool-ui/src/form/SearchInput/README.md

@@ -1,23 +0,0 @@
-# Search Input Web Component
-
-This is a web component that formats a text search input.
-
-## Examples
-
-HTML
-
-```html
-<btu-search-input name="term" arialabel="Search term" label="Search">
-  <btu-search-input></btu-search-input
-></btu-search-input>
-```
-
-## Properties
-
-| Name          | Type   | Description                                                                              |
-| ------------- | ------ | ---------------------------------------------------------------------------------------- |
-| `arialabel`   | string | Text used for the aria label on the input element.                                       |
-| `label`       | string | The text used for a caption attached to the input.                                       |
-| `name`        | string | Used as the `name` attribute on the input element to identify it when submitting a form. |
-| `placeholder` | string | The text that appears as the placeholder. Falls back to the `label` text if undefined.   |
-| `value`       | string | The text used as the `value` attribute on the input element to set the initial value.    |

package/src/legacy/tool-ui/src/form/SearchInput/index.ts

@@ -1,89 +0,0 @@
-import { LitElement, html, nothing } from 'lit'
-import { customElement, property } from 'lit/decorators.js'
-import { ComponentStatesMixin } from '../../ComponentStatesMixin'
-import { v1 as uuid } from 'uuid'
-
-@customElement('btu-search-input')
-export default class SearchInput extends ComponentStatesMixin(LitElement) {
-  private _id = `i${uuid()}`
-
-  @property({ type: String })
-  arialabel?: string
-
-  @property({ type: String })
-  label?: string
-
-  @property({ type: String })
-  name?: string
-
-  @property({ type: String })
-  placeholder?: string
-
-  @property({ type: String })
-  value?: string
-
-  constructor() {
-    super()
-    this.states.add('btu-loading')
-  }
-
-  firstUpdated() {
-    this.states.delete('btu-loading')
-
-    // Focus on the input when a search opens in a popup.
-    const popup = this.closest(
-      '.Popup:not([data-popup-source-class*="edit"], [data-popup-source-class*="create"])',
-    )
-    const input = this.querySelector('input')
-    if (input && popup) {
-      input.focus()
-      input.select()
-    }
-
-    // Don't submit a search when pressing <enter>.
-    // Exception: if press occurs on a non-submitting button, allow default behavior.
-    const form = this.closest('form')
-    if (!form) return
-    form.addEventListener('keydown', (evt) => {
-      if (
-        evt.target instanceof Element &&
-        evt.target.matches('button[type="button"]')
-      ) {
-        return
-      }
-
-      if (evt.key === 'Enter') {
-        evt.preventDefault()
-      }
-    })
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  render() {
-    return html`<label for="${this._id}">${this.label}</label>
-      <btu-input type="text">
-        <input
-          type="text"
-          id="${this._id}"
-          name="${this.name || nothing}"
-          placeholder="${this.placeholder || this.label || nothing}"
-          value="${this.value || nothing}"
-          autocomplete="off"
-          aria-label="${this.arialabel || nothing}"
-          readonly
-          @focus="${(e: Event) => {
-            if (e.target instanceof HTMLInputElement) e.target.readOnly = false
-          }}"
-        />
-      </btu-input>`
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-search-input': SearchInput
-  }
-}

package/src/legacy/tool-ui/src/form/TextAreaInput/index.less

@@ -1,11 +0,0 @@
-// Styling for text area inputs in AutoExpand
-btu-textarea-input {
-  .AutoExpand > & {
-    grid-area: ~'1 / 1 / 2 / 2';
-    overflow: hidden;
-
-    > textarea {
-      height: 100%;
-    }
-  }
-}

package/src/legacy/tool-ui/src/form/TextAreaInput/index.ts

@@ -1,36 +0,0 @@
-import { LitElement } from 'lit'
-import { customElement } from 'lit/decorators.js'
-import { WrappingMixin } from '../../WrappingMixin'
-import { PlaceholderEditableMixin } from '../../PlaceholderEditableMixin'
-
-if (!window.BRIGHTSPOT?.ui.cms.enableV5UI) {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  await import('./index.less')
-}
-
-@customElement('btu-textarea-input')
-export default class TextAreaInput extends PlaceholderEditableMixin(
-  WrappingMixin(LitElement),
-) {
-  // Overrides #find in superclass.
-  find() {
-    return this.querySelector<HTMLTextAreaElement>(':scope > textarea')
-  }
-
-  // Overrides #child setter in superclass.
-  set child(_c: HTMLTextAreaElement) {
-    super._child = _c
-    this.input = _c
-  }
-
-  createRenderRoot() {
-    return this
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-textarea-input': TextAreaInput
-  }
-}