@ni/nimble-components 19.6.3 → 19.8.0

package/dist/all-components-bundle.js

@@ -16232,7 +16232,7 @@
 
     /**
      * Do not edit directly
-     * Generated on Mon, 17 Jul 2023 16:01:38 GMT
+     * Generated on Tue, 18 Jul 2023 17:33:26 GMT
      */
     const Information100DarkUi = "#a46eff";
     const Information100LightUi = "#804ad9";
@@ -24665,6 +24665,10 @@
         opacity: 0.6;
     }
 
+    :host([appearance='accent']) div.container {
+        opacity: 1;
+    }
+
     div.bit1,
     div.bit2 {
         background: var(--ni-private-spinner-bits-background-color);
@@ -24776,15 +24780,25 @@
     }
 `.withBehaviors(themeBehavior(Theme.light, css `
             :host {
-                --ni-private-spinner-bits-background-color: ${Black91}
+                --ni-private-spinner-bits-background-color: ${Black91};
+            }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${DigitalGreenLight};
+            }
         `), themeBehavior(Theme.dark, css `
             :host {
                 --ni-private-spinner-bits-background-color: ${Black15};
             }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
         `), themeBehavior(Theme.color, css `
             :host {
                 --ni-private-spinner-bits-background-color: ${White};
             }
+            :host([appearance='accent']) {
+                --ni-private-spinner-bits-background-color: ${PowerGreen};
+            }
         `));
 
     const template$f = html `
@@ -24796,12 +24810,33 @@
     </template>
 `;
 
+    /**
+     * Types of spinner appearance.
+     * @public
+     */
+    const SpinnerAppearance = {
+        default: undefined,
+        accent: 'accent'
+    };
+
     /**
      * A Nimble-styled spinner component.
      * A spinner is an animating indicator that can be placed in a particular region of a page to represent loading progress, or an ongoing operation, of an indeterminate / unknown duration.
      */
     class Spinner extends FoundationElement {
+        constructor() {
+            super(...arguments);
+            /**
+             * @public
+             * @description
+             * The appearance the spinner area should have.
+             */
+            this.appearance = SpinnerAppearance.default;
+        }
     }
+    __decorate$1([
+        attr
+    ], Spinner.prototype, "appearance", void 0);
     const nimbleSpinner = Spinner.compose({
         baseName: 'spinner',
         template: template$f,
@@ -28390,9 +28425,14 @@
             }
             this.delegatedEvents = this.column.columnInternals.delegatedEvents;
             this.delegatedEventHandler = (event) => {
-                this.column?.dispatchEvent(new CustomEvent('delegated-event', {
-                    detail: { originalEvent: event }
-                }));
+                if (this.recordId) {
+                    this.column?.dispatchEvent(new CustomEvent('delegated-event', {
+                        detail: {
+                            originalEvent: event,
+                            recordId: this.recordId
+                        }
+                    }));
+                }
             };
             for (const delegatedEvent of this.delegatedEvents) {
                 this.addEventListener(delegatedEvent, this.delegatedEventHandler);
@@ -28408,6 +28448,9 @@
     __decorate$1([
         observable
     ], TableCellView.prototype, "column", void 0);
+    __decorate$1([
+        observable
+    ], TableCellView.prototype, "recordId", void 0);
 
     const validateCellViewTemplate = (cellViewTag) => {
         let instance;
@@ -28428,6 +28471,7 @@
             :cellRecord="${y => y.cellState?.cellRecord}"
             :columnConfig="${y => y.cellState?.columnConfig}"
             :column="${y => y.column}"
+            :recordId="${y => y.recordId}"
             class="cell-view"
         >
         </${cellViewTag}>
@@ -29097,6 +29141,9 @@
     __decorate$1([
         observable
     ], TableCell.prototype, "column", void 0);
+    __decorate$1([
+        observable
+    ], TableCell.prototype, "recordId", void 0);
     __decorate$1([
         attr({ attribute: 'has-action-menu', mode: 'boolean' })
     ], TableCell.prototype, "hasActionMenu", void 0);
@@ -29146,6 +29193,7 @@
                         :cellState="${x => x.cellState}"
                         :cellViewTemplate="${x => x.column.columnInternals.cellViewTemplate}"
                         :column="${x => x.column}"
+                        :recordId="${(_, c) => c.parent.recordId}"
                         ?has-action-menu="${x => !!x.column.actionMenuSlot}"
                         action-menu-label="${x => x.column.actionMenuLabel}"
                         @cell-action-menu-beforetoggle="${(x, c) => c.parent.onCellActionMenuBeforeToggle(c.event, x.column)}"