playbook_ui 14.11.1.pre.alpha.PLAY1751pbcontenttagpt25529 → 14.11.1.pre.alpha.pbntr703collapsiblerowsrails5536

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5e7aeb4eded2d7207beaad9aaac806a7287567e5fa319c711e37c0b6e7fb5a06
-  data.tar.gz: af7059a43605656c61fea4ee409ae64a7adf807fb655aafdc760027c45b0afcf
+  metadata.gz: 6a968d08aaa4af48a9fac9eb0fc5191c8d738b7fd5a6514064cc864a25a1e283
+  data.tar.gz: af0da5b80ce2adb3d94a96caf5d5ed489d35a01f5b15e00a50eb6691ab9f95ff
 SHA512:
-  metadata.gz: 855ee14b770f338f48795930c8aa870974b3a524b6a2d87cafd20b8d397cc08343acc0005ff6a7e49cfa0b287dc6153154e7ef361ea01e26f050a7ee47eadf5b
-  data.tar.gz: 7cf27552a3d85aa92fb440ee752fe8cf5b2b7cd153ee4ca558209ecb6821075e461f41e852ab1714ddbbf87d27c610c3da9d0b9765c666e03d4d0b1830764b96
+  metadata.gz: 42767c7d834ab7d1da43a081d310276dd141f23a53a9ad1a6cb48c52f57f713e802d2e490e6956ecfe6f835b10fe3bf54d953d406fd1054c05e40d55fec12b24
+  data.tar.gz: c37bd39bfbbfcafa7905258522be6c18c9d96734530a99ae7467c6a2bc427f1cca041b3efdfee89352fc99cc0d51b9fe8e6d7b96da65ec5872bbe3f3feab3bbc

data/app/pb_kits/playbook/pb_collapsible/collapsible.html.erb

@@ -1,3 +1,5 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(
+  object.tag
+) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_collapsible/collapsible.rb

@@ -3,6 +3,9 @@
 module Playbook
   module PbCollapsible
     class Collapsible < Playbook::KitBase
+      prop :tag, type: Playbook::Props::Enum,
+                 values: %w[h1 h2 h3 h4 h5 h6 p div span tr th td thead col],
+                 default: "div"
       def classname
         generate_classname("pb_collapsible_kit")
       end

data/app/pb_kits/playbook/pb_file_upload/file_upload.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag("div",
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
       <%= pb_rails("form_group", props: {cursor: "pointer", full_width: object.full_width}) do %>
         <label
           for="upload-<%= object.id %>"

data/app/pb_kits/playbook/pb_filter/filter.html.erb

@@ -1,4 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    id: object.id,
+    data: object.data,
+    class: object.classname,
+    **combined_html_options) do %>
     <%= object.wrapper do %>
       <%= pb_rails("flex", props: { orientation: "row", padding_right: "lg", vertical: "center" }) do %>
         <% if (object.template != "sort_only") %>

data/app/pb_kits/playbook/pb_form_group/form_group.html.erb

@@ -1,3 +1,8 @@
-<%= pb_content_tag(:div) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <%= content.presence %>
 <% end %>

data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb

@@ -1,4 +1,4 @@
-<%= pb_content_tag(:div, class: object.classname + object.size_class, tabindex: object.tabindex) do %>
+<%= content_tag(:div, id: object.id, data: object.data, class: object.classname + object.size_class, tabindex: object.tabindex, **combined_html_options) do %>
   <% if object.name.present? %>
     <%= pb_rails("avatar", props: { name: object.name, image_url: object.avatar_url, size: "xxs" }) %>
     <% if object.truncate %>

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

@@ -0,0 +1,47 @@
+<% content = capture do %>
+    <%= pb_rails("card", props: { border_none: true, border_radius: "none", padding: "md" }) do %>
+        <%= pb_rails("body", props: { text: "Nested content inside a Table Row" }) %>
+    <% end %>
+<% end %>
+
+<%= pb_rails("table", props: { size: "sm" }) do %>
+  <%= pb_rails("table/table_head") do %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+          <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>
+          <%= pb_rails("table/table_header", props: { text: ""}) %>
+       <% end %>
+  <% end %>
+  <%= pb_rails("table/table_body") do %>
+      <%= pb_rails("table/table_row", props: { collapsible: true, collapsible_content: content, collapsible_side_highlight: true, id: "1" }) do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text_align: "right"}) do %>
+            <%= pb_rails("icon", props: { icon: "chevron-down", fixed_width: true, color: "primary" }) %>
+          <% end %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+      <%= pb_rails("table/table_row") do %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+          <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+          <%= pb_rails("table/table_cell", props: { text: ""}) %>
+      <% end %>
+  <% end %>
+<% end %>
+  

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_rails.md

@@ -0,0 +1,2 @@
+The `collapsible` prop can be used on any Table Row to add a collapsible area. Use the additional `collapsible_content` prop to add any content to the collapsible Row.
+Please be aware that you will need to pass in an `id` to any table rows you want to be collapsible. Make sure every `id` is unique if you are using multipe collapsibles.

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

@@ -30,6 +30,7 @@ examples:
     - table_with_subcomponents_rails: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
+    - table_with_collapsible: Table with Collapsible
 
   react:
     - table_sm: Small

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

@@ -1,167 +1,207 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 const TABLE_WRAPPER_SELECTOR = "[data-pb-table-wrapper]";
+const TABLE_COLLAPSIBLE_WRAPPER_SELECTOR = "[data-pb-table-collapsible-wrapper]";
 
 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[] = [];
+  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/, ''));
+        }
+      });
 
-        [].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/, ''));
-            }
-        });
-  
-        [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-            cell.setAttribute('data-title', headers[headerIndex])
-          })
+      [].forEach.call(this.element.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+          cell.setAttribute('data-title', headers[headerIndex])
         })
-      }
-
-      this.initStickyLeftColumns();
-      this.initStickyRightColumns();
+      })
     }
 
-    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);
-          }
+    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');
+        }
 
-    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`;
+        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');
         }
-
-        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-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);
-          }
+    });
+  }
+
+  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');
+        }
 
-    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`;
+        accumulatedWidth += (header as HTMLElement).offsetWidth;
+      }
 
-          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');
-          }
+      cells.forEach((cell) => {
+        cell.classList.add('sticky');
+        (cell as HTMLElement).style.right = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
 
-          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        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');
         }
-
-        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-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() {
-      if (this.stickyLeftColumns.length > 0) {
-        window.removeEventListener('resize', () => this.handleStickyLeftColumns());
-      }
+  // 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());
-      }
+    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/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/dist/chunks/{_typeahead-TN5aDUj9.js → _typeahead-DjGX1O4K.js}

@@ -1,4 +1,4 @@
-import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-OFT985dg.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
+import{jsx as jsx$1,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{createContext,useReducer,useEffect,useMemo,useContext,useRef,createElement,useState,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{r as getDefaultExportFromCjs,x as filter,y as omit,u as useCollapsible,j as getAllIcons,z as get,q as commonjsGlobal,w as colors$1,t as highchartsTheme,A as merge,s as highchartsDarkTheme,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-kMuhBuU7.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";import{TrixEditor}from"react-trix";import Trix from"trix";import require$$0 from"react-is";const initialState={items:[],dragData:{id:"",initialGroup:""},isDragging:"",activeContainer:""};const reducer=(state,action)=>{switch(action.type){case"SET_ITEMS":return Object.assign(Object.assign({},state),{items:action.payload});case"SET_DRAG_DATA":return Object.assign(Object.assign({},state),{dragData:action.payload});case"SET_IS_DRAGGING":return Object.assign(Object.assign({},state),{isDragging:action.payload});case"SET_ACTIVE_CONTAINER":return Object.assign(Object.assign({},state),{activeContainer:action.payload});case"CHANGE_CATEGORY":return Object.assign(Object.assign({},state),{items:state.items.map((item=>item.id===action.payload.itemId?Object.assign(Object.assign({},item),{container:action.payload.container}):item))});case"REORDER_ITEMS":{const{dragId:dragId,targetId:targetId}=action.payload;const newItems=[...state.items];const draggedItem=newItems.find((item=>item.id===dragId));const draggedIndex=newItems.indexOf(draggedItem);const targetIndex=newItems.findIndex((item=>item.id===targetId));newItems.splice(draggedIndex,1);newItems.splice(targetIndex,0,draggedItem);return Object.assign(Object.assign({},state),{items:newItems})}default:return state}};const DragContext=createContext({});const DraggableContext=()=>useContext(DragContext);const DraggableProvider=({children:children,initialItems:initialItems,onReorder:onReorder,onDragStart:onDragStart,onDragEnter:onDragEnter,onDragEnd:onDragEnd,onDrop:onDrop,onDragOver:onDragOver})=>{const[state,dispatch]=useReducer(reducer,initialState);useEffect((()=>{dispatch({type:"SET_ITEMS",payload:initialItems})}),[initialItems]);useEffect((()=>{onReorder(state.items)}),[state.items]);const handleDragStart=(id,container)=>{dispatch({type:"SET_DRAG_DATA",payload:{id:id,initialGroup:container}});dispatch({type:"SET_IS_DRAGGING",payload:id});if(onDragStart)onDragStart(id,container)};const handleDragEnter=(id,container)=>{if(state.dragData.id!==id){dispatch({type:"REORDER_ITEMS",payload:{dragId:state.dragData.id,targetId:id}});dispatch({type:"SET_DRAG_DATA",payload:{id:state.dragData.id,initialGroup:container}})}if(onDragEnter)onDragEnter(id,container)};const handleDragEnd=()=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});if(onDragEnd)onDragEnd()};const changeCategory=(itemId,container)=>{dispatch({type:"CHANGE_CATEGORY",payload:{itemId:itemId,container:container}})};const handleDrop=container=>{dispatch({type:"SET_IS_DRAGGING",payload:""});dispatch({type:"SET_ACTIVE_CONTAINER",payload:""});changeCategory(state.dragData.id,container);if(onDrop)onDrop(container)};const handleDragOver=(e,container)=>{e.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e,container)};const contextValue=useMemo((()=>({items:state.items,dragData:state.dragData,isDragging:state.isDragging,activeContainer:state.activeContainer,handleDragStart:handleDragStart,handleDragEnter:handleDragEnter,handleDragEnd:handleDragEnd,handleDrop:handleDrop,handleDragOver:handleDragOver})),[state]);return jsx$1(DragContext.Provider,Object.assign({value:contextValue},{children:children}),void 0)};var classnames$1={exports:{}};
 /*!
 	Copyright (c) 2018 Jed Watson.
 	Licensed under the MIT License (MIT), see

data/dist/chunks/{_weekday_stacked-BcnpLG66.js → _weekday_stacked-s8bX_aFg.js}

@@ -1,4 +1,4 @@
-import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,useMemo,useReducer,Fragment as Fragment$1,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,n as Collapsible,o as globalInlineProps,F as Flex,I as Icon,p as FlexItem,q as Body$1,r as Caption,A as Avatar,s as domSafeProps,t as Title,S as SectionSeparator,u as DialogContext,v as Draggable,w as TextInput,x as PropTypes,y as Card,z as noop$4,E as isEmpty,H as PbReactPopover,J as CircleIconButton,K as Button,N as HighchartsReact,O as Badge,Q as joinPresent,U as titleize,V as IconCircle,W as Image,X as Checkbox,Y as Radio}from"./_typeahead-TN5aDUj9.js";import{u as useCollapsible,j as getAllIcons,D as DateTime$1,a as datePickerHelper,k as useDropdown,o as omitBy,l as isEmpty$1,m as map,p as partial,n as find$1,q as commonjsGlobal,r as getDefaultExportFromCjs,s as highchartsDarkTheme,t as highchartsTheme,v as noop$5,w as colors,i as PbTextarea}from"./lib-OFT985dg.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";var ls_attrchange={exports:{}};(function(module){(function(window2,factory){if(!window2){return}var globalInstall=function(){factory(window2.lazySizes);window2.removeEventListener("lazyunveilread",globalInstall,true)};factory=factory.bind(null,window2,window2.document);if(module.exports){factory(requireLazysizes())}else if(window2.lazySizes){globalInstall()}else{window2.addEventListener("lazyunveilread",globalInstall,true)}})(typeof window!="undefined"?window:0,(function(window2,document2,lazySizes){var addObserver=function(){var connect,disconnect,observer,connected;var lsCfg=lazySizes.cfg;var attributes={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1};var regClassTest="(\\s|^)("+lsCfg.loadedClass;var docElem=document2.documentElement;var setClass=function(target){lazySizes.rAF((function(){lazySizes.rC(target,lsCfg.loadedClass);if(lsCfg.unloadedClass){lazySizes.rC(target,lsCfg.unloadedClass)}lazySizes.aC(target,lsCfg.lazyClass);if(target.style.display=="none"||target.parentNode&&target.parentNode.style.display=="none"){setTimeout((function(){lazySizes.loader.unveil(target)}),0)}}))};var onMutation=function(mutations){var i,len,mutation,target;for(i=0,len=mutations.length;i<len;i++){mutation=mutations[i];target=mutation.target;if(!target.getAttribute(mutation.attributeName)){continue}if(target.localName=="source"&&target.parentNode){target=target.parentNode.querySelector("img")}if(target&&regClassTest.test(target.className)){setClass(target)}}};if(lsCfg.unloadedClass){regClassTest+="|"+lsCfg.unloadedClass}regClassTest+="|"+lsCfg.loadingClass+")(\\s|$)";regClassTest=new RegExp(regClassTest);attributes[lsCfg.srcAttr]=1;attributes[lsCfg.srcsetAttr]=1;if(window2.MutationObserver){observer=new MutationObserver(onMutation);connect=function(){if(!connected){connected=true;observer.observe(docElem,{subtree:true,attributes:true,attributeFilter:Object.keys(attributes)})}};disconnect=function(){if(connected){connected=false;observer.disconnect()}}}else{docElem.addEventListener("DOMAttrModified",function(){var runs;var modifications=[];var callMutations=function(){onMutation(modifications);modifications=[];runs=false};return function(e){if(connected&&attributes[e.attrName]&&e.newValue){modifications.push({target:e.target,attributeName:e.attrName});if(!runs){setTimeout(callMutations);runs=true}}}}(),true);connect=function(){connected=true};disconnect=function(){connected=false}}addEventListener("lazybeforeunveil",disconnect,true);addEventListener("lazybeforeunveil",connect);addEventListener("lazybeforesizes",disconnect,true);addEventListener("lazybeforesizes",connect);connect();removeEventListener("lazybeforeunveil",addObserver)};addEventListener("lazybeforeunveil",addObserver)}))})(ls_attrchange);
+import{r as requireLazysizes}from"./lazysizes-B7xYodB-.js";import{jsx,Fragment,jsxs}from"react/jsx-runtime";import*as React from"react";import React__default,{useEffect,createContext,useContext,useState,useCallback,createElement,forwardRef,useRef,useImperativeHandle,useMemo,useReducer,Fragment as Fragment$1,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,n as Collapsible,o as globalInlineProps,F as Flex,I as Icon,p as FlexItem,q as Body$1,r as Caption,A as Avatar,s as domSafeProps,t as Title,S as SectionSeparator,u as DialogContext,v as Draggable,w as TextInput,x as PropTypes,y as Card,z as noop$4,E as isEmpty,H as PbReactPopover,J as CircleIconButton,K as Button,N as HighchartsReact,O as Badge,Q as joinPresent,U as titleize,V as IconCircle,W as Image,X as Checkbox,Y as Radio}from"./_typeahead-DjGX1O4K.js";import{u as useCollapsible,j as getAllIcons,D as DateTime$1,a as datePickerHelper,k as useDropdown,o as omitBy,l as isEmpty$1,m as map,p as partial,n as find$1,q as commonjsGlobal,r as getDefaultExportFromCjs,s as highchartsDarkTheme,t as highchartsTheme,v as noop$5,w as colors,i as PbTextarea}from"./lib-kMuhBuU7.js";import*as ReactDOM from"react-dom";import ReactDOM__default,{createPortal}from"react-dom";var ls_attrchange={exports:{}};(function(module){(function(window2,factory){if(!window2){return}var globalInstall=function(){factory(window2.lazySizes);window2.removeEventListener("lazyunveilread",globalInstall,true)};factory=factory.bind(null,window2,window2.document);if(module.exports){factory(requireLazysizes())}else if(window2.lazySizes){globalInstall()}else{window2.addEventListener("lazyunveilread",globalInstall,true)}})(typeof window!="undefined"?window:0,(function(window2,document2,lazySizes){var addObserver=function(){var connect,disconnect,observer,connected;var lsCfg=lazySizes.cfg;var attributes={"data-bgset":1,"data-include":1,"data-poster":1,"data-bg":1,"data-script":1};var regClassTest="(\\s|^)("+lsCfg.loadedClass;var docElem=document2.documentElement;var setClass=function(target){lazySizes.rAF((function(){lazySizes.rC(target,lsCfg.loadedClass);if(lsCfg.unloadedClass){lazySizes.rC(target,lsCfg.unloadedClass)}lazySizes.aC(target,lsCfg.lazyClass);if(target.style.display=="none"||target.parentNode&&target.parentNode.style.display=="none"){setTimeout((function(){lazySizes.loader.unveil(target)}),0)}}))};var onMutation=function(mutations){var i,len,mutation,target;for(i=0,len=mutations.length;i<len;i++){mutation=mutations[i];target=mutation.target;if(!target.getAttribute(mutation.attributeName)){continue}if(target.localName=="source"&&target.parentNode){target=target.parentNode.querySelector("img")}if(target&&regClassTest.test(target.className)){setClass(target)}}};if(lsCfg.unloadedClass){regClassTest+="|"+lsCfg.unloadedClass}regClassTest+="|"+lsCfg.loadingClass+")(\\s|$)";regClassTest=new RegExp(regClassTest);attributes[lsCfg.srcAttr]=1;attributes[lsCfg.srcsetAttr]=1;if(window2.MutationObserver){observer=new MutationObserver(onMutation);connect=function(){if(!connected){connected=true;observer.observe(docElem,{subtree:true,attributes:true,attributeFilter:Object.keys(attributes)})}};disconnect=function(){if(connected){connected=false;observer.disconnect()}}}else{docElem.addEventListener("DOMAttrModified",function(){var runs;var modifications=[];var callMutations=function(){onMutation(modifications);modifications=[];runs=false};return function(e){if(connected&&attributes[e.attrName]&&e.newValue){modifications.push({target:e.target,attributeName:e.attrName});if(!runs){setTimeout(callMutations);runs=true}}}}(),true);connect=function(){connected=true};disconnect=function(){connected=false}}addEventListener("lazybeforeunveil",disconnect,true);addEventListener("lazybeforeunveil",connect);addEventListener("lazybeforesizes",disconnect,true);addEventListener("lazybeforesizes",connect);connect();removeEventListener("lazybeforeunveil",addObserver)};addEventListener("lazybeforeunveil",addObserver)}))})(ls_attrchange);
 /**
    * table-core
    *