@descope/web-components-ui 0.0.1

package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js

@@ -0,0 +1,240 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { ComboBoxClass } from '../descope-combo-box/ComboBoxClass';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+
+export const componentName = getComponentName('security-questions-setup');
+
+const attrsToSync = [
+  'full-width',
+  'readonly',
+  'size',
+  'label-type',
+  'question-label',
+  'question-placeholder',
+  'question-data-errormessage-value-missing',
+  'answer-label',
+  'answer-placeholder',
+  'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
+];
+
+const attrsToReRender = ['count', 'questions'];
+class RawSecurityQuestionsSetup extends createBaseClass({ componentName, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  get count() {
+    return Number(this.getAttribute('count')) || 0;
+  }
+
+  #renderQuestions() {
+    const res = Array.from({ length: this.count }).map(
+      (_, index) =>
+        // <!--html-->
+        `
+      <div class="question-wrapper">
+      <descope-combo-box
+        data-id="${index}"
+        item-label-path="data-name"
+        item-value-path="data-id"
+        bordered="true"
+        required="true"
+        clear-button-visible="true"
+      ></descope-combo-box>
+
+      <descope-text-field
+        data-id="${index}"
+        required="true"
+        bordered="true"
+        minlength="2"
+      ></descope-text-field>
+    </div>
+      `
+      // <!--!html-->
+    );
+
+    this.baseElement.innerHTML = res.join(
+      '<spacer></spacer><descope-divider></descope-divider><spacer></spacer>'
+    );
+
+    this.comboBoxes.forEach((el) => {
+      el.addEventListener('change', (e) => {
+        this.updateRemainingCombosData(e.target);
+        const AttachedTextField = this.getAttachedTextField(e.target);
+
+        AttachedTextField.value = '';
+      });
+
+      // eslint-disable-next-line no-param-reassign
+      el.data = this.data;
+    });
+
+    this.#syncAttrs(attrsToSync);
+  }
+
+  getAttachedTextField(combo) {
+    const selector = `descope-text-field[data-id="${combo.getAttribute('data-id')}"]`;
+
+    return this.baseElement.querySelector(selector);
+  }
+
+  filterData(comboValue) {
+    const res = this.data.filter((item) => {
+      return item.value === comboValue || !this.selectedQuestionIds.includes(item.value);
+    });
+
+    return res;
+  }
+
+  reportValidity() {
+    this.inputs.reverse().forEach((el) => el.reportValidity());
+
+    return this.checkValidity();
+  }
+
+  checkValidity() {
+    return [...this.comboBoxes, ...this.textFields].every((el) => el.checkValidity());
+  }
+
+  updateRemainingCombosData(sourceCombo) {
+    this.comboBoxes
+      .filter((combo) => combo !== sourceCombo)
+      .forEach((combo) => {
+        // eslint-disable-next-line no-param-reassign
+        combo.data = this.filterData(combo.value);
+      });
+  }
+
+  get questions() {
+    try {
+      return JSON.parse(this.getAttribute('questions')) || [];
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(componentName, 'Error parsing questions attribute', e);
+      return [];
+    }
+  }
+
+  // this returns the structure expected by the combo box
+  get data() {
+    return this.questions.map(({ id, text }) => ({ value: id, label: text }));
+  }
+
+  get comboBoxes() {
+    return Array.from(this.baseElement.querySelectorAll('descope-combo-box'));
+  }
+
+  get textFields() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text-field'));
+  }
+
+  get inputs() {
+    return Array.from(this.baseElement.querySelectorAll('descope-combo-box, descope-text-field'));
+  }
+
+  get selectedQuestionIds() {
+    return this.comboBoxes.map((el) => el.value);
+  }
+
+  get value() {
+    return this.comboBoxes.map((combo) => {
+      const id = combo.value;
+      const answer = this.getAttachedTextField(combo).value;
+
+      return { id, answer };
+    });
+  }
+
+  set value(val = []) {
+    val.forEach((item, index) => {
+      const combo = this.comboBoxes[index];
+      const textField = this.getAttachedTextField(combo);
+
+      combo.value = item.id;
+      textField.value = item.answer;
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #updateAttribute(ele, attrName, value) {
+    if (value === null) ele.removeAttribute(attrName);
+    else ele.setAttribute(attrName, value);
+  }
+
+  #syncAttrs(attrs) {
+    const componentMap = {
+      question: this.comboBoxes,
+      answer: this.textFields,
+    };
+
+    attrs.forEach((attr) => {
+      const [maybeComponentType, ...rest] = attr.split('-');
+      const elements = componentMap[maybeComponentType] || this.inputs;
+      const attrName = componentMap[maybeComponentType] ? rest.join('-') : attr;
+
+      elements.forEach((el) => {
+        this.#updateAttribute(el, attrName, this.getAttribute(attr));
+      });
+    });
+  }
+
+  init() {
+    super.init?.();
+    // render new components
+    observeAttributes(
+      this,
+      () => {
+        this.#renderQuestions();
+      },
+      { includeAttrs: attrsToReRender }
+    );
+
+    // update existing components
+    observeAttributes(this, this.#syncAttrs.bind(this), {
+      includeAttrs: attrsToSync,
+    });
+  }
+}
+
+export const SecurityQuestionsSetupClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => ComboBoxClass.componentName,
+          property: ComboBoxClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSecurityQuestionsSetup);

package/src/components/descope-security-questions-setup/index.js

@@ -0,0 +1,7 @@
+import { componentName, SecurityQuestionsSetupClass } from './SecurityQuestionsSetupClass';
+import '../descope-text-field';
+import '../descope-combo-box';
+
+customElements.define(componentName, SecurityQuestionsSetupClass);
+
+export { SecurityQuestionsSetupClass };

package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js

@@ -0,0 +1,232 @@
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { compose } from '../../helpers';
+import { getComponentName, observeAttributes } from '../../helpers/componentHelpers';
+import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
+import { TextClass } from 'descope-text/class';
+import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+
+export const componentName = getComponentName('security-questions-verify');
+
+const textFieldsAttrs = [
+  'full-width',
+  'readonly',
+  'size',
+  'answer-placeholder',
+  'answer-data-errormessage-value-missing',
+  'st-error-message-icon',
+  'st-error-message-icon-size',
+  'st-error-message-icon-padding',
+];
+
+const textsAttrs = ['question-mode'];
+
+const attrMappings = {
+  'answer-placeholder': 'placeholder',
+  'answer-data-errormessage-value-missing': 'data-errormessage-value-missing',
+  'question-mode': 'mode',
+};
+
+const attrsToSync = [...textFieldsAttrs, ...textsAttrs];
+
+const attrsToReRender = ['questions'];
+class RawSecurityQuestionsVerify extends createBaseClass({ componentName, baseSelector: 'div' }) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+		<style>
+      :host {
+        display: inline-flex;
+      }
+
+      div {
+        display: flex;
+        flex-direction: column;
+      }
+
+		</style>
+    <div></div>
+		`;
+  }
+
+  #renderQuestions() {
+    const res = this.questions.map(
+      ({ id, text }) =>
+        // <!--html-->
+        `
+      <div class="question-wrapper">
+      <descope-text
+        data-id="${id}"
+      >${text}</descope-text>
+
+      <descope-text-field
+        data-id="${id}"
+        required="true"
+        bordered="true"
+      ></descope-text-field>
+    </div>
+      `
+      // <!--!html-->
+    );
+
+    this.baseElement.innerHTML = res.join(
+      '<spacer></spacer><descope-divider></descope-divider><spacer></spacer>'
+    );
+
+    this.#syncAttrs(attrsToSync);
+
+    // focus input when text is clicked
+    this.texts.forEach((el) => {
+      const input = this.textFields.find(
+        (field) => field.getAttribute('data-id') === el.getAttribute('data-id')
+      );
+      // eslint-disable-next-line no-param-reassign
+      if (input) el.onclick = input.focus.bind(input);
+    });
+  }
+
+  reportValidity() {
+    this.textFields.reverse().forEach((el) => el.reportValidity());
+
+    return this.checkValidity();
+  }
+
+  checkValidity() {
+    return this.textFields.every((el) => el.checkValidity());
+  }
+
+  get questions() {
+    try {
+      return JSON.parse(this.getAttribute('questions')) || [];
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error(componentName, 'Error parsing questions attribute', e);
+      return [];
+    }
+  }
+
+  get texts() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text'));
+  }
+
+  get textFields() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text-field'));
+  }
+
+  get elements() {
+    return Array.from(this.baseElement.querySelectorAll('descope-text, descope-text-field'));
+  }
+
+  get value() {
+    return this.textFields.map((el) => ({ id: el.getAttribute('data-id'), answer: el.value }));
+  }
+
+  set value(val = []) {
+    val.forEach(({ id, answer }) => {
+      const textField = this.textFields.find((el) => el.getAttribute('data-id') === id);
+      if (textField) textField.value = answer;
+    });
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  #updateAttribute(ele, attrName, value) {
+    if (value === null) ele.removeAttribute(attrName);
+    else ele.setAttribute(attrName, value);
+  }
+
+  #getElementsToUpdate(attr) {
+    switch (true) {
+      case textFieldsAttrs.includes(attr):
+        return this.textFields;
+      case textsAttrs.includes(attr):
+        return this.texts;
+      default:
+        return [];
+    }
+  }
+
+  #syncAttrs(attrs) {
+    attrs.forEach((attr) => {
+      this.#getElementsToUpdate(attr).forEach((el) => {
+        this.#updateAttribute(el, attrMappings[attr] || attr, this.getAttribute(attr));
+      });
+    });
+  }
+
+  init() {
+    super.init?.();
+    // render new components
+    observeAttributes(
+      this,
+      () => {
+        this.#renderQuestions();
+      },
+      { includeAttrs: attrsToReRender }
+    );
+
+    // update existing components
+    observeAttributes(this, this.#syncAttrs.bind(this), {
+      includeAttrs: attrsToSync,
+    });
+  }
+}
+
+export const SecurityQuestionsVerifyClass = compose(
+  createStyleMixin({ componentNameOverride: getComponentName('input-wrapper') }),
+  createStyleMixin({
+    mappings: {
+      hostWidth: [{ selector: () => ':host', property: 'width' }, { property: 'width' }],
+      hostDirection: [
+        { selector: () => ':host', property: 'direction' },
+        {
+          selector: () => TextClass.componentName,
+          property: TextClass.cssVarList.hostDirection,
+        },
+        {
+          selector: () => TextFieldClass.componentName,
+          property: TextFieldClass.cssVarList.hostDirection,
+        },
+      ],
+      gap: { selector: () => 'div', property: 'gap' },
+      questionTextAlign: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.textAlign,
+      },
+      questionFontSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.fontSize,
+      },
+      questionFontFamily: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.fontFamily,
+      },
+      questionCursor: {
+        selector: () => TextClass.componentName,
+        property: 'cursor',
+      },
+
+      errorMessageIcon: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageIcon,
+      },
+      errorMessageIconSize: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageSize,
+      },
+      errorMessageIconPadding: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePadding,
+      },
+      errorMessageIconRepeat: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessageRepeat,
+      },
+      errorMessageIconPosition: {
+        selector: () => TextClass.componentName,
+        property: TextClass.cssVarList.errorMessagePosition,
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(RawSecurityQuestionsVerify);

package/src/components/descope-security-questions-verify/index.js

@@ -0,0 +1,7 @@
+import { componentName, SecurityQuestionsVerifyClass } from './SecurityQuestionsVerifyClass';
+import 'descope-text';
+import '../descope-text-field';
+
+customElements.define(componentName, SecurityQuestionsVerifyClass);
+
+export { SecurityQuestionsVerifyClass };

package/src/components/descope-text-area/TextAreaClass.js

@@ -0,0 +1,102 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  createProxy,
+  proxyInputMixin,
+  componentNameValidationMixin,
+} from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName } from '../../helpers/componentHelpers';
+import {
+  resetInputContainer,
+  resetInputCursor,
+  resetInputLabelPosition,
+  resetInputField,
+  resetInputPlaceholder,
+  useHostExternalPadding,
+} from '../../helpers/themeHelpers/resetHelpers';
+
+export const componentName = getComponentName('text-area');
+
+const {
+  host,
+  label,
+  placeholder,
+  inputField,
+  textArea,
+  requiredIndicator,
+  helperText,
+  errorMessage,
+} = {
+  host: { selector: () => ':host' },
+  label: { selector: '::part(label)' },
+  placeholder: { selector: 'textarea:placeholder-shown' },
+  inputField: { selector: '::part(input-field)' },
+  textArea: { selector: '> textarea' },
+  requiredIndicator: { selector: '[required]::part(required-indicator)::after' },
+  helperText: { selector: '::part(helper-text)' },
+  errorMessage: { selector: '::part(error-message)' },
+};
+
+export const TextAreaClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: { ...host, property: 'width' },
+      hostMinWidth: { ...host, property: 'min-width' },
+      hostDirection: { ...host, property: 'direction' },
+      fontSize: [host, textArea],
+      fontFamily: [label, inputField, helperText, errorMessage],
+      labelTextColor: [
+        { ...label, property: 'color' },
+        { ...requiredIndicator, property: 'color' },
+      ],
+      labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
+      errorMessageTextColor: { ...errorMessage, property: 'color' },
+      errorMessageIcon: { ...errorMessage, property: 'background-image' },
+      errorMessageIconSize: { ...errorMessage, property: 'background-size' },
+      errorMessageIconPadding: { ...errorMessage, property: 'padding-inline-start' },
+      errorMessageIconRepeat: { ...errorMessage, property: 'background-repeat' },
+      errorMessageIconPosition: { ...errorMessage, property: 'background-position' },
+      inputBackgroundColor: { ...inputField, property: 'background-color' },
+      inputValueTextColor: { ...textArea, property: 'color' },
+      inputPlaceholderTextColor: { ...placeholder, property: 'color' },
+      inputBorderWidth: { ...inputField, property: 'border-width' },
+      inputBorderStyle: { ...inputField, property: 'border-style' },
+      inputBorderColor: { ...inputField, property: 'border-color' },
+      inputBorderRadius: { ...inputField, property: 'border-radius' },
+      inputOutlineStyle: { ...inputField, property: 'outline-Style' },
+      inputOutlineColor: { ...inputField, property: 'outline-color' },
+      inputOutlineOffset: { ...inputField, property: 'outline-offset' },
+      inputOutlineWidth: { ...inputField, property: 'outline-width' },
+      inputResizeType: { ...textArea, property: 'resize' },
+      inputMinHeight: { ...textArea, property: 'min-height' },
+      inputTextAlign: { ...textArea, property: 'text-align' },
+    },
+  }),
+  draggableMixin,
+  proxyInputMixin({ proxyProps: ['value', 'selectionStart'] }),
+  componentNameValidationMixin
+)(
+  createProxy({
+    slots: [],
+    wrappedEleName: 'vaadin-text-area',
+    style: () => `
+			:host {
+				display: inline-block;
+				max-width: 100%;
+        box-sizing: border-box;
+			}
+			textarea {
+				height: 100%;
+			}
+      ${resetInputLabelPosition('vaadin-text-area')}
+			${useHostExternalPadding(TextAreaClass.cssVarList)}
+			${resetInputContainer('vaadin-text-area')}
+			${resetInputField('vaadin-text-area')}
+			${resetInputPlaceholder('vaadin-text-area', 'textarea')}
+			${resetInputCursor('vaadin-text-area')}
+		`,
+    excludeAttrsSync: ['tabindex'],
+    componentName,
+  })
+);

package/src/components/descope-text-area/index.js

@@ -0,0 +1,6 @@
+import '@vaadin/text-area';
+import { componentName, TextAreaClass } from './TextAreaClass';
+
+customElements.define(componentName, TextAreaClass);
+
+export { TextAreaClass };