pixel-react 1.11.22 → 1.11.24

package/lib/styles/Editor.scss

@@ -0,0 +1,62 @@
+@mixin folding-icon-styles($color: var(--base-bg-color), $zIndex: 999999, $opacity: 1) {
+  color: $color !important;
+  fill: $color !important;
+  z-index: $zIndex !important;
+  opacity: $opacity !important;
+}
+
+/* Style for the line number gutter */
+.monaco-editor .margin {
+  background-color: var(--ff-editor-gutter-color) !important;
+}
+
+/* Style for the line numbers */
+.monaco-editor .margin .line-numbers {
+  color: var(--text-color) !important;
+  text-align: center !important;
+}
+
+
+.monaco-editor .margin-view-overlays {
+  width: 100% !important;
+}
+
+.monaco-editor .margin-view-overlays .line-numbers {
+  width: 100% !important;
+}
+
+/* Background color for active line */
+.monaco-editor .current-line-background {
+  background-color: var(--ff-editor-line-bg) !important;
+}
+
+/* Change the background of the active line number */
+.monaco-editor .margin .active-line-number {
+  background-color: var(--ff-line-number-bg)!important; 
+  color: var(--base-bg-color) !important;
+}
+
+.ff-editor-container {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  .monaco-editor {
+    border-radius: 6px;
+    border-top: 1px solid var(--ff-editor-border-color);
+    border-right: 1px dashed var(--ff-editor-border-color);
+    border-bottom: 1px dashed var(--ff-editor-border-color);
+    border-left: 1px solid var(--ff-editor-border-color);
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-expanded,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-collapsed,
+  .monaco-editor .cldr.codicon.codicon-folding-manual-expanded {
+   @include folding-icon-styles()
+  }
+  .monaco-editor .cldr.codicon.codicon-folding-expanded {
+   @include folding-icon-styles()
+  }
+  .cldr.codicon.codicon-folding-manual-collapsed {
+    @include folding-icon-styles()
+  }
+}

package/lib/styles/ExcelContextMenu.scss

@@ -0,0 +1,27 @@
+.ff-excel-menu {
+  position: absolute;
+  border: 1px solid var(--option-card-border-color);
+  background: var(--option-card-bg-color);
+  border-radius: 4px;
+  margin: 2px;
+  min-height: 32px;
+  min-width: 111px;
+  white-space: nowrap;
+  z-index: 2000;
+
+  .ff-excel-menu-options {
+    color: var(--text-color);
+    cursor: pointer;
+    border-radius: 3px;
+    display: flex;
+    align-items: center;
+    padding: 4px;
+    gap: 8px;
+    &:hover {
+      background-color: var(--hover-color);
+    }
+    label {
+      cursor: pointer;
+    }
+  }
+}

package/lib/styles/ExcelFile.scss

@@ -0,0 +1,61 @@
+.ff-excel {
+  position: relative;
+  .ff-excel-sheet {
+    position: relative;
+    max-width: 100%;
+    top: 0;
+  }
+
+  .ff-excel-sheet-bar {
+    position: static;
+    max-width: 100%;
+    margin-left: 60px;
+    display: flex;
+    height: 32px;
+    align-items: center;
+    color: var(--brand2-color);
+    box-shadow: 0px 0px 4px -1px var(--toggle-strip-shadow);
+
+    .ff-excel-add-sheet-set {
+      position: relative;
+      background-color: var(--tab-bg-color);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      top: 0;
+      left: 0px;
+      height: 100%;
+
+      .ff-excel-add-sheet-icon {
+        padding: 6px 10px;
+      }
+    }
+
+    .ff-excel-tab-container {
+      height: 32px;
+      display: flex;
+      overflow-x: auto;
+      align-items: center;
+      scrollbar-width: none;
+
+      .ff-excel-tab-list {
+        padding: 8px 9px;
+        height: 100%;
+        min-width: max-content;
+        cursor: pointer;
+        background-color: var(--hover-color);
+        &.active {
+          background-color: var(--excel-sheet-button-color);
+          padding: 8px 9px;
+          height: 100%;
+        }
+
+        &:focus {
+          outline: none;
+          text-decoration: none;
+        }
+      }
+    }
+  }
+}

package/lib/styles/ExcelToolBar.scss

@@ -0,0 +1,97 @@
+.ff-excel-toolbar {
+  width: 100%;
+  display: flex;
+  height: 24px !important; // need to be important to override the height of the toolbar
+  align-items: center;
+
+  .ff-excel-toolbar-divider {
+    width: 1px;
+    height: 20px;
+    background-color: var(--excel-toolbar-divider);
+    margin: 0 24px;
+    border-radius: 1px;
+    z-index: 1000;
+  }
+
+  .ff-excel-toolbar-font {
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+    .ff-excel-toolbar-font-family {
+      width: 120px;
+    }
+    .ff-excel-toolbar-font-size {
+      width: 56px;
+    }
+  }
+
+  .ff-excel-toolbar-text {
+    width: 100px;
+    height: 24px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-underline {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  .ff-excel-toolbar-icon {
+    width: 88px;
+    height: 24px;
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .ff-excel-toolbar-icon-color {
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+      &:hover {
+        border-radius: 4px;
+        background-color: var(--icon-hover-color);
+      }
+      .ff-icon-dark & {
+        background-color: var(--brand-color);
+
+        &.ff-icon-click:hover {
+          background-color: var(--primary-button-text-color);
+          svg path {
+            fill: var(--brand-color);
+          }
+        }
+      }
+    }
+  }
+
+  .ff-excel-toolbar-menu {
+    display: flex;
+    align-items: center;
+    width: 36px;
+    height: 24px;
+    .ff-excel-toolbar-menu-option {
+      display: flex;
+      align-items: center;
+    }
+  }
+}

package/lib/styles/ExpandableMenu.scss

@@ -0,0 +1,110 @@
+@use '../../assets/styles/fonts';
+
+.ff-expandable-chip-menu {
+  display: inline-flex;
+  gap: 16px;
+  align-items: center;
+  border-radius: 16px;
+  cursor: pointer;
+  overflow: hidden;
+  width: auto;
+  padding: 4px 8px;
+  transition: all 0.3s ease;
+
+  &--primary {
+    border: 0.5px solid var(--brand-color);
+    background-color: var(--expandable-menu-default-bg);
+  }
+
+  .ff-label-chip {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 4px;
+    white-space: nowrap;
+    padding: 2px 0;
+
+    .arrow-icon {
+      height: 14px;
+      width: 14px;
+      display: grid;
+      place-items: center;
+    }
+
+    &--primary {
+      color: var(--brand-color);
+    }
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    &:disabled {
+      pointer-events: none;
+    }
+  }
+
+  &--medium {
+    @extend .fontSm;
+    line-height: 18px;
+  }
+
+  .ff-sub-chips {
+    display: flex;
+    gap: 8px;
+    max-width: 500px;
+    overflow-x: auto;
+    -ms-overflow-style: none;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    transform: scaleX(0);
+    transform-origin: left;
+    transition: transform 0.3s ease, opacity 0.3s ease;
+    opacity: 0;
+  }
+
+  &.expanded .ff-sub-chips {
+    transform: scaleX(1);
+    opacity: 1;
+  }
+
+  .ff-sub-chip {
+    padding: 2px 8px;
+    border-radius: 12px;
+    white-space: nowrap;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    opacity: 0;
+    transform: translateX(-10px);
+    animation: fadeIn 0.5s ease forwards;
+
+    &--primary {
+      background: var(--expandable-menu-option-bg);
+      color: var(--brand-color);
+
+      &:hover,
+      &.selected {
+        background-color: var(--brand-color);
+        color: var(--expandable-menu-default-bg);
+      }
+    }
+    &--medium {
+      @extend .fontSm;
+      line-height: 18px;
+    }
+  }
+
+  @keyframes fadeIn {
+    0% {
+      opacity: 0;
+      transform: translateX(-10px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateX(0);
+    }
+  }
+
+  &.expanded .ff-sub-chip {
+    animation: fadeIn 0.5s ease forwards;
+  }
+}

package/lib/styles/FieldSet.scss

@@ -0,0 +1,10 @@
+.ff_fieldSet_container {
+  .ff_fieldSet {
+    border:1px solid var(--ff-select-border-color);
+    border-radius: 5px;
+    .ff_legend_container{
+        display: flex;
+        margin-left: 8px
+    }
+  }
+}

package/lib/styles/FileDropzone.scss

@@ -0,0 +1,180 @@
+@mixin column-flex-gap($gap: 0) {
+  display: flex;
+  flex-direction: column;
+  gap: $gap;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@mixin center {
+  display: grid;
+  place-items: center;
+}
+
+@mixin icon-container($height: 24px, $width: 24px) {
+  height: $height;
+  width: $width;
+}
+
+.ff-file-dropzone-wrapper {
+  @include column-flex-gap(10px);
+  
+
+  .ff-file-dropzone {
+    padding: 16px 0;
+    border-radius: 8px;
+    background: var(--file-dropzone-default-color);
+    border: 1px dashed var(--brand-color);
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+    gap: 8px;
+    transition: background-color 0.2s ease;
+
+    .ff-radio-group-wrapper {
+      position: relative;
+      bottom: 8px;
+    }
+
+    &:hover,
+    &--active {
+      background-color: var(--file-dropzone-selected-color);
+    }
+    &--webservice-file {
+      @include center;
+    }
+    &--webservice-container {
+      @include center;
+      padding: 16px 0 40px 0;
+    }
+    &-content {
+      &__icon {
+        height: 80px;
+        width: 80px;
+        display: grid;
+        place-items: center;
+      }
+
+      &__labels {
+        .choose-file-btn {
+          margin: 0 auto;
+          position: relative;
+          font-weight: 600;
+          line-height: 15px;
+
+          input {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+          }
+        }
+      }
+      &__webservice-file {
+        padding: 4px;
+      }
+    }
+  }
+}
+.ff-file-details-wrapper {
+    @include column-flex-gap(10px);
+    max-height: 300px;
+    overflow-y: auto;
+    scroll-behavior: smooth;
+    padding: 2px;
+    ::-webkit-scrollbar {
+      width: 2px;
+    }
+    -ms-overflow-style: none;
+    scrollbar-width: thin;
+
+    .ff-file-details {
+      @include column-flex-gap(10px);
+
+      &__item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 4px;
+        border-radius: 4px;
+        background-color: var(--file-details-bg);
+        box-shadow: 0px 0px 4px 0px var(--file-details-container-shadow);
+        overflow: hidden;
+
+        .ff-file-info {
+          display: flex;
+          align-items: center;
+          gap: 4px;
+          width: 87%;
+
+          .ff-file-info__icon {
+            @include center;
+            @include icon-container;
+          }
+
+          &__name-wrapper {
+            @include column-flex-gap(2px);
+            justify-content: center;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+
+            &__name {
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+              display: block;
+              color: var(--text-color);
+            }
+          }
+        }
+
+        .ff-file-actions {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          &__icon-replace,
+          &__icon-remove {
+            @include icon-container;
+            @include center;
+            cursor: pointer;
+          }
+        }
+      }
+    }
+  }
+.ff-webservice-file-wrapper {
+  display: flex;
+  gap: 8px;
+  .ff-webservice-file-name {
+    position: relative;
+    bottom: 2px;
+  }
+}
+.ff-input-ref {
+  display: none;
+}
+.ff-disable-file-dropzone-wrapper {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.footer_basic_button {
+  width: 100%;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  @include flex-center;
+  justify-content: flex-end;
+  gap: 16px;
+  border-top: 1px solid var(--border-color);
+  padding: 4px 8px;
+  background-color: var(--primary-icon-color);
+}

package/lib/styles/Form.scss

@@ -0,0 +1,159 @@
+@use '../../assets/styles/fonts';
+
+.ff-form-container {
+  @extend .fontSm;
+  background-color: var(--hover-color);
+  border: 1px solid var(--arrows-button-border-color);
+  border-radius: 8px;
+  padding: 20px;
+  width: 400px;
+  margin: 0 auto;
+  display: grid;
+  gap: 8px;
+
+  .ff-form-group {
+    margin-bottom: 16px;
+
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+
+    input {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+
+      &:focus {
+        border-color: var(--brand-color);
+      }
+
+      &.ff-error {
+        border-color: var(--ff-error-light);
+      }
+    }
+
+    .ff-error {
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+
+  .ff-form-group {
+    margin-bottom: 16px;
+
+    .ff-label {
+      display: block;
+      margin-bottom: 4px;
+      font-weight: bold;
+    }
+
+    input,
+    select {
+      width: 94%;
+      padding: 10px;
+      border: 1px solid var(--arrows-button-border-color);
+      border-radius: 8px;
+
+      &:focus {
+        border-color: var(--brand-color);
+      }
+
+      &.ff-error {
+        border-color: var(--ff-error-light); // Ensure red border color
+      }
+    }
+  }
+
+  .ff-form-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 16px;
+
+    .ff-radio-group-wrapper {
+      display: flex;
+    }
+
+    .ff-radio-gender {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      input[type="radio"] {
+        margin-right: 0.5rem;
+      }
+    }
+
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+  }
+
+  .ff-button-layout {
+    width: 99%;
+    display: flex;
+    gap: 12px;
+    margin-top: 24px;
+
+    button {
+      width: 50%;
+      background-color: var(--brand-color);
+      color: var(--primary-button-text-color);
+      border: none;
+      border-radius: 8px;
+      padding: 10px;
+      cursor: pointer;
+    }
+  }
+}
+
+.ff-forms-container {
+  height: 450px;
+  overflow-y: scroll;
+
+  .ff-main {
+    padding: 40px;
+    border-radius: 10px;
+    background-color: var(--tree-connecting-lines-color);
+
+    .ff-error {
+      padding-left: 12px;
+      color: var(--error-light);
+      margin-top: 4px;
+    }
+
+    .ff-radio {
+      margin-top: 8px;
+    }
+
+    .ff-check {
+      display: flex;
+    }
+
+    .ff-textarea {
+      margin-top: 8px;
+    }
+
+    .ff-button-layout {
+      width: 99%;
+      display: flex;
+      gap: 12px;
+      margin-top: 24px;
+
+      button {
+        // width: 50%;
+        background-color: var(--brand-color);
+        color: var(--primary-button-text-color);
+        border: none;
+        border-radius: 8px;
+        padding: 10px;
+        cursor: pointer;
+      }
+    }
+  }
+}