@integry/sdk 4.7.39 → 4.7.41

package/src/components/Input/PasswordInput/index.ts

@@ -1,164 +0,0 @@
-import { html } from 'htm/preact';
-import { useEffect, useState } from 'preact/hooks';
-
-import { ErrorMessage } from '@/components/ErrorMessage';
-import { Hint } from '@/components/Tooltip';
-import { BaseInput } from '../BaseInput';
-import { Label } from '../../Label';
-
-import styles from './styles.module.scss';
-
-interface PasswordInputProps {
-  id: string;
-  title: string;
-  description: string;
-  placeholder: string;
-  showStepValidation?: boolean;
-  isRequired?: boolean;
-  regex: string | null;
-  regexErrorMessage: string | null;
-  value?: string;
-  onChange?: (val: string, passesRegexTest?: boolean) => void;
-  isReadOnly?: boolean;
-  isChanged?: boolean;
-}
-
-/**
- * Input component
- *
- */
-const PasswordInput = (props: PasswordInputProps) => {
-  const {
-    title,
-    description,
-    placeholder,
-    value,
-    regex,
-    regexErrorMessage,
-    showStepValidation = false,
-    isRequired = false,
-    onChange = () => null,
-    isReadOnly = false,
-    isChanged = false,
-  } = props;
-
-  const [initialValue] = useState(value);
-  const [passwordShown, setPasswordShown] = useState(false);
-  const [invalidInput, setInvalidInput] = useState(false);
-  const [showErrorOnFocusLoss, setShowErrorOnFocusLoss] = useState(false);
-
-  // validate on first render
-  useEffect(() => {
-    if (regex) {
-      const invalid = !new RegExp(regex.replace(/^\/|\/$/g, '')).test(
-        `${initialValue}`,
-      );
-      setInvalidInput(invalid);
-    }
-  }, [regex]);
-
-  const handleChange = (inputValue: string) => {
-    if (regex) {
-      if (!new RegExp(regex.replace(/^\/|\/$/g, '')).test(inputValue)) {
-        onChange(inputValue, false);
-        setInvalidInput(true);
-      } else {
-        onChange(inputValue, true);
-        setInvalidInput(false);
-      }
-    } else {
-      onChange(inputValue);
-    }
-  };
-
-  const validate = () => {
-    setShowErrorOnFocusLoss(true);
-  };
-
-  const togglePasswordVisiblity = () => {
-    setPasswordShown((isShown) => !isShown);
-  };
-
-  return html`
-    <${Hint} dismissOnClick=${false} position="top" deltaY=${0}>
-      <div class="${styles.passwordInputWrapper}">
-        <fieldset>
-          <${Label} title=${title} description=${description}
-          isRequired=${isRequired}
-          labelTag=${isReadOnly && isChanged ? 'Changed' : ''} //>
-          ${isReadOnly &&
-          html`<span
-            class=${styles.readonlyHint}
-            data-hint=${isReadOnly ? `Cannot modify user selection` : ''}
-          ></span>`}
-          <${BaseInput}
-            type=${passwordShown ? 'text' : 'password'}
-            placeholder=${placeholder}
-            handleChange=${handleChange}
-            handleBlur=${validate}
-            value=${value}
-            control=${() => html`
-              <div
-                class=${styles.visibilityToggle}
-                onclick=${togglePasswordVisiblity}
-              >
-                ${!passwordShown
-                  ? html` <svg
-                      width="20"
-                      height="12"
-                      viewBox="0 0 20 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M0.183387 6.51359C0.35582 6.72918 4.47535 11.6704 9.71968 11.6704V11.6704C14.964 11.6704 19.0836 6.72924 19.256 6.51357C19.5005 6.21515 19.5005 5.78535 19.256 5.48691V5.48615C19.0835 5.27523 14.964 0.330078 9.71968 0.330078C4.47535 0.330078 0.355766 5.27507 0.183387 5.48693C-0.0611291 5.78535 -0.0611291 6.21515 0.183387 6.51359ZM9.71968 10.0499C6.1643 10.0499 3.04855 7.1924 1.90266 6.00018C3.04632 4.80579 6.1643 1.95044 9.71968 1.95044C13.2751 1.95044 16.3908 4.80797 17.5367 6.00018C16.393 7.19458 13.2751 10.0499 9.71968 10.0499Z"
-                        fill="#999999"
-                      />
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M6.94922 8.29099C7.55668 8.89849 8.3806 9.24021 9.24022 9.24021C10.0998 9.24021 10.9237 8.89845 11.5312 8.29099C12.1387 7.68353 12.4804 6.85956 12.4804 5.99999C12.4804 5.14041 12.1387 4.31648 11.5312 3.70898C10.9238 3.10148 10.0998 2.75977 9.24022 2.75977C8.38064 2.75977 7.55672 3.10152 6.94922 3.70898C6.34172 4.31644 6 5.14041 6 5.99999C6 6.85956 6.34176 7.68349 6.94922 8.29099ZM7.7435 5.3803C7.99408 4.77431 8.58488 4.38021 9.24022 4.38021C9.67002 4.38021 10.0816 4.55031 10.3854 4.85481C10.6899 5.15856 10.86 5.57015 10.86 5.99995C10.86 6.65529 10.4659 7.24607 9.85987 7.49667C9.25464 7.74727 8.5583 7.60905 8.09509 7.14508C7.63111 6.68186 7.49289 5.98552 7.7435 5.3803Z"
-                        fill="#999999"
-                      />
-                    </svg>`
-                  : html` <svg
-                      width="20"
-                      height="12"
-                      viewBox="0 0 20 12"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M0.183387 6.51359C0.35582 6.72918 4.47535 11.6704 9.71968 11.6704V11.6704C14.964 11.6704 19.0836 6.72924 19.256 6.51357C19.5005 6.21515 19.5005 5.78535 19.256 5.48691V5.48615C19.0835 5.27523 14.964 0.330078 9.71968 0.330078C4.47535 0.330078 0.355766 5.27507 0.183387 5.48693C-0.0611291 5.78535 -0.0611291 6.21515 0.183387 6.51359ZM9.71968 10.0499C6.1643 10.0499 3.04855 7.1924 1.90266 6.00018C3.04632 4.80579 6.1643 1.95044 9.71968 1.95044C13.2751 1.95044 16.3908 4.80797 17.5367 6.00018C16.393 7.19458 13.2751 10.0499 9.71968 10.0499Z"
-                        fill="#333333"
-                      />
-                      <path
-                        fill-rule="evenodd"
-                        clip-rule="evenodd"
-                        d="M6.94922 8.29099C7.55668 8.89849 8.3806 9.24021 9.24022 9.24021C10.0998 9.24021 10.9237 8.89845 11.5312 8.29099C12.1387 7.68353 12.4804 6.85956 12.4804 5.99999C12.4804 5.14041 12.1387 4.31648 11.5312 3.70898C10.9238 3.10148 10.0998 2.75977 9.24022 2.75977C8.38064 2.75977 7.55672 3.10152 6.94922 3.70898C6.34172 4.31644 6 5.14041 6 5.99999C6 6.85956 6.34176 7.68349 6.94922 8.29099ZM7.7435 5.3803C7.99408 4.77431 8.58488 4.38021 9.24022 4.38021C9.67002 4.38021 10.0816 4.55031 10.3854 4.85481C10.6899 5.15856 10.86 5.57015 10.86 5.99995C10.86 6.65529 10.4659 7.24607 9.85987 7.49667C9.25464 7.74727 8.5583 7.60905 8.09509 7.14508C7.63111 6.68186 7.49289 5.98552 7.7435 5.3803Z"
-                        fill="#333333"
-                      />
-                    </svg>`}
-              </div>
-            `}
-            isReadOnly=${isReadOnly}
-          ><//>
-          ${showStepValidation &&
-          isRequired &&
-          !value &&
-          html`<${ErrorMessage}>Please enter a value<//>`}
-          ${(showStepValidation || showErrorOnFocusLoss || initialValue) &&
-          invalidInput &&
-          value &&
-          html`<${ErrorMessage}>${regexErrorMessage || 'Invalid input'}<//>`}
-        </fieldset>
-      </div>
-    <//>
-  `;
-};
-
-export { PasswordInput, PasswordInputProps };

package/src/components/Input/PasswordInput/styles.module.scss

@@ -1,37 +0,0 @@
-.passwordInputWrapper {
-  fieldset {
-    padding: 0;
-    margin: 0;
-    border: none;
-  }
-  .innerWrap {
-    position: relative;
-  }
-  input {
-    padding-right: 36px;
-  }
-  .readonlyHint {
-    width: 100%;
-    height: -webkit-fill-available;
-    z-index: 99;
-    position: absolute;
-  }
-}
-
-.visibilityToggle {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  right: 10px;
-  bottom: 0;
-  margin: 0 auto;
-  z-index: 999;
-  svg {
-    cursor: pointer;
-    width: 20px;
-    &:hover {
-      opacity: 0.5;
-    }
-  }
-}

package/src/components/Input/index.ts

@@ -1,7 +0,0 @@
-import { Input, InputProps } from './Input';
-import { DateInput, DateInputProps } from './DateInput';
-import { PasswordInput, PasswordInputProps } from './PasswordInput';
-
-export { Input, InputProps };
-export { DateInput, DateInputProps };
-export { PasswordInput, PasswordInputProps };

package/src/components/Label/index.ts

@@ -1,61 +0,0 @@
-import { html } from 'htm/preact';
-import { Tag } from '@/components/Tag';
-
-import styles from './styles.module.scss';
-
-interface LabelProps {
-  title: string;
-  description?: string;
-  isRequired?: boolean;
-  labelTag?: string;
-  allowRefresh?: boolean;
-  handleRefreshClick?: () => void;
-}
-
-const Label = (props: LabelProps) => {
-  const { title, description, isRequired = false, labelTag = '', allowRefresh = false, handleRefreshClick } = props;
-  
-  const onClickRefresh = (): void => {
-    if (handleRefreshClick) {
-      handleRefreshClick();
-    }
-  }
-  
-  return html`
-    <div class="${styles.label} integry-container__label">
-      <label class="${styles.subLabel}">
-        <div>
-          ${title}
-          ${isRequired && html`<span class=${styles.required}>*</span>`}
-          ${false && labelTag &&
-            html`
-              <span class=${styles.tagSpan}><${Tag}
-                label=${labelTag}
-              /></span>
-            `}
-          ${allowRefresh && 
-            html`
-                <svg class=${styles.refreshIcon} fill="#8c8c8c" height="12px" width="12px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
-                  viewBox="0 0 489.698 489.698" xml:space="preserve" onclick=${onClickRefresh}>
-                <g>
-                  <g>
-                    <path d="M468.999,227.774c-11.4,0-20.8,8.3-20.8,19.8c-1,74.9-44.2,142.6-110.3,178.9c-99.6,54.7-216,5.6-260.6-61l62.9,13.1
-                      c10.4,2.1,21.8-4.2,23.9-15.6c2.1-10.4-4.2-21.8-15.6-23.9l-123.7-26c-7.2-1.7-26.1,3.5-23.9,22.9l15.6,124.8
-                      c1,10.4,9.4,17.7,19.8,17.7c15.5,0,21.8-11.4,20.8-22.9l-7.3-60.9c101.1,121.3,229.4,104.4,306.8,69.3
-                      c80.1-42.7,131.1-124.8,132.1-215.4C488.799,237.174,480.399,227.774,468.999,227.774z"/>
-                    <path d="M20.599,261.874c11.4,0,20.8-8.3,20.8-19.8c1-74.9,44.2-142.6,110.3-178.9c99.6-54.7,216-5.6,260.6,61l-62.9-13.1
-                      c-10.4-2.1-21.8,4.2-23.9,15.6c-2.1,10.4,4.2,21.8,15.6,23.9l123.8,26c7.2,1.7,26.1-3.5,23.9-22.9l-15.6-124.8
-                      c-1-10.4-9.4-17.7-19.8-17.7c-15.5,0-21.8,11.4-20.8,22.9l7.2,60.9c-101.1-121.2-229.4-104.4-306.8-69.2
-                      c-80.1,42.6-131.1,124.8-132.2,215.3C0.799,252.574,9.199,261.874,20.599,261.874z"/>
-                  </g>
-                </g>
-                </svg>
-            `}
-        </div>
-        ${description && html`<div>${description}</div>`}
-      </label>
-    </div>
-  `;
-};
-
-export { Label, LabelProps };

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

@@ -1,41 +0,0 @@
-.label {
-  .subLabel {
-    display: block;
-    margin-bottom: 0;
-
-    > div:first-child {
-      color: #000;
-      font-family: Inter;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      margin-bottom: 3px;
-      display: flex;
-      flex-direction: row;  
-      align-items: center;
-
-      .tagSpan {
-        margin-left: 10px;
-      }
-      .refreshIcon {
-        margin-left: 8px;
-        cursor: pointer;
-      }
-    }
-    > div:nth-child(2) {
-      color: var(--black-and-grey-draft-and-tooltip-desc, #999);
-      font-family: Inter;
-      font-size: 12px;
-      font-style: normal;
-      font-weight: 400;
-      line-height: normal;
-      margin-bottom: 8px;
-    }
-  }
-  .required {
-    color: #333;
-    font-size: 16px;
-    margin-left: 2px;
-  }
-}

package/src/components/LargeLoader/index.ts

@@ -1,25 +0,0 @@
-import { html } from 'htm/preact';
-
-import styles from './styles.module.scss';
-
-const LargeLoader = () => html`
-  <svg
-    class=${styles.loader}
-    width="26"
-    height="25"
-    viewBox="0 0 26 25"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path
-      d="M15.7173 0.29892C13.1175 -0.280085 10.4006 -0.0135017 7.96294 1.0598C5.52524 2.13311 3.49412 3.95702 2.16568 6.26562C0.837246 8.57421 0.280965 11.2468 0.57794 13.8937C0.874915 16.5406 2.00962 19.0235 3.81662 20.9803C5.62362 22.9371 8.00843 24.2656 10.6234 24.772C13.2383 25.2784 15.9466 24.9363 18.3535 23.7956C20.7604 22.6548 22.74 20.7751 24.0036 18.4304C25.2673 16.0857 25.749 13.3987 25.3785 10.7611L24.1406 10.935C24.4741 13.3088 24.0406 15.7272 22.9033 17.8374C21.766 19.9476 19.9844 21.6393 17.8182 22.666C15.652 23.6927 13.2145 24.0006 10.861 23.5448C8.50758 23.089 6.36125 21.8934 4.73495 20.1323C3.10866 18.3711 2.08742 16.1366 1.82015 13.7543C1.55287 11.3721 2.05352 8.96679 3.24911 6.88905C4.44471 4.81132 6.27272 3.1698 8.46665 2.20382C10.6606 1.23785 13.1057 0.997923 15.4456 1.51903L15.7173 0.29892Z"
-      fill="#EFEFEF"
-    />
-    <path
-      d="M25.3833 10.7959C25.0346 8.26181 23.9168 5.8957 22.1808 4.01695C20.4449 2.13819 18.1743 0.83725 15.6756 0.289715L15.4081 1.51074C17.6569 2.00353 19.7004 3.17437 21.2628 4.86525C22.8251 6.55613 23.8311 8.68563 24.145 10.9663L25.3833 10.7959Z"
-      fill="#C4C4C4"
-    />
-  </svg>
-`;
-
-export { LargeLoader };

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

@@ -1,16 +0,0 @@
-.loader {
-  animation-name: ckw;
-  animation-duration: 1s;
-  animation-iteration-count: infinite;
-  animation-timing-function: linear;
-  transform-origin: 50% 50%;
-}
-
-@keyframes ckw {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/src/components/Listbox/ListBoxItem.ts

@@ -1,57 +0,0 @@
-import { html } from 'htm/preact';
-import { useRef } from 'preact/hooks';
-
-import styles from './styles.module.scss';
-
-interface ListBoxItemProps {
-  value: string;
-  id: string;
-  isSelected?: boolean;
-  isHighlighted?: boolean;
-  onClick(): void;
-}
-
-const ListBoxItem = (props: ListBoxItemProps) => {
-  const { id, value, isSelected, isHighlighted = false, onClick } = props;
-  const listItemRef = useRef<HTMLSpanElement>();
-
-  const isContentOverflowing = (): boolean => {
-    if (listItemRef.current) {
-      return (listItemRef.current.clientWidth < listItemRef.current.scrollWidth);
-    }
-    return false;
-  };
-
-  return html`
-    <span
-      class=${`${styles.listboxItem} ${isSelected ? styles.selected : ''} ${
-        isHighlighted ? styles.highlighted : ''
-      }`}
-      data-value=${id}
-      onclick=${onClick}
-      ref=${listItemRef}
-      data-hint=${`${isContentOverflowing() ? value : ''}`}
-    >
-      ${false && isSelected &&
-      html`
-        <svg
-          width="7"
-          height="7"
-          viewBox="0 0 7 7"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="#333"
-        >
-          <path
-            d="M6.33333 1.5L2.83522 5.5L1 3.40148"
-            stroke-width="1.2"
-            stroke-linecap="round"
-          />
-        </svg>
-      `}
-      ${value}
-    </span>
-  `;
-};
-
-export { ListBoxItem, ListBoxItemProps };