@integry/sdk 4.7.39 → 4.7.40

package/src/components/TagsMenu/styles.module.scss

@@ -1,350 +0,0 @@
-.tagsMenuWrapper {
-  font-family: 'Inter';
-  padding: 5px;
-  font-size: 14px;
-  .tabsWrapper {
-    outline: none;
-    color: hsl(240 3.8% 46.1%);
-    padding: 0.25rem;
-    background-color: hsl(240 4.8% 95.9%);
-    border-radius: 6px;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 2.5rem;
-    display: inline-flex;
-    border-color: hsl(240 5.9% 90%);
-    .tab {
-      color: #71717a;
-      font-size: 13px;
-      line-height: 1.25rem;
-      padding-top: 0.375rem;
-      padding-bottom: 0.375rem;
-      padding-left: 0.75rem;
-      padding-right: 0.75rem;
-      border-radius: 4px;
-      white-space: nowrap;
-      justify-content: center;
-      align-items: center;
-      flex: 1 1 0%;
-      display: inline-flex;
-      cursor: pointer;
-      position: relative;
-
-      svg {
-        margin-right: 4px;
-      }
-
-      &.tabWithResults {
-        font-weight: 500;
-        color: #4f46e5;
-      }
-    }
-    .activeTab {
-      background-color: hsl(0 0% 100%);
-      color: hsl(240 10% 3.9%);
-
-      &.tabWithResults {
-        color: #4f46e5;
-      }
-    }
-    .resultBadge {
-      position: absolute;
-      top: 0;
-      right: 0;
-      background-color: #4f46e5;
-      color: white;
-      border-radius: 9999px;
-      font-size: 0.65rem;
-      min-width: 1.25rem;
-      height: 1.25rem;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 0 0.25rem;
-      transform: translate(25%, -25%);
-    }
-  }
-  .tabContent {
-    padding: 12px 2px;
-    font-size: 14px;
-    .searchWrapper {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-      margin-bottom: 10px;
-      position: relative;
-
-      input {
-        flex: 1;
-        padding: 8px;
-        border: 1px solid #ccc;
-        border-radius: 5px;
-        padding-right: 30px; // Space for the clear button
-      }
-
-      .clearSearch {
-        position: absolute;
-        right: 8px;
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: #71717a;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-
-        &:hover {
-          color: #4f46e5;
-        }
-      }
-    }
-    ul {
-      list-style: none;
-      li {
-        div {
-          cursor: pointer;
-        }
-
-        &.searchMatch {
-          > .listItemContent {
-            // background-color: rgba(79, 70, 229, 0.1);
-            border-radius: 4px;
-          }
-        }
-
-        .listItemContent {
-          padding: 5px 0;
-          display: flex;
-          align-items: center;
-          border-radius: 4px;
-          padding-left: 4px;
-          padding-right: 4px;
-          [class^='styles-module_preact-hint__content_'] {
-            white-space: pre-wrap;
-            word-break: break-word;
-          }
-
-          &:hover {
-            background-color: rgba(66, 80, 240, 0.1);
-          }
-
-          span.expandIcon {
-            margin-right: 10px;
-            cursor: pointer;
-            svg {
-              width: 1rem;
-              height: 1rem;
-            }
-          }
-          span.tagIcon {
-            margin-right: 5px;
-            order: 2;
-            display: inline-flex;
-            align-items: center;
-            line-height: 1;
-            svg,
-            img {
-              width: 1rem;
-              height: 1rem;
-              position: relative;
-            }
-            img {
-              margin-right: 0px;
-            }
-          }
-          span.key {
-            order: 3;
-            mark {
-              background-color: yellow;
-              color: inherit;
-              font-weight: 500;
-              border-radius: 2px;
-              padding: 0 2px;
-            }
-          }
-          span.outputIndicator {
-            cursor: pointer;
-            color: #71717a;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            min-width: 20px;
-            min-height: 20px;
-            order: 1;
-            margin-right: 2px;
-
-            svg {
-              width: 1rem;
-              height: 1rem;
-            }
-
-            &:hover {
-              color: #3b82f6;
-              background-color: rgba(59, 130, 246, 0.1);
-              border-radius: 2px;
-            }
-
-            &.objectExpandIcon {
-              svg {
-                color: #4f46e5; /* Indigo color to match theme */
-              }
-
-              &:hover {
-                background-color: rgba(
-                  79,
-                  70,
-                  229,
-                  0.15
-                ); /* Slightly darker on hover */
-              }
-            }
-          }
-          div.hint {
-            order: 4;
-            max-width: 100%;
-            min-width: 0;
-            width: 100%;
-          }
-          span.value {
-            color: hsl(240 3.8% 60%);
-            font-size: 0.75rem;
-            font-weight: 400;
-            line-height: 1rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-left: 5px;
-            order: 4;
-            display: inline-block;
-            max-width: 100%;
-            vertical-align: middle;
-
-            mark {
-              background-color: yellow;
-              color: inherit;
-              font-weight: 500;
-              border-radius: 2px;
-              padding: 0 2px;
-            }
-          }
-          span.key {
-            color: hsl(240 10% 3.9%);
-            font-weight: 500;
-            font-size: 0.8rem;
-            line-height: 1rem;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-            margin-left: 5px;
-            min-width: 20px;
-            width: 100%;
-            max-width: fit-content;
-            flex-shrink: 0;
-
-            mark {
-              background-color: yellow;
-              color: inherit;
-              font-weight: 500;
-              border-radius: 2px;
-              padding: 0 2px;
-            }
-          }
-          img {
-            width: 20px;
-            height: 20px;
-            object-fit: contain;
-            margin-right: 3px;
-            order: 2;
-          }
-
-          // Add this to your styles.module.scss file
-          .addTagButton {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            background-color: #4f46e5;
-            color: white;
-            border: none;
-            border-radius: 4px;
-            width: 24px;
-            height: 24px;
-            cursor: pointer;
-            transition: background-color 0.2s, opacity 0.2s;
-            position: absolute;
-            right: 12px; // Reduced from 32px to 8px to position it closer to the right edge
-            opacity: 0.9;
-            animation: fadeIn 0.2s ease-in-out;
-            z-index: 10; // Ensure it appears above other elements
-
-            &:hover {
-              background-color: #4338ca;
-              opacity: 1;
-            }
-
-            svg {
-              width: 14px;
-              height: 14px;
-            }
-          }
-
-          @keyframes fadeIn {
-            from {
-              opacity: 0;
-            }
-            to {
-              opacity: 0.9;
-            }
-          }
-        }
-      }
-    }
-    .outputSection {
-      background-color: rgba(0, 0, 0, 0.02);
-      border-radius: 4px;
-      border-left: 2px solid #e2e8f0;
-
-      // Remove padding when the section is empty
-      ul {
-        padding: 5px;
-        &:empty {
-          padding: 0;
-          border-left: none;
-          background-color: transparent;
-        }
-      }
-    }
-    .emptyStep {
-      span {
-        color: #666;
-        font-style: italic;
-        margin: 10px 0;
-        text-align: center;
-        font-size: 12px;
-        margin-left: 5px;
-      }
-    }
-    .tagsListWrapper {
-      max-height: 260px; /* Increased max height for better viewing - old was 260px */
-      overflow-y: auto;
-      .valuesList {
-        ul {
-          margin: 5px 0;
-          padding: 0 10px;
-          li {
-            color: hsl(240deg, 10%, 3.9%);
-            cursor: pointer;
-            font-weight: 500;
-            font-size: 0.8rem;
-            line-height: 1rem;
-            padding: 5px 10px;
-            &:hover {
-              background: rgba(66, 80, 240, 0.1);
-              border-radius: 5px;
-            }
-          }
-        }
-      }
-    }
-  }
-}

package/src/components/TestComponent/index.ts

@@ -1,71 +0,0 @@
-import { html } from 'htm/preact';
-import cx from 'classnames';
-
-import { Hint } from '@/components/Tooltip';
-import { ThreeDotLoader } from '@/components/ThreeDotLoader';
-import { TagOptions } from '@/components/MultipurposeField/TagOptions';
-
-import styles from './styles.module.scss';
-
-export interface TestProps {
-  tags: any;
-  onSelect: (tag: any) => void;
-}
-
-/**
- * Test component
- *
- */
-export const TestComponent = (props: TestProps) => {
-  const { tags, onSelect, ...restOfProps } = props;
-  const tagsLocal: any = {
-    FirstName: 'John',
-    LastName: 'Doe',
-    Gender: 'male',
-    Age: 20,
-    DateOfBirth: '1990-01-01',
-    Email: 'johndoe@example.com',
-    Phone: '555-555-1234',
-    Address: {
-      Street: '123 Main St',
-      City: 'New York',
-      State: 'NY',
-      PostalCode: '10001',
-      Country: 'USA',
-    },
-    PreferredContactMethod: 'email',
-    LastContacted: '2023-01-15',
-    Twitter: '@johndoe',
-    Website: 'https://www.example.com',
-    LinkedIn: 'https://www.linkedin.com/in/johndoe',
-    Bio: 'John Doe is a software engineer with over 10 years of experience.',
-    Relationship: 'professional',
-    Tags: ['tech', 'conference', 'networking'],
-    JobTitle: 'Software Engineer',
-    Company: 'Example Corp.',
-    DateCreated: '2023-04-14T12:00:00Z',
-    DateUpdated: '2023-04-14T12:00:00Z',
-    NextMeeting: {
-      Date: '2023-05-01',
-      Topic: 'Project Planning',
-      Location: 'New York',
-    },
-    Notes: 'Met at the 2022 Tech Conference in San Francisco.',
-  };
-
-  return html`
-    <div>
-      ${Object.keys(tagsLocal).map(
-        (objKey, index, arr) => html`
-          <${TagOptions}
-            objectKey="${objKey}"
-            keyValue="${objKey}"
-            objectData="${tagsLocal[objKey]}"
-            onSelect=${onSelect}
-            isRoot="${true}"
-          />
-        `,
-      )}
-    </div>
-  `;
-};

package/src/components/TestComponent/styles.module.scss

@@ -1,152 +0,0 @@
-.button {
-  outline: none;
-  cursor: pointer;
-  appearance: none;
-  font-size: 12px;
-  padding: 0px 15px;
-  height: 30px;
-  &.btnPrimary {
-    border: 1px solid #4250f0;
-    background: #4250f0;
-    border-radius: 4px;
-    font-size: 12px;
-    color: #ffffff;
-    &:not(.disabled):hover {
-      background: var(--theme-accent-blue-2, #3a46d5);
-      border: 1px solid var(--theme-accent-blue-2, #3a46d5);
-    }
-  }
-  &.btnSecondary {
-    border: 1px solid #4250f0;
-    background: transparent;
-    text-align: center;
-    font-size: 12px;
-    color: #4250f0;
-    border-radius: 4px;
-    &:not(.disabled):hover {
-      background: #4250f0;
-      color: white;
-    }
-  }
-  &.buttonLink {
-    border: none;
-    color: #4250f0;
-    font-weight: 500;
-    font-size: 12px;
-    background: transparent;
-    padding: 0;
-    margin: 0;
-    &:not(.disabled):hover {
-      color: #473a64;
-    }
-  }
-
-  &.tell-us-more-btn {
-    width: 113px;
-    height: 36px;
-    background: #ffffff;
-    border: 1px solid #4250f0;
-    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #4250f0;
-    &:not(.disabled):hover {
-      background: #ffffff;
-      color: #4250f0;
-    }
-    padding: 0px;
-  }
-
-  &.integry-primary-btn {
-    width: auto;
-    height: auto;
-    background: #4250f0;
-    border: 1px solid #4250f0;
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
-      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: center;
-    color: #ffffff;
-    &:not(.disabled):hover {
-      background: #2c36ad;
-      color: #ffffff;
-    }
-    padding: 0px;
-  }
-
-  &.integry-btn-grey {
-    width: auto;
-    height: auto;
-    background: #f3f3f3;
-    border: 1px solid #f3f3f3;
-    box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08),
-      inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    text-align: center;
-    color: #333333;
-    &:not(.disabled):hover {
-      background: #e6e6e6;
-      color: #333333;
-    }
-    padding: 0px;
-  }
-
-  &.integry-secondary-btn {
-    width: auto;
-    height: auto;
-    background: #ffffff;
-    border: 1px solid #4250f0;
-    // box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.08), inset 0px -1px 0px rgba(0, 0, 0, 0.2);
-    border-radius: 5px;
-    font-family: inherit;
-    font-style: normal;
-    font-weight: 500;
-    font-size: 14px;
-    line-height: 20px;
-    color: #4250f0;
-    &:not(.disabled):hover {
-      background: #4250f0;
-      color: #ffffff;
-    }
-    padding: 0px;
-  }
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.flowWrapButton {
-    border-radius: 5px;
-    border: 1px solid var(--theme-accent-blue-1, #4250f0);
-    background: var(--theme-accent-blue-1, #4250f0);
-    color: #fff;
-    font-family: Inter;
-    font-size: 13px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: normal;
-    padding: 4.5px 10px;
-    cursor: pointer;
-    height: auto;
-
-    &:hover {
-      background: var(--theme-accent-blue-2, #3a46d5) !important;
-      border: 1px solid var(--theme-accent-blue-2, #3a46d5) !important;
-    }
-  }
-}