playbook_ui 14.11.1.pre.alpha.responsivetablerails5364 → 14.12.0.pre.alpha.PBNTR720railscarddraggable5649

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,108 +1,207 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
-export default class PbTable extends PbEnhancedElement {
-    private stickyLeftColumns: string[] = [];
-    private handleStickyLeftColumnsRef: () => void;
-
-    static get selector(): string {
-      return '.table-responsive-collapse'
-    }
+const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
+const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
 
-    connect(): void {
-      const tables = document.querySelectorAll('.table-responsive-collapse');
-      // Each Table
-      [].forEach.call(tables, (table: HTMLTableElement) => {
-        // Header Titles
-        const headers: string[] = [];
-        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-            const colSpan = header.colSpan
-            for (let i = 0; i < colSpan; i++) {
-              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
-            }
-        });
-        // for each row in tbody
-        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          // for each cell
-          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            // apply the attribute
-            cell.setAttribute('data-title', headers[headerIndex])
-          })
-        })
+export default class PbTable extends PbEnhancedElement {
+  stickyLeftColumns: string[] = [];
+  stickyRightColumns: string[] = [];
+  stickyRightColumnsReversed: string[] = [];
+
+  static get selector(): string {
+    return TABLE_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    if (this.element.classList.contains('table-responsive-collapse')) {
+      const headers: string[] = [];
+
+      [].forEach.call(this.element.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+        const colSpan = header.colSpan
+        for (let i = 0; i < colSpan; i++) {
+          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+        }
       });
 
-      // New sticky columns logic
-      this.initStickyLeftColumns();
+      [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+          cell.setAttribute('data-title', headers[headerIndex])
+        })
+      })
     }
 
-    private initStickyLeftColumns(): void {
-      // Find tables with sticky-left-column class
-      const tables = document.querySelectorAll('.sticky-left-column');
-
-      tables.forEach((table) => {
-        // Extract sticky left column IDs by looking at the component's class
-        const classList = Array.from(table.classList);
-
-        // Look for classes in the format sticky-left-column-{ids}
-        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
-        if (stickyColumnClass) {
-          // Extract the IDs from the class name
-          this.stickyLeftColumns = stickyColumnClass
-              .replace('sticky-columns-', '')
-              .split('-');
-
-          if (this.stickyLeftColumns.length > 0) {
-            setTimeout(() => {
-              this.handleStickyLeftColumnsRef = this.handleStickyLeftColumns.bind(this);
-              this.handleStickyLeftColumns();
-              window.addEventListener('resize', this.handleStickyLeftColumnsRef);
-            }, 10);
-          }
+    this.initStickyLeftColumns();
+    this.initStickyRightColumns();
+    this.handleCollapsibleClick();
+    this.handleCollapsibleRow();
+  }
+
+  initStickyLeftColumns() {
+    const table = this.element.querySelector('.sticky-left-column');
+
+    if (table) {
+      const classList = Array.from(table.classList);
+      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-left-columns-ids-'));
+
+      if (stickyColumnClass) {
+        this.stickyLeftColumns = stickyColumnClass
+          .replace('sticky-left-columns-ids-', '')
+          .split('-');
+
+        if (this.stickyLeftColumns.length > 0) {
+          setTimeout(() => {
+            this.handleStickyLeftColumns();
+            window.addEventListener('resize', () => this.handleStickyLeftColumns());
+          }, 10);
         }
-      });
+      }
     }
+  }
+
+  handleStickyLeftColumns() {
+    let accumulatedWidth = 0;
+
+    this.stickyLeftColumns.forEach((colId, index) => {
+      const isLastColumn = index === this.stickyLeftColumns.length - 1;
+      const header = this.element.querySelector(`th[id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+
+      if (header) {
+        header.classList.add('sticky');
+        (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+
+        if (!isLastColumn) {
+          header.classList.add('with-border-right');
+          header.classList.remove('sticky-left-shadow');
+        } else {
+          header.classList.remove('with-border-right');
+          header.classList.add('sticky-left-shadow');
+        }
 
-    private handleStickyLeftColumns(): void {
-      let accumulatedWidth = 0;
-
-      this.stickyLeftColumns.forEach((colId, index) => {
-        const isLastColumn = index === this.stickyLeftColumns.length - 1;
-        const header = document.querySelector(`th[id="${colId}"]`);
-        const cells = document.querySelectorAll(`td[id="${colId}"]`);
-
-        if (header) {
-          header.classList.add('sticky');
-          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+        accumulatedWidth += (header as HTMLElement).offsetWidth;
+      }
 
-          if (!isLastColumn) {
-            header.classList.add('with-border-right');
-            header.classList.remove('sticky-left-shadow');
-          } else {
-            header.classList.remove('with-border-right');
-            header.classList.add('sticky-left-shadow');
-          }
+      cells.forEach((cell) => {
+        cell.classList.add('sticky');
+        (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        if (!isLastColumn) {
+          cell.classList.add('with-border-right');
+          cell.classList.remove('sticky-left-shadow');
+        } else {
+          cell.classList.remove('with-border-right');
+          cell.classList.add('sticky-left-shadow');
         }
+      });
+    });
+  }
+
+  initStickyRightColumns() {
+    const table = this.element.querySelector('.sticky-right-column');
+
+    if (table) {
+      const classList = Array.from(table.classList);
+      const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-right-columns-ids-'));
+
+      if (stickyColumnClass) {
+        this.stickyRightColumns = stickyColumnClass
+          .replace('sticky-right-columns-ids-', '')
+          .split('-');
+        this.stickyRightColumnsReversed = this.stickyRightColumns.reverse();
+
+        if (this.stickyRightColumns.length > 0) {
+          setTimeout(() => {
+            this.handleStickyRightColumns();
+            window.addEventListener('resize', () => this.handleStickyRightColumns());
+          }, 10);
+        }
+      }
+    }
+  }
+
+  handleStickyRightColumns() {
+    let accumulatedWidth = 0;
+
+    this.stickyRightColumnsReversed.forEach((colId, index) => {
+      const isLastColumn = index === this.stickyRightColumns.length - 1;
+      const header = this.element.querySelector(`th[id="${colId}"]`);
+      const cells = this.element.querySelectorAll(`td[id="${colId}"]`);
+
+      if (header) {
+        header.classList.add('sticky');
+        (header as HTMLElement).style.right = `${accumulatedWidth}px`;
+
+        if (!isLastColumn) {
+          header.classList.add('with-border-left');
+          header.classList.remove('sticky-right-shadow');
+        } else {
+          header.classList.remove('with-border-right');
+          header.classList.add('sticky-right-shadow');
+        }
+
+        accumulatedWidth += (header as HTMLElement).offsetWidth;
+      }
 
-        cells.forEach((cell) => {
-          cell.classList.add('sticky');
-          (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+      cells.forEach((cell) => {
+        cell.classList.add('sticky');
+        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-          if (!isLastColumn) {
-            cell.classList.add('with-border-right');
-            cell.classList.remove('sticky-left-shadow');
-          } else {
-            cell.classList.remove('with-border-right');
-            cell.classList.add('sticky-left-shadow');
-          }
+        if (!isLastColumn) {
+          cell.classList.add('with-border-left');
+          cell.classList.remove('sticky-right-shadow');
+        } else {
+          cell.classList.remove('with-border-left');
+          cell.classList.add('sticky-right-shadow');
+        }
+      });
+    });
+  }
+
+  handleCollapsibleClick() {
+    const collapsibleElements = this.element.querySelectorAll(TABLE_COLLAPSIBLE_WRAPPER_SELECTOR);
+    collapsibleElements.forEach((collapsibleElement) => {
+      collapsibleElement.addEventListener('click', (event) => {
+        document.dispatchEvent(new CustomEvent(`collapsed-toggle${(event.currentTarget as HTMLElement).id}`))
+
+        const toggleElements = this.element.querySelectorAll(`.collapsible_border_toggle${(event.currentTarget as HTMLElement).id}`);
+        toggleElements.forEach(element => {
+          element.classList.toggle('no-border');
+          element.classList.toggle('border-active');
         });
+      })
+    })
+  }
+
+  handleCollapsibleRow() {
+    const collapsibleRows = this.element.querySelectorAll('.pb_table_collapsible_row');
+    if (collapsibleRows.length > 0) {
+      collapsibleRows.forEach((row) => {
+        const previousRow = row.previousElementSibling;
+
+        if (
+          previousRow &&
+          previousRow.tagName === 'TR'
+        ) {
+          const tdCount = previousRow.querySelectorAll('td').length;
+          const collapsibleTd = row.querySelector('td');
+          if (collapsibleTd) {
+            collapsibleTd.colSpan = tdCount;
+          }
+        } else {
+          return
+        }
       });
     }
+  }
 
-    // Cleanup method to remove event listener
-    disconnect(): void {
-      if (this.handleStickyLeftColumnsRef) {
-        window.removeEventListener('resize', this.handleStickyLeftColumnsRef);
-      }
+  // Cleanup method to remove event listener
+  disconnect() {
+    if (this.stickyLeftColumns.length > 0) {
+      window.removeEventListener('resize', () => this.handleStickyLeftColumns());
+    }
+
+    if (this.stickyRightColumns.length > 0) {
+      window.removeEventListener('resize', () => this.handleStickyRightColumns());
     }
-}
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -32,4 +32,16 @@
       }
     }
   }
+
+  .collapsible-tr {
+    cursor: pointer;
+  }
+
+  .no-border {
+    border-bottom: none !important;
+  }
+  
+  .border-active {
+    border-bottom: 1px;
+  }
 }

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,4 +1,5 @@
 @import "../../tokens/screen_sizes";
+@import "../../tokens/border_radius";
 
 .table-responsive-scroll {
     overflow-x: scroll;
@@ -27,7 +28,7 @@
     @media (max-width: 1600px) {
         &[class*="table-responsive-scroll"] {
                 &:has(> table.table-card) {
-                    border-radius: 4px;
+                    border-radius: $border_rad_light;
                     box-shadow: 1px 0 0 0px $border_light,
                         -1px 0 0 0px $border_light
                 }

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -4,7 +4,7 @@
   <% responsive_class = nil %>
 <% end %>
 
-<%= content_tag(:div, class: responsive_class) do %>
+<%= content_tag(:div, class: responsive_class, 'data-pb-table-wrapper' => true) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,

data/app/pb_kits/playbook/pb_table/table.rb

@@ -25,6 +25,8 @@ module Playbook
                     default: false
       prop :sticky_left_column, type: Playbook::Props::Array,
                                 default: []
+      prop :sticky_right_column, type: Playbook::Props::Array,
+                                 default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -40,7 +42,7 @@ module Playbook
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
           disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -83,7 +85,7 @@ module Playbook
         if sticky_left_column.empty?
           nil
         else
-          sticky_col_classname = "sticky-left-column sticky-columns"
+          sticky_col_classname = "sticky-left-column sticky-left-columns-ids"
           sticky_left_column.each do |id|
             sticky_col_classname += "-#{id}"
           end
@@ -92,6 +94,19 @@ module Playbook
         end
       end
 
+      def sticky_right_column_class
+        if sticky_right_column.empty?
+          nil
+        else
+          sticky_col_classname = "sticky-right-column sticky-right-columns-ids"
+          sticky_right_column.each do |id|
+            sticky_col_classname += "-#{id}"
+          end
+
+          sticky_col_classname
+        end
+      end
+
       def striped_class
         striped ? "striped" : nil
       end

data/app/pb_kits/playbook/pb_table/table_row.html.erb

@@ -1,4 +1,23 @@
-<% if object.tag == "table" %>
+<% if object.collapsible && object.tag == "table" %>
+    <%= content_tag(:tr,
+    aria: object.aria,
+    class: object.classname + " collapsible-tr",
+    data: object.data.merge(id: object.id),  
+    id: object.id,
+    'data-pb-table-collapsible-wrapper' => true,
+    **combined_html_options) do %>
+    <%= content.presence %>
+  <% end %>
+
+  <tr class="pb_table_collapsible_row">
+    <%= pb_rails("collapsible", props: { classname: "collapsible_border_toggle#{object.id}" + " no-border", name: "default-example", tag: "td", padding: "none" }) do %>
+       <%= pb_rails("flex", props: { data: { "collapsible-main": "true"} }) %>
+       <%= pb_rails("collapsible/collapsible_content", props: { classname: object.collapsible_side_highlight ? "table_collapsible_side_highlight" : "", padding: "none", margin: "none", id: "collapsed-toggle#{object.id}" }) do %>
+          <%= object.collapsible_content %>
+      <% end %>
+    <% end %>  
+  </tr>
+<% elsif object.tag == "table" %>
     <%= content_tag(:tr,
       aria: object.aria,
       class: object.classname,

data/app/pb_kits/playbook/pb_table/table_row.rb

@@ -8,6 +8,11 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :collapsible, type: Playbook::Props::Boolean,
+                         default: false
+      prop :collapsible_content
+      prop :collapsible_side_highlight, type: Playbook::Props::Boolean,
+                                        default: false
 
       def classname
         generate_classname("pb_table_row_kit", side_highlight_class) + tag_class

data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts

@@ -0,0 +1,22 @@
+export const addDataTitle = () => {
+    const tables = document.querySelectorAll('.table-responsive-collapse');
+    // Each Table
+    [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+                headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+            // for each cell
+            [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+                // apply the attribute
+                cell.setAttribute('data-title', headers[headerIndex])
+            })
+        })
+    });
+}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.html.erb

@@ -0,0 +1,46 @@
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    placeholder:"$0.00"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "ZIP Code",
+    mask: "zip_code",
+    margin_bottom: "md",
+    placeholder: "12345"
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "Postal Code",
+    mask: "postal_code",
+    placeholder: "12345-6789",
+    margin_bottom: "md",
+  }) %>
+
+  <%= pb_rails("text_input", props: {
+    label: "SSN",
+    mask: "ssn",
+    margin_bottom: "md",
+    placeholder: "123-45-6789"
+  }) %>
+
+  <%= pb_rails("title" , props: {
+    text: "Hidden Input Under The Hood",
+    padding_bottom: "sm"
+  })%>
+
+  <%= pb_rails("text_input", props: {
+    label: "Currency",
+    mask: "currency",
+    margin_bottom: "md",
+    name: "currency_name",
+    id: "example-currency",
+    placeholder: "$0.00",
+  }) %>
+
+<style>
+#example-currency-sanitized {display: flex !important;}
+</style>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask_rails.md

@@ -0,0 +1,3 @@
+The mask prop lets you style your inputs while maintaining the value that the user typed in.
+
+It uses a hidden input field to submit the unformatted value as it will have the proper `name` attribute. It will also copy the id field with a `"#{your-id-sanitized}"`

data/app/pb_kits/playbook/pb_text_input/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_options: Input Options
+  - text_input_mask: Mask
   react:
   - text_input_default: Default
   - text_input_error: With Error
@@ -23,4 +24,4 @@ examples:
     - text_input_error_swift: With Error
     - text_input_disabled_swift: Disabled
     - text_input_add_on_swift: Add On
-    - text_input_props_swift: ""
+    - text_input_props_swift: ""

data/app/pb_kits/playbook/pb_text_input/index.js

@@ -0,0 +1,103 @@
+export default class PbTextInput {
+  static start() {
+    const inputElements = document.querySelectorAll('[data-pb-input-mask="true"]');
+
+    inputElements.forEach((inputElement) => {
+      inputElement.addEventListener("input", (event) => {
+        const maskType = inputElement.getAttribute("mask");
+        const cursorPosition = inputElement.selectionStart;
+
+        let rawValue = event.target.value;
+        let formattedValue = rawValue;
+
+        // Apply formatting based on the mask type
+        switch (maskType) {
+          case "currency":
+            formattedValue = formatCurrency(rawValue);
+            break;
+          case "ssn":
+            formattedValue = formatSSN(rawValue);
+            break;
+          case "postal_code":
+            formattedValue = formatPostalCode(rawValue);
+            break;
+          case "zip_code":
+            formattedValue = formatZipCode(rawValue);
+            break;
+        }
+
+        // Update the sanitized input field in the same wrapper
+        const sanitizedInput = inputElement
+          .closest(".text_input_wrapper")
+          ?.querySelector('[data="sanitized-pb-input"]');
+
+        if (sanitizedInput) {
+          switch (maskType) {
+            case "ssn":
+              sanitizedInput.value = sanitizeSSN(formattedValue);
+              break;
+            case "currency":
+              sanitizedInput.value = sanitizeCurrency(formattedValue);
+              break;
+            default:
+              sanitizedInput.value = formattedValue; 
+          }
+        }
+
+        inputElement.value = formattedValue;
+        setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue);
+      });
+    });
+
+  }
+}
+
+function formatCurrency(value) {
+  const numericValue = value.replace(/[^0-9]/g, "").slice(0, 15);
+
+  if (!numericValue) return "";
+
+  const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2));
+  if (dollars === 0) return "";
+
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    maximumFractionDigits: 2,
+  }).format(dollars);
+}
+
+function formatSSN(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned
+    .replace(/(\d{5})(?=\d)/, "$1-")
+    .replace(/(\d{3})(?=\d)/, "$1-");
+}
+
+function formatZipCode(value) {
+  return value.replace(/\D/g, "").slice(0, 5);
+}
+
+function formatPostalCode(value) {
+  const cleaned = value.replace(/\D/g, "").slice(0, 9);
+  return cleaned.replace(/(\d{5})(?=\d)/, "$1-");
+}
+
+function sanitizeSSN(input) {
+  return input.replace(/\D/g, ""); 
+}
+
+function sanitizeCurrency(input) {
+  return input.replace(/[$,]/g, ""); 
+}
+
+// function to set cursor position
+function setCursorPosition(inputElement, cursorPosition, rawValue, formattedValue) {
+  const difference = formattedValue.length - rawValue.length;
+
+  const newPosition = Math.max(0, cursorPosition + difference);
+
+  requestAnimationFrame(() => {
+    inputElement.setSelectionRange(newPosition, newPosition);
+  });
+}

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -13,9 +13,13 @@
       <%= pb_rails("text_input/add_on", props: object.add_on_props) do %>
         <%= input_tag %>
       <% end %>
+    <% elsif mask.present? %>
+      <%= input_tag %>
+      <%= tag(:input, data: "sanitized-pb-input", id: sanitized_id, name: object.name, style: "display: none;") %>
     <% else %>
       <%= input_tag %>
     <% end %>
     <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
+