playbook_ui 14.9.0.pre.alpha.PLAY1731inputmasking4868 → 14.9.0.pre.alpha.PLAY1731inputmasking4890

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b40a6d80e2e00552963c2986d6ae0e1bad26cd43320b0959b534e37f0e7d71fa
-  data.tar.gz: 52bb830750b5edc87fe3a4c670c944e1fcdf78764649ebcc708db45257694c0d
+  metadata.gz: ace04229d2b84d22c632f080832024432c4454ab7fcd274fdc941babe4b4c3e5
+  data.tar.gz: c950b28b5c9a9345f27eb1f7b3e4b732ff2db706cc7f55f868a67be87042dc42
 SHA512:
-  metadata.gz: c4f3b88e16a1efe2875d297f45e030854943cc62a8a8ddaf8629c6e6f674e54583e72bfe24d1185ef67de57b3e497597f0c328c427f362f6868b5b136e720541
-  data.tar.gz: 8d309708dbc3912906a4f2b73829fcff692c195b641bd352dee6e313409f74c6ba2c8ea782bbb4c8784a7ca5e5ee3ed5084e4cc147130e37bc9f5203e4cbdee2
+  metadata.gz: 8a29e24c59e3f6d6b819d65ecd3702134a15f7accedb68fc78c18c7e949249bd1eb203d562ab6bff6ec4cbae4b462a0086a128acee68c3d805831533d1695c14
+  data.tar.gz: d438301928055198fae77f828152f61dffa9e6f08cfdc47e7c612b14a1afee13d26575d6ed2ba65b49fe0b9f60f6ae5c52fb121da526a1e9dd5cb5ecb49aa16a

data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb

@@ -0,0 +1,95 @@
+<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["1", "2", "3"] }) do %>
+  <thead>
+    <tr>
+      <th id="1">Column 1</th>
+      <th id="2">Column 2</th>
+      <th id="3">Column 3</th>
+      <th>Column 4</th>
+      <th>Column 5</th>
+      <th>Column 6</th>
+      <th>Column 7</th>
+      <th>Column 8</th>
+      <th>Column 9</th>
+      <th>Column 10</th>
+      <th>Column 11</th>
+      <th>Column 12</th>
+      <th>Column 13</th>
+      <th>Column 14</th>
+      <th>Column 15</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+    <tr>
+      <td id="1">Value 1</td>
+      <td id="2">Value 2</td>
+      <td id="3">Value 3</td>
+      <td>Value 4</td>
+      <td>Value 5</td>
+      <td>Column 6</td>
+      <td>Column 7</td>
+      <td>Column 8</td>
+      <td>Column 9</td>
+      <td>Column 10</td>
+      <td>Column 11</td>
+      <td>Column 12</td>
+      <td>Column 13</td>
+      <td>Column 14</td>
+      <td>Column 15</td>
+
+    </tr>
+  </tbody>
+<% end %>

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

@@ -1,32 +1,106 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector(): string {
-    return '.table-responsive-collapse'
-  }
-
-  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/, ''));
+    private stickyLeftColumns: string[] = [];
+    private handleStickyColumnsRef: () => void;
+
+    static get selector(): string {
+      return '.table-responsive-collapse'
+    }
+
+    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])
+          })
+        })
+      });
+
+      // New sticky columns logic
+      this.initStickyColumns();
+    }
+
+    private initStickyColumns(): 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) {
+            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+            this.handleStickyColumns();
+            window.addEventListener('resize', this.handleStickyColumnsRef);
+          }
         }
       });
+    }
 
-      // 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])
-        })
-      })
-    })
-  }
-}
+    private handleStickyColumns(): 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`;
+
+          if (!isLastColumn) {
+            header.classList.add('with-border');
+            header.classList.remove('sticky-shadow');
+          } else {
+            header.classList.remove('with-border');
+            header.classList.add('sticky-shadow');
+          }
+
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        }
+
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+          if (!isLastColumn) {
+            cell.classList.add('with-border');
+            cell.classList.remove('sticky-shadow');
+          } else {
+            cell.classList.remove('with-border');
+            cell.classList.add('sticky-shadow');
+          }
+        });
+      });
+    }
+
+    // Cleanup method to remove event listener
+    disconnect(): void {
+      if (this.handleStickyColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyColumnsRef);
+      }
+    }
+}

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

@@ -18,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -23,6 +23,8 @@ module Playbook
       prop :text
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
+      prop :sticky_left_column, type: Playbook::Props::Array,
+                                default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -37,8 +39,8 @@ module Playbook
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, striped_class, outer_padding_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,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -73,6 +75,19 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
+      def sticky_left_column_class
+        if sticky_left_column.empty?
+          nil
+        else
+          sticky_col_classname = "sticky-left-column sticky-columns"
+          sticky_left_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_text_input/inputMask.ts

@@ -1,5 +1,5 @@
 type InputMask = {
-    format: (value: string) => string
+    format: (value: string | number) => string
     pattern: string
     placeholder: string
 }
@@ -8,8 +8,10 @@ type InputMaskDictionary = {
     [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
 }
 
-const formatCurrency = (value: string): string => {
-    const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
+const formatCurrency = (value: string | number): string => {
+    const valueString = typeof value === 'number' ? value.toString() : value;
+
+    const numericValue = valueString.replace(/[^0-9]/g, '').slice(0, 15)
 
     if (!numericValue) return ''
 
@@ -23,17 +25,23 @@ const formatCurrency = (value: string): string => {
     }).format(dollars)
 }
 
-const formatBasicPostal = (value: string): string => {
-    return value.replace(/\D/g, '').slice(0, 5)
+const formatBasicPostal = (value: string | number): string => {
+    const valueString = typeof value === 'number' ? value.toString() : value;
+
+    return valueString.replace(/\D/g, '').slice(0, 5)
 }
 
-const formatExtendedPostal = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+const formatExtendedPostal = (value: string | number): string => {
+    const valueString = typeof value === 'number' ? value.toString() : value;
+
+    const cleaned = valueString.replace(/\D/g, '').slice(0, 9)
     return cleaned.replace(/(\d{5})(?=\d)/, '$1-')
 }
 
-const formatSSN = (value: string): string => {
-    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+const formatSSN = (value: string | number): string => {
+    const valueString = typeof value === 'number' ? value.toString() : value;
+
+    const cleaned = valueString.replace(/\D/g, '').slice(0, 9)
     return cleaned
         .replace(/(\d{5})(?=\d)/, '$1-')
         .replace(/(\d{3})(?=\d)/, '$1-')