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

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

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

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

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

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

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