playbook_ui 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.alpha.revert3916revert3893PBNTR667railstypeaheadformintegration4565

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b2b5ad03216b06c9f37e1792a0b208efbfd3d44b79f73696e1a3b006f89228c
-  data.tar.gz: 282f44cd7aee29b4bc0ca84396be2a914a3786e91c8b308c5e7f284b84d4d74c
+  metadata.gz: fbcc7537aa0ece4caf4a922f2b49f40be79668e3cb793727a882184285669f05
+  data.tar.gz: 15d4b8d7216b62376bddd4da158f9bbb74b4eb9abbb88b88f7e425af6d0ad8df
 SHA512:
-  metadata.gz: 0b14587326a80d3f8a7663ab14df6c51720aae8ad3a3492370dd853a956292a7b80901b2782e6ea04fbdb37b38d7810490234b4396bc9c891158432c208578f4
-  data.tar.gz: a1f50ae88764cf79258478662bd9cd294b394d8c3cbd3c96580045ba2a5a67c3d924d9ee0170daf134ca9400078c4709c18dff06ea98927392f412343b5d7216
+  metadata.gz: 03e07711563ef5c12a4785ad6f01d1168d9360f9a4881ea8c86bd1a878991c611c9cf4e2a27b14c8355469e18c6516fe2fe0fa6426ed8960ee7e7600631648e5
+  data.tar.gz: ab58d3db94e12e61aac2e00804a200681452b909cbfb4ac17d57a62a56f6003ea23909551e7ebf5739f6840ded08bcb6f08180a8395536aad982eb2683cd0988

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -23,7 +23,7 @@
 %>
 
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
-  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
+  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -92,7 +92,7 @@
     const selectedUserData = JSON.parse(selectedUserJSON)
 
     // set the input field's value
-    event.target.querySelector('input[name=example_user]').value = selectedUserData.login
+    event.target.querySelector('input[name=example_typeahead]').value = selectedUserData.login
 
     // log the selected option's dataset
     console.log('The selected user data:')

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb

@@ -1,5 +1,5 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, loading: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field_loading, props: { label: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -22,23 +22,74 @@
 %>
 
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
-  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
-  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
-  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
-  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
-  <%= form.password_field :example_password_field, props: { label: true, required: true } %>
-  <%= form.url_field :example_url_field, props: { label: true, required: true } %>
-  <%= form.text_area :example_text_area, props: { label: true, required: true } %>
-  <%= form.dropdown_field :example_dropdown, props: { label: true, options: example_dropdown_options, required: true } %>
-  <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
-  <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
+  <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
+  <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
+  <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
+  <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
+  <%= form.password_field :example_password_field_validation, props: { label: true, required: true } %>
+  <%= form.url_field :example_url_field_validation, props: { label: true, required: true } %>
+  <%= form.text_area :example_text_area_validation, props: { label: true, required: true } %>
+  <%= form.dropdown_field :example_dropdown_validation, props: { label: true, options: example_dropdown_options, required: true } %>
+  <%= form.select :example_select_validation, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.collection_select :example_collection_select_validation, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, required: true } %>
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true } %>
-  <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true, required: true } %>
+  <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>
     <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
   <% end %>
 <% end %>
+
+<!-- form.typeahead user results example template -->
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
+
+<!-- form.typeahead JS example implementation -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample2) return
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.children[0].dataset.user = JSON.stringify(user)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
+  })
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample2) return
+
+    const selectedUserJSON = event.detail.selected.firstElementChild.dataset.user
+    const selectedUserData = JSON.parse(selectedUserJSON)
+
+    // set the input field's value
+    event.target.querySelector('input[name=example_typeahead_validation]').value = selectedUserData.login
+
+    // log the selected option's dataset
+    console.log('The selected user data:')
+    console.dir(selectedUserData)
+
+    // do even more with the data later - TBD
+    event.target.dataset.user = selectedUserJSON
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -2,7 +2,6 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 [class^=pb_typeahead_kit] {
   .typeahead-kit-select__option {
@@ -100,7 +99,6 @@
     .typeahead-kit-select__menu {
       background-color: $bg_dark;
       color: $white;
-      z-index: $z_1;
     }
     .typeahead-kit-select__option:hover {
       background-color: $active_dark;
@@ -184,7 +182,6 @@
   }
  
   .typeahead-kit-select__menu {
-    z-index: $z_1;
     .typeahead-kit-select__menu-list {
       padding: 0;
     }

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

@@ -4,11 +4,12 @@ import { debounce } from 'lodash'
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
   _resultsElement: HTMLElement
-  _debouncedSearch: Function
+  _debouncedSearch: () => void // changed - diff
   _resultsLoadingIndicator: HTMLElement
   _resultOptionTemplate: HTMLElement
   _resultsOptionCache: Map<string, Array<DocumentFragment>>
   _searchContext: string
+  _validSelection: boolean // changed - new
 
   static get selector() {
     return '[data-pb-typeahead-kit]'
@@ -19,6 +20,7 @@ export default class PbTypeahead extends PbEnhancedElement {
     this.searchInput.addEventListener('focus', () => this.debouncedSearch())
     this.searchInput.addEventListener('input', () => this.debouncedSearch())
     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event))
+    // this.element.closest('form')?.addEventListener('submit', (event) => this.handleFormSubmission(event)) // changed - new
   }
 
   handleKeydown(event: KeyboardEvent) {
@@ -86,12 +88,44 @@ export default class PbTypeahead extends PbEnhancedElement {
     const resultOption = (event.target as Element).closest('[data-result-option-item]')
     if (!resultOption) return
 
+    this._validSelection = true // changed - new
+    this.removeValidationError() // changed - new
+
     this.resultsCacheClear()
     this.searchInputClear()
     this.clearResults()
 
     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', { bubbles: true, detail: { selected: resultOption, typeahead: this } }))
   }
+  // changed - new
+  removeValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'none'
+      }
+      this.searchInput.classList.remove('error')
+    }
+  }
+  // changed - new
+  showValidationError() {
+    const inputWrapper = this.searchInput.closest('.text_input_wrapper')
+    if (inputWrapper) {
+      const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement
+      if (errorMessage) {
+        errorMessage.style.display = 'block'
+      }
+      this.searchInput.classList.add('error')
+    }
+  }
+  // changed - new
+  // handleFormSubmission(event: Event) {
+  //   if (!this._validSelection) {
+  //     this.showValidationError()
+  //     event.preventDefault()
+  //   }
+  // }
 
   clearResults() {
     this.resultsElement.innerHTML = ''
@@ -201,8 +235,263 @@ export default class PbTypeahead extends PbEnhancedElement {
   }
 
   toggleResultsLoadingIndicator(visible: boolean) {
-    var visibilityProperty = '0'
+    let visibilityProperty = '0' // changed - diff
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
 }
+
+// import PbEnhancedElement from '../pb_enhanced_element';
+// import { debounce } from 'lodash';
+
+// export default class PbTypeahead extends PbEnhancedElement {
+//   _searchInput: HTMLInputElement;
+//   _resultsElement: HTMLElement;
+//   _debouncedSearch: () => void;
+//   _resultsLoadingIndicator: HTMLElement;
+//   _resultOptionTemplate: HTMLElement;
+//   _resultsOptionCache: Map<string, Array<DocumentFragment>>;
+//   _searchContext: string;
+//   _validSelection: boolean;
+
+//   static get selector() {
+//     return '[data-pb-typeahead-kit]';
+//   }
+
+//   connect() {
+//     this.element.addEventListener('keydown', (event: KeyboardEvent) => this.handleKeydown(event));
+//     this.searchInput.addEventListener('focus', () => this.debouncedSearch());
+//     this.searchInput.addEventListener('input', () => this.debouncedSearch());
+//     this.resultsElement.addEventListener('click', (event: MouseEvent) => this.optionSelected(event));
+//     // this.attachFormSubmissionHandler();
+//   }
+
+//   // attachFormSubmissionHandler() {
+//   //   const formElement = this.element.closest('form');
+//   //   if (formElement) {
+//   //     formElement.addEventListener('submit', (event: Event) => {
+//   //       if (!this._validSelection) {
+//   //         this.showValidationError();
+//   //         event.preventDefault();
+//   //       }
+//   //     });
+//   //   }
+//   // }
+
+//   handleKeydown(event: KeyboardEvent) {
+//     if (event.key === 'ArrowUp') {
+//       event.preventDefault();
+//       this.focusPreviousOption();
+//     } else if (event.key === 'ArrowDown') {
+//       event.preventDefault();
+//       this.focusNextOption();
+//     }
+//   }
+
+//   search() {
+//     if (this.searchTerm.length < parseInt(this.searchTermMinimumLength)) {
+//       return this.clearResults();
+//     }
+
+//     this.toggleResultsLoadingIndicator(true);
+//     this.showResults();
+
+//     const searchTerm = this.searchTerm;
+//     const searchContext = this.searchContext;
+//     const search = {
+//       searchingFor: searchTerm,
+//       searchingContext: searchContext,
+//       setResults: (results: Array<DocumentFragment>) => {
+//         this.resultsCacheUpdate(searchTerm, searchContext, results);
+//       },
+//     };
+//     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-search', { bubbles: true, detail: search }));
+//   }
+
+//   resultsCacheUpdate(searchTerm: string, searchContext: string, results: Array<DocumentFragment>) {
+//     const searchTermAndContext = this.cacheKeyFor(searchTerm, searchContext);
+//     if (this.resultsOptionCache.has(searchTermAndContext)) {
+//       this.resultsOptionCache.delete(searchTermAndContext);
+//     }
+//     if (this.resultsOptionCache.size > 32) {
+//       this.resultsOptionCache.delete(this.resultsOptionCache.keys().next().value);
+//     }
+
+//     this.resultsOptionCache.set(searchTermAndContext, results);
+//     this.showResults();
+//   }
+
+//   resultsCacheClear() {
+//     this.resultsOptionCache.clear();
+//   }
+
+//   get debouncedSearch() {
+//     return this._debouncedSearch = (
+//       this._debouncedSearch ||
+//       debounce(this.search, parseInt(this.searchDebounceTimeout)).bind(this)
+//     );
+//   }
+
+//   showResults() {
+//     if (!this.resultsOptionCache.has(this.searchTermAndContext)) return;
+
+//     this.toggleResultsLoadingIndicator(false);
+//     this.clearResults();
+//     for (const result of this.resultsOptionCache.get(this.searchTermAndContext)) {
+//       this.resultsElement.appendChild(this.newResultOption(result.cloneNode(true)));
+//     }
+//     for (const result of this.resultsElement.querySelectorAll('[data-result-option-item]')) {
+//       result.addEventListener('mousedown', (event: MouseEvent) => this.optionSelected(event));
+//     }
+//   }
+
+//   optionSelected(event: MouseEvent) {
+//     const resultOption = (event.target as Element).closest('[data-result-option-item]');
+//     if (!resultOption) return;
+
+//     this._validSelection = true;
+//     this.removeValidationError();
+
+//     this.resultsCacheClear();
+//     this.searchInputClear();
+//     this.clearResults();
+
+//     this.element.dispatchEvent(new CustomEvent('pb-typeahead-kit-result-option-selected', {
+//       bubbles: true,
+//       detail: { selected: resultOption, typeahead: this },
+//     }));
+//   }
+
+//   removeValidationError() {
+//     const inputWrapper = this.searchInput.closest('.text_input_wrapper');
+//     if (inputWrapper) {
+//       const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement;
+//       if (errorMessage) {
+//         errorMessage.style.display = 'none';
+//       }
+//       this.searchInput.classList.remove('error');
+//     }
+//   }
+
+//   showValidationError() {
+//     const inputWrapper = this.searchInput.closest('.text_input_wrapper');
+//     if (inputWrapper) {
+//       const errorMessage = inputWrapper.querySelector('.pb_body_kit_negative') as HTMLElement;
+//       if (errorMessage) {
+//         errorMessage.style.display = 'block';
+//       }
+//       this.searchInput.classList.add('error');
+//     }
+//   }
+
+//   clearResults() {
+//     this.resultsElement.innerHTML = '';
+//   }
+
+//   newResultOption(content: DocumentFragment) {
+//     const resultOption = (this.resultOptionTemplate as HTMLTemplateElement).content.cloneNode(true) as Element;
+//     resultOption.querySelector('slot[name="content"]').replaceWith(content);
+//     return resultOption;
+//   }
+
+//   focusPreviousOption() {
+//     const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem);
+//     const previousIndex = currentIndex - 1;
+//     const previousOptionItem = (
+//       this.resultOptionItems[previousIndex] ||
+//       this.resultOptionItems[this.resultOptionItems.length - 1]
+//     );
+//     (previousOptionItem as HTMLElement).focus();
+//   }
+
+//   focusNextOption() {
+//     const currentIndex = this.resultOptionItems.indexOf(this.currentSelectedResultOptionItem);
+//     const nextIndex = currentIndex + 1;
+//     const nextOptionItem = (
+//       this.resultOptionItems[nextIndex] ||
+//       this.resultOptionItems[0]
+//     );
+//     (nextOptionItem as HTMLElement).focus();
+//   }
+
+//   get resultOptionItems() {
+//     return Array.from(this.resultsElement.querySelectorAll('[data-result-option-item]'));
+//   }
+
+//   get currentSelectedResultOptionItem() {
+//     return document.activeElement.closest('[data-result-option-item]');
+//   }
+
+//   get searchInput() {
+//     return this._searchInput = (this._searchInput || this.element.querySelector('input[type="search"]'));
+//   }
+
+//   get searchTerm() {
+//     return this.searchInput.value;
+//   }
+
+//   get searchContext() {
+//     if (this._searchContext) return this._searchContext;
+
+//     const selector = (this.element as HTMLElement).dataset.searchContextValueSelector;
+//     if (selector) return ((
+//       this.element.parentNode.querySelector(selector) ||
+//       this.element.closest(selector)
+//     ) as HTMLInputElement).value;
+
+//     return null;
+//   }
+
+//   set searchContext(value) {
+//     this._searchContext = value;
+//   }
+
+//   get searchTermAndContext() {
+//     return this.cacheKeyFor(this.searchTerm, this.searchContext);
+//   }
+
+//   cacheKeyFor(searchTerm: string, searchContext: string) {
+//     return [searchTerm, JSON.stringify(searchContext)].join();
+//   }
+
+//   searchInputClear() {
+//     this.searchInput.value = '';
+//   }
+
+//   get searchTermMinimumLength() {
+//     return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchTermMinimumLength;
+//   }
+
+//   get searchDebounceTimeout() {
+//     return (this.element as HTMLElement).dataset.pbTypeaheadKitSearchDebounceTimeout;
+//   }
+
+//   get resultsElement() {
+//     return this._resultsElement = (this._resultsElement || this.element.querySelector('[data-pb-typeahead-kit-results]'));
+//   }
+
+//   get resultOptionTemplate() {
+//     return this._resultOptionTemplate = (
+//       this._resultOptionTemplate ||
+//       this.element.querySelector('template[data-pb-typeahead-kit-result-option]')
+//     );
+//   }
+
+//   get resultsOptionCache() {
+//     return this._resultsOptionCache = (
+//       this._resultsOptionCache ||
+//       new Map
+//     );
+//   }
+
+//   get resultsLoadingIndicator() {
+//     return this._resultsLoadingIndicator = (
+//       this._resultsLoadingIndicator ||
+//       this.element.querySelector('[data-pb-typeahead-kit-loading-indicator]')
+//     );
+//   }
+
+//   toggleResultsLoadingIndicator(visible: boolean) {
+//     this.resultsLoadingIndicator.style.opacity = visible ? '1' : '0';
+//   }
+// }

data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb

@@ -17,11 +17,14 @@
       <%= pb_rails("text_input", props: {
         type: "search",
         input_options: object.input_options,
-        label: object.label,
         name: object.name,
         value: object.value,
         placeholder: object.placeholder,
         margin_bottom: "none",
+        required: object.required,
+        validation: object.validation,
+        label: object.label,
+        id: object.input_options[:id],
       }) %>
       <%= pb_rails("list", props: { ordered: false, borderless: false, xpadding: true, role: "status", aria: { live: "polite" }, data: { pb_typeahead_kit_results: true } }) do %>
       <% end %>
@@ -33,4 +36,4 @@
       <% end %>
     </template>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -40,6 +40,10 @@ module Playbook
       prop :pill_color, type: Playbook::Props::Enum,
                         values: %w[primary neutral success warning error info data_1 data_2 data_3 data_4 data_5 data_6 data_7 data_8 windows siding roofing doors gutters solar insulation accessories],
                         default: "primary"
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+      prop :validation, type: Playbook::Props::HashProp,
+                        default: {}
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

data/dist/chunks/{_typeahead-D0PihN_3.js → _typeahead-IoHUnHeF.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,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-BC6ESsxG.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=(e2,container)=>{e2.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e2,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,createElement,useState,useRef,forwardRef,useLayoutEffect,useCallback,useImperativeHandle,Component,Fragment as Fragment$1}from"react";import{q as getDefaultExportFromCjs,w as filter,x as omit,j as getAllIcons,y as get,n as commonjsGlobal,v as colors$1,s as highchartsTheme,z as merge,r as highchartsDarkTheme,A as useCollapsible,B as getAugmentedNamespace,C as createPopper,E as uniqueId,F as typography,G as cloneDeep,H as isString}from"./lib-SyD3buPZ.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=(e2,container)=>{e2.preventDefault();dispatch({type:"SET_ACTIVE_CONTAINER",payload:container});if(onDragOver)onDragOver(e2,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-uMIX8f-A.js → _weekday_stacked-BuaqHM9z.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,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,F as Flex,I as Icon,n as FlexItem,o as Body$1,p as Caption,A as Avatar,q as domSafeProps,r as Title,S as SectionSeparator,s as DialogContext,t as Draggable,u as TextInput,_ as __awaiter,v as __generator,w as __spread,x as PropTypes,y as Card,z as noop$3,E as PbReactPopover,H as CircleIconButton,J as Button,K as HighchartsReact,N as Badge,O as joinPresent,Q as titleize,U as IconCircle,V as Image,W as Checkbox,X as Radio}from"./_typeahead-D0PihN_3.js";import{h as PbTable,j as getAllIcons,D as DateTime$1,a as datePickerHelper,u as useDropdown,o as omitBy,k as isEmpty,m as map,p as partial,l as find$1,n as commonjsGlobal,q as getDefaultExportFromCjs,r as highchartsDarkTheme,s as highchartsTheme,t as noop$4,v as colors,i as PbTextarea}from"./lib-BC6ESsxG.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,Fragment as Fragment$1,useReducer,useMemo,useLayoutEffect,isValidElement}from"react";import{h as buildAriaProps,i as buildDataProps,j as buildHtmlProps,k as classnames,l as globalProps,m as buildCss,F as Flex,I as Icon,n as FlexItem,o as Body$1,p as Caption,A as Avatar,q as domSafeProps,r as Title,S as SectionSeparator,s as DialogContext,t as Draggable,u as TextInput,_ as __awaiter,v as __generator,w as __spread,x as PropTypes,y as Card,z as noop$3,E as PbReactPopover,H as CircleIconButton,J as Button,K as HighchartsReact,N as Badge,O as joinPresent,Q as titleize,U as IconCircle,V as Image,W as Checkbox,X as Radio}from"./_typeahead-IoHUnHeF.js";import{h as PbTable,j as getAllIcons,D as DateTime$1,a as datePickerHelper,u as useDropdown,o as omitBy,k as isEmpty,m as map,p as partial,l as find$1,n as commonjsGlobal,q as getDefaultExportFromCjs,r as highchartsDarkTheme,s as highchartsTheme,t as noop$4,v as colors,i as PbTextarea}from"./lib-SyD3buPZ.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
  *