playbook_ui 13.33.0.pre.alpha.PLAY14143305 → 13.33.0.pre.alpha.PLAY14143306

Sign up to get free protection for your applications and to get access to all the features.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +3 -1
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +1 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +2 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleIcon.tsx +1 -2
  9. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +3 -4
  10. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +3 -1
  11. data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +2 -2
  12. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +4 -1
  13. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +3 -2
  14. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +5 -2
  15. data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.tsx +3 -1
  16. data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx +2 -1
  17. data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx +3 -1
  18. data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx +3 -1
  20. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -1
  21. data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.tsx +5 -1
  22. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +1 -1
  24. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +6 -1
  26. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +5 -1
  27. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +5 -1
  28. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +4 -2
  29. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +6 -1
  30. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +1 -1
  31. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +7 -8
  32. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js +1 -1
  33. data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor_advanced.test.js +2 -1
  34. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +2 -1
  36. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +2 -1
  37. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +1 -1
  38. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +2 -1
  39. data/dist/chunks/_typeahead.js +41 -0
  40. data/dist/chunks/_weekday_stacked.js +45 -1
  41. data/dist/chunks/lazysizes.js +1 -0
  42. data/dist/chunks/vendor.js +1 -1
  43. data/dist/playbook-doc.js +1 -1
  44. data/dist/playbook-rails-react-bindings.js +1 -1
  45. data/dist/playbook-rails.js +1 -1
  46. data/lib/playbook/version.rb +1 -1
  47. metadata +3 -2
  48. data/dist/chunks/_walkthrough.js +0 -66
@@ -1 +1 @@
1
- import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_walkthrough.js";import"react/jsx-runtime";import"react";import"./chunks/lib.js";import"react-is";import"react-dom";var ujs$1={};Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};var _default=ujs$1.default=ujs;WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,TreemapChart:TreemapChart,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});_default.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
1
+ import WebpackerReact from"webpacker-react";import{B as BarGraph,C as CircleChart,D as Dialog,a as DialogBody,b as DialogFooter,c as DialogHeader,d as DistributionBar,M as MultiLevelSelect,L as Legend,e as LineGraph,P as Passphrase,R as RichTextEditor,T as TreemapChart,f as Typeahead,G as Gauge,g as PhoneNumberInput}from"./chunks/_typeahead.js";import"react/jsx-runtime";import"react";import"./chunks/lib.js";import"react-dom";import"react-trix";import"react-is";var ujs$1={};Object.defineProperty(ujs$1,"__esModule",{value:true});var ujs={handleEvent:function handleEvent(eventName,callback){var _ref=arguments.length>2&&arguments[2]!==void 0?arguments[2]:{once:false},once=_ref.once;var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){if(once){$(document).one(eventName,callback)}else{$(document).on(eventName,callback)}}else{document.addEventListener(eventName,callback,{once:once})}},setup:function setup(onMount,onUnmount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;var Turbolinks=window.Turbolinks;if(typeof Turbolinks!=="undefined"&&Turbolinks.supported){if(typeof Turbolinks.EVENTS!=="undefined"){this.turbolinksClassic(onMount,onUnmount)}else if(typeof Turbolinks.controller!=="undefined"){this.turbolinks5(onMount,onUnmount)}else{this.turbolinksClassicDeprecated(onMount,onUnmount)}}else if($&&typeof $.pjax==="function"){this.pjax(onMount,onUnmount)}else{this.native(onMount)}},turbolinks5:function turbolinks5(onMount,onUnmount){this.handleEvent("turbolinks:load",onMount,{once:true});this.handleEvent("turbolinks:render",onMount);this.handleEvent("turbolinks:before-render",onUnmount)},turbolinksClassic:function turbolinksClassic(onMount,onUnmount){var Turbolinks=window.Turbolinks;this.handleEvent(Turbolinks.EVENTS.CHANGE,onMount);this.handleEvent(Turbolinks.EVENTS.BEFORE_UNLOAD,onUnmount)},turbolinksClassicDeprecated:function turbolinksClassicDeprecated(onMount,onUnmount){var Turbolinks=window.Turbolinks;Turbolinks.pagesCached(0);this.handleEvent("page:change",onMount);this.handleEvent("page:receive",onUnmount)},pjax:function pjax(onMount,onUnmount){this.handleEvent("ready",onMount);this.handleEvent("pjax:end",onMount);this.handleEvent("pjax:beforeReplace",onUnmount)},native:function native(onMount){var $=typeof window.jQuery!=="undefined"&&window.jQuery;if($){$((function(){return onMount()}))}else if("addEventListener"in window){document.addEventListener("DOMContentLoaded",onMount)}else{window.attachEvent("onload",onMount)}}};var _default=ujs$1.default=ujs;WebpackerReact.registerComponents({BarGraph:BarGraph,CircleChart:CircleChart,Dialog:Dialog,DialogBody:DialogBody,DialogFooter:DialogFooter,DialogHeader:DialogHeader,DistributionBar:DistributionBar,MultiLevelSelect:MultiLevelSelect,Legend:Legend,LineGraph:LineGraph,Passphrase:Passphrase,RichTextEditor:RichTextEditor,TreemapChart:TreemapChart,Typeahead:Typeahead,Gauge:Gauge,PhoneNumberInput:PhoneNumberInput});_default.setup((()=>WebpackerReact.mountComponents()),(()=>WebpackerReact.unmountComponents()));
@@ -1 +1 @@
1
- import"./chunks/pb_form_validation.js";import{P as PbEnhancedElement,d as datePickerHelper,a as dialogHelper,b as PbPopover,c as PbTooltip,e as PbTypeahead,f as PbTable,g as PbTextarea}from"./chunks/lib.js";import"./chunks/_walkthrough.js";import"./playbook-rails-react-bindings.js";import"react";import"react/jsx-runtime";import"react-is";import"react-dom";import"webpacker-react";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const INPUT_FORM_VALIDATION="#dropdown-form-validation";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector("#dropdown-selected-option");const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;inputFormValidation.value=JSON.parse(value).id;this.clearFormValidation(inputFormValidation);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);inputFormValidation.addEventListener("invalid",(function(event){if(inputFormValidation.hasAttribute("required")&&inputFormValidation.value===""){event.preventDefault();inputFormValidation.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector("#dropdown-selected-option");if(hiddenInput.value){const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);const defaultValue=JSON.parse(hiddenInput.value.replaceAll("=>",":"));const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{if(defaultValue.id===JSON.parse(option.dataset.dropdownOptionLabel).id){option.classList.add("pb_dropdown_option_selected")}}));this.setTriggerElementText(defaultValue.label);hiddenInput.value=defaultValue.id;inputFormValidation.value=defaultValue.id}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector("#dropdown-selected-option");const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);hiddenInput.value="";inputFormValidation.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";class PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}}const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();
1
+ import"./chunks/pb_form_validation.js";import{P as PbEnhancedElement,d as datePickerHelper,a as dialogHelper,b as PbPopover,c as PbTooltip,e as PbTypeahead,f as PbTable,g as PbTextarea}from"./chunks/lib.js";import"./chunks/lazysizes.js";import"./playbook-rails-react-bindings.js";import"react";import"webpacker-react";import"./chunks/_typeahead.js";import"react/jsx-runtime";import"react-dom";import"react-trix";import"react-is";const MAIN_SELECTOR="[data-collapsible-main]";const CONTENT_SELECTOR$1="[data-collapsible-content]";const DOWN_ARROW_SELECTOR$2="#collapsible_open_icon";const UP_ARROW_SELECTOR$2="#collapsible_close_icon";class PbCollapsible extends PbEnhancedElement{static get selector(){return MAIN_SELECTOR}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}));if(this.target.classList.contains("is-visible")){this.displayUpArrow()}else{this.displayDownArrow()}document.addEventListener(`${this.target.id}`,(()=>{this.toggleElement(this.target)}))}get target(){return this.element.parentNode.querySelector(CONTENT_SELECTOR$1)}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),300)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),300)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}toggleArrows(showDownArrow){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$2);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$2);if(downArrow){downArrow.style.display=showDownArrow?"inline-block":"none"}if(upArrow){upArrow.style.display=showDownArrow?"none":"inline-block"}}displayDownArrow(){this.toggleArrows(true)}displayUpArrow(){this.toggleArrows(false)}}class PbFixedConfirmationToast extends PbEnhancedElement{static get selector(){return".remove_toast"}connect(){this.self=this.element;this.autoCloseToast(this.self);this.self.addEventListener("click",(()=>{this.removeToast(this.self)}))}removeToast(elem){elem.parentNode.removeChild(elem)}autoCloseToast(element){const classListValues=element.classList.value;const hasAutoCloseClass=classListValues.includes("auto_close");if(hasAutoCloseClass){const classList=classListValues.split(" ");const autoCloseValue=classList[classList.length-1].split("_")[2];const autoCloseIntValue=parseInt(autoCloseValue);setTimeout((()=>{this.removeToast(element)}),autoCloseIntValue)}}}const OPTION_SELECTOR$1="[data-dropdown-option-label]";class PbDropdownKeyboard{constructor(dropdown){this.dropdown=dropdown;this.dropdownElement=dropdown.element;this.options=Array.from(this.dropdownElement.querySelectorAll(OPTION_SELECTOR$1));this.focusedOptionIndex=-1;this.init()}init(){this.dropdownElement.addEventListener("keydown",this.handleKeyDown.bind(this))}handleKeyDown(event){switch(event.key){case"ArrowDown":event.preventDefault();if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}this.moveFocus(1);break;case"ArrowUp":event.preventDefault();this.moveFocus(-1);break;case"Enter":event.preventDefault();if(this.focusedOptionIndex!==-1){this.selectOption()}else{if(!this.dropdown.target.classList.contains("open")){this.dropdown.showElement(this.dropdown.target);this.dropdown.updateArrowDisplay(true)}}break;case"Escape":this.dropdown.hideElement(this.dropdown.target);break;case"Tab":this.dropdown.hideElement(this.dropdown.target);this.dropdown.updateArrowDisplay(false);this.resetFocus();break}}moveFocus(direction){if(this.focusedOptionIndex!==-1){this.options[this.focusedOptionIndex].classList.remove("pb_dropdown_option_focused")}this.focusedOptionIndex=(this.focusedOptionIndex+direction+this.options.length)%this.options.length;this.options[this.focusedOptionIndex].classList.add("pb_dropdown_option_focused")}selectOption(){const option=this.options[this.focusedOptionIndex];this.dropdown.onOptionSelected(option.dataset.dropdownOptionLabel,option);this.dropdown.hideElement(this.dropdown.target)}}const DROPDOWN_SELECTOR="[data-pb-dropdown]";const TRIGGER_SELECTOR="[data-dropdown-trigger]";const CONTAINER_SELECTOR="[data-dropdown-container]";const DOWN_ARROW_SELECTOR$1="#dropdown_open_icon";const UP_ARROW_SELECTOR$1="#dropdown_close_icon";const OPTION_SELECTOR="[data-dropdown-option-label]";const CUSTOM_DISPLAY_SELECTOR="[data-dropdown-custom-trigger]";const INPUT_FORM_VALIDATION="#dropdown-form-validation";const DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";class PbDropdown extends PbEnhancedElement{static get selector(){return DROPDOWN_SELECTOR}get target(){return this.element.parentNode.querySelector(CONTAINER_SELECTOR)}connect(){this.keyboardHandler=new PbDropdownKeyboard(this);this.setDefaultValue();this.bindEventListeners();this.updateArrowDisplay(false);this.handleFormValidation();this.handleFormReset()}bindEventListeners(){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR)||this.element;customTrigger.addEventListener("click",(()=>this.toggleElement(this.target)));this.target.addEventListener("click",this.handleOptionClick.bind(this));document.addEventListener("click",this.handleDocumentClick.bind(this),true)}handleOptionClick(event){const option=event.target.closest(OPTION_SELECTOR);const hiddenInput=this.element.querySelector("#dropdown-selected-option");const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;inputFormValidation.value=JSON.parse(value).id;this.clearFormValidation(inputFormValidation);this.onOptionSelected(value,option)}}handleDocumentClick(event){if(this.isClickOutside(event)&&this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}isClickOutside(event){const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){return!customTrigger.contains(event.target)}else{const triggerElement=this.element.querySelector(TRIGGER_SELECTOR);const containerElement=this.element.parentNode.querySelector(CONTAINER_SELECTOR);const isOutsideTrigger=triggerElement?!triggerElement.contains(event.target):true;const isOutsideContainer=containerElement?!containerElement.contains(event.target):true;return isOutsideTrigger&&isOutsideContainer}}onOptionSelected(value,selectedOption){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);const customDisplayElement=this.element.querySelector("#dropdown_trigger_custom_display");if(triggerElement){const selectedLabel=JSON.parse(value).label;triggerElement.textContent=selectedLabel;if(customDisplayElement){customDisplayElement.style.display="block";customDisplayElement.style.paddingRight="8px"}}const customTrigger=this.element.querySelector(CUSTOM_DISPLAY_SELECTOR);if(customTrigger){if(this.target.classList.contains("open")){this.hideElement(this.target);this.updateArrowDisplay(false)}}const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));selectedOption.classList.add("pb_dropdown_option_selected")}showElement(elem){elem.classList.remove("close");elem.classList.add("open");elem.style.height=elem.scrollHeight+"px"}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.classList.add("close");elem.classList.remove("open");this.resetFocus()}),0)}resetFocus(){if(this.keyboardHandler){this.keyboardHandler.focusedOptionIndex=-1;const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>option.classList.remove("pb_dropdown_option_focused")))}}toggleElement(elem){if(elem.classList.contains("open")){this.hideElement(elem);this.updateArrowDisplay(false);return}this.showElement(elem);this.updateArrowDisplay(true)}updateArrowDisplay(isOpen){const downArrow=this.element.querySelector(DOWN_ARROW_SELECTOR$1);const upArrow=this.element.querySelector(UP_ARROW_SELECTOR$1);if(downArrow&&upArrow){downArrow.style.display=isOpen?"none":"inline-block";upArrow.style.display=isOpen?"inline-block":"none"}}handleFormValidation(){const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);inputFormValidation.addEventListener("invalid",(function(event){if(inputFormValidation.hasAttribute("required")&&inputFormValidation.value===""){event.preventDefault();inputFormValidation.closest(".dropdown_wrapper").classList.add("error")}}),true)}clearFormValidation(input){if(input.checkValidity()){const dropdownWrapperElement=input.closest(".dropdown_wrapper");dropdownWrapperElement.classList.remove("error");const errorLabelElement=dropdownWrapperElement.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector("#dropdown-selected-option");if(hiddenInput.value){const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);const defaultValue=JSON.parse(hiddenInput.value.replaceAll("=>",":"));const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{if(defaultValue.id===JSON.parse(option.dataset.dropdownOptionLabel).id){option.classList.add("pb_dropdown_option_selected")}}));this.setTriggerElementText(defaultValue.label);hiddenInput.value=defaultValue.id;inputFormValidation.value=defaultValue.id}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector("#dropdown-selected-option");const inputFormValidation=this.element.querySelector(INPUT_FORM_VALIDATION);hiddenInput.value="";inputFormValidation.value="";const defaultPlaceholder=this.element.querySelector(DROPDOWN_PLACEHOLDER);this.setTriggerElementText(defaultPlaceholder.dataset.dropdownPlaceholder)}setTriggerElementText(text){const triggerElement=this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);if(triggerElement){triggerElement.textContent=text}}}const ADVANCED_TABLE_SELECTOR="[data-advanced-table]";const CONTENT_SELECTOR='[data-advanced-table-content="id"]';const DOWN_ARROW_SELECTOR="#advanced-table_open_icon";const UP_ARROW_SELECTOR="#advanced-table_close_icon";class PbAdvancedTable extends PbEnhancedElement{static get selector(){return ADVANCED_TABLE_SELECTOR}get target(){return document.querySelector(CONTENT_SELECTOR.replace("id",this.element.id))}connect(){this.element.addEventListener("click",(()=>{this.toggleElement(this.target)}))}showElement(elem){const getHeight=()=>{elem.style.display="block";const height2=elem.scrollHeight+"px";elem.style.display="";return height2};const height=getHeight();elem.classList.add("is-visible");elem.style.height=height;elem.style.overflow="hidden";window.setTimeout((()=>{elem.style.height="";elem.style.overflow="visible"}),250)}hideElement(elem){elem.style.height=elem.scrollHeight+"px";window.setTimeout((()=>{elem.style.height="0";elem.style.paddingTop="0";elem.style.paddingBottom="0";elem.style.overflow="hidden"}),1);window.setTimeout((()=>{elem.classList.remove("is-visible");elem.style.overflow=""}),200)}toggleElement(elem){if(elem.classList.contains("is-visible")){this.hideElement(elem);this.displayDownArrow();return}this.showElement(elem);this.displayUpArrow()}displayDownArrow(){this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(UP_ARROW_SELECTOR).style.display="none"}displayUpArrow(){this.element.querySelector(UP_ARROW_SELECTOR).style.display="inline-block";this.element.querySelector(DOWN_ARROW_SELECTOR).style.display="none"}}const NAV_SELECTOR="[data-pb-nav-tab]";const NAV_ITEM_SELECTOR="[data-pb-tab-target]";class PbNav extends PbEnhancedElement{static get selector(){return NAV_SELECTOR}connect(){this.hideAndAddEventListeners()}hideAndAddEventListeners(){const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItem=>{if(!navItem.className.includes("active")){this.changeContentDisplay(navItem.dataset.pbTabTarget,"none")}navItem.addEventListener("click",(event=>this.handleNavItemClick(event)))}))}handleNavItemClick(event){event.preventDefault();const navItem=event.target.closest(NAV_ITEM_SELECTOR);this.changeContentDisplay(navItem.dataset.pbTabTarget,"block");const navItems=this.element.querySelectorAll(NAV_ITEM_SELECTOR);navItems.forEach((navItemSelected=>{if(navItem!==navItemSelected){this.changeContentDisplay(navItemSelected.dataset.pbTabTarget,"none")}}))}changeContentDisplay(contentId,display){const content=document.getElementById(contentId);content.style.display=display}}window.datePickerHelper=datePickerHelper;window.dialogHelper=dialogHelper;PbCollapsible.start();PbPopover.start();PbTooltip.start();PbFixedConfirmationToast.start();PbTypeahead.start();PbTable.start();PbTextarea.start();PbDropdown.start();PbAdvancedTable.start();PbNav.start();
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.33.0"
5
- VERSION = "13.33.0.pre.alpha.PLAY14143305"
5
+ VERSION = "13.33.0.pre.alpha.PLAY14143306"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.33.0.pre.alpha.PLAY14143305
4
+ version: 13.33.0.pre.alpha.PLAY14143306
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -2980,8 +2980,9 @@ files:
2980
2980
  - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
2981
2981
  - app/pb_kits/playbook/utilities/text.ts
2982
2982
  - app/pb_kits/playbook/utilities/validEmojiChecker.ts
2983
- - dist/chunks/_walkthrough.js
2983
+ - dist/chunks/_typeahead.js
2984
2984
  - dist/chunks/_weekday_stacked.js
2985
+ - dist/chunks/lazysizes.js
2985
2986
  - dist/chunks/pb_form_validation.js
2986
2987
  - dist/chunks/vendor.js
2987
2988
  - dist/menu.yml