@brightspot/ui 3.0.1 → 5.0.1

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

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

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

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

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

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

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

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

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