playbook_ui 14.1.0.pre.alpha.PA1477timestampkit3536 → 14.1.0.pre.alpha.PBNTR462starratingdefaultvalue3579
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +3 -3
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.html.erb +1 -1
- data/app/pb_kits/playbook/pb_badge/_badge.scss +9 -0
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +8 -3
- data/app/pb_kits/playbook/pb_badge/badge.rb +1 -1
- data/app/pb_kits/playbook/pb_badge/badge.test.js +17 -11
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.html.erb +13 -0
- data/app/pb_kits/playbook/pb_badge/docs/_badge_notification.jsx +31 -12
- data/app/pb_kits/playbook/pb_button/_button.tsx +4 -1
- data/app/pb_kits/playbook/pb_button/button.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/button.rb +4 -0
- data/app/pb_kits/playbook/pb_date_time/dateTime.test.js +2 -2
- data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +3 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +4 -1
- data/app/pb_kits/playbook/pb_dialog/dialog.rb +3 -0
- data/app/pb_kits/playbook/pb_dialog/dialog.test.jsx +20 -1
- data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +21 -0
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb +4 -2
- data/app/pb_kits/playbook/pb_dialog/dialog_footer.rb +10 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +4 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb +13 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.jsx +46 -0
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.md +3 -0
- data/app/pb_kits/playbook/pb_dialog/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_dialog/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +43 -25
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +6 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +2 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +4 -4
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +4 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.scss +3 -0
- data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx +72 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/_gantt_chart_default.jsx +53 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_gantt_chart/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_gantt_chart/gantt_chart.test.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -2
- data/app/pb_kits/playbook/pb_pagination/_pagination.scss +49 -13
- data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +164 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx +19 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +62 -0
- data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +1 -0
- data/app/pb_kits/playbook/pb_pagination/docs/data.js +23 -0
- data/app/pb_kits/playbook/pb_pagination/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_pagination/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +0 -7
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +10 -5
- data/app/pb_kits/playbook/pb_rich_text_editor/_previewer_mixin.scss +132 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_tiptap_styles.scss +50 -76
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_preview.jsx +73 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +88 -41
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +4 -2
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +19 -0
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_display.tsx +0 -2
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +0 -1
- data/app/pb_kits/playbook/pb_time/_time.tsx +12 -8
- data/app/pb_kits/playbook/pb_time/time.html.erb +3 -3
- data/app/pb_kits/playbook/pb_time/time.rb +4 -0
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +2 -37
- data/app/pb_kits/playbook/tokens/_container.scss +21 -0
- data/app/pb_kits/playbook/utilities/_min_width.scss +45 -0
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +20 -3
- data/app/pb_kits/playbook/utilities/icons/allicons.tsx +59 -0
- data/app/pb_kits/playbook/utilities/icons/clock.svg +9 -0
- data/app/pb_kits/playbook/utilities/icons/spinner.svg +3 -0
- data/app/pb_kits/playbook/utilities/icons/times.svg +3 -0
- data/dist/chunks/_typeahead-nSyn1ajB.js +22 -0
- data/dist/chunks/_weekday_stacked-iq_X37be.js +45 -0
- data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
- data/dist/chunks/{lib-BE0Z3F7x.js → lib-D9uVVKnh.js} +2 -2
- data/dist/chunks/{pb_form_validation-TzZQ0Flx.js → pb_form_validation-u2wnZ3oe.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/menu.yml +4 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/spacing.rb +31 -2
- data/lib/playbook/version.rb +1 -1
- metadata +34 -10
- data/dist/chunks/_typeahead-D-4y9pbv.js +0 -22
- data/dist/chunks/_weekday_stacked-Cax4nrUa.js +0 -45
- data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
- /data/app/pb_kits/playbook/pb_pagination/docs/{_pagination_default.md → _pagination_default_rails.md} +0 -0
@@ -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/_typeahead-
|
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-nSyn1ajB.js";import"react/jsx-runtime";import"react";import"./chunks/lib-D9uVVKnh.js";import"react-dom";import"react-trix";import"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()));
|
data/dist/playbook-rails.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
import"./chunks/pb_form_validation-TzZQ0Flx.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-BE0Z3F7x.js";import"./chunks/lazysizes-DHz07jlL.js";import"./playbook-rails-react-bindings.js";import"react";import"webpacker-react";import"./chunks/_typeahead-D-4y9pbv.js";import"react/jsx-runtime";import"react-dom";import"react-trix";import"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 DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";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_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);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 hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.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_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.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}}const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_ID="star-rating-input";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_SELECTOR}connect(){this.element.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId)}));document.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=document.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=document.getElementById(STAR_RATING_INPUT_ID);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=document.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=document.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return document.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}}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();PbStarRating.start();
|
1
|
+
import"./chunks/pb_form_validation-u2wnZ3oe.js";import{P as PbEnhancedElement,a as datePickerHelper,b as dialogHelper,c as PbPopover,e as PbTooltip,f as PbTypeahead,g as PbTable,h as PbTextarea}from"./chunks/lib-D9uVVKnh.js";import"./chunks/lazysizes-B7xYodB-.js";import"./playbook-rails-react-bindings.js";import"react";import"webpacker-react";import"./chunks/_typeahead-nSyn1ajB.js";import"react/jsx-runtime";import"react-dom";import"react-trix";import"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 DROPDOWN_TRIGGER_DISPLAY="#dropdown_trigger_display";const DROPDOWN_PLACEHOLDER="[data-dropdown-placeholder]";const DROPDOWN_INPUT="#dropdown-selected-option";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_INPUT);if(option){const value=option.dataset.dropdownOptionLabel;hiddenInput.value=JSON.parse(value).id;this.clearFormValidation(hiddenInput);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 hiddenInput=this.element.querySelector(DROPDOWN_INPUT);hiddenInput.addEventListener("invalid",(function(event){if(hiddenInput.hasAttribute("required")&&hiddenInput.value===""){event.preventDefault();hiddenInput.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_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);const defaultValue=hiddenInput.dataset.defaultValue||"";hiddenInput.value=defaultValue;if(defaultValue){const selectedOption=Array.from(options).find((option=>JSON.parse(option.dataset.dropdownOptionLabel).id===defaultValue));selectedOption.classList.add("pb_dropdown_option_selected");this.setTriggerElementText(JSON.parse(selectedOption.dataset.dropdownOptionLabel).label)}}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.resetDropdownValue()}))}}resetDropdownValue(){const hiddenInput=this.element.querySelector(DROPDOWN_INPUT);const options=this.element.querySelectorAll(OPTION_SELECTOR);options.forEach((option=>{option.classList.remove("pb_dropdown_option_selected")}));hiddenInput.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}}const STAR_RATING_WRAPPER_SELECTOR="[data-pb-star-rating-wrapper]";const STAR_RATING_SELECTOR="[data-pb-star-rating]";const STAR_RATING_INPUT_DATA_SELECTOR="[data-pb-star-rating-input]";class PbStarRating extends PbEnhancedElement{static get selector(){return STAR_RATING_WRAPPER_SELECTOR}connect(){this.addEventListeners();this.handleFormReset();this.setDefaultValue()}addEventListeners(){this.element.querySelectorAll(STAR_RATING_SELECTOR).forEach((star=>{star.addEventListener("click",(event=>{const clickedStarId=event.currentTarget.id;this.updateStarColors(clickedStarId);this.updateHiddenInputValue(clickedStarId);this.clearFormValidation()}));star.addEventListener("mouseenter",(event=>{const hoveredStarId=event.currentTarget.id;this.updateStarHoverColors(hoveredStarId)}));star.addEventListener("mouseleave",(()=>{this.removeStarHoverColors()}));star.addEventListener("keydown",(event=>{if(event.key==="Enter"||event.key===" "){event.preventDefault();this.handleStarClick(star.id)}}))}))}handleStarClick(starId){this.updateStarColors(starId);this.updateHiddenInputValue(starId)}updateStarColors(clickedStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=clickedStarId){if(star.classList.contains("yellow_star")){icon.classList.add("yellow-star-selected")}else if(star.classList.contains("primary_star_light")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("primary_star_dark")){icon.classList.add("primary-star-selected")}else if(star.classList.contains("subtle_star_light")){icon.classList.add("subtle-star-selected")}else if(star.classList.contains("subtle_star_dark")){icon.classList.add("subtle-star-selected")}else{icon.classList.add("yellow-star-selected")}}else{icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}icon.classList.remove("star-hovered")}}))}updateHiddenInputValue(value){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput){hiddenInput.value=value}}updateStarHoverColors(hoveredStarId){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const starId=star.id;const icon=star.querySelector(".interactive-star-icon");if(icon){if(starId<=hoveredStarId){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.add("star-hovered")}}else{icon.classList.remove("star-hovered")}}}))}removeStarHoverColors(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){if(!icon.classList.contains("yellow-star-selected")&&!icon.classList.contains("primary-star-selected")&&!icon.classList.contains("subtle-star-selected")){icon.classList.remove("star-hovered")}}}))}isStarSelected(){return this.element.querySelectorAll(".yellow-star-selected, .primary-star-selected, .subtle-star-selected").length>0}handleFormReset(){const form=this.element.closest("form");if(form){form.addEventListener("reset",(()=>{this.updateHiddenInputValue("");this.resetStarRatingValues()}))}}resetStarRatingValues(){const allStars=this.element.querySelectorAll(STAR_RATING_SELECTOR);allStars.forEach((star=>{const icon=star.querySelector(".interactive-star-icon");if(icon){icon.classList.remove("yellow-star-selected","primary-star-selected","subtle-star-selected")}}))}clearFormValidation(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);if(hiddenInput.checkValidity()){const errorLabelElement=this.element.querySelector(".pb_body_kit_negative");if(errorLabelElement){errorLabelElement.remove()}}}setDefaultValue(){const hiddenInput=this.element.querySelector(STAR_RATING_INPUT_DATA_SELECTOR);const defaultValue=hiddenInput.value;if(defaultValue){this.updateStarColors(defaultValue)}}}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();PbStarRating.start();
|