@ni/ok-components 0.2.11 → 0.2.13

package/dist/all-components-bundle.js

@@ -14876,7 +14876,25 @@
       calendarEventFillBlockedColor: 'calendar-event-fill-blocked-color',
       calendarGrabHandleBackgroundColor: 'calendar-grab-handle-background-color',
       calendarGridBorderColor: 'calendar-grid-border-color',
-      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color'
+      calendarGroupHeaderBackgroundColor: 'calendar-group-header-background-color',
+      calendarEventBackgroundJobColor: 'calendar-event-background-job-color',
+      calendarEventBackgroundHoverJobColor: 'calendar-event-background-hover-job-color',
+      calendarEventBorderJobColor: 'calendar-event-border-job-color',
+      calendarEventJobFontColor: 'calendar-event-job-font-color',
+      calendarEventBackgroundMaintenanceColor: 'calendar-event-background-maintenance-color',
+      calendarEventBackgroundHoverMaintenanceColor: 'calendar-event-background-hover-maintenance-color',
+      calendarEventBorderMaintenanceColor: 'calendar-event-border-maintenance-color',
+      calendarEventBackgroundCalibrationColor: 'calendar-event-background-calibration-color',
+      calendarEventBackgroundHoverCalibrationColor: 'calendar-event-background-hover-calibration-color',
+      calendarEventBorderCalibrationColor: 'calendar-event-border-calibration-color',
+      calendarEventBackgroundReservationColor: 'calendar-event-background-reservation-color',
+      calendarEventBackgroundHoverReservationColor: 'calendar-event-background-hover-reservation-color',
+      calendarEventBorderReservationColor: 'calendar-event-border-reservation-color',
+      calendarEventBackgroundTransportOrderColor: 'calendar-event-background-transport-order-color',
+      calendarEventBackgroundHoverTransportOrderColor: 'calendar-event-background-hover-transport-order-color',
+      calendarEventBorderTransportOrderColor: 'calendar-event-border-transport-order-color',
+      calendarEventBackgroundAggregateAvailabilityColor: 'calendar-event-background-aggregate-availability-color',
+      calendarEventBorderAggregateAvailabilityColor: 'calendar-event-border-aggregate-availability-color'
   };
   const prefix = 'ni-nimble';
   const styleNameFromTokenName = (tokenName) => `${prefix}-${tokenName}`;
@@ -16111,7 +16129,16 @@
 
   const Information100DarkUi = "#a46eff";
   const Information100LightUi = "#804ad9";
+  const InformationLight10 = "#f3edfc";
+  const InformationDark10 = "#413d4c";
+  const InformationLight30 = "#d9c9f4";
+  const InformationDark30 = "#574873";
+  const InformationDarkTypography = "#c9abff";
   const Warning100DarkUi = "#ff8126";
+  const WarningLight10 = "#ffede6";
+  const WarningDark10 = "#4a3e36";
+  const WarningLight20 = "#ffdbcc";
+  const WarningDark20 = "#5e4635";
   const Pass100LightUi = "#009921";
   const Pass100DarkUi = "#00c12b";
   const Fail100LightUi = "#c4000c";
@@ -16132,6 +16159,8 @@
   const NiSky = "#3cb4e7";
   const BannerFail100DarkUi = "#d63434";
   const Warning100LightUi = "#ff4b00";
+  const Black91V10 = "#e8e8e8";
+  const Black82V100 = "#6e6f70";
   const DigitalGreenDark = "#008557";
   const DigitalGreenDark105 = "#00734b";
   const DigitalGreenDark110 = "#00613f";
@@ -16150,10 +16179,25 @@
   const NiSea = "#00aba5";
   const NiSeaLight = "#a5d8c8";
   const NiTulip = "#e54c8a";
+  const NiTulip10 = "#fdeef4";
+  const NiTulipDark10 = "#483a41";
+  const NiTulip20 = "#fadbe8";
+  const NiTulipDark20 = "#593b49";
   const NiIndigo = "#8e78b7";
   const NiPlumDark1 = "#8c459a";
   const NiIndigoDark2 = "#312e7f";
   const NiSeaDark2 = "#00685f";
+  const NiSpec10 = "#e6f6fb";
+  const NiSpecDark10 = "#304147";
+  const NiSpec20 = "#ccecf6";
+  const NiSpecDark20 = "#2b4c57";
+  const NiSpec = "#00a1d4";
+  const BrownLight10 = "#f1eeeb";
+  const BrownDark10 = "#403e3d";
+  const BrownLight20 = "#e2dcd7";
+  const BrownDark20 = "#4a4440";
+  const BrownLight = "#6f4e37";
+  const BrownDark = "#9b7a60";
   const Title2Family = "Source Sans Pro";
   const Title2Weight = "400";
   const ControlLabel1Family = "Source Sans Pro";
@@ -16312,6 +16356,24 @@
       calendarGrabHandleBackgroundColor: createThemeColor(DigitalGreenLight, PowerGreen, PowerGreen),
       calendarGridBorderColor: createThemeColor(Black22, Black80, Black80),
       calendarGroupHeaderBackgroundColor: createThemeColor(Black7, hexToRgbaCssColor(Black91, 0.1), hexToRgbaCssColor(Black91, 0.1)),
+      calendarEventBackgroundJobColor: createThemeColor(InformationLight10, InformationDark10, InformationDark10),
+      calendarEventBackgroundHoverJobColor: createThemeColor(InformationLight30, InformationDark30, InformationDark30),
+      calendarEventBorderJobColor: createThemeColor(Information100LightUi, Information100DarkUi, Information100DarkUi),
+      calendarEventJobFontColor: createThemeColor(Information100LightUi, InformationDarkTypography, InformationDarkTypography),
+      calendarEventBackgroundMaintenanceColor: createThemeColor(WarningLight10, WarningDark10, WarningDark10),
+      calendarEventBackgroundHoverMaintenanceColor: createThemeColor(WarningLight20, WarningDark20, WarningDark20),
+      calendarEventBorderMaintenanceColor: createThemeColor(Warning100LightUi, Warning100DarkUi, Warning100DarkUi),
+      calendarEventBackgroundCalibrationColor: createThemeColor(NiTulip10, NiTulipDark10, NiTulipDark10),
+      calendarEventBackgroundHoverCalibrationColor: createThemeColor(NiTulip20, NiTulipDark20, NiTulipDark20),
+      calendarEventBorderCalibrationColor: createThemeColor(NiTulip, NiTulip, NiTulip),
+      calendarEventBackgroundReservationColor: createThemeColor(NiSpec10, NiSpecDark10, NiSpecDark10),
+      calendarEventBackgroundHoverReservationColor: createThemeColor(NiSpec20, NiSpecDark20, NiSpecDark20),
+      calendarEventBorderReservationColor: createThemeColor(NiSpec, NiSpec, NiSpec),
+      calendarEventBackgroundTransportOrderColor: createThemeColor(BrownLight10, BrownDark10, BrownDark10),
+      calendarEventBackgroundHoverTransportOrderColor: createThemeColor(BrownLight20, BrownDark20, BrownDark20),
+      calendarEventBorderTransportOrderColor: createThemeColor(BrownLight, BrownDark, BrownDark),
+      calendarEventBackgroundAggregateAvailabilityColor: createThemeColor(Black91V10, Black82, Black82),
+      calendarEventBorderAggregateAvailabilityColor: hexToRgbaCssThemeColor(createThemeColor(Black91, Black82V100, Black82V100), 0.5, 1, 1),
       controlHeight: '32px',
       controlSlimHeight: '24px',
       smallPadding: '4px',
@@ -16467,6 +16529,24 @@
   createThemeColorToken(tokenNames.calendarGrabHandleBackgroundColor, tokenValues.calendarGrabHandleBackgroundColor);
   createThemeColorToken(tokenNames.calendarGridBorderColor, tokenValues.calendarGridBorderColor);
   createThemeColorToken(tokenNames.calendarGroupHeaderBackgroundColor, tokenValues.calendarGroupHeaderBackgroundColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundJobColor, tokenValues.calendarEventBackgroundJobColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverJobColor, tokenValues.calendarEventBackgroundHoverJobColor);
+  createThemeColorToken(tokenNames.calendarEventBorderJobColor, tokenValues.calendarEventBorderJobColor);
+  createThemeColorToken(tokenNames.calendarEventJobFontColor, tokenValues.calendarEventJobFontColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundMaintenanceColor, tokenValues.calendarEventBackgroundMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverMaintenanceColor, tokenValues.calendarEventBackgroundHoverMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBorderMaintenanceColor, tokenValues.calendarEventBorderMaintenanceColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundCalibrationColor, tokenValues.calendarEventBackgroundCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverCalibrationColor, tokenValues.calendarEventBackgroundHoverCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBorderCalibrationColor, tokenValues.calendarEventBorderCalibrationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundReservationColor, tokenValues.calendarEventBackgroundReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverReservationColor, tokenValues.calendarEventBackgroundHoverReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBorderReservationColor, tokenValues.calendarEventBorderReservationColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundTransportOrderColor, tokenValues.calendarEventBackgroundTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundHoverTransportOrderColor, tokenValues.calendarEventBackgroundHoverTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBorderTransportOrderColor, tokenValues.calendarEventBorderTransportOrderColor);
+  createThemeColorToken(tokenNames.calendarEventBackgroundAggregateAvailabilityColor, tokenValues.calendarEventBackgroundAggregateAvailabilityColor);
+  createThemeColorToken(tokenNames.calendarEventBorderAggregateAvailabilityColor, tokenValues.calendarEventBorderAggregateAvailabilityColor);
   // #endregion
   // #region size tokens
   const controlHeight = createStringToken(tokenNames.controlHeight, tokenValues.controlHeight);
@@ -96895,6 +96975,7 @@ focus outline in that case.
 
   const styles$7 = css `
     ${display$1('flex')}
+    ${styles$Y}
 
     :host {
         width: 100%;
@@ -96936,6 +97017,22 @@ focus outline in that case.
         border-bottom-color: ${borderHoverColor};
     }
 
+    :host([error-visible]) .container::after {
+        border-bottom-color: ${failColor};
+    }
+        
+    :host([error-visible]) .container {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:hover) .container::after {
+        border-bottom-color: ${failColor};
+    }
+
+    :host([error-visible]:focus-within) .container {
+        border-bottom-color: ${failColor};
+    }
+
     @media (prefers-reduced-motion) {
         .container::after {
             transition-duration: 0s;
@@ -96962,6 +97059,17 @@ focus outline in that case.
         color: ${controlLabelFontColor};
     }
 
+    :host([error-visible]) .error-icon {
+        display: none;
+    }
+
+    :host([error-visible]) .error-icon.scrollbar-width-calculated {
+        display: inline-flex;
+        position: absolute;
+        top: ${mediumPadding};
+        right: var(--ni-private-scrollbar-width);
+    }
+
     .action-button {
         align-self: flex-end;
         width: 80px;
@@ -96993,12 +97101,18 @@ focus outline in that case.
         ${x => (x.processing ? x.stopButtonLabel : x.sendButtonLabel)}
         ${when(x => x.processing, html `<${iconStopSquareTag} slot="start"></${iconStopSquareTag}>`, html `<${iconPaperPlaneTag} slot="start"></${iconPaperPlaneTag}>`)}
     </${buttonTag}>
+    <${iconExclamationMarkTag}
+        severity="error"
+        class="error-icon ${x => (x.scrollbarWidth >= 0 ? 'scrollbar-width-calculated' : '')}"
+        style="--ni-private-scrollbar-width: ${x => x.scrollbarWidth}px;"
+    ></${iconExclamationMarkTag}>
+    ${errorTextTemplate}
 </div>`;
 
   /**
    * A Spright component for composing and sending a chat message
    */
-  class ChatInput extends FoundationElement {
+  class ChatInput extends mixinErrorPattern(FoundationElement) {
       constructor() {
           super(...arguments);
           this.value = '';
@@ -97008,6 +97122,12 @@ focus outline in that case.
            * @internal
            */
           this.disableSendButton = true;
+          /**
+           * The width of the vertical scrollbar, if displayed.
+           * @internal
+           */
+          this.scrollbarWidth = -1;
+          this.updateScrollbarWidthQueued = false;
       }
       /**
        * @internal
@@ -97028,6 +97148,19 @@ focus outline in that case.
       textAreaInputHandler() {
           this.value = this.textArea.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.queueUpdateScrollbarWidth();
+      }
+      // If a property can affect whether a scrollbar is visible, we need to
+      // call queueUpdateScrollbarWidth() when it changes. The exceptions are
+      // properties that affect size (e.g. height, width, cols, rows), because
+      // we already have a ResizeObserver handling those changes. Also,
+      // a change to errorVisible cannot cause scrollbar visibility to change,
+      // because we always reserve space for the error icon.
+      /**
+       * @internal
+       */
+      placeholderChanged() {
+          this.queueUpdateScrollbarWidth();
       }
       /**
        * @internal
@@ -97036,6 +97169,7 @@ focus outline in that case.
           if (this.textArea) {
               this.textArea.value = this.value;
               this.disableSendButton = this.shouldDisableSendButton();
+              this.queueUpdateScrollbarWidth();
           }
       }
       /**
@@ -97045,6 +97179,15 @@ focus outline in that case.
           super.connectedCallback();
           this.textArea.value = this.value;
           this.disableSendButton = this.shouldDisableSendButton();
+          this.resizeObserver = new ResizeObserver(() => this.onResize());
+          this.resizeObserver.observe(this);
+      }
+      /**
+       * @internal
+       */
+      disconnectedCallback() {
+          super.disconnectedCallback();
+          this.resizeObserver?.disconnect();
       }
       /**
        * @internal
@@ -97080,6 +97223,22 @@ focus outline in that case.
               this.textArea.focus();
           }
       }
+      onResize() {
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
+      queueUpdateScrollbarWidth() {
+          if (!this.$fastController.isConnected) {
+              return;
+          }
+          if (!this.updateScrollbarWidthQueued) {
+              this.updateScrollbarWidthQueued = true;
+              DOM.queueUpdate(() => this.updateScrollbarWidth());
+          }
+      }
+      updateScrollbarWidth() {
+          this.updateScrollbarWidthQueued = false;
+          this.scrollbarWidth = this.textArea.offsetWidth - this.textArea.clientWidth;
+      }
   }
   __decorate([
       attr
@@ -97108,6 +97267,9 @@ focus outline in that case.
   __decorate([
       observable
   ], ChatInput.prototype, "disableSendButton", void 0);
+  __decorate([
+      observable
+  ], ChatInput.prototype, "scrollbarWidth", void 0);
   const sprightChatInput = ChatInput.compose({
       baseName: 'chat-input',
       template: template$7,