@claspo/components 1.6.2 → 1.7.0-components-build-perf

package/script/SysInputComponent/inputValidators.js

@@ -0,0 +1,293 @@
+import emailProvidersList from './emailProvidersList.js';
+
+class InputValidators {
+
+  static validationErrorKeys = {
+    NAME_CONSISTING_ONLY_OF_NUMBERS_AND_SPECIAL_CHARACTERS_IS_NOT_ALLOWED: 'NAME_CONSISTING_ONLY_OF_NUMBERS_AND_SPECIAL_CHARACTERS_IS_NOT_ALLOWED',
+    NAME_CONTAINS_MORE_THAN_3_DIGITS: 'NAME_CONTAINS_MORE_THAN_3_DIGITS',
+    MORE_THAN_THREE_LONG_WORDS: "MORE_THAN_THREE_LONG_WORDS",
+    MORE_THAN_THREE_SHORT_WORDS: 'MORE_THAN_THREE_SHORT_WORDS',
+    CONTAINS_FORBIDDEN_CHARACTERS: 'CONTAINS_FORBIDDEN_CHARACTERS',
+    EMAIL_IS_INVALID: 'EMAIL_IS_INVALID',
+    NAME_CONTAINS_FORBIDDEN_CHARACTERS: 'NAME_CONTAINS_FORBIDDEN_CHARACTERS',
+    MAX_LENGTH_50: 'MAX_LENGTH_50',
+    MAX_LENGTH_40: 'MAX_LENGTH_40',
+    NO_MORE_THAN_4_NUMBERS_ARE_ALLOWED: 'NO_MORE_THAN_4_NUMBERS_ARE_ALLOWED',
+    INTEGER_FORMAT: 'INTEGER_FORMAT',
+    MIN_VALUE_MINUS_2147483648: 'MIN_VALUE_MINUS_2147483648',
+    MAX_VALUE_2147483648: 'MAX_VALUE_2147483648',
+    FLOAT_FORMAT: 'FLOAT_FORMAT',
+    MAX_LENGTH_1000: 'MAX_LENGTH_1000',
+    LONG_NAME_WITH_DOT: 'LONG_NAME_WITH_DOT',
+  };
+
+  static validationMap = {
+    EMAIL: InputValidators.emailValidationCb,
+    SYS_NAME: InputValidators.nameValidationCb,
+    SYS_LAST_NAME: InputValidators.lastNameValidationCb,
+    ES_TEXT: InputValidators.esTextValidationCb,
+    ES_INTEGER: InputValidators.esIntegerValidationCb,
+    ES_FLOAT: InputValidators.esFloatValidationCb,
+  };
+
+  static emailValidationCb(value = '', props) {
+    try {
+      if (!/^[_A-Za-z0-9-\p{L}]+(\.[_A-Za-z0-9-\p{L}]+)*(\+.*)?@([A-Za-z0-9-\p{L}]+(\.[A-Za-z0-9\p{L}]+)+)+$/u.test(value)) {
+        return {
+          isValid: false,
+          errorKey: InputValidators.validationErrorKeys.EMAIL_IS_INVALID
+        }
+      }
+    } catch (e) {
+      if (!/^[_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*(\+.*)?@([A-Za-z0-9-]+(\.[A-Za-z0-9]+)+)+$/.test(value)) {
+        return {
+          isValid: false,
+          errorKey: InputValidators.validationErrorKeys.EMAIL_IS_INVALID
+        }
+      }
+    }
+
+    if (value.length > 50) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MAX_LENGTH_50
+      }
+    }
+
+    if (
+      !props.control.validation ||
+      !props.control.validation.restrictFreeDomains
+    ) {
+      return {
+        isValid: true,
+      };
+    }
+
+    const domainPartOfEmail = value.toLowerCase().split('@')[1];
+
+    if (emailProvidersList.includes(domainPartOfEmail)) {
+      return {
+        isValid: false,
+        errorKey: 'EMAIL_DOMAIN_INVALID'
+      };
+    }
+
+    return {
+      isValid: true,
+    };
+  }
+
+  static nameValidationCb(value = '') {
+    const trimmedValue = value.trim();
+    const parts = (trimmedValue || '').split(' ');
+
+    if (parts.filter(item => item.length > 3).length > 3) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MORE_THAN_THREE_LONG_WORDS,
+      };
+    }
+
+    if (parts.filter(item => item.length <= 3).length > 3) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MORE_THAN_THREE_SHORT_WORDS,
+      };
+    }
+
+    return InputValidators.lastNameValidator(trimmedValue) || {
+      value: trimmedValue,
+      isValid: true,
+    }
+  }
+
+  static lastNameValidator(value) {
+    const trimmedValue = value.trim();
+    const symbols = ' .\'’ʼ`´ʹʻʽʾʿˈˊˮʹ΄՚᾽᾿‘‛′‵Ꞌꞌ＇-';
+
+    if (trimmedValue.length > 40) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MAX_LENGTH_40,
+      };
+    }
+
+    const sanitizeExceptDoubleQuotesMatchArray = InputValidators.sanitizeExceptDoubleQuotes(trimmedValue);
+    if (sanitizeExceptDoubleQuotesMatchArray && sanitizeExceptDoubleQuotesMatchArray.length) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.CONTAINS_FORBIDDEN_CHARACTERS,
+        forbiddenChar: sanitizeExceptDoubleQuotesMatchArray[0][0],
+      };
+    }
+
+    const forbiddenCharacter = InputValidators.forbiddenCharactersValidator(trimmedValue, `[^\\d\\.\\s\\p{Alphabetic}${symbols}]`);
+
+    if (forbiddenCharacter) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.CONTAINS_FORBIDDEN_CHARACTERS,
+        forbiddenChar: forbiddenCharacter,
+      }
+    }
+
+    if (InputValidators.nameContainsDotValidator(trimmedValue)) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.LONG_NAME_WITH_DOT,
+      }
+    }
+
+    if (InputValidators.nameContainsMoreThanThreeDigitsValidator(trimmedValue)) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.NAME_CONTAINS_MORE_THAN_3_DIGITS
+      }
+    }
+
+    if (InputValidators.nameConsistingOfAlphabeticCharactersValidator(trimmedValue)) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.NAME_CONSISTING_ONLY_OF_NUMBERS_AND_SPECIAL_CHARACTERS_IS_NOT_ALLOWED
+      }
+    }
+
+    const symbolPositionMatchArray = InputValidators.symbolPositionValidator(trimmedValue);
+
+    if (symbolPositionMatchArray && symbolPositionMatchArray.length) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.CONTAINS_FORBIDDEN_CHARACTERS,
+        forbiddenChar: symbolPositionMatchArray[0][0],
+      }
+    }
+
+    return null;
+  }
+
+  static lastNameValidationCb(value = '') {
+    return InputValidators.lastNameValidator(value) || {
+      value: value.trim().replace(/\s+/g, ' '),
+      isValid: true,
+    }
+  }
+
+  static esTextValidationCb(value = '') {
+    const trimmedValue = value.trim();
+
+    return {
+      isValid: trimmedValue.length <= 1000,
+      errorKey: InputValidators.validationErrorKeys.MAX_LENGTH_1000,
+    };
+  }
+
+  static esIntegerValidationCb(value = '') {
+    if (!value) {
+      return {
+        isValid: true,
+      };
+    }
+
+    if (!/^(\-)?(\d)+$/.test(value)) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.INTEGER_FORMAT,
+      };
+    }
+
+    if (value < -2147483647) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MIN_VALUE_MINUS_2147483648,
+      };
+    }
+
+    return {
+      isValid: value <= 2147483647,
+      errorKey: InputValidators.validationErrorKeys.MAX_VALUE_2147483648,
+    };
+  }
+
+  static esFloatValidationCb(value = '') {
+    if (!value) {
+      return  {
+        isValid: true,
+      };
+    }
+
+    const floatPattern = /^(\-)?(\d)+(\.(\d)+)?$/;
+    const commaPattern = /,/;
+
+    const isContainingComma = commaPattern.test(value);
+    const isFloat = floatPattern.test(value);
+
+    if (isContainingComma || !isFloat) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.FLOAT_FORMAT,
+      };
+    }
+
+    if (value < -9007199254740991) {
+      return {
+        isValid: false,
+        errorKey: InputValidators.validationErrorKeys.MIN_VALUE_MINUS_2147483648,
+      };
+    }
+
+    return {
+      isValid: value <= 9007199254740991,
+      errorKey: InputValidators.validationErrorKeys.MAX_VALUE_2147483648,
+    };
+  }
+
+  static sanitizeExceptDoubleQuotes(value) {
+    const sanitizePattern = /[%^*|~{};<>]/;
+    const regex = new RegExp(sanitizePattern, 'g');
+    if (regex.test(value)) {
+      return value.match(regex);
+    }
+    return null;
+  }
+
+  static forbiddenCharactersValidator(value, regExpString) {
+    try {
+      const match = value.match(new RegExp(regExpString, 'gu'));
+      return match ? match[0] : '';
+    } catch (e) {
+      const match = value.match(new RegExp(regExpString.replace('\\p{Alphabetic}', ''), 'gu'));
+      return match ? match[0] : '';
+    }
+  }
+
+  static nameContainsDotValidator(value) {
+    return value.match(/(\p{Alphabetic}{4,}\.)/gmu);
+  }
+
+  static nameContainsMoreThanThreeDigitsValidator(value) {
+    return value.replace(/\D+/g, '').length > 3
+  }
+
+  static nameConsistingOfAlphabeticCharactersValidator(value) {
+    try {
+      return !new RegExp('[\\p{Alphabetic}]', 'gu').test(value);
+    } catch (e) {
+      return /^[`!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~\d]*$/g.test(value);
+    }
+  }
+
+  static symbolPositionValidator(value) {
+    const symbols = ' .\'’ʼ`´ʹʻʽʾʿˈˊˮʹ΄՚᾽᾿‘‛′‵Ꞌꞌ＇-';
+    const regex = new RegExp(`[${symbols}][${symbols}]|(^[${symbols}])|([${symbols.replace('.', '')}]$)`, 'g');
+
+    if (regex.test(value)) {
+      return value.match(regex)
+        .filter(item => item !== '. ')
+        .map(item => item.trim());
+
+    }
+    return null;
+  }
+}
+
+export { InputValidators as default };

package/script/SysTextComponent/SysText.manifest.js

@@ -0,0 +1,29 @@
+import '@claspo/renderer/sdk/ManifestUtils';
+import '@claspo/renderer/sdk/ModelStyleUtils';
+
+var SysTextManifest = {
+  "name": "SysTextComponent",
+  "componentType": "TEXT",
+  "version": "1.0.0",
+  "events": {
+    "dispatch": [],
+    "listen": []
+  },
+  "autoContrast": [{
+    "slave": {
+      "element": "text",
+      "elementProp": "styleAttributes",
+      "elementSubProp": "color"
+    },
+    "master": {
+      "element": "host",
+      "propPath": ["styles", "[element=host]", "styleAttributes", "background"]
+    },
+    "enabledPropPath": ["content", "textContrastEnabled"]
+  }],
+  "i18nPropPaths": ["content,text", "content,textrollers", "content,mergeTags"],
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysTextManifest as default };

package/script/SysTextComponent/SysTextComponent.js

@@ -0,0 +1,147 @@
+import WcElement from '@claspo/renderer/sdk/WcElement';
+import SysTextManifest from './SysText.manifest.js';
+import { createStaticTextRoller, createUpdatingTextRoller } from './TextRoller.js';
+import insertHtmlIntoElement from '@claspo/common/dom/insertHtmlIntoElement';
+
+class SysTextComponent extends WcElement {
+  static define = {
+    name: 'sys-text',
+    model: SysTextManifest.name,
+    manifest: SysTextManifest,
+  };
+
+  manifest = SysTextManifest;
+
+  constructor() {
+    super();
+    this.getRootElement().innerHTML = `
+      <style>
+        .text {
+          outline: none;
+          min-height: fit-content;
+          width: 100%;
+          overflow-wrap: break-word;
+        }
+      </style>
+      
+      <style>
+        [cl-type="TEXT_ROLLER"] {
+          position: relative;
+        }
+
+        .text {
+          align-items: center;
+        }
+        
+        .container--staticTextRoller {
+          display: inline-flex;
+          max-width: 100%;
+          width: fit-content;
+        }
+      
+        .container {
+          display: inline-flex;
+          align-items: center;
+          overflow: hidden;
+          position: relative;
+          height: 100%;
+        }
+
+        .opts {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          top: 0;
+          left: 0;
+          z-index: 1;
+          padding: 0;
+          margin: 0;
+          display: flex;
+          gap: 1px;
+          flex-direction: column-reverse;
+          transform: translateY(-100%);
+        }
+      
+        .opt {
+          width: 100%;
+          height: 100%;
+          text-align: center;
+          display: inline-flex;
+          justify-content: center;
+        }
+  
+        .opt span {
+         white-space: nowrap;
+         align-items: center;
+         text-overflow: ellipsis;
+         overflow: hidden;
+         width: fit-content;
+         max-width: 100%;
+         padding: 0 2px;
+        }
+      </style>
+
+      <div class="text" cl-element="text" cl-inline-edit="content, text"></div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.observeProps((prev, next) => {
+      this.applyAutoAdaptiveStyles(next.adaptiveStyles, next.styles);
+
+      if (next.content?.text && this.getElement('text')) {
+        insertHtmlIntoElement({
+          element: this.getElement('text'),
+          html: next.content?.text,
+        });
+        this.mergeTagsProcessor.process(this.getElement('text'), next.content.mergeTags, this.getModel().id);
+      }
+
+      this.processTextRoller(next.content?.textrollers);
+    });
+
+    this.observeShared(() => {
+      const props = this.getProps();
+
+      this.processTextRoller(props.content?.textrollers);
+    });
+  }
+
+  processTextRoller(textrollersProps = {}) {
+    const container = this.getElement('text');
+    if (!container) {
+      return;
+    }
+    const isStatic = this.isStaticRenderMode();
+
+    container.childNodes.forEach((node) => {
+      if ((node.nodeType !== Node.TEXT_NODE) && node.getAttribute('cl-type') === 'TEXT_ROLLER') {
+        const id = node.getAttribute('cl-id');
+        const props = textrollersProps[id];
+
+        if (!props) {
+          return;
+        }
+
+        if (isStatic) {
+          createStaticTextRoller(node, props);
+        } else {
+          createUpdatingTextRoller(node, props);
+        }
+      }
+    });
+  }
+
+  stylesAppliedToElement(htmlElement, elementModel) {
+    if (elementModel.element === 'text') {
+      if (elementModel.styleAttributes.textAlign && getComputedStyle(htmlElement).display === 'flex') {
+        htmlElement.style.justifyContent = elementModel.styleAttributes.textAlign === 'center'
+          ? 'center' : `flex-${elementModel.styleAttributes.textAlign}`;
+      }
+    }
+  }
+}
+
+export { SysTextComponent as default };