@castlabs/ui 7.23.0 → 7.23.1

package/dist/castlabs-ui.module.d.ts

@@ -17,9 +17,9 @@ declare module '@castlabs/ui/dist/castlabs-ui.module.js' {
 
   export function clFormReset (id: string, fields?: any[]): void
   export function clFormFieldReset (ref: any, oldValue: any): void
-  export function clFormIsValid (id: string): boolean
-  export function clFormIsValidAsync (id: string): Promise<boolean>
-  export function clFormFieldFocusFirstInvalid (id: string): void
+  export function clFormIsValid (id: string, moreSelectors?: string[], triggerSelectors?: string[]): boolean
+  export function clFormIsValidAsync (id: string, moreSelectors?: string[], triggerSelectors?: string[]): Promise<boolean>
+  export function clFormFieldFocusFirstInvalid (id: string, moreSelectors?: string[]): void
   export function clFormAutofocus (id: string): void
 
   export function clFormatFilesize (bytes: number): string

package/dist/castlabs-ui.module.js

@@ -1,4 +1,4 @@
-/* @castlabs/ui v7.23.0 */
+/* @castlabs/ui v7.23.1 */
 
 /*!
   * Bootstrap v5.3.8 (https://getbootstrap.com/)
@@ -256,7 +256,7 @@ function clTableSetResizeListeners (resizer, auto = false) {
   document.addEventListener('mousemove', mousemove)
   document.addEventListener('mouseup', mouseup)
   if (auto) {
-    document.addEventListener('click', mouseclick)
+    resizer.addEventListener('click', mouseclick)
   }
 }
 
@@ -308,9 +308,10 @@ const mouseup = mouseup => {
 
 const mouseclick = click => {
   if (click.detail === 2) {
+    const table = click.target?.closest('table')
+    if (!table) return
     click.preventDefault()
 
-    const table = click.target?.closest('table')
     const id = table?.id ?? 'unknown'
     const th = click.target?.closest('th')
     const colIndex = Array.from(th.parentElement.children).indexOf(th)
@@ -1164,9 +1165,11 @@ export function clFormFieldReset (ref, oldValue) {
  * Will autofocus the first wrong input (if any).
  *
  * @param {string} id ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
+ * @param {string[]} moreTriggers Optional additional classes mark elements that should be focused & blurred to trigger validation.
  * @return {boolean} True if form is OK.
  */
-export function clFormIsValid (id) {
+export function clFormIsValid (id, moreSelectors = [], moreTriggers = []) {
   const form = document.querySelector(`#${id}`)
   if (!form) {
     // not a form at all
@@ -1177,16 +1180,18 @@ export function clFormIsValid (id) {
   // force trigger validation
   // as some inputs like the ace editor do custom validation based on events,
   // we fire various event/element/class combinations to make sure custom handlers run.
-  document.querySelectorAll(`#${id} input, #${id} .form-control`).forEach(input => {
-    input.focus()
-    input.blur()
-  })
+  document
+    .querySelectorAll(clSubselectorQuery(`#${id}`, ['input', '.form-control', ...moreTriggers]))
+    .forEach(input => {
+      input.focus()
+      input.blur()
+    })
 
   if (
     form.checkValidity() === false ||
-    document.querySelector(`#${id} :invalid, #${id} .invalid`)
+    document.querySelector(clSubselectorQuery(`#${id}`, [':invalid', '.invalid', ...moreSelectors]))
   ) {
-    clFormFieldFocusFirstInvalid(id)
+    clFormFieldFocusFirstInvalid(id, moreSelectors)
     return false
   }
 
@@ -1199,9 +1204,11 @@ export function clFormIsValid (id) {
  * Useful for complicated inputs like ACE editor.
  *
  * @param {string} id ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
+ * @param {string[]} moreTriggers Optional additional classes mark elements that should be focused & blurred to trigger validation.
  * @return {boolean} Promise of true if form is OK.
  */
-export async function clFormIsValidAsync (id) {
+export async function clFormIsValidAsync (id, moreSelectors = [], moreTriggers = []) {
   const form = document.getElementById(id)
   if (!form) {
     // not a form at all
@@ -1212,10 +1219,12 @@ export async function clFormIsValidAsync (id) {
   // force trigger validation
   // as some inputs like the ace editor do custom validation based on events,
   // we fire various event/element/class combinations to make sure custom handlers run.
-  document.querySelectorAll(`#${id} input, #${id} .form-control`).forEach(input => {
-    input.focus()
-    input.blur()
-  })
+  document
+    .querySelectorAll(clSubselectorQuery(`#${id}`, ['input', '.form-control', ...moreTriggers]))
+    .forEach(input => {
+      input.focus()
+      input.blur()
+    })
   document.querySelectorAll(`#${id} .ace_editor`).forEach(input => {
     input.click()
   })
@@ -1225,9 +1234,11 @@ export async function clFormIsValidAsync (id) {
     setTimeout(() => {
       if (
         form.checkValidity() === false ||
-        document.querySelector(`#${id} :invalid, #${id} .invalid`)
+        document.querySelector(
+          clSubselectorQuery(`#${id}`, [':invalid', '.invalid', ...moreSelectors])
+        )
       ) {
-        clFormFieldFocusFirstInvalid(id)
+        clFormFieldFocusFirstInvalid(id, moreSelectors)
         resolve(false)
         return
       }
@@ -1252,12 +1263,23 @@ export function clFormAutofocus (formId) {
  * Set the focus in the first invalid field of the given form (if any).
  *
  * @param {string} formId HTML ID of form.
+ * @param {string[]} moreSelectors Optional additional classes that mark invalid fields.
  */
-export function clFormFieldFocusFirstInvalid (formId) {
-  const invalid = document.querySelector(`#${formId} :invalid, #${formId} .invalid`)
+export function clFormFieldFocusFirstInvalid (formId, moreSelectors = []) {
+  const invalid = document.querySelector(
+    clSubselectorQuery(`#${formId}`, [':invalid', '.invalid', ...moreSelectors])
+  )
   invalid?.focus()
 }
 
+export function clSubselectorQuery (main, subselectors) {
+  const selectors = []
+  for (const subselector of subselectors) {
+    selectors.push(`${main} ${subselector}`)
+  }
+  return selectors.join(', ')
+}
+
 // -----------------------------------------------------------------------------
 // --- formatters --------------------------------------------------------------
 // -----------------------------------------------------------------------------