pixel-react 1.7.9 → 1.8.1

package/src/components/NLPInput/components/NlpDropDown/NlpDropDownType.ts

@@ -1,62 +1,62 @@
-import { DrowdownPosition, NlpRenderOption } from '../../types';
-
-export interface NlpDropDownListProps {
-  /*
-   * Callback function triggered on blur event
-   */
-  onSelectBlur: () => void;
-  leftIcon?: string;
-  webServiceClick?: () => void;
-  containerWidth?:string | number,
-  /*
-   * Callback function triggered when an option is selected
-   */
-  onSelectOptionSelector: (option: NlpRenderOption) => void;
-
-  /*
-   * Position of the dropdown relative to the input
-   */
-  dropdownPosition: DrowdownPosition;
-
-  /*
-   * List of options to display in the dropdown
-   */
-  options?: NlpRenderOption[];
-
-  /*
-   * Optional z-index for controlling the dropdown's stacking order
-   */
-  optionZIndex?: number;
-
-  /*
-   * Reference to the input element
-   */
-  inputRef?: React.RefObject<HTMLInputElement>;
-
-  /*
-   * Optional label for the dropdown
-   */
-  label?: string;
-
-  /*
-   * If true, shows an error message related to the dropdown
-   */
-  hasError?: boolean;
-
-  /*
-   * Error message to display when hasError is true
-   */
-  errorMessage?: string;
-
-  /*
-   * If true, disables the dropdown
-   */
-  disabled?: boolean;
-}
-
-export const nlpDropdownDefaultCSSData = {
-  margin: 6,
-  optionHeight: 32,
-  selectInputHeight: 38,
-  dropDownWrapperPadding: 0,
-};
+import { DrowdownPosition, NlpRenderOption } from '../../types';
+
+export interface NlpDropDownListProps {
+  /*
+   * Callback function triggered on blur event
+   */
+  onSelectBlur: () => void;
+  leftIcon?: string;
+  webServiceClick?: () => void;
+  containerWidth?:string | number,
+  /*
+   * Callback function triggered when an option is selected
+   */
+  onSelectOptionSelector: (option: NlpRenderOption) => void;
+
+  /*
+   * Position of the dropdown relative to the input
+   */
+  dropdownPosition: DrowdownPosition;
+
+  /*
+   * List of options to display in the dropdown
+   */
+  options?: NlpRenderOption[];
+
+  /*
+   * Optional z-index for controlling the dropdown's stacking order
+   */
+  optionZIndex?: number;
+
+  /*
+   * Reference to the input element
+   */
+  inputRef?: React.RefObject<HTMLInputElement>;
+
+  /*
+   * Optional label for the dropdown
+   */
+  label?: string;
+
+  /*
+   * If true, shows an error message related to the dropdown
+   */
+  hasError?: boolean;
+
+  /*
+   * Error message to display when hasError is true
+   */
+  errorMessage?: string;
+
+  /*
+   * If true, disables the dropdown
+   */
+  disabled?: boolean;
+}
+
+export const nlpDropdownDefaultCSSData = {
+  margin: 6,
+  optionHeight: 32,
+  selectInputHeight: 38,
+  dropDownWrapperPadding: 0,
+};

package/src/components/NLPInput/components/NlpDropDown/NlpDropdown.scss

@@ -1,134 +1,134 @@
-@use '../../../../assets/styles/fonts';
-
-@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
-  position: absolute;
-  top: $top;
-  right: $right;
-  bottom: $bottom;
-  left: $left;
-}
-.ff-nlp-option {
-  color: var(--nlp-option-color);
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-.ff-nlp-dropdown-wrapper {
-  .ff-nlp-options-wrapper {
-    max-height: 256px;
-    z-index: 999;
-    position: absolute;
-    border: 1px solid var(--nlp-border-color);
-    box-sizing: border-box;
-    margin-top: 4px;
-    border-radius: 4px;
-    background-color: var(--primary-icon-color);
-    overflow: hidden auto;
-    display: flex;
-    justify-content: space-between;
-    overflow: hidden;
-
-    .ff-nlp-options-primary-wrapper {
-      max-height: 240px;
-      z-index: 100;
-      min-width: 290px;
-      box-sizing: border-box;
-      overflow: scroll;
-      scrollbar-width: none;
-      flex-grow: 1;
-    }
-    .ff-nlp-options-primary-wrapper::-webkit-scrollbar {
-      display: none;
-    }
-
-    .ff-nlp-option {
-      width: calc(100% - 10px);
-      border: 1px solid transparent;
-      padding: 0 4px;
-      overflow: hidden;
-      white-space: nowrap;
-      height: 32px;
-      text-overflow: ellipsis;
-      cursor: pointer;
-      &:hover {
-        background-color: var(--nlp-hover-color);
-      }
-    }
-
-    .ff-nlp-no-option {
-      width: calc(100% - 16px);
-      margin: 0;
-      overflow: hidden;
-      padding: 0 8px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: not-allowed;
-    }
-  }
-  .ff-nlp-data-show {
-    width: 380px;
-    height: 235px;
-    border: 1px solid transparent;
-    overflow: scroll;
-    scrollbar-width: none;
-    padding: 8px;
-    border: 1px solid var(--nlp-border-color);
-    position: relative;
-    border-radius: 4px;
-  }
-  .ff-nlp-data-hide {
-    display: none;
-  }
-  .nlp-categories {
-    padding: 0px 2px;
-    gap: 10px;
-    border-radius: 2px;
-    background: var(--nlp-background-color);
-    color: var(--nlp-color);
-  }
-
-  .ff-nlp-data-side-menu {
-    display: flex;
-    flex-direction: column;
-    row-gap: 8px;
-    color: var(--nlp-option-color);
-  }
-  .ff-nlp-data-show::-webkit-scrollbar {
-    display: none;
-  }
-
-  .nlp-details-header {
-    color: var(--status-skipped-text-color);
-    display: flex;
-    flex-direction: column;
-  }
-  .nlp-details {
-    color: var(--status-skipped-text-color);
-  }
-  .ff-nlp-options-wrapper-main {
-    display: flex;
-    flex-direction: column;
-    width: 302px;
-    justify-content: space-between;
-    flex-grow: 1;
-  }
-}
-.ff-nlp {
-  color: var(--nlp-color);
-}
-
-.ff-sg {
-  color: var(--nlp-step-group-color);
-  background-color: var(--nlp-step-group-background);
-}
-
-.ff-pe {
-  color: var(--nlp-pe-color);
-  background-color: var(--nlp-pe-background);
-}
-
-.ff-nlp-web-service-div {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
+@use '../../../../assets/styles/fonts';
+
+@mixin absolute-position($top: auto, $right: auto, $bottom: auto, $left: auto) {
+  position: absolute;
+  top: $top;
+  right: $right;
+  bottom: $bottom;
+  left: $left;
+}
+.ff-nlp-option {
+  color: var(--nlp-option-color);
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.ff-nlp-dropdown-wrapper {
+  .ff-nlp-options-wrapper {
+    max-height: 256px;
+    z-index: 999;
+    position: absolute;
+    border: 1px solid var(--nlp-border-color);
+    box-sizing: border-box;
+    margin-top: 4px;
+    border-radius: 4px;
+    background-color: var(--primary-icon-color);
+    overflow: hidden auto;
+    display: flex;
+    justify-content: space-between;
+    overflow: hidden;
+
+    .ff-nlp-options-primary-wrapper {
+      max-height: 240px;
+      z-index: 100;
+      min-width: 290px;
+      box-sizing: border-box;
+      overflow: scroll;
+      scrollbar-width: none;
+      flex-grow: 1;
+    }
+    .ff-nlp-options-primary-wrapper::-webkit-scrollbar {
+      display: none;
+    }
+
+    .ff-nlp-option {
+      width: calc(100% - 10px);
+      border: 1px solid transparent;
+      padding: 0 4px;
+      overflow: hidden;
+      white-space: nowrap;
+      height: 32px;
+      text-overflow: ellipsis;
+      cursor: pointer;
+      &:hover {
+        background-color: var(--nlp-hover-color);
+      }
+    }
+
+    .ff-nlp-no-option {
+      width: calc(100% - 16px);
+      margin: 0;
+      overflow: hidden;
+      padding: 0 8px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      cursor: not-allowed;
+    }
+  }
+  .ff-nlp-data-show {
+    width: 380px;
+    height: 235px;
+    border: 1px solid transparent;
+    overflow: scroll;
+    scrollbar-width: none;
+    padding: 8px;
+    border: 1px solid var(--nlp-border-color);
+    position: relative;
+    border-radius: 4px;
+  }
+  .ff-nlp-data-hide {
+    display: none;
+  }
+  .nlp-categories {
+    padding: 0px 2px;
+    gap: 10px;
+    border-radius: 2px;
+    background: var(--nlp-background-color);
+    color: var(--nlp-color);
+  }
+
+  .ff-nlp-data-side-menu {
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
+    color: var(--nlp-option-color);
+  }
+  .ff-nlp-data-show::-webkit-scrollbar {
+    display: none;
+  }
+
+  .nlp-details-header {
+    color: var(--status-skipped-text-color);
+    display: flex;
+    flex-direction: column;
+  }
+  .nlp-details {
+    color: var(--status-skipped-text-color);
+  }
+  .ff-nlp-options-wrapper-main {
+    display: flex;
+    flex-direction: column;
+    width: 302px;
+    justify-content: space-between;
+    flex-grow: 1;
+  }
+}
+.ff-nlp {
+  color: var(--nlp-color);
+}
+
+.ff-sg {
+  color: var(--nlp-step-group-color);
+  background-color: var(--nlp-step-group-background);
+}
+
+.ff-pe {
+  color: var(--nlp-pe-color);
+  background-color: var(--nlp-pe-background);
+}
+
+.ff-nlp-web-service-div {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}