@brightspot/ui 1.0.1-4 → 1.0.1-wc.2

package/README.md

@@ -168,11 +168,15 @@ For local development and testing, use `yarn link` to create a symlink between t
    This registers the package globally on your system for linking.
 
 2. **In your consuming project directory:**
+
    ```sh
    yarn link @brightspot/ui
    ```
+
    This creates a symlink from your project's node_modules to the brightspot-ui package.
 
+   > **_Note_** Be sure this is done in the directory where the `package.json` file resides for the CMS UI. Currently that is at `/cms/tool-ui`. You will need to validate your changes via your locally running Brightspot Tool UI Webpack server. It will not work directly over Docker's Tomcat.
+
 #### Working with the linked package
 
 - From within _**this**_ module, run `yarn build` to ensure the `dist` folder is updated with your changes.
@@ -245,39 +249,6 @@ docs: update installation instructions
 chore(deps): upgrade tailwindcss to 3.4.0
 ```
 
-### Publishing
-
-#### Prerelease (Testing)
-
-For testing changes before a full release, create a prerelease version:
-
-```sh
-yarn version --prerelease
-npm publish --tag beta
-```
-
-This automatically increments the version with a prerelease identifier (e.g., `1.2.3-0`) and publishes it under the `beta` tag. Users can install prereleases with:
-
-```sh
-yarn add @brightspot/ui@beta
-```
-
-#### Full Release
-
-For a production release:
-
-```sh
-yarn version --patch  # for bug fixes
-# or
-yarn version --minor  # for new features
-# or
-yarn version --major  # for breaking changes
-
-npm publish
-```
-
-The `yarn version` command automatically updates the version number in package.json and creates a git commit and tag. Choose the appropriate version bump based on the type of changes you're releasing.
-
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 
 ## Frequently Asked Questions

package/custom-elements.json

@@ -0,0 +1,214 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/components/widget/Widget.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "A collapsible container component with persistent state management.\n\nProvides collapsible behavior with localStorage persistence, keyboard\naccessibility, and automatic error expansion. Uses CSS Grid layout with\nnamed columns for flexible content positioning.",
+          "name": "Widget",
+          "cssProperties": [
+            {
+              "description": "Horizontal padding for grid columns (default: theme(spacing.6))",
+              "name": "--space"
+            },
+            {
+              "description": "Internal padding variable (default: var(--gap-l))",
+              "name": "--Widget-padding"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot for widget content",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_collapsed",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "collapsible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable collapsible behavior with expand/collapse controls.\nWhen enabled, displays a chevron icon and allows users to toggle content visibility.",
+              "attribute": "collapsible"
+            },
+            {
+              "kind": "field",
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Widget title displayed in the header.",
+              "attribute": "heading"
+            },
+            {
+              "kind": "field",
+              "name": "internalname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Internal identifier for localStorage key generation.\nUsed in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}",
+              "attribute": "internalname"
+            },
+            {
+              "kind": "field",
+              "name": "invalid",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Internal state tracking whether widget contains error messages.\nWidget automatically expands when errors are detected.",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "widgetid",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Widget type ID for localStorage key generation.\nCombined with internalname to create unique storage keys.",
+              "attribute": "widgetid"
+            },
+            {
+              "kind": "field",
+              "name": "collapsed",
+              "description": "Controls the collapsed state of the widget.\nWhen set, persists to localStorage and emits btu-widget-toggle event.",
+              "attribute": "collapsed"
+            },
+            {
+              "kind": "method",
+              "name": "_collapsibleTemplate",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Inherited from EventEmitterMixin, fired when element connects to DOM",
+              "name": "btu-brightspot-element-connected"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Inherited from EventEmitterMixin, fired when element disconnects from DOM",
+              "name": "btu-brightspot-element-disconnected"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{error: Error}>"
+              },
+              "description": "Inherited from EventEmitterMixin, fired on connection error",
+              "name": "btu-brightspot-element-error"
+            },
+            {
+              "type": {
+                "text": "CustomEvent"
+              },
+              "description": "Fired after first render and initialization",
+              "name": "btu-widget-ready"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<{collapsed: boolean}>"
+              },
+              "description": "Fired when collapse state changes",
+              "name": "btu-widget-toggle"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "collapsible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Enable collapsible behavior with expand/collapse controls.\nWhen enabled, displays a chevron icon and allows users to toggle content visibility.",
+              "fieldName": "collapsible",
+              "attribute": "collapsible"
+            },
+            {
+              "name": "heading",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Widget title displayed in the header.",
+              "fieldName": "heading",
+              "attribute": "heading"
+            },
+            {
+              "name": "internalname",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Internal identifier for localStorage key generation.\nUsed in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}",
+              "fieldName": "internalname",
+              "attribute": "internalname"
+            },
+            {
+              "name": "widgetid",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Widget type ID for localStorage key generation.\nCombined with internalname to create unique storage keys.",
+              "fieldName": "widgetid",
+              "attribute": "widgetid"
+            },
+            {
+              "name": "collapsed",
+              "description": "Controls the collapsed state of the widget.\nWhen set, persists to localStorage and emits btu-widget-toggle event.",
+              "fieldName": "collapsed",
+              "attribute": "collapsed"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "EventEmitterMixin",
+              "module": "/src/utils/EventEmitterMixin"
+            }
+          ],
+          "superclass": {
+            "name": "LitElement",
+            "package": "lit"
+          },
+          "tagName": "btu-widget",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "Widget",
+            "module": "src/components/widget/Widget.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "btu-widget",
+          "declaration": {
+            "name": "Widget",
+            "module": "src/components/widget/Widget.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/LucideDynamicLoader.d.ts

@@ -0,0 +1,5 @@
+export declare function getIcon(iconName: string): {
+    compat: string;
+    iconSvg: string;
+} | undefined;
+//# sourceMappingURL=LucideDynamicLoader.d.ts.map

package/dist/LucideDynamicLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideDynamicLoader.d.ts","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAKA,wBAAgB,OAAO,CAAC,QAAQ,EAAE,MAAM;;;cAiBvC"}

package/dist/LucideDynamicLoader.js

@@ -1,5 +1,5 @@
 import * as LucideIcons from 'lucide-static';
-import icons from 'lucide-static/font/info.json';
+import icons from 'lucide-static/font/info.json' with { type: 'json' };
 import { kebabToPascal } from '../src/util/string';
 import { addNameSpaceXML, encodeSVG } from '../src/util/svg';
 export function getIcon(iconName) {
@@ -19,3 +19,4 @@ export function getIcon(iconName) {
         console.error('Error loading Lucide icon ${iconName}:', e);
     }
 }
+//# sourceMappingURL=LucideDynamicLoader.js.map

package/dist/LucideDynamicLoader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LucideDynamicLoader.js","sourceRoot":"","sources":["../src/LucideDynamicLoader.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,eAAe,CAAA;AAC5C,OAAO,KAAK,MAAM,8BAA8B,CAAC,OAAO,IAAI,EAAE,MAAM,EAAE,CAAA;AACtE,OAAO,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAA;AAClD,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE5D,MAAM,UAAU,OAAO,CAAC,QAAgB;IACtC,IAAI,CAAC;QACH,MAAM,SAAS,GAAG,QAAQ,CAAC,OAAO,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC,WAAW,EAAE,CAAA;QAC5E,MAAM,UAAU,GAAG,aAAa,CAAC,SAAS,CAAC,CAAA;QAE3C,IAAI,WAAW,CAAC,UAAsC,CAAC,EAAE,CAAC;YACxD,MAAM,GAAG,GAAG,WAAW,CAAC,UAAsC,CAAW,CAAA;YACzE,MAAM,UAAU,GAAG,SAAS,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,CAAA;YAElD,OAAO;gBACL,MAAM,EAAE,KAAK,CAAC,SAA+B,CAAC,EAAE,WAAW,IAAI,EAAE;gBACjE,OAAO,EAAE,UAAU;aACpB,CAAA;QACH,CAAC;IACH,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,KAAK,CAAC,wCAAwC,EAAE,CAAC,CAAC,CAAA;IAC5D,CAAC;AACH,CAAC"}

package/dist/LucideDynamicLoader.ts

@@ -1,5 +1,5 @@
 import * as LucideIcons from 'lucide-static'
-import icons from 'lucide-static/font/info.json'
+import icons from 'lucide-static/font/info.json' with { type: 'json' }
 import { kebabToPascal } from '../src/util/string'
 import { addNameSpaceXML, encodeSVG } from '../src/util/svg'
 

package/dist/components/widget/Widget.css

@@ -0,0 +1,118 @@
+.Widget {
+  --Widget-padding: var(--gap-l);
+  --space: theme(spacing.6);
+
+  @apply [grid-template-columns:[fullbleed-start]_var(--space)_[content-start]_1fr_auto_[content-end]_var(--space)_[fullbleed-end]];
+
+  > *:not(.ContentEdit-preview) {
+    @apply [grid-column:content-start_/_content-end];
+  }
+}
+
+.Widget-title {
+  .Label {
+    @apply inline-flex;
+  }
+}
+
+.Widget-controls.is-locked {
+  @apply !hidden;
+}
+
+.Widget:not(.is-collapsible) {
+  &:has(.Widget-controls:not(:empty)) > .Widget-title {
+    @apply pe-2 [grid-column:fullbleed-start_/_span_2];
+  }
+
+  /* widget controls appear on the top right corner of the widget on the same row as title */
+  .Widget-controls {
+    @apply pe-[--space] [grid-column:span_2_/_fullbleed-end] [grid-row:1];
+  }
+
+  /*
+    Aligns Widget controls correctly with title for certain Admin Pages
+    e.g. Restore button in Admin > User + Roles > Archived User,
+         Widget controls in Admin > Sites & Settings > Archived Site
+  */
+  .Admin-main & .Widget-controls:has(> button:not(.FormFilter-icon)) {
+    @apply -mt-[3.35rem] bg-white;
+  }
+}
+
+.Widget-actionsToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-ellipsis;
+}
+
+.Widget-actionsList {
+  @apply z-[10000];
+}
+
+.Widget-actions.is-open {
+  .Widget-actionsToggle {
+    @apply btu-button-pressed;
+  }
+}
+
+.Widget
+  :is(
+    .widget-urls.is-readOnly,
+    .widget-urlsRepeatable.is-readOnly,
+    .ContentEditSites-owner.is-readOnly,
+    .ContentEditSites-access.is-readOnly
+  ) {
+  @apply pointer-events-none select-none opacity-75;
+}
+
+.Widget .is-readOnly .UrlsWidget-itemLabel a,
+.widget .is-readOnly .RCIG-title:after,
+.widget .is-readOnly .ContentSummary-info,
+.widget .is-readOnly .ContentSelector-edit {
+  @apply pointer-events-auto cursor-pointer;
+}
+
+/* Collapsible widgets where widget titles have expand/collapse controls (e.g. Right rail publishing tools)
+** Note: In this use case Widget-controls are children of Widget-title instead of their sibling
+*/
+.Widget.is-collapsible {
+  .Widget-title:has(.Widget-expand:focus-visible) {
+    @apply ring-primary-600 ring-offset-primary-100 ring-1 ring-inset ring-offset-4;
+  }
+}
+
+/* TODO: Do we want to support this as a widget-part? */
+.Widget-heading {
+  @apply py-2 text-sm font-semibold text-gray-900;
+}
+
+/* TODO: Do we want to support this as a widget-part? */
+.Widget-restoreButton {
+  @apply btu-button btu-button-text-hidden btu-button-gray before:btu-icon before:btu-icon-archive-restore;
+}
+
+/* TODO: Do we want to support this as a widget-part? */
+.Widget-filters,
+.Widget-filter {
+  @apply flex items-center justify-between;
+}
+
+.Widget-filters {
+  @apply relative pt-3 before:absolute before:-inset-x-4 before:-inset-y-3 before:border-b before:border-b-gray-200 before:bg-gray-50;
+}
+
+.Widget-filter {
+  @apply z-0 flex-row-reverse;
+}
+
+.Widget-filterLabel {
+  @apply text-sm font-medium;
+}
+
+.Widget.is-collapsed {
+  > div,
+  > table {
+    @apply hidden;
+  }
+}
+
+/* The following code will need to be combed through to determine what styles should stay in bsp-ui and what should move back into cms tool-ui */
+/* See all the original styles for widgets in tool-ui ... */

package/dist/components/widget/Widget.d.ts

@@ -0,0 +1,90 @@
+import { LitElement } from 'lit';
+export interface WidgetProps {
+    collapsible?: boolean;
+    heading?: string;
+    internalname?: string;
+    widgetid?: string;
+}
+declare const Widget_base: (new (...args: any[]) => import("../../utils/EventEmitterMixin").EventEmitterMixinInterface) & typeof LitElement;
+/**
+ * A collapsible container component with persistent state management.
+ *
+ * Provides collapsible behavior with localStorage persistence, keyboard
+ * accessibility, and automatic error expansion. Uses CSS Grid layout with
+ * named columns for flexible content positioning.
+ *
+ * @element btu-widget
+ *
+ * @fires {CustomEvent} btu-brightspot-element-connected - Inherited from EventEmitterMixin, fired when element connects to DOM
+ * @fires {CustomEvent} btu-brightspot-element-disconnected - Inherited from EventEmitterMixin, fired when element disconnects from DOM
+ * @fires {CustomEvent<{error: Error}>} btu-brightspot-element-error - Inherited from EventEmitterMixin, fired on connection error
+ * @fires {CustomEvent} btu-widget-ready - Fired after first render and initialization
+ * @fires {CustomEvent<{collapsed: boolean}>} btu-widget-toggle - Fired when collapse state changes
+ *
+ * @slot - Default slot for widget content
+ *
+ * @cssprop --space - Horizontal padding for grid columns (default: theme(spacing.6))
+ * @cssprop --Widget-padding - Internal padding variable (default: var(--gap-l))
+ *
+ * @example
+ * ```html
+ * <btu-widget
+ *   collapsible
+ *   heading="My Widget"
+ *   internalname="example"
+ *   widgetid="widget-001">
+ *   <p>Widget content goes here</p>
+ * </btu-widget>
+ * ```
+ */
+export default class Widget extends Widget_base {
+    private _collapsed;
+    /**
+     * Enable collapsible behavior with expand/collapse controls.
+     * When enabled, displays a chevron icon and allows users to toggle content visibility.
+     * @attr
+     */
+    collapsible: boolean;
+    /**
+     * Widget title displayed in the header.
+     * @attr
+     */
+    heading?: string;
+    /**
+     * Internal identifier for localStorage key generation.
+     * Used in format: BSP.ContentEdit.widgetCollapsed.{widgetid}.{internalname}
+     * @attr
+     */
+    internalname?: string;
+    /**
+     * Internal state tracking whether widget contains error messages.
+     * Widget automatically expands when errors are detected.
+     * @private
+     */
+    invalid: boolean;
+    /**
+     * Widget type ID for localStorage key generation.
+     * Combined with internalname to create unique storage keys.
+     * @attr
+     */
+    widgetid?: string;
+    /**
+     * Controls the collapsed state of the widget.
+     * When set, persists to localStorage and emits btu-widget-toggle event.
+     * @attr
+     */
+    set collapsed(isCollapsed: boolean);
+    get collapsed(): boolean;
+    connectedCallback(): void;
+    createRenderRoot(): this;
+    firstUpdated(): void;
+    private _collapsibleTemplate;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'btu-widget': Widget;
+    }
+}
+export {};
+//# sourceMappingURL=Widget.d.ts.map

package/dist/components/widget/Widget.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Widget.d.ts","sourceRoot":"","sources":["../../../src/components/widget/Widget.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAA;AAStC,MAAM,WAAW,WAAW;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AAEH,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,WAA6B;IAC/D,OAAO,CAAC,UAAU,CAAQ;IAE1B;;;;OAIG;IAEH,WAAW,UAAQ;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAA;IAEhB;;;;OAIG;IAEH,YAAY,CAAC,EAAE,MAAM,CAAA;IAErB;;;;OAIG;IAEH,OAAO,UAAQ;IAEf;;;;OAIG;IAEH,QAAQ,CAAC,EAAE,MAAM,CAAA;IAEjB;;;;OAIG;IACH,IACI,SAAS,CAAC,WAAW,EAAE,OAAO,EAcjC;IAED,IAAI,SAAS,IAhBc,OAAO,CAkBjC;IAED,iBAAiB,IAAI,IAAI;IAOzB,gBAAgB;IAIhB,YAAY,IAAI,IAAI;IAyBpB,OAAO,CAAC,oBAAoB;IAyC5B,MAAM;CAwBP;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,MAAM,CAAA;KACrB;CACF"}