@claspo/components 1.6.3 → 1.7.0-a11y.0

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 };

package/script/SysContainerComponent/SysBaseContainerComponent.js

@@ -0,0 +1,41 @@
+import WcElement from '@claspo/renderer/sdk/WcElement';
+
+class SysBaseContainerComponent extends WcElement {
+  manifest = {
+    name: 'SysContainerComponent'
+  };
+
+  getComponentName = () => {
+    return this.manifest.name;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.processStyles();
+
+    this.observeProps((prev, next) => {
+      this.applyAutoAdaptiveStyles(next.adaptiveStyles, next.styles);
+    });
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+
+  processStyles = () => {
+    this.innerHTML += `
+      <style>
+      [cl-component="${this.getComponentName()}"] {
+        position: relative;
+        min-width: 50px;
+        min-height: 50px;
+      }
+      </style>`;
+  }
+
+
+
+
+}
+
+export { SysBaseContainerComponent as default };

package/script/SysContainerComponent/SysContainer.manifest.js

@@ -0,0 +1,18 @@
+import '@claspo/renderer/sdk/ManifestUtils';
+
+var SysContainerManifest = {
+  "name": "SysContainerComponent",
+  "componentType": "CONTAINER",
+  "version": "1.0.0",
+  "events": {
+    "dispatch": [],
+    "listen": []
+  },
+  "i18nPropPaths": ["handlers,[id],actions,[id],params,link", "handlers,[id],actions,[id],params,customData"],
+  "waitForResourcesLoad": true,
+  "resourcesPropPaths": [["adaptiveStyles", ":ENV", "styleAttributes", "background"]],
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysContainerManifest as default };

package/script/SysContainerComponent/SysContainerComponent.js

@@ -0,0 +1,86 @@
+import SysContainerManifest from './SysContainer.manifest.js';
+import SysBaseContainerComponent from './SysBaseContainerComponent.js';
+import insertHtmlIntoElement from '@claspo/common/dom/insertHtmlIntoElement';
+
+class SysContainerComponent extends SysBaseContainerComponent {
+  static define = {
+    name: 'sys-container',
+    model: SysContainerManifest.name,
+    manifest: SysContainerManifest
+  };
+
+  manifest = SysContainerManifest;
+
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.appendResponsiveStyles();
+
+
+    this.observeProps((_, next) => {
+      if (next.isResponsive) {
+        this.updateResponsiveRules(this.getResponsiveStyleElement());
+      }
+    });
+
+    if (this.getProps().isResponsive) {
+      this.connectResizeObserver();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.resizeObserver?.disconnect();
+  }
+
+  connectResizeObserver() {
+    this.resizeObserver = new ResizeObserver((entries) => {
+
+      for (const entry of entries) {
+
+        if (entry.contentRect) {
+          this.updateResponsiveRules(this.getResponsiveStyleElement());
+
+        }
+      }
+
+    });
+    this.resizeObserver.observe(this.getWidgetContainerNode());
+  }
+
+  updateResponsiveRules(styleElement) {
+    if (!this.getProps().isResponsive) {
+      insertHtmlIntoElement({
+        element: styleElement,
+        html: '',
+      });
+      return;
+    }
+
+    const parentNode = this.getWidgetContainerNode();
+    const {width, height} = parentNode.getBoundingClientRect();
+
+    if (height / width > 1.6) {
+      styleElement.innerHTML = `[cl-component="${this.getComponentName()}"] {flex-direction: column !important;}`;
+    } else {
+      styleElement.innerHTML = `[cl-component="${this.getComponentName()}"] {flex-direction: row !important;}`;
+
+    }
+
+  }
+
+
+  getResponsiveStyleElement() {
+    return [...this.children]
+      .find(child => child.getAttribute('name') === 'responsive-styles');
+  }
+
+
+  appendResponsiveStyles() {
+    this.innerHTML += `<style name="responsive-styles">
+      [cl-component="${this.getComponentName()}"] {}
+    </style>`;
+  }
+}
+
+export { SysContainerComponent as default };

package/script/SysImageComponent/SysImage.manifest.js

@@ -0,0 +1,18 @@
+import '@claspo/renderer/sdk/ManifestUtils';
+
+var SysImageManifest = {
+  "name": "SysImageComponent",
+  "componentType": "IMAGE",
+  "version": "1.0.0",
+  "i18nPropPaths": ["handlers,[id],actions,[id],params,link", "handlers,[id],actions,[id],params,customData", "control,altText"],
+  "events": {
+    "dispatch": [],
+    "listen": []
+  },
+  "waitForResourcesLoad": true,
+  "resourcesPropPaths": [["control", "imageSource", "url"]],
+  "syncEnabled": true,
+  "stylesImitationEnabled": true
+};
+
+export { SysImageManifest as default };