@worksafevictoria/wcl7.5 1.1.10 → 1.1.12

package/src/components/SubComponents/FormInstance/models/overrides/message.js

@@ -0,0 +1,53 @@
+import { htmlDecode } from '../form-utils'
+import { MarkupFormElement } from './markup'
+
+export class MessageFormElement extends MarkupFormElement {
+  getContent() {
+    let content = ''
+    if (this.webformElement['#type'] === 'webform_message') {
+      let type = 'alert-success'
+      const msgType = this.webformElement['#message_type']
+      if (msgType === 'error') {
+        type = 'alert-danger'
+      } else if (msgType === 'warning') {
+        type = 'alert-warning'
+      } else if (msgType === 'info') {
+        type = 'alert-info'
+      }
+
+      let dismissable = ''
+      if (this.webformElement['#message_close']) {
+        dismissable = `<button type="button" class="close" data-dismiss="alert" aria-label="Close" id="alertDismiss${this.counter}"><span aria-hidden="true">&times;</span></button>`
+      }
+      content = `<div id="alert${
+        this.counter
+      }" class="alert fade show alert-dismissible ${type}" role="alert">${htmlDecode(
+        this.webformElement['#message_message']?.['#markup']
+      )}${dismissable}</div>`
+    }
+
+    if (this.webformElement['#display_on'] === 'view') {
+      content = ''
+    }
+    return content
+  }
+
+  onRender(formElement) {
+    if (this.webformElement['#type'] === 'webform_message') {
+      const alertDismissElement = formElement.querySelector(
+        `#alertDismiss${this.counter}`
+      )
+      const alertElement = formElement.querySelector(`#alert${this.counter}`)
+      if (alertDismissElement && alertElement) {
+        alertDismissElement.addEventListener(
+          'click',
+          function() {
+            alertElement.remove()
+          },
+          false
+        )
+      }
+    }
+    return Promise.resolve()
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/moretext.js

@@ -0,0 +1,64 @@
+import { htmlDecode } from '../form-utils'
+import { MarkupFormElement } from './markup'
+
+export class MoreTextFormElement extends MarkupFormElement {
+  getContent() {
+    if (!this.canRender()) {
+      return ``
+    }
+    return `<div class="more-text" id="more${this.counter}"><div id="moretext${
+      this.counter
+    }" style="display: none;">${htmlDecode(
+      this.getMoreText()
+    )}</div><small class="more-text__buttons" id="morebutton${
+      this.counter
+    }" style="text-decoration: underline;cursor: pointer;" class="disable-caret">${this.getMoreButtonText()}</small></div>`
+  }
+
+  canRender() {
+    return (
+      !this.isEmpty(this.getMoreText()) ||
+      !this.isEmpty(this.webformElement['#more_title'])
+    )
+  }
+
+  getMoreButtonText() {
+    return '+ ' + (this.webformElement['#more_title'] || 'Show More')
+  }
+
+  getMoreText() {
+    return this.webformElement['#more']?.['#markup']
+  }
+
+  onRender(formElement) {
+    if (this.canRender()) {
+      const moreButtonElement = formElement.querySelector(
+        `#morebutton${this.counter}`
+      )
+      const moreTextElement = formElement.querySelector(
+        `#moretext${this.counter}`
+      )
+      const moreContainerElement = formElement.querySelector(
+        `#more${this.counter}`
+      )
+      if (moreButtonElement) {
+        moreButtonElement.addEventListener(
+          'click',
+          () => {
+            if (moreTextElement.style.display !== 'none') {
+              moreButtonElement.innerHTML = this.getMoreButtonText()
+              moreTextElement.style.display = 'none'
+              moreContainerElement.style.background = 'transparent'
+            } else {
+              moreButtonElement.innerHTML = '- ' + 'Show less'
+              moreTextElement.style.display = 'block'
+              moreContainerElement.style.background = '#ffffff'
+            }
+          },
+          false
+        )
+      }
+    }
+    return Promise.resolve()
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/multiple.js

@@ -0,0 +1,51 @@
+import { ContainerFormElement } from './container'
+
+export class MultipleFormElement extends ContainerFormElement {
+  getType() {
+    return 'datagrid'
+  }
+
+  shouldHideLabel() {
+    return false
+  }
+
+  shouldIgnoreSubmissionValue() {
+    return false
+  }
+
+  getContainerChildElements() {
+    return {
+      [this.webformElement['#element']['#key']]: this.webformElement['#element']
+    }
+  }
+
+  getValidation() {
+    const validation = super.getValidation()
+    validation.minLength = this.webformElement['#min_items'] ?? 0
+    validation.maxLength = this.webformElement['#multiple'] ?? 20
+    return validation
+  }
+
+  transformSubmissionValue(value) {
+    if (!Array.isArray(value)) {
+      return undefined
+    }
+    return {
+      [this.getKey()]: value.map((rowItem) => {
+        return rowItem[this.getKey()]
+      })
+    }
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    return {
+      ...customProperties,
+      reorder: true,
+      addAnotherPosition: 'bottom',
+      layoutFixed: false,
+      enableRowGroups: false,
+      initEmpty: false
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/number.js

@@ -0,0 +1,22 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class NumberFormElement extends BaseFormElement {
+  getCustomProperties() {
+    let requireDecimal = false
+    let decimalLimit = 0
+    if (
+      !this.isEmpty(this.webformElement['#step']) &&
+      !isNaN(this.webformElement['#step'])
+    ) {
+      decimalLimit = this.webformElement['#step']
+      requireDecimal = true
+    }
+    return {
+      delimiter: true,
+      requireDecimal,
+      decimalLimit,
+      inputFormat: 'plain',
+      truncateMultipleSpaces: true
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/options-other.js

@@ -0,0 +1,34 @@
+import { CompositeFormElement } from './composite'
+
+export class OptionsOtherFormElement extends CompositeFormElement {
+  setSubComponentRules(optionsArrayElement, otherElement) {
+    const values = this.getOptionValues(optionsArrayElement)
+
+    if (values.length > 0) {
+      let otherValue = values.slice(-1).pop().value
+      otherElement.conditional = {
+        show: true,
+        when: optionsArrayElement.key,
+        eq: otherValue
+      }
+
+      otherElement.validate.required = !!optionsArrayElement.validate.required
+
+      this.setSubComponentTransformSubmissionValue(
+        optionsArrayElement,
+        otherValue
+      )
+      this.setSubComponentTransformSubmissionValue(otherElement, otherValue)
+    }
+  }
+
+  getOptionValues(optionsArrayElement) {
+    let values = []
+    if (optionsArrayElement.type === 'select') {
+      values = optionsArrayElement?.data?.values
+    } else if (['selectboxes', 'radio'].includes(optionsArrayElement.type)) {
+      values = optionsArrayElement.values
+    }
+    return Array.isArray(values) ? values : []
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/page.js

@@ -0,0 +1,7 @@
+import { DetailFormElement } from './detail'
+
+export class PageFormElement extends DetailFormElement {
+  isPageComponent() {
+    return true
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/phonenumber.js

@@ -0,0 +1,13 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class PhoneNumberFormElement extends BaseFormElement {
+  getType() {
+    return 'phoneNumber'
+  }
+
+  getCustomProperties() {
+    return {
+      inputMask: '99 9999 9999'
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/radio.js

@@ -0,0 +1,31 @@
+import { BaseFormElement } from '../base-form-element'
+import { htmlDecode } from '../form-utils'
+
+export class RadioFormElement extends BaseFormElement {
+  getType() {
+    return 'radio'
+  }
+
+  getOptions() {
+    const options = this.webformElement['#options'] || []
+
+    return {
+      values: Object.keys(options).map((key) => {
+        return {
+          label: htmlDecode(
+            !this.isEmpty(options[key]) ? options[key] : 'undefined'
+          ),
+          value: key
+        }
+      })
+    }
+  }
+
+  getCustomProperties() {
+    return {
+      ...this.getOptions(),
+      optionsLabelPosition: 'right',
+      inline: this.webformElement['#options_display'] === 'side_by_side'
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/range.js

@@ -0,0 +1,19 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class RangeFormElement extends BaseFormElement {
+  getType() {
+    return 'range'
+  }
+
+  getSuffix() {
+    return undefined
+  }
+
+  getCustomProperties() {
+    return {
+      step: this.webformElement['#step'] ?? 1,
+      min: this.webformElement['#min'] ?? 0,
+      max: this.webformElement['#max'] ?? 100
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/rating.js

@@ -0,0 +1,47 @@
+import { generateUniqueId } from '../form-utils'
+import { RadioFormElement } from './radio'
+
+export class RatingFormElement extends RadioFormElement {
+  getType() {
+    return 'rating'
+  }
+
+  getMin() {
+    return this.webformElement['#min'] ?? 0
+  }
+
+  getMax() {
+    return this.webformElement['#max'] ?? 5
+  }
+
+  getBuffer() {
+    return 1
+  }
+
+  getOptions() {
+    const min = this.getMin()
+    const max = this.getMax()
+    const defaultValue = this.getDefaultValue()
+    const options = []
+    for (let i = min; i < max; i++) {
+      options.push(i + this.getBuffer())
+    }
+    return {
+      values: options.map((key) => {
+        return {
+          id: generateUniqueId(),
+          label: '',
+          value: key,
+          checked: !this.isEmpty(defaultValue) && Number(defaultValue) >= key
+        }
+      })
+    }
+  }
+
+  getCustomProperties() {
+    return {
+      ...super.getCustomProperties(),
+      inline: true
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/scale.js

@@ -0,0 +1,33 @@
+import { RatingFormElement } from './rating'
+
+export class ScaleFormElement extends RatingFormElement {
+  getType() {
+    return 'scale'
+  }
+
+  getMax() {
+    return super.getMax() + 1
+  }
+
+  getBuffer() {
+    return 0
+  }
+
+  getOptions() {
+    const options = super.getOptions()
+    const defaultValue = this.getDefaultValue()
+    return {
+      values: options.values.map((option) => {
+        return {
+          ...option,
+          checked:
+            !this.isEmpty(defaultValue) && Number(defaultValue) === option.value
+        }
+      })
+    }
+  }
+
+  transformSubmissionValue(value) {
+    return this.isEmpty(value) ? undefined : value
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/section.js

@@ -0,0 +1,39 @@
+import { ContainerFormElement } from '../overrides/container'
+
+export class SectionFormElement extends ContainerFormElement {
+  getType() {
+    return 'container'
+  }
+
+  getDescription() {
+    return undefined
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    const description = !this.isEmpty(this.getHtmlText('#description'))
+      ? this.getHtmlText('#description')
+      : ''
+    const titleTag =
+      this.webformElement['#title_tag'] ||
+      (this.webformElement['#type'] === 'fieldset' ? 'strong' : 'h2')
+    const title = !this.isEmpty(this.getLabel())
+      ? `<${titleTag}>${this.getLabel()}</${titleTag}>`
+      : ''
+
+    this.addHtmlControl(
+      description,
+      customProperties[this.getComponentsKey()],
+      this.webformElement['#description_display'],
+      'desc'
+    )
+    this.addHtmlControl(
+      title,
+      customProperties[this.getComponentsKey()],
+      this.webformElement['#title_display'],
+      'title'
+    )
+
+    return customProperties
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/select.js

@@ -0,0 +1,28 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class SelectFormElement extends BaseFormElement {
+  getType() {
+    return 'select'
+  }
+
+  getOptions() {
+    const options = this.webformElement['#options'] || []
+    return {
+      data: {
+        values: Object.keys(options).map((key) => {
+          return {
+            label: options[key],
+            value: key
+          }
+        })
+      }
+    }
+  }
+
+  getCustomProperties() {
+    return {
+      widget: 'choicesjs',
+      ...this.getOptions()
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/signature.js

@@ -0,0 +1,7 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class SignatureFormElement extends BaseFormElement {
+  getType() {
+    return 'signature'
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/submit.js

@@ -0,0 +1,23 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class SubmitFormElement extends BaseFormElement {
+  getType() {
+    return 'button'
+  }
+
+  isInput() {
+    return false
+  }
+
+  getCustomProperties() {
+    return {
+      disableOnInvalid: true,
+      action: 'submit',
+      customClass: 'wcl-cta',
+      label: this.webformElement['#submit__label'] || 'Submit',
+      validate: {
+        multiple: true
+      }
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/table.js

@@ -0,0 +1,48 @@
+import { ContainerFormElement } from '../overrides/container'
+
+export class TableFormElement extends ContainerFormElement {
+  getType() {
+    return 'table'
+  }
+
+  getComponentsKey() {
+    return 'rows'
+  }
+
+  getTableHeaders() {
+    if (Array.isArray(this.webformElement['#header'])) {
+      const headers = this.webformElement['#header'].map((header, index) => {
+        const headerElement = header?.data
+        return {
+          components: [
+            {
+              content: `<strong>${headerElement?.['#markup'] ?? ''}</strong>`,
+              refreshOnChange: false,
+              key: 'table-heading-' + index + this.getKey(),
+              type: 'htmlelement',
+              id: 'table-heading-' + index + this.getId()
+            }
+          ]
+        }
+      })
+      return headers
+    }
+    return null
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    const headers = this.getTableHeaders()
+    const rows = customProperties[this.getComponentsKey()]
+    if (headers) {
+      rows.unshift(headers)
+    }
+
+    return {
+      ...customProperties,
+      cellAlignment: 'left',
+      numRows: rows.length,
+      numCols: Array.isArray(headers) ? headers.length : 1
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/tablerow.js

@@ -0,0 +1,20 @@
+import { ContainerFormElement } from '../overrides/container'
+
+export class TableRowFormElement extends ContainerFormElement {
+  getType() {
+    return 'tablerow'
+  }
+
+  isCustomPropertiesAnArray() {
+    return true
+  }
+
+  getCustomProperties() {
+    const customProperties = super.getCustomProperties()
+    return customProperties[this.getComponentsKey()].map((component) => {
+      return {
+        components: [component]
+      }
+    })
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/tableselect.js

@@ -0,0 +1,66 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class TableSelectFormElement extends BaseFormElement {
+  getType() {
+    return 'tableselect'
+  }
+
+  getOptions() {
+    const keys = Object.keys(this.webformElement['#options'])
+    const defaultValue = this.getDefaultValue()
+    return keys.map((key) => {
+      return {
+        value: key,
+        label: this.webformElement['#options'][key][0].value,
+        checked:
+          typeof defaultValue === 'object' &&
+          Array.isArray(defaultValue.value) &&
+          defaultValue.value.includes(key)
+      }
+    })
+  }
+
+  getDefaultValue() {
+    const value = super.getDefaultValue() || {}
+    return {
+      value: Object.keys(value)
+    }
+  }
+
+  transformSubmissionValue(selections) {
+    if (
+      typeof selections === 'object' &&
+      Array.isArray(selections.value) &&
+      selections.value.length > 0
+    ) {
+      return this.getNumberOfSelections() === 1
+        ? selections.value[0]
+        : selections.value
+    }
+
+    return undefined
+  }
+
+  getNumberOfSelections() {
+    const values = this.getOptions()
+    let numberOfSelections
+    if (!this.webformElement['#multiple']) {
+      numberOfSelections = 1
+    } else if (
+      this.webformElement['#multiple'] !== true &&
+      !isNaN(this.webformElement['#multiple'])
+    ) {
+      numberOfSelections = this.webformElement['#multiple']
+    } else {
+      numberOfSelections = values.length
+    }
+    return numberOfSelections
+  }
+
+  getCustomProperties() {
+    return {
+      values: this.getOptions(),
+      numberOfSelections: this.getNumberOfSelections()
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/testing.js

@@ -0,0 +1,47 @@
+import { generateUniqueId } from '../form-utils'
+import { RadioFormElement } from './radio'
+
+export class TestingFormElement extends RadioFormElement {
+  getType() {
+    return 'test'
+  }
+
+  getMin() {
+    return this.webformElement['#min'] ?? 0
+  }
+
+  getMax() {
+    return this.webformElement['#max'] ?? 5
+  }
+
+  getBuffer() {
+    return 1
+  }
+
+  getOptions() {
+    const min = this.getMin()
+    const max = this.getMax()
+    const defaultValue = this.getDefaultValue()
+    const options = []
+    for (let i = min; i < max; i++) {
+      options.push(i + this.getBuffer())
+    }
+    return {
+      values: options.map((key) => {
+        return {
+          id: generateUniqueId(),
+          label: '',
+          value: key,
+          checked: !this.isEmpty(defaultValue) && Number(defaultValue) >= key
+        }
+      })
+    }
+  }
+
+  getCustomProperties() {
+    return {
+      ...super.getCustomProperties(),
+      inline: true
+    }
+  }
+}

package/src/components/SubComponents/FormInstance/models/overrides/text.js

@@ -0,0 +1,7 @@
+import { BaseFormElement } from '../base-form-element'
+
+export class TextFormElement extends BaseFormElement {
+  getType() {
+    return 'textfield'
+  }
+}