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

package/src/legacy/tool-ui/src/PageNav.ts

@@ -1,108 +0,0 @@
-import onFind from './dom/onFind'
-import storage from './util/storage'
-
-type PageNavToggleState = 'OFF' | 'ON' | null
-const ToggleStorageKey = 'BSP.v5.Page.nav.toggle'
-
-const setToggle = (val: PageNavToggleState) => {
-  if (val !== null) storage.set(ToggleStorageKey, val)
-}
-
-export const getToggle = () => {
-  return storage.get(ToggleStorageKey) as PageNavToggleState
-}
-
-export const toggle = (forcedVal?: PageNavToggleState) => {
-  if (forcedVal !== undefined) {
-    setToggle(forcedVal)
-  } else {
-    setToggle(getToggle() === 'ON' ? 'OFF' : 'ON')
-  }
-  update()
-
-  window.document.body.dispatchEvent(
-    new CustomEvent('page-nav-rail-toggled', {
-      bubbles: true,
-      detail: { toggleState: getToggle() },
-    }),
-  )
-}
-
-const update = () => {
-  const lastToggleState = getToggle()
-  // Update with last state if it exists.
-  if (lastToggleState !== null) {
-    document.documentElement.style.setProperty(
-      '--pageNav-expanded',
-      getComputedStyle(document.documentElement).getPropertyValue(
-        `--pageNav-expanded-${lastToggleState}`,
-      ),
-    )
-    document.body.classList.toggle(
-      'has-navrail-expanded',
-      lastToggleState === 'ON',
-    )
-  }
-}
-
-onFind('.Page-main > btu-nav-rail', (nav: HTMLElement) => {
-  if (document.querySelector('.Page-header.mobile')) {
-    toggle('OFF')
-  } else {
-    update()
-  }
-
-  /*
-    When the page nav is small, it should become large when a nav item is clicked.
-    It should also expand the group and scroll to it if necessary.
-  */
-  nav.addEventListener(
-    'click',
-    (evt) => {
-      const target = evt.target
-
-      if (!(target instanceof HTMLElement) && !(target instanceof SVGElement))
-        return
-
-      const item = target.closest<HTMLElement>('li.isNested')
-      if (!item) return
-
-      // If the clicked item is one within the first group of the nav,
-      // treat those like sub-item clicks. No need to expand the nav.
-      if (item && item.parentNode?.firstElementChild === item) {
-        return
-      }
-
-      // Can nav be expanded?
-      const expandState = getComputedStyle(
-        document.documentElement,
-      ).getPropertyValue('--pageNav-expanded')
-      if (expandState !== '') return
-
-      // We just want to make the nav larger.
-      // Don't allow the link to redirect and don't run any v4 click callbacks.
-      evt.preventDefault()
-      evt.stopImmediatePropagation()
-
-      // Make the nav larger.
-      const toggle = document.querySelector<HTMLElement>('.Page-navToggle')
-      if (toggle) toggle.click()
-
-      // Expand the group if it's collapsed.
-      const collapsedParentItem = target.closest<HTMLElement>(
-        'li.isNested:not(.is-expanded)',
-      )
-      if (collapsedParentItem) {
-        if (target instanceof SVGElement) {
-          target.closest('a')?.click()
-        } else {
-          target.click()
-        }
-      }
-
-      // Scroll to the group parent when necessary.
-      setTimeout(() => target.scrollIntoView({ behavior: 'smooth' }), 250)
-    },
-    true,
-  )
-})

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

@@ -1,20 +0,0 @@
-.PR {
-  @apply grid;
-}
-
-.PR-pagination {
-  @apply !z-auto empty:hidden;
-}
-
-.PR-filters .ComboInput,
-.PR-pagination .ComboInput {
-  --Input-focusBackground: theme(colors.gray.200);
-  --ComboInput-listPadding: calc(theme(spacing.2) / 2);
-
-  @apply w-auto before:hidden;
-}
-
-.PR-pagination,
-.DashboardWidget-pagination {
-  @apply my-[22px];
-}

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

@@ -1,119 +0,0 @@
-.Pagination {
-  @apply inline-flex !w-auto items-stretch justify-end rounded-lg border border-gray-300 bg-white [&>_*:not(:first-child)]:border-s [&>_*:not(:first-child)]:border-s-gray-300;
-
-  .Pagination {
-    @apply contents;
-
-    > * {
-      @apply border-s border-s-gray-300;
-    }
-  }
-
-  /*
-    Unfortunately we use a mixture of classnames (in the backend and the javascript)
-    and so we have to account for both using multiple negation selectors.
-  */
-  > *:not(
-      .next,
-      .previous,
-      .first,
-      .last,
-      .pagination,
-      .Pagination,
-      .Pagination-next,
-      .Pagination-previous,
-      .Pagination-first,
-      .Pagination-last,
-      :has(.ComboInput)
-    ) {
-    @apply px-3 py-2 text-sm font-semibold;
-  }
-
-  /*
-    An item with no class, no children, and not a pagination control
-    should be smaller normal weight text:
-    eg: <li>1 to 50 of 19,129</li>
-  */
-  > li:not([class]):not(:has(*)) {
-    @apply self-center text-xs font-medium;
-  }
-
-  a {
-    @apply text-gray-700 no-underline;
-  }
-}
-
-.Pagination-first,
-.Pagination-previous,
-.Pagination-next,
-.Pagination-last {
-  @apply flex items-center p-0;
-
-  > a {
-    @apply btu-button btu-button-text-hidden grid content-center rounded-lg before:btu-icon;
-  }
-
-  &.is-disabled {
-    @apply pointer-events-none;
-
-    a {
-      @apply text-gray-400;
-    }
-  }
-}
-
-.Pagination-first > a {
-  @apply before:btu-icon-chevrons-left rtl:before:btu-icon-chevrons-right;
-}
-
-.Pagination-previous > a {
-  @apply before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right;
-}
-
-.Pagination-next > a {
-  @apply before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left;
-}
-
-.Pagination-last > a {
-  @apply before:btu-icon-chevrons-right rtl:before:btu-icon-chevrons-left;
-}
-
-/* Legacy */
-.pagination {
-  @apply Pagination;
-
-  > li.first,
-  > .paginationFirst {
-    @apply Pagination-first;
-  }
-
-  > li.previous,
-  > .paginationPrevious {
-    @apply Pagination-previous;
-  }
-
-  > li.next,
-  > .paginationNext {
-    @apply Pagination-next;
-  }
-
-  > li.last,
-  > .paginationLast {
-    @apply Pagination-last;
-  }
-
-  /* Hide the entire pagination component if it has no previous or next ui. */
-  &:has(.previous:empty):has(.next:empty) {
-    @apply hidden;
-  }
-
-  /* Show a disabled previous button when there is no previous page. */
-  > li.previous:not(:has(a)) {
-    @apply pointer-events-none text-gray-400 before:btu-icon before:btu-icon-chevron-left rtl:before:btu-icon-chevron-right before:border-gray-300 before:p-2;
-  }
-
-  /* Show a disabled next button when there is no next page. */
-  > li.next:not(:has(a)) {
-    @apply pointer-events-none text-gray-400 before:btu-icon before:btu-icon-chevron-right rtl:before:btu-icon-chevron-left before:border-gray-300 before:p-2;
-  }
-}

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

@@ -1,11 +0,0 @@
-.plugin-popup:has(.Widget.Paste-popup) {
-  @apply col-span-full border-t;
-}
-
-.Paste-popup .Paste-popup-content.Message {
-  @apply mx-7 mb-5 mt-3.5;
-}
-
-.Paste-popup .Paste-popup-action-items.ActionBar .Paste-popup-all-button {
-  @apply btu-button-gray -order-1;
-}

package/src/legacy/tool-ui/src/PlaceholderEditableMixin.ts

@@ -1,86 +0,0 @@
-import { LitElement } from 'lit'
-import { property } from 'lit/decorators.js'
-
-export declare class PlaceholderEditableMixinInterface {
-  input: HTMLInputElement | HTMLTextAreaElement
-  placeholder?: string
-  placeholderEditable: boolean
-}
-
-export const PlaceholderEditableMixin = <T extends Constructor<LitElement>>(
-  superClass: T,
-) => {
-  class PlaceholderEditableMixinClass extends superClass {
-    private _input?: HTMLInputElement | HTMLTextAreaElement
-    private _originalPlaceholder?: string
-
-    @property()
-    placeholder?: string
-    @property({ type: Boolean, attribute: 'placeholder-editable' })
-    placeholderEditable = false
-
-    get input() {
-      return this._input
-    }
-
-    set input(_input) {
-      if (!_input) return
-
-      // Push props down...
-      if (this.placeholder) {
-        _input.placeholder = this.placeholder
-      }
-
-      if (this.placeholderEditable) {
-        _input.setAttribute('data-editable-placeholder', '')
-      }
-
-      // Only run changed if the input element has changed.
-      if (!this._input?.isEqualNode(_input)) {
-        this._input = _input
-        this.onInputElementChanged()
-      }
-    }
-
-    get value() {
-      return this._input?.value
-    }
-
-    set value(_val) {
-      if (_val !== undefined && this._input) {
-        this._input.value = _val
-      }
-    }
-
-    constructor(...args: any) {
-      super()
-      this.placeholderEditable = false
-    }
-
-    private onInputElementChanged() {
-      if (this.placeholderEditable) {
-        this._input?.addEventListener('blur', this.handleBlur.bind(this))
-        this._input?.addEventListener('focus', this.handleFocus.bind(this))
-        this._input?.addEventListener('mouseenter', this.handleFocus.bind(this))
-        this._input?.addEventListener('mouseleave', this.handleBlur.bind(this))
-      }
-    }
-
-    private handleFocus() {
-      if (!this.value) {
-        this.value = this._originalPlaceholder = this._input?.placeholder || ''
-      }
-    }
-
-    private handleBlur() {
-      if (
-        document.activeElement !== this._input &&
-        this.value === this._originalPlaceholder
-      ) {
-        this.value = ''
-      }
-    }
-  }
-  return PlaceholderEditableMixinClass as Constructor<PlaceholderEditableMixinInterface> &
-    T
-}