@brightspot/ui 6.6.1 → 6.7.0

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

@@ -1,6 +1,6 @@
 @import (reference) './IconButton.less';
 
-btu-copy-to-clipboard {
+btu-legacy-copy-to-clipboard {
   button {
     .IconButton;
 

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

@@ -175,7 +175,7 @@
   width: 100%;
 }
 
-btu-widget {
+btu-legacy-widget {
   display: block;
 
   .Widget-title {

package/src/legacy/tool-ui/src/util/getComponentKey.ts

@@ -3,7 +3,7 @@ export default function getComponentKey(
   nameAttribute: string,
 ): string | null {
   const edit =
-    component.closest('.ContentEdit') || component.closest('btu-widget')
+    component.closest('.ContentEdit') || component.closest('btu-legacy-widget')
   if (!edit) return null
 
   let typeId

package/src/legacy/tool-ui/src/util/svg.ts

@@ -7,37 +7,6 @@ export function addNameSpaceXML(data: string): string {
   return data
 }
 
-/**
- * Adds a mask element to an SVG string. The mask is inserted immediately after the opening <svg> tag
- * and wraps the existing SVG content, ending before the closing </svg> tag.
- *
- * @param {string} svg - The SVG string to which the mask will be added. Must contain valid <svg> tags.
- * @param {string} maskId - The ID to assign to the <mask> element.
- * @returns {string} - The modified SVG string with the mask element added.
- */
-export function addMask(svg: string, maskId: string): string {
-  // Insert <mask id="..."> right after <svg ...>
-  const openingSvgTagMatch = svg.match(/<svg[^>]*>/)
-  if (!openingSvgTagMatch) return svg
-
-  const openingSvgTag = openingSvgTagMatch[0]
-  const maskOpen = `<mask id="${maskId}">`
-  const maskClose = `</mask>`
-
-  // Find positions
-  const start = svg.indexOf(openingSvgTag) + openingSvgTag.length
-  const end = svg.lastIndexOf('</svg>')
-
-  // Insert mask tags
-  return (
-    svg.slice(0, start) +
-    maskOpen +
-    svg.slice(start, end) +
-    maskClose +
-    svg.slice(end)
-  )
-}
-
 export function encodeSVG(data: string): string {
   data = data.replace(/"/g, `'`)
   data = data.replace(/>\s{1,}</g, `><`)

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

@@ -22,7 +22,6 @@ import { onTransitionsEnded } from './util/transition'
 import './Workstreams'
 import onRemove from './dom/onRemove'
 import './NavRail/index'
-import Icon from './Icon/index'
 import throttle from './util/throttle'
 import { v1 as uuid } from 'uuid'
 import {
@@ -33,6 +32,9 @@ import {
 import './SkipLinks'
 // Library components that Java renders through com.brightspot.ui.dari.
 import '@brightspot/ui/components/badge/Badge.js'
+import '@brightspot/ui/components/copy-to-clipboard/CopyToClipboard.js'
+import '@brightspot/ui/components/icon/Icon.js'
+import '@brightspot/ui/components/widget/Widget.js'
 
 /*
 ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
@@ -77,9 +79,15 @@ onFind('.Page-nav', (nav: HTMLElement) => {
     ?.insertAdjacentElement('afterbegin', toggle)
 })
 
+// Older Brightspot releases still emit the legacy fill="gradient", which the library icon ignores.
+onFind('btu-icon[fill="gradient"]', (icon: HTMLElement) => {
+  icon.removeAttribute('fill')
+  icon.setAttribute('gradient', 'primary')
+})
+
 onFind('.Page-navItemToggle', (toggle: HTMLElement) => {
-  const icon = new Icon()
-  icon.symbol = 'chevron-down'
+  const icon = document.createElement('btu-icon')
+  icon.setAttribute('symbol', 'chevron-down')
   toggle?.prepend(icon)
 })
 
@@ -539,11 +547,11 @@ onFind('.DashboardWidget-pagination', (pagination) => {
   }
 })
 
-/* Upgrade the v4 copy button to a btu-copy-to-clipboard element. */
+/* Upgrade the v4 copy button to a btu-legacy-copy-to-clipboard element. */
 onFind(
   '.LookingGlass-actions[data-action="copy"]',
   (legacyElement: HTMLElement) => {
-    const copyToClipboard = document.createElement('btu-copy-to-clipboard')
+    const copyToClipboard = document.createElement('btu-legacy-copy-to-clipboard')
     copyToClipboard.classList.add(...legacyElement.classList)
     const key = legacyElement.querySelector(':scope > a')?.getAttribute('href')
     const title = legacyElement.querySelector(':scope > a')?.textContent ?? ''
@@ -834,9 +842,9 @@ onFind('.Page-askAi', (askAi) => {
 */
 onFind('.Page-notifications', (notifications: HTMLElement) => {
   const link = notifications.querySelector('a')
-  const icon = new Icon()
-  icon.symbol = 'bell'
-  icon.fill = 'gradient'
+  const icon = document.createElement('btu-icon')
+  icon.setAttribute('symbol', 'bell')
+  icon.setAttribute('gradient', 'primary')
   const label = document.createElement('span')
   label.textContent = window.BRIGHTSPOT?.ui.tooltips.notifications
   link?.appendChild(icon)

package/src/legacy/tool-ui/src/widget/index.ts

@@ -8,7 +8,7 @@ const ls = window.localStorage
 const collapseTooltip = window.BRIGHTSPOT?.ui.tooltips.collapse
 const expandTooltip = window.BRIGHTSPOT?.ui.tooltips.expand
 
-@customElement('btu-widget')
+@customElement('btu-legacy-widget')
 export default class Widget extends EventEmitterMixin(LitElement) {
   private _collapsed = false
 
@@ -155,6 +155,6 @@ export default class Widget extends EventEmitterMixin(LitElement) {
 
 declare global {
   interface HTMLElementTagNameMap {
-    'btu-widget': Widget
+    'btu-legacy-widget': Widget
   }
 }

package/dist/storybook/assets/LucideDynamicLoader-THr3lc5T.js

@@ -1 +0,0 @@
-const o="1.31.0",s={version:o},c=s.version;export{c as L};

package/dist/storybook/assets/if-defined-DDVGLNbR.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-BcvNVHT1.js";const m=o=>o??r;export{m as o};