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

package/script/SysInputComponent/SysInputComponent.js

@@ -0,0 +1,84 @@
+import SysInputComponentManifest from './SysInput.manifest.js';
+import WcControlledElement from '@claspo/renderer/sdk/WcControlledElement';
+import getStyleElement from './getStyleElement.js';
+import InputFormControl from './InputFormControl.js';
+import { applyInputLabelStyles, setInputHostSize, setFocusOutline } from '@claspo/renderer/sdk/HtmlStyleUtils';
+
+class SysInputComponent extends WcControlledElement {
+  static define = {
+    name: 'sys-input',
+    model: SysInputComponentManifest.name,
+    manifest: SysInputComponentManifest,
+  };
+  manifest = SysInputComponentManifest;
+
+  inputFormControl = null;
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.getRootElement().innerHTML += `
+      ${getStyleElement()}
+      <div class="main-container">
+        <div class="label-with-input-container">
+          <div cl-element="label"
+               cl-inline-edit="content, label"
+               class="label">
+          </div>
+          <div class="input-with-tooltip">
+            <input cl-element="input"
+                   type="text"
+                   name="fname">
+            <div class="input-tooltip">
+              <svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M1.5 13.0604C1.5 19.4116 6.6481 24.5605 13.0075 24.5605C19.353 24.5605 24.5 19.4107 24.5 13.0604C24.5 6.70865 19.3531 1.55909 13.0075 1.55908C6.64806 1.55908 1.5 6.7077 1.5 13.0604ZM12.9775 17.9668C12.7032 17.9668 12.4807 17.7443 12.4807 17.47C12.4807 17.1956 12.7032 16.9732 12.9775 16.9732C13.2519 16.9732 13.4743 17.1956 13.4743 17.47C13.4743 17.7443 13.2519 17.9668 12.9775 17.9668ZM12.9775 13.4764C12.7032 13.4764 12.4807 13.254 12.4807 12.9796L12.4807 8.48924C12.4807 8.21487 12.7032 7.99245 12.9775 7.99245C13.2519 7.99245 13.4743 8.21487 13.4743 8.48924L13.4743 12.9796C13.4743 13.254 13.2519 13.4764 12.9775 13.4764Z" fill="#FF0000" stroke="white" stroke-width="2"></path>
+              </svg>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    this.inputFormControl = new InputFormControl(
+      this.createControlWithValidation.bind(this),
+      this.getModel.bind(this),
+      this.getProps.bind(this),
+      this.getRootElement.bind(this),
+      this.services.form,
+      this.services.config,
+      this.manifest.i18n,
+      this.htmlDocumentObject,
+    );
+    this.inputFormControl.init();
+
+    this.observeProps((prev, next) => {
+      this.applyAutoAdaptiveStyles(next.adaptiveStyles, next.styles);
+
+      const env = this.getEnvironment();
+      const inputElement = this.getElement('input');
+
+      applyInputLabelStyles(next, env, this.getRootElement(), '.label-with-input-container');
+      inputElement.setAttribute('placeholder', next.content.placeholder);
+      setInputHostSize(next, env, this.getHostElement(), inputElement, this.getElement('label'));
+      setFocusOutline(inputElement);
+      this.updateContext();
+    });
+
+    this.observeEnvironment((prev, next) => {
+      const props = this.getProps();
+
+      applyInputLabelStyles(props, next, this.getRootElement(), '.label-with-input-container');
+      setInputHostSize(props, next, this.getHostElement(), this.getElement('input'), this.getElement('label'));
+    });
+
+    this.addContextRecord();
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.inputFormControl.destroy();
+    this.services.context.deleteRecord(this.getModel().id);
+  }
+}
+
+export { SysInputComponent as default };

package/script/SysInputComponent/emailProvidersList.js

@@ -0,0 +1,158 @@
+const emailProvidersList = [
+  'abv.bg',
+  'alice.it',
+  'andorra.ad',
+  'aol.com',
+  'aon.at',
+  'apollo.lv',
+  'arnet.com.ar',
+  'atlas.cz',
+  'azet.sk',
+  'bluewin.ch',
+  'bol.com',
+  'bouyguestelecom.fr',
+  'caramail.com',
+  'centrum.cz',
+  'chol.com',
+  'citromail.hu',
+  'ctemplar.com',
+  'daum.net',
+  'dir.bg',
+  'elion.ee',
+  'email.cz',
+  'empas.com',
+  'eunet.rs',
+  'fastmail.com',
+  'fastwebnet.it',
+  'fibertel.com.ar',
+  'free.fr',
+  'freemail.hu',
+  'freenet.de',
+  'gazeta.pl',
+  'globo.com',
+  'gmail.com',
+  'gmx.at',
+  'gmx.com',
+  'gmx.de',
+  'hanmail.net',
+  'hinet.net',
+  'hot.ee',
+  'hotmail.com',
+  'hotmail.it',
+  'hushmail.com',
+  'i.ua',
+  'icloud.com',
+  'ig.com.br',
+  'inbox.com',
+  'inbox.lt',
+  'inbox.lv',
+  'inbox.mk',
+  'inbox.ru',
+  'inet.me',
+  'interia.pl',
+  'inwind.it',
+  'iskon.hr',
+  'jubii.dk',
+  'kolabnow.com',
+  'kpnmail.nl',
+  'kt.com',
+  'laposte.net',
+  'latnet.eu',
+  'lattelecom.lv',
+  'latvija.com',
+  'latvijas.tv',
+  'libero.it',
+  'list.ru',
+  'live.com',
+  'live.dk',
+  'live.fi',
+  'live.no',
+  'luxmail.com',
+  'lycos.com',
+  'mail.ba',
+  'mail.bg',
+  'mail.com',
+  'mail.dk',
+  'mail.ee',
+  'mail.lt',
+  'mail.lv',
+  'mail.ru',
+  'mailbox.org',
+  'mailo.com',
+  'mailpile.is',
+  'meta.ua',
+  'migadu.com',
+  'monaco.net',
+  'nate.com',
+  'naver.com',
+  'neti.ee',
+  'numericable.fr',
+  'one.lt',
+  'one.lv',
+  'onet.pl',
+  'online.nl',
+  'online.no',
+  'openmailbox.com',
+  'orange.fr',
+  'outlook.com',
+  'pasts.lv',
+  'pobox.sk',
+  'pochta.ru',
+  'poczta.fm',
+  'post.lu',
+  'post.sk',
+  'posta.si',
+  'proton.me',
+  'protonmail.com',
+  'r7.com',
+  'radiff.com',
+  'rambler.ru',
+  'runbox.com',
+  'sapo.pt',
+  'sbb.rs',
+  'scarlet.be',
+  'seznam.cz',
+  'sfr.fr',
+  'siol.net',
+  'speedy.com.ar',
+  'startmail.com',
+  'swissmail.org',
+  't-com.hr',
+  't-com.me',
+  't-online.de',
+  't-online.hu',
+  'tdc.dk',
+  'telekom.rs',
+  'telenet.be',
+  'telenor.no',
+  'telfort.nl',
+  'terra.com.br',
+  'tiscali.it',
+  'tlen.pl',
+  'tportal.hr',
+  'tutanota.com',
+  'tvnet.lv',
+  'ukr.net',
+  'uol.com',
+  'uolsinectis.com.ar',
+  'virgilio.it',
+  'volny.cz',
+  'web.de',
+  'webmail.t-2.net',
+  'wind.it',
+  'wp.pl',
+  'xs4all.nl',
+  'yahoo.com',
+  'yahoo.com.ar',
+  'yahoo.com.br',
+  'yahoo.dk',
+  'yahoo.es',
+  'yahoo.it',
+  'yandex.com',
+  'yandex.ru',
+  'ziggo.nl',
+  'zoho.com',
+  'zoznam.sk',
+];
+
+export { emailProvidersList as default };

package/script/SysInputComponent/getOverlayStyles.js

@@ -0,0 +1,220 @@
+function getOverlayStyles(overlayContentClassName) {
+  const afterBorderWidth = '12px';
+  const beforeBorderWidth = '14px';
+
+  return `
+    .${overlayContentClassName} {
+      position: absolute;
+      display: flex;
+      width: fit-content;
+      height: fit-content;
+      padding: 20px 0;
+      background: #000000;
+      border: 2px solid #FFFFFF;
+      border-radius: 5px;
+      box-shadow: 0 1px 5px rgba(0, 0, 0, 0.28);
+      animation: jello-animation 10.9s both;
+      animation-iteration-count: 1;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='top']:after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: calc(50% - 5px);
+        margin-left: -8px;
+        margin-top: -2px;
+        border-width: ${afterBorderWidth};
+        border-style: solid;
+        border-color: black transparent transparent transparent;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='top']:before {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: calc(50% - 15px);
+        border-width: ${beforeBorderWidth};
+        border-style: solid;
+        border-color: white transparent transparent transparent;
+    }
+    
+    .${overlayContentClassName}[cl-overlay-position='bottom']:after {
+      content: "";
+      position: absolute;
+      top: -22px;
+      left: calc(50% - 4px);
+      margin-left: -5px;
+      margin-bottom: -2px;
+      border-width: ${afterBorderWidth};
+      border-style: solid;
+      border-color: transparent transparent black transparent;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='bottom']:before {
+      content: "";
+      position: absolute;
+      top: -28px;
+      left: calc(50% - 11px);
+      border-width: ${beforeBorderWidth};
+      border-style: solid;
+      border-color: transparent transparent white transparent;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='right']:after {
+      content: "";
+      position: absolute;
+      top: calc(50% - 7px);
+      left: -18px;
+      margin-left: -5px;
+      border-width: ${afterBorderWidth};
+      border-style: solid;
+      border-color: transparent black transparent transparent;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='right']:before {
+      content: "";
+      position: absolute;
+      top: calc(50% - 9px);
+      left: -28px;
+      border-width: ${beforeBorderWidth};
+      border-style: solid;
+      border-color: transparent white transparent transparent;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='left']:after {
+      content: "";
+      position: absolute;
+      top: calc(50% - 7px);
+      right: -22px;
+      margin-left: -5px;
+      border-width: ${afterBorderWidth};
+      border-style: solid;
+      border-color: transparent transparent transparent black;
+    }
+
+    .${overlayContentClassName}[cl-overlay-position='left']:before {
+      content: "";
+      position: absolute;
+      top: calc(50% - 9px);
+      right: -28px;
+      border-width: ${beforeBorderWidth};
+      border-style: solid;
+      border-color: transparent transparent transparent white;
+    }
+
+    .suggestion-text-container {
+      height: fit-content;
+      width: fit-content;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 3px;
+      margin: 2px 10px;
+      letter-spacing: normal;
+      font-size: 14px;
+    }
+
+    .did-you-mean-text {
+      height: 16px;
+      white-space: nowrap;
+      width: fit-content;
+      line-height: 16px;
+      letter-spacing: normal;
+      font-size: 14px;
+      color: white;
+    }
+
+    .suggestion-text {
+      height: 16px;
+      white-space: nowrap;
+      width: fit-content;
+      color: white;
+      line-height: 16px;
+      font-weight: bold;
+      letter-spacing: normal;
+      font-size: 14px;
+    }
+
+    .accept-button {
+      position: relative;
+      width: 36px;
+      height: 36px;
+
+      border: 2px solid #FFFFFF;
+      border-radius: 7px;
+      cursor: pointer;
+    }
+
+    .accept-button:after {
+      content: '';
+      position: absolute;
+      top: 42%;
+      left: 50%;
+      width: 9px;
+      height: 14px;
+      border: solid;
+      border-color: white;
+      border-width: 0 3px 3px 0;
+      -webkit-transform: translate(-50%, -50%) rotate(45deg);
+      -ms-transform: translate(-50%, -50%) rotate(45deg);
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .deny-button {
+      position: relative;
+      width: 36px;
+      height: 36px;
+      border: 2px solid black;
+      border-radius: 7px;
+      cursor: pointer;
+    }
+
+    .deny-button:before, .deny-button:after {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      content: '';
+      height: 18px;
+      width: 2px;
+      background-color: #595959;
+    }
+
+    .deny-button:before {
+      transform: translate(-50%, -50%) rotate(45deg);
+    }
+
+    .deny-button:after {
+      transform: translate(-50%, -50%) rotate(-45deg);
+    }
+
+    @keyframes jello-animation {
+      0% {
+        transform: scale3d(1, 1, 1);
+      }
+      3% {
+        transform: scale3d(1.25, 0.75, 1);
+      }
+      4% {
+        transform: scale3d(0.75, 1.25, 1);
+      }
+      5% {
+        transform: scale3d(1.15, 0.85, 1);
+      }
+      6.5% {
+        transform: scale3d(0.95, 1.05, 1);
+      }
+      7.5% {
+        transform: scale3d(1.05, 0.95, 1);
+      }
+      10% {
+        transform: scale3d(1, 1, 1);
+      }
+      100% {
+        transform: scale3d(1, 1, 1);
+      }
+    }
+  `;
+}
+
+export { getOverlayStyles as default };

package/script/SysInputComponent/getStyleElement.js

@@ -0,0 +1,69 @@
+function getStyleElement() {
+  return `
+<style>
+.main-container {
+  height: 100%;
+}
+
+.label-with-input-container {
+  height: 100%;
+  display: flex;
+}
+
+.label {
+  min-height: 10px;
+}
+
+.label.cl-focused {
+  min-height: auto;
+}
+
+.input-with-tooltip {
+  position: relative;
+  display: flex;
+  height: 100%;
+  width: 100%;
+}
+
+.invalid {
+  border: 1px solid #ff0000 !important;
+}
+
+.input-tooltip {
+  visibility: hidden;
+  position: absolute;
+  right: -10px;
+  top: -10px;
+  z-index: 1;
+  border-radius: 100%;
+  width: 20px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* Internet Explorer/Edge */
+  user-select: none;
+}
+
+input {
+  width: 100%;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+  margin: 0;
+  -moz-appearance:none;
+  -webkit-appearance:none;
+  -o-appearance:none;
+}
+
+input.focus-outline-defined:focus {
+  outline: var(--clFocusOutline);
+}
+</style>
+    `;
+}
+
+export { getStyleElement as default };