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

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@claspo/components",
-  "version": "1.6.2",
+  "version": "1.7.0-components-build-perf",
   "description": "",
   "scripts": {
     "prebuild": "rm -rf out",
-    "build": "npm run prebuild && webpack",
+    "build": "npm run prebuild && webpack && npm run build:script",
     "build:local": "npm run prebuild && USE_LOCAL_SOURCES=1 webpack",
+    "build:script": "rollup -c rollup.script.config.js",
     "dev": "npm run prebuild && npx cross-env dev=1 webpack --watch",
     "dev:local": "npm run prebuild && npx cross-env dev=1 USE_LOCAL_SOURCES=1 webpack --watch",
     "test": "jest --no-cache --config jest.config.js",
@@ -17,8 +18,8 @@
     "node": ">=18.16.0"
   },
   "dependencies": {
-    "@claspo/common": "7.1.4",
-    "@claspo/renderer": "18.4.1"
+    "@claspo/common": "7.1.5",
+    "@claspo/renderer": "18.4.2"
   },
   "devDependencies": {
     "@babel/core": "^7.27.4",
@@ -30,6 +31,7 @@
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^30.0.0-beta.3",
     "jsdom": "^26.1.0",
+    "rollup": "^4.39.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1"
   },

package/script/SysButtonComponent/SysButton.manifest.js

@@ -0,0 +1,126 @@
+import '@claspo/renderer/sdk/ManifestUtils';
+import '@claspo/renderer/sdk/ModelStyleUtils';
+
+var SysButtonManifest = {
+  "name": "SysButtonComponent",
+  "componentType": "BUTTON",
+  "version": "1.0.0",
+  "autoContrast": [{
+    "slave": {
+      "element": "button",
+      "elementProp": "styleAttributes",
+      "elementSubProp": "color"
+    },
+    "master": {
+      "element": "button",
+      "elementProp": "styleAttributes",
+      "elementSubProp": "background"
+    },
+    "enabledPropPath": ["content", "textContrastEnabled"]
+  }],
+  'keepGeneralTabOpenUntilInteracted': true,
+  "events": {
+    "dispatch": [],
+    "listen": []
+  },
+  "i18nPropPaths": ["content,text", "handlers,[id],actions,[id],params,link", "handlers,[id],actions,[id],params,customData"],
+  "i18n": {
+    "en": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "At least one field is required: email or phone number"
+    },
+    "ru": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хотя бы одно из полей должно быть заполнено: Email или Номер телефона"
+    },
+    "uk": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Хоча б одне з полів має бути заповнене: Email або Номер телефону"
+    },
+    "es": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Necesita, como mínimo, un campo obligatorio: email o número de teléfono"
+    },
+    "de": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindestens ein Feld ist erforderlich: E-Mail-Adresse oder Telefonnummer"
+    },
+    "fr": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Au moins un champ est obligatoire : courriel ou numéro de téléphone"
+    },
+    "it": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Almeno un campo è obbligatorio: email o numero di telefono"
+    },
+    "pt": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "É necessário pelo menos um campo: email ou número de telefone"
+    },
+    "ro": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Cel puțin un câmp este obligatoriu: e-mail sau număr de telefon"
+    },
+    "bg": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Изисква се поне едно поле: имейл или телефонен номер"
+    },
+    "cs": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Je vyžadováno alespoň jedno pole: e-mail nebo telefonní číslo"
+    },
+    "el": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Απαιτείται τουλάχιστον ένα πεδίο: ηλεκτρονική διεύθυνση ή τηλέφωνο"
+    },
+    "nl": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Er is minimaal één veld vereist: e-mail of telefoonnummer"
+    },
+    "pl": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Wymagane jest co najmniej jedno pole: adres e-mail lub numer telefonu"
+    },
+    "sv": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett fält krävs: e-post eller telefonnummer"
+    },
+    "tr": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "En az bir alan gereklidir: e-posta veya telefon numarası"
+    },
+    "ar": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "مطلوب حقل واحد على الأقل: البريد الإلكتروني أو رقم الهاتف"
+    },
+    "zh": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "至少一个字段为必填：电子邮箱或电话号码"
+    },
+    "da": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Mindst ét ​​felt er påkrævet: e-mail eller telefonnummer"
+    },
+    "he": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "נדרש לפחות שדה אחד: אימייל או מספר טלפון"
+    },
+    "fi": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vähintään yksi kenttä vaaditaan: sähköposti tai puhelinnumero"
+    },
+    "hi": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "कम से कम एक फ़ील्ड आवश्यक है: ईमेल या फ़ोन नंबर"
+    },
+    "hr": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Potrebno je ispuniti barem jedno polje: e-mail ili telefonski broj"
+    },
+    "hu": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Legalább egy mező kitöltése kötelező: e-mail vagy telefonszám."
+    },
+    "id": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Setidaknya satu bidang wajib diisi: email atau nomor telepon"
+    },
+    "ja": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "少なくとも1つのフィールドが必須です：メールアドレスまたは電話番号"
+    },
+    "ko": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "최소 한 칸 필수 입력: 이메일 또는 전화번호"
+    },
+    "no": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Minst ett felt er obligatorisk: e-post eller telefonnummer"
+    },
+    "sk": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Aspoň jedno pole je povinné: e-mail alebo telefónne číslo"
+    },
+    "sl": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Vsaj eno polje je obvezno: e-poštni naslov ali telefonska številka"
+    },
+    "sr": {
+      "control,validation,validationErrors,EMAIL_OR_PHONE_IS_REQUIRED": "Najmanje jedno polje je obavezno: e-pošta ili broj telefona"
+    }
+  },
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysButtonManifest as default };

package/script/SysButtonComponent/SysButton.styles.js

@@ -0,0 +1,64 @@
+let SysButtonStyles = `
+.main-container {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: inherit;
+}
+
+button {
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  outline: none;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: var(--iconDistanceToText, 15px);
+  z-index: 0;
+  position: relative;
+}
+
+.editable-text {
+  display: var(--textDisplay, 'inline');
+}
+
+.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;
+}
+
+.icon {
+  display: var(--iconDisplay, none);
+  width: var(--iconSize, 20px);
+  height: var(--iconSize, 20px);
+  order: var(--iconOrder, -1);
+  background: var(--iconURL);
+  margin-top: 0px;
+  margin-bottom: 0px;
+  background-size: cover;
+}
+
+button.focus-outline-defined:focus {
+  outline: var(--clFocusOutline);
+}
+`;
+
+export { SysButtonStyles as default };

package/script/SysButtonComponent/SysButtonComponent.js

@@ -0,0 +1,231 @@
+import SysButtonManifest from './SysButton.manifest.js';
+import SysButtonStyles from './SysButton.styles.js';
+import WcElement from '@claspo/renderer/sdk/WcElement';
+import { HandlerTypes } from '@claspo/common/handler/HandlerTypes';
+import SysActionTypes from '@claspo/renderer/action/SysActionTypes';
+import getComponentCountOnView from '@claspo/renderer/sdk/getComponentCountOnView';
+import { setFocusOutline } from '@claspo/renderer/sdk/HtmlStyleUtils';
+import { setInvalidStyle } from '@claspo/renderer/sdk/FormUtils';
+import insertHtmlIntoElement from '@claspo/common/dom/insertHtmlIntoElement';
+
+class SysButtonComponent extends WcElement {
+  static define = {
+    name: 'sys-button',
+    model: SysButtonManifest.name,
+    manifest: SysButtonManifest
+  };
+  manifest = SysButtonManifest;
+
+  invalidListener;
+  validListener;
+  stylesUpdateObserver;
+
+
+  constructor() {
+    super();
+    this.getRootElement().innerHTML = `
+<style>${SysButtonStyles}</style>
+<div class="main-container">
+  <button cl-element="button">
+    <div class="editable-text" cl-inline-edit="content, text"></div>
+  </button>
+
+  <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>`;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.stylesUpdateObserver = new MutationObserver(this.mapStyleControlValuesToInnerButtonContent.bind(this));
+    this.stylesUpdateObserver.observe(this.getRootElement().querySelector('button'), {
+      attributes: true,
+      childList: false,
+      subtree: false
+    });
+
+    const buttonElement = this.getElement('button');
+    buttonElement.addEventListener('click', (e) => {
+      this.services.trackingService.send(`FormButtonClick_[Name]`);
+    });
+
+    if (this.getProps().handlers) {
+      const clickHandler = this.getProps().handlers.find(handler => handler.type === 'CLICK');
+
+      if (clickHandler && clickHandler.actions) {
+        const subscribeContactAction = clickHandler.actions.find(action => action.type === 'SUBSCRIBE_CONTACT');
+        const requestAction = clickHandler.actions.find(action => action.type === 'REQUEST');
+
+        if (subscribeContactAction) {
+          this.invalidListener = this.services.eventEmitter.on('SET_SUBSCRIBE_CONTACT_BUTTON_AS_INVALID', () => {
+            this.showErrorTooltip('EMAIL_OR_PHONE_IS_REQUIRED');
+          });
+
+          this.validListener = this.services.eventEmitter.on('SET_SUBSCRIBE_CONTACT_BUTTON_AS_VALID', () => {
+            this.hideErrorTooltip();
+          });
+        }
+
+        if (subscribeContactAction || requestAction) {
+          this.services.eventEmitter.on('CONTACT_DATA_SUBMIT', () => {
+            buttonElement.disabled = true;
+          });
+        }
+      }
+    }
+
+    this.observeProps((prev, next) => {
+      this.applyAutoAdaptiveStyles(next.adaptiveStyles, next.styles);
+      setFocusOutline(this.getElement('button'));
+      this.mapStyleControlValuesToInnerButtonContent();
+
+      const button = this.getRootElement().querySelector('button');
+      this.updateButtonTextNode(next);
+      this.createIconNode(button);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this.invalidListener) {
+      this.invalidListener.off();
+    }
+
+    if (this.validListener) {
+      this.validListener.off();
+    }
+
+    this.stylesUpdateObserver?.disconnect();
+  }
+
+  hideErrorTooltip() {
+    this.getRootElement()
+      .querySelector('.input-tooltip')
+      .style.visibility = 'hidden';
+  }
+
+  updateButtonTextNode(props) {
+    const existingEditableTextNode = this.getRootElement().querySelector('.editable-text');
+    insertHtmlIntoElement({
+      element: existingEditableTextNode,
+      html: props.content.text,
+    });
+  }
+
+  mapStyleControlValuesToInnerButtonContent() {
+    const button = this.getRootElement().querySelector('button');
+    const editableText = this.getRootElement().querySelector('.editable-text');
+
+    if (!button || !editableText) {
+      return;
+    }
+
+    this.mapAlignValueToButtonContent(button);
+
+    editableText.style.minWidth = '20px';
+    editableText.style.width = 'max-content';
+    editableText.style.minHeight = button.style.fontSize;
+
+    // Workaround for inline edit (copying text-related styles, so inline edit looks same)
+    editableText.style.textAlign = button.style.textAlign;
+    editableText.style.lineHeight = button.style.lineHeight;
+    editableText.style.fontWeight = button.style.fontWeight;
+    editableText.style.fontSize = button.style.fontSize;
+    editableText.style.textShadow = button.style.textShadow;
+    editableText.style.textTransform = button.style.textTransform;
+    editableText.style.letterSpacing = button.style.letterSpacing;
+    editableText.style.fontFamily = button.style.fontFamily;
+  }
+
+  mapAlignValueToButtonContent(button) {
+    if (button.style.textAlign === 'center') {
+      button.style.alignItems = 'center';
+      button.style.justifyContent = 'center';
+    }
+
+    if (button.style.textAlign === 'start') {
+      button.style.alignItems = button.style.flexDirection === 'column' ? 'flex-start' : 'center';
+      button.style.justifyContent = button.style.flexDirection === 'column' ? 'center' : 'flex-start';
+    }
+
+    if (button.style.textAlign === 'end') {
+      button.style.alignItems = button.style.flexDirection === 'column' ? 'flex-end' : 'center';
+      button.style.justifyContent = button.style.flexDirection === 'column' ? 'center' : 'flex-end';
+    }
+  }
+
+  createIconNode(button) {
+    if (!button.querySelector('.icon')) {
+      const iconElement = document.createElement('p');
+      iconElement.classList.add('icon');
+      button.appendChild(iconElement);
+    }
+  }
+  showErrorTooltip(errorKey) {
+    const mainContainerElement = this.getRootElement().querySelector('.main-container');
+    const tooltipElement = mainContainerElement.querySelector('.input-tooltip');
+
+    const componentLanguageMap = this.getTranslationsMap(this.manifest.i18n).translations;
+    const targetPropPathKey = Object.keys(componentLanguageMap).find(key => key.includes(errorKey));
+    const translatedValue = targetPropPathKey ? componentLanguageMap[targetPropPathKey] : errorKey;
+
+    setInvalidStyle(mainContainerElement, tooltipElement, translatedValue, this.htmlDocumentObject);
+  }
+
+  getHandlers() {
+    let handlers = (this.getProps().handlers && this.getProps().handlers.length)
+      ? [...this.getProps().handlers]
+      : [];
+    const model = this.getModel();
+
+    if (
+      (model?.path?.[0] === undefined)
+      || !this.documentModel
+    ) {
+      return handlers;
+    }
+
+    const currentView = this.documentModel.getView(model.path[0]);
+
+    let clickHandler = handlers
+      ?.find(handler => handler.type === HandlerTypes.CLICK);
+
+    if (!clickHandler) {
+      return handlers;
+    }
+
+    const hasSubmitAction = clickHandler.actions?.some(a => {
+      return [
+        SysActionTypes.REQUEST,
+        SysActionTypes.SUBSCRIBE_CONTACT,
+      ].includes(a.type);
+    });
+
+    const feedbackAndNpsComponentsCount = getComponentCountOnView(currentView, 'SysFeedbackComponent')
+      + getComponentCountOnView(currentView, 'SysNetPromoterScoreComponent');
+
+    if ((feedbackAndNpsComponentsCount !== 1) || !hasSubmitAction) {
+      return handlers;
+    }
+
+    clickHandler.actions = clickHandler.actions?.filter(a => {
+      return ![
+        SysActionTypes.GO_TO_VIEW,
+        SysActionTypes.GO_TO_PREVIOUS_VIEW,
+        SysActionTypes.GO_TO_NEXT_VIEW,
+      ].includes(a.type);
+    });
+
+    handlers = [
+      ...handlers.filter(handler => handler.type !== HandlerTypes.CLICK),
+      clickHandler
+    ];
+
+    return handlers;
+  }
+}
+
+export { SysButtonComponent as default };

package/script/SysColumnComponent/SysColumn.manifest.js

@@ -0,0 +1,17 @@
+import SysContainerManifest from '../SysContainerComponent/SysContainer.manifest.js';
+import '@claspo/renderer/sdk/ModelStyleUtils';
+import '@claspo/renderer/sdk/ManifestUtils';
+
+var SysColumnManifest = {
+  ...SysContainerManifest,
+  "name": "SysColumnComponent",
+  "componentType": "COLUMN",
+  "preventDraggable": false,
+  "focusParentOnClick": false,
+  "recursiveRemove": true,
+  "version": "1.0.0",
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysColumnManifest as default };

package/script/SysColumnComponent/SysColumnComponent.js

@@ -0,0 +1,107 @@
+import SysColumnManifest from './SysColumn.manifest.js';
+import SysBaseContainerComponent from '../SysContainerComponent/SysBaseContainerComponent.js';
+import { applySysAttrPrefix } from '@claspo/renderer/renderer/RenderConstants';
+
+class SysColumnComponent extends SysBaseContainerComponent {
+  static define = {
+    name: 'sys-column',
+    model: SysColumnManifest.name,
+    manifest: SysColumnManifest
+  };
+
+  manifest = SysColumnManifest;
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.updateEmptyState();
+    this.watchChildren();
+
+    this.observeEnvironment(() => {
+      this.updateResponsiveStyles();
+    });
+    this.observeProps((prev, next) => {
+      this.updateResponsiveStyles();
+      this.processSize(next.content?.size);
+    });
+    this.getParentComponent()?.observeProps(() => {
+      this.updateResponsiveStyles();
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.mutationObserver?.disconnect();
+  }
+
+  updateResponsiveStyles() {
+    const areColumnsResponsive = this.getParentComponent()?.getProps()?.isResponsive;
+    const columnComponents = [...this.shadowRoot.children].filter(el => el.hasAttribute('cl-element'));
+
+    const hostStyle = this.getHostElement().style;
+
+    if (columnComponents.length) {
+      hostStyle.minWidth = 'min-content';
+    } else {
+      const hasSomePadding = ['paddingTop', 'paddingBottom', 'paddingLeft', 'paddingRight', 'padding']
+        .map(prop => hostStyle[prop])
+        .map(value => value && parseFloat(value))
+        .some(Boolean);
+
+      if (hasSomePadding) {
+        hostStyle.minWidth = 'min-content';
+      } {
+        hostStyle.minWidth = '20px';
+      }
+    }
+
+    if (this.getEnvironment() !== 'mobile' || !areColumnsResponsive) {
+      return;
+    }
+
+    if (columnComponents.length) {
+      hostStyle.minHeight = 'auto';
+    } else if (hostStyle.background.includes('url')) {
+      hostStyle.minHeight = '150px';
+    } else if (!columnComponents.length) {
+      hostStyle.minHeight = '50px';
+    }
+
+  }
+
+  updateEmptyState() {
+    const elements = Array
+      .from(this.getRootElement().children)
+      .filter(el => el.tagName !== 'STYLE' && el.tagName !== 'SCRIPT') || [];
+    const isEmpty = !elements.length;
+
+    this.setAttribute(applySysAttrPrefix('empty'), isEmpty);
+  }
+
+  watchChildren() {
+    const self = this;
+    this.mutationObserver = new MutationObserver(function () {
+      self.updateEmptyState();
+      self.updateResponsiveStyles();
+    });
+    this.mutationObserver.observe(this.getRootElement(), { childList: true });
+  }
+
+  processSize(size) {
+    const sizeProperty = 'flexGrow';
+    const sizeValue = size ?? this.style[sizeProperty] ?? '1';
+    this.style[sizeProperty] = sizeValue;
+  }
+
+  processStyles() {
+    this.innerHTML += `
+      <style>
+      [cl-component="${this.getComponentName()}"] {
+        position: relative;
+        min-width: 50px;
+        min-height: 50px;
+      }
+      </style>`;
+  }
+}
+
+export { SysColumnComponent as default };

package/script/SysColumnsComponent/SysColumns.manifest.js

@@ -0,0 +1,17 @@
+import '@claspo/renderer/sdk/ModelStyleUtils';
+
+var SysColumnsManifest = {
+  "name": "SysColumnsComponent",
+  "componentType": "COLUMNS",
+  "version": "1.0.0",
+  "events": {
+    "dispatch": [],
+    "listen": []
+  },
+  "waitForResourcesLoad": true,
+  "resourcesPropPaths": [["adaptiveStyles", ":ENV", "styleAttributes", "background"]],
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysColumnsManifest as default };

package/script/SysColumnsComponent/SysColumnsComponent.js

@@ -0,0 +1,53 @@
+import SysColumnsManifest from './SysColumns.manifest.js';
+import WcElement from '@claspo/renderer/sdk/WcElement';
+import getStyleElement from './getStyleElement.js';
+import { applySysAttrPrefix } from '@claspo/renderer/renderer/RenderConstants';
+import MobileDeviceOrientationListener from '@claspo/renderer/renderer/style/MobileDeviceOrientationListener';
+
+class SysColumnsComponent extends WcElement {
+  static define = {
+    name: 'sys-columns',
+    model: SysColumnsManifest.name,
+    manifest: SysColumnsManifest
+  };
+
+  manifest = SysColumnsManifest;
+
+
+  constructor() {
+    super();
+    this.getRootElement().innerHTML = `
+      ${getStyleElement()}
+      <div ${applySysAttrPrefix('render-outlet')} class="columns-container"></div>
+    `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.observeProps((prev, next) => {
+      this.applyAutoAdaptiveStyles(next.adaptiveStyles, next.styles);
+      this.updateResponsiveStyles();
+    });
+
+    this.observeEnvironment((_, env) => {
+      this.updateResponsiveStyles();
+    });
+
+    this.subscriptions.push(
+      this.mobileDeviceOrientationListener.on(MobileDeviceOrientationListener.changeEventName, () => {
+        this.updateResponsiveStyles();
+      })
+    );
+  };
+
+  updateResponsiveStyles() {
+    if (this.getProps().isResponsive && this.getEnvironment() === 'mobile' && this.mobileDeviceOrientationListener.isPortrait()) {
+      this.getRootElement().querySelector('.columns-container').style.flexDirection = 'column';
+    } else {
+      this.getRootElement().querySelector('.columns-container').style.flexDirection = 'row';
+    }
+  }
+}
+
+export { SysColumnsComponent as default };

package/script/SysColumnsComponent/getStyleElement.js

@@ -0,0 +1,23 @@
+function getStyleElement() {
+  return `
+  <style>
+    :host {
+      position: relative;
+      min-width: 50px;
+      min-height: 50px; 
+      display:flex;
+    }
+
+    .columns-container {
+      height: auto;
+      min-height: 50px; 
+      width: 100%;
+      min-width: 50px;
+      display: flex;
+      gap: inherit;
+    }
+  </style>
+  `;
+}
+
+export { getStyleElement as default };