playbook_ui 14.24.0 → 14.25.0.pre.alpha.testingcss9700

data/dist/chunks/pb_form_validation-D_g9rOE9.js

@@ -0,0 +1,60 @@
+import { P as PbEnhancedElement, d as debounce } from "./lib-CIetbXpr.js";
+const KIT_SELECTOR = '[class^="pb_"][class*="_kit"]';
+const ERROR_MESSAGE_SELECTOR = ".pb_body_kit_negative";
+const FORM_SELECTOR = 'form[data-pb-form-validation="true"]';
+const REQUIRED_FIELDS_SELECTOR = "input[required],textarea[required],select[required]";
+const FIELD_EVENTS = [
+  "change",
+  "valid",
+  "invalid"
+];
+class PbFormValidation extends PbEnhancedElement {
+  static get selector() {
+    return FORM_SELECTOR;
+  }
+  connect() {
+    this.formValidationFields.forEach((field) => {
+      FIELD_EVENTS.forEach((e) => {
+        field.addEventListener(e, debounce((event) => {
+          this.validateFormField(event);
+        }, 250), false);
+      });
+    });
+  }
+  validateFormField(event) {
+    event.preventDefault();
+    const { target } = event;
+    target.setCustomValidity("");
+    const isValid = event.target.validity.valid;
+    if (isValid) {
+      this.clearError(target);
+    } else {
+      this.showValidationMessage(target);
+    }
+  }
+  showValidationMessage(target) {
+    const { parentElement } = target;
+    this.clearError(target);
+    parentElement.closest(KIT_SELECTOR).classList.add("error");
+    const errorMessageContainer = this.errorMessageContainer;
+    if (target.dataset.message) target.setCustomValidity(target.dataset.message);
+    errorMessageContainer.innerHTML = target.validationMessage;
+    parentElement.appendChild(errorMessageContainer);
+  }
+  clearError(target) {
+    const { parentElement } = target;
+    parentElement.closest(KIT_SELECTOR).classList.remove("error");
+    const errorMessageContainer = parentElement.querySelector(ERROR_MESSAGE_SELECTOR);
+    if (errorMessageContainer) errorMessageContainer.remove();
+  }
+  get errorMessageContainer() {
+    const errorContainer = document.createElement("div");
+    const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, "");
+    errorContainer.classList.add(kitClassName);
+    return errorContainer;
+  }
+  get formValidationFields() {
+    return this._formValidationFields = this._formValidationFields || this.element.querySelectorAll(REQUIRED_FIELDS_SELECTOR);
+  }
+}
+window.PbFormValidation = PbFormValidation;

data/dist/chunks/vendor.js

@@ -1 +1,11 @@
-import"./_weekday_stacked-Cv8-Sf6X.js";import"./lazysizes-B7xYodB-.js";import"./_typeahead-CZL6rvfn.js";import"./_line_graph-BLS62QjW.js";import"./lib-DgtxnJqa.js";import"react/jsx-runtime";import"react";import"react-dom";import"react-trix";import"trix";import"react-is";
+import "./_weekday_stacked-D3dG14OB.js";
+import "./lazysizes-BUUj27EF.js";
+import "./_typeahead-CEqlHw0H.js";
+import "./_line_graph-DPTwfQR-.js";
+import "./lib-CIetbXpr.js";
+import "react/jsx-runtime";
+import "react";
+import "react-dom";
+import "react-trix";
+import "trix";
+import "react-is";

data/dist/menu.yml

@@ -57,7 +57,7 @@ kits:
     enhanced_element_used: true
   - name: column_configuration
     parent: advanced_table
-    kit_section: ["Column Visibility Control", "Column Visibility Control With State", "Column Visibility Control with Custom Dropdown", "Column Visibility Control with Multi-Header Columns", "Multi-Header Columns", "Multi-Header Columns (Multiple Levels)", "Multi-Header Columns with Custom Cells"]
+    kit_section: ["Column Visibility Control", "Column Visibility Control With State", "Column Visibility Control with Custom Dropdown", "Column Visibility Control with Multi-Header Columns", "Multi-Header Columns", "Multi-Header Columns (Multiple Levels)", "Multi-Header Columns with Custom Cells", "Multi-Header Columns with Vertical Borders"]
     platforms: *1
     status: stable
     icons_used: true
@@ -81,7 +81,7 @@ kits:
     enhanced_element_used: true
   - name: styling
     parent: advanced_table
-    kit_section: ["Collapsible Trail","Row Styling", "Column Styling", "Column Styling with Multiple Headers", "Column Group Border Color"]
+    kit_section: ["Collapsible Trail","Row Styling", "Padding Control using Row Styling", "Column Styling", "Column Styling with Multiple Headers", "Padding Control using Column Styling", "Column Group Border Color"]
     platforms: *1
     status: stable
     icons_used: true