@nyaruka/temba-components 0.129.1 → 0.129.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/build.yml +6 -5
- package/.github/workflows/coverage.yml +80 -0
- package/CHANGELOG.md +32 -0
- package/README.md +6 -0
- package/check-coverage.js +133 -0
- package/demo/components/alert/example.html +71 -0
- package/demo/components/button/example.html +167 -0
- package/demo/{chart → components/chart}/example.html +3 -3
- package/demo/components/chart/horizontal-demo.html +160 -0
- package/demo/components/checkbox/example.html +68 -0
- package/demo/components/compose/example.html +69 -0
- package/demo/components/datepicker/example.html +3 -3
- package/demo/components/datepicker/range-picker-demo.html +2 -2
- package/demo/{dialog → components/dialog}/example.html +3 -3
- package/demo/components/dropdown/example.html +95 -0
- package/demo/{flow → components/flow}/example.html +1 -1
- package/demo/{misc → components/misc}/example.html +3 -3
- package/demo/components/progress/example.html +62 -0
- package/demo/components/select/drag-and-drop.html +162 -0
- package/demo/components/select/example.html +76 -0
- package/demo/components/select/multi.html +72 -0
- package/demo/components/slider/example.html +55 -0
- package/demo/{sortable-list → components/sortable-list}/example.html +3 -3
- package/demo/components/tabs/example.html +91 -0
- package/demo/{textinput → components/textinput}/completion.html +3 -3
- package/demo/components/textinput/example.html +141 -0
- package/demo/{webchat → components/webchat}/example.html +3 -3
- package/demo/data/flows/sample-flow.json +107 -100
- package/demo/index.html +21 -21
- package/demo/static/css/styles.css +253 -0
- package/demo/sticky-note-demo.html +88 -85
- package/demo/styles.css +24 -0
- package/dist/locales/es.js +5 -5
- package/dist/locales/es.js.map +1 -1
- package/dist/locales/fr.js +5 -5
- package/dist/locales/fr.js.map +1 -1
- package/dist/locales/locale-codes.js +2 -11
- package/dist/locales/locale-codes.js.map +1 -1
- package/dist/locales/pt.js +5 -5
- package/dist/locales/pt.js.map +1 -1
- package/dist/temba-components.js +893 -476
- package/dist/temba-components.js.map +1 -1
- package/generate-coverage-badge.sh +69 -0
- package/out-tsc/src/{vectoricon/index.js → Icons.js} +1 -1
- package/out-tsc/src/Icons.js.map +1 -0
- package/out-tsc/src/display/Alert.js.map +1 -0
- package/out-tsc/src/display/Anchor.js.map +1 -0
- package/out-tsc/src/display/Button.js.map +1 -0
- package/out-tsc/src/{charcount → display}/CharCount.js +159 -2
- package/out-tsc/src/display/CharCount.js.map +1 -0
- package/out-tsc/src/display/Chat.js.map +1 -0
- package/out-tsc/src/display/ContactName.js.map +1 -0
- package/out-tsc/src/display/ContactUrn.js.map +1 -0
- package/out-tsc/src/display/Dropdown.js.map +1 -0
- package/out-tsc/src/{vectoricon/VectorIcon.js → display/Icon.js} +2 -2
- package/out-tsc/src/display/Icon.js.map +1 -0
- package/out-tsc/src/display/Label.js.map +1 -0
- package/out-tsc/src/{leafletmap → display}/LeafletMap.js +16 -1
- package/out-tsc/src/display/LeafletMap.js.map +1 -0
- package/out-tsc/src/display/Lightbox.js.map +1 -0
- package/out-tsc/src/{loading → display}/Loading.js.map +1 -1
- package/out-tsc/src/{options → display}/Options.js.map +1 -1
- package/out-tsc/src/display/ProgressBar.js.map +1 -0
- package/out-tsc/src/display/TembaDate.js.map +1 -0
- package/out-tsc/src/display/TembaUser.js.map +1 -0
- package/out-tsc/src/display/Thumbnail.js.map +1 -0
- package/out-tsc/src/{tip → display}/Tip.js +1 -2
- package/out-tsc/src/display/Tip.js.map +1 -0
- package/out-tsc/src/display/Toast.js.map +1 -0
- package/out-tsc/src/display/sms/gsmsplitter.js.map +1 -0
- package/out-tsc/src/display/sms/gsmvalidator.js.map +1 -0
- package/out-tsc/src/display/sms/index.js.map +1 -0
- package/out-tsc/src/display/sms/unicodesplitter.js.map +1 -0
- package/out-tsc/src/events.js +2 -0
- package/out-tsc/src/events.js.map +1 -0
- package/out-tsc/src/excellent/ExcellentParser.js.map +1 -0
- package/out-tsc/src/excellent/helpers.js.map +1 -0
- package/out-tsc/src/flow/Editor.js +533 -140
- package/out-tsc/src/flow/Editor.js.map +1 -1
- package/out-tsc/src/flow/EditorNode.js +287 -20
- package/out-tsc/src/flow/EditorNode.js.map +1 -1
- package/out-tsc/src/flow/Plumber.js +154 -74
- package/out-tsc/src/flow/Plumber.js.map +1 -1
- package/out-tsc/src/flow/StickyNote.js +153 -9
- package/out-tsc/src/flow/StickyNote.js.map +1 -1
- package/out-tsc/src/flow/config.js +88 -18
- package/out-tsc/src/flow/config.js.map +1 -1
- package/out-tsc/src/flow/render.js +327 -10
- package/out-tsc/src/flow/render.js.map +1 -1
- package/out-tsc/src/{checkbox → form}/Checkbox.js +2 -2
- package/out-tsc/src/form/Checkbox.js.map +1 -0
- package/out-tsc/src/{colorpicker → form}/ColorPicker.js +1 -1
- package/out-tsc/src/form/ColorPicker.js.map +1 -0
- package/out-tsc/src/{completion → form}/Completion.js +2 -2
- package/out-tsc/src/form/Completion.js.map +1 -0
- package/out-tsc/src/{compose → form}/Compose.js +1 -1
- package/out-tsc/src/form/Compose.js.map +1 -0
- package/out-tsc/src/{contactsearch → form}/ContactSearch.js +2 -2
- package/out-tsc/src/form/ContactSearch.js.map +1 -0
- package/out-tsc/src/form/CroppieCSS.js.map +1 -0
- package/out-tsc/src/{datepicker → form}/DatePicker.js +1 -1
- package/out-tsc/src/form/DatePicker.js.map +1 -0
- package/out-tsc/src/{FormElement.js → form/FormElement.js} +1 -1
- package/out-tsc/src/form/FormElement.js.map +1 -0
- package/out-tsc/src/form/FormField.js.map +1 -0
- package/out-tsc/src/{imagepicker → form}/ImagePicker.js +2 -2
- package/out-tsc/src/form/ImagePicker.js.map +1 -0
- package/out-tsc/src/{mediapicker → form}/MediaPicker.js +1 -1
- package/out-tsc/src/form/MediaPicker.js.map +1 -0
- package/out-tsc/src/{datepicker → form}/RangePicker.js +3 -2
- package/out-tsc/src/form/RangePicker.js.map +1 -0
- package/out-tsc/src/{slider → form}/TembaSlider.js +1 -1
- package/out-tsc/src/form/TembaSlider.js.map +1 -0
- package/out-tsc/src/{templates → form}/TemplateEditor.js +1 -1
- package/out-tsc/src/form/TemplateEditor.js.map +1 -0
- package/out-tsc/src/{textinput → form}/TextInput.js +3 -3
- package/out-tsc/src/form/TextInput.js.map +1 -0
- package/out-tsc/src/{omnibox → form/select}/Omnibox.js +2 -2
- package/out-tsc/src/form/select/Omnibox.js.map +1 -0
- package/out-tsc/src/{select → form/select}/PopupSelect.js +1 -1
- package/out-tsc/src/form/select/PopupSelect.js.map +1 -0
- package/out-tsc/src/{select → form/select}/Select.js +86 -87
- package/out-tsc/src/form/select/Select.js.map +1 -0
- package/out-tsc/src/{select → form/select}/UserSelect.js +1 -1
- package/out-tsc/src/form/select/UserSelect.js.map +1 -0
- package/out-tsc/src/{select → form/select}/WorkspaceSelect.js +1 -1
- package/out-tsc/src/form/select/WorkspaceSelect.js.map +1 -0
- package/out-tsc/src/interfaces.js +1 -0
- package/out-tsc/src/interfaces.js.map +1 -1
- package/out-tsc/src/layout/Dialog.js.map +1 -0
- package/out-tsc/src/layout/Mask.js.map +1 -0
- package/out-tsc/src/{dialog → layout}/Modax.js.map +1 -1
- package/out-tsc/src/layout/Resizer.js.map +1 -0
- package/out-tsc/src/layout/Tab.js.map +1 -0
- package/out-tsc/src/layout/TabPane.js.map +1 -0
- package/out-tsc/src/list/NotificationList.js +1 -1
- package/out-tsc/src/list/NotificationList.js.map +1 -1
- package/out-tsc/src/list/RunList.js +1 -1
- package/out-tsc/src/list/RunList.js.map +1 -1
- package/out-tsc/src/list/ShortcutList.js.map +1 -1
- package/out-tsc/src/list/TembaMenu.js +1 -1
- package/out-tsc/src/list/TembaMenu.js.map +1 -1
- package/out-tsc/src/list/TicketList.js +1 -1
- package/out-tsc/src/list/TicketList.js.map +1 -1
- package/out-tsc/src/{aliaseditor → live}/AliasEditor.js +1 -1
- package/out-tsc/src/live/AliasEditor.js.map +1 -0
- package/out-tsc/src/{contacts → live}/ContactBadges.js +1 -1
- package/out-tsc/src/live/ContactBadges.js.map +1 -0
- package/out-tsc/src/{contacts → live}/ContactChat.js +79 -3
- package/out-tsc/src/live/ContactChat.js.map +1 -0
- package/out-tsc/src/{contacts → live}/ContactDetails.js +1 -1
- package/out-tsc/src/live/ContactDetails.js.map +1 -0
- package/out-tsc/src/{contacts → live}/ContactFieldEditor.js +2 -2
- package/out-tsc/src/live/ContactFieldEditor.js.map +1 -0
- package/out-tsc/src/live/ContactFields.js.map +1 -0
- package/out-tsc/src/live/ContactNameFetch.js.map +1 -0
- package/out-tsc/src/{contacts → live}/ContactNotepad.js +1 -1
- package/out-tsc/src/{contacts → live}/ContactNotepad.js.map +1 -1
- package/out-tsc/src/{contacts → live}/ContactPending.js +1 -1
- package/out-tsc/src/live/ContactPending.js.map +1 -0
- package/out-tsc/src/live/ContactStoreElement.js.map +1 -0
- package/out-tsc/src/live/FieldManager.js.map +1 -0
- package/out-tsc/src/live/StartProgress.js.map +1 -0
- package/out-tsc/src/{chart → live}/TembaChart.js +5 -1
- package/out-tsc/src/live/TembaChart.js.map +1 -0
- package/out-tsc/src/locales/es.js +5 -5
- package/out-tsc/src/locales/es.js.map +1 -1
- package/out-tsc/src/locales/fr.js +5 -5
- package/out-tsc/src/locales/fr.js.map +1 -1
- package/out-tsc/src/locales/locale-codes.js +2 -11
- package/out-tsc/src/locales/locale-codes.js.map +1 -1
- package/out-tsc/src/locales/pt.js +5 -5
- package/out-tsc/src/locales/pt.js.map +1 -1
- package/out-tsc/src/store/AppState.js +54 -24
- package/out-tsc/src/store/AppState.js.map +1 -1
- package/out-tsc/src/store/Store.js +1 -1
- package/out-tsc/src/store/Store.js.map +1 -1
- package/out-tsc/src/{utils/index.js → utils.js} +22 -1
- package/out-tsc/src/utils.js.map +1 -0
- package/out-tsc/src/webchat/WebChat.js +1 -1
- package/out-tsc/src/webchat/WebChat.js.map +1 -1
- package/out-tsc/temba-components.js +2 -2
- package/out-tsc/temba-components.js.map +1 -1
- package/out-tsc/temba-modules.js +54 -54
- package/out-tsc/temba-modules.js.map +1 -1
- package/out-tsc/temba-webchat.js +2 -2
- package/out-tsc/temba-webchat.js.map +1 -1
- package/out-tsc/test/temba-alert.test.js +1 -1
- package/out-tsc/test/temba-alert.test.js.map +1 -1
- package/out-tsc/test/temba-appstate-language.test.js +90 -0
- package/out-tsc/test/temba-appstate-language.test.js.map +1 -1
- package/out-tsc/test/temba-charcount.test.js.map +1 -1
- package/out-tsc/test/temba-chart.test.js +1 -1
- package/out-tsc/test/temba-chart.test.js.map +1 -1
- package/out-tsc/test/temba-checkbox.test.js.map +1 -1
- package/out-tsc/test/temba-color-picker.test.js +1 -1
- package/out-tsc/test/temba-color-picker.test.js.map +1 -1
- package/out-tsc/test/temba-completion.test.js +1 -1
- package/out-tsc/test/temba-completion.test.js.map +1 -1
- package/out-tsc/test/temba-compose.test.js +1 -1
- package/out-tsc/test/temba-compose.test.js.map +1 -1
- package/out-tsc/test/temba-contact-badges.test.js +1 -1
- package/out-tsc/test/temba-contact-badges.test.js.map +1 -1
- package/out-tsc/test/temba-contact-chat.test.js +3 -1
- package/out-tsc/test/temba-contact-chat.test.js.map +1 -1
- package/out-tsc/test/temba-contact-details.test.js +1 -1
- package/out-tsc/test/temba-contact-details.test.js.map +1 -1
- package/out-tsc/test/temba-contact-fields.test.js +1 -1
- package/out-tsc/test/temba-contact-fields.test.js.map +1 -1
- package/out-tsc/test/temba-contact-search.test.js +1 -1
- package/out-tsc/test/temba-contact-search.test.js.map +1 -1
- package/out-tsc/test/temba-date.test.js +5 -1
- package/out-tsc/test/temba-date.test.js.map +1 -1
- package/out-tsc/test/temba-datepicker.test.js +1 -1
- package/out-tsc/test/temba-datepicker.test.js.map +1 -1
- package/out-tsc/test/temba-dialog.test.js +1 -1
- package/out-tsc/test/temba-dialog.test.js.map +1 -1
- package/out-tsc/test/temba-dropdown.test.js +1 -1
- package/out-tsc/test/temba-dropdown.test.js.map +1 -1
- package/out-tsc/test/temba-excellent-helpers.test.js +316 -0
- package/out-tsc/test/temba-excellent-helpers.test.js.map +1 -0
- package/out-tsc/test/temba-field-manager.test.js.map +1 -1
- package/out-tsc/test/temba-flow-editor-node.test.js +414 -1
- package/out-tsc/test/temba-flow-editor-node.test.js.map +1 -1
- package/out-tsc/test/temba-flow-editor.test.js +185 -0
- package/out-tsc/test/temba-flow-editor.test.js.map +1 -1
- package/out-tsc/test/temba-flow-plumber-connections.test.js +113 -0
- package/out-tsc/test/temba-flow-plumber-connections.test.js.map +1 -0
- package/out-tsc/test/temba-flow-plumber.test.js +73 -93
- package/out-tsc/test/temba-flow-plumber.test.js.map +1 -1
- package/out-tsc/test/temba-flow-render.test.js +624 -1
- package/out-tsc/test/temba-flow-render.test.js.map +1 -1
- package/out-tsc/test/temba-flow-self-routing.test.js +172 -0
- package/out-tsc/test/temba-flow-self-routing.test.js.map +1 -0
- package/out-tsc/test/temba-formfield.test.js.map +1 -1
- package/out-tsc/test/temba-icon.test.js +1 -1
- package/out-tsc/test/temba-icon.test.js.map +1 -1
- package/out-tsc/test/temba-integration-markdown.test.js.map +1 -1
- package/out-tsc/test/temba-label.test.js +1 -1
- package/out-tsc/test/temba-label.test.js.map +1 -1
- package/out-tsc/test/temba-lightbox.test.js +1 -1
- package/out-tsc/test/temba-lightbox.test.js.map +1 -1
- package/out-tsc/test/temba-markdown.test.js +127 -0
- package/out-tsc/test/temba-markdown.test.js.map +1 -0
- package/out-tsc/test/temba-menu.test.js +1 -1
- package/out-tsc/test/temba-menu.test.js.map +1 -1
- package/out-tsc/test/temba-modax.test.js +1 -1
- package/out-tsc/test/temba-modax.test.js.map +1 -1
- package/out-tsc/test/temba-modules.test.js +47 -0
- package/out-tsc/test/temba-modules.test.js.map +1 -0
- package/out-tsc/test/temba-omnibox.test.js +1 -1
- package/out-tsc/test/temba-omnibox.test.js.map +1 -1
- package/out-tsc/test/temba-options.test.js.map +1 -1
- package/out-tsc/test/temba-range-picker.test.js +9 -2
- package/out-tsc/test/temba-range-picker.test.js.map +1 -1
- package/out-tsc/test/temba-rapid-element.test.js +273 -0
- package/out-tsc/test/temba-rapid-element.test.js.map +1 -0
- package/out-tsc/test/temba-resize-element.test.js +85 -0
- package/out-tsc/test/temba-resize-element.test.js.map +1 -0
- package/out-tsc/test/temba-select.test.js +2 -2
- package/out-tsc/test/temba-select.test.js.map +1 -1
- package/out-tsc/test/temba-slider.test.js.map +1 -1
- package/out-tsc/test/temba-sticky-note.test.js +194 -0
- package/out-tsc/test/temba-sticky-note.test.js.map +1 -0
- package/out-tsc/test/temba-template-editor.test.js.map +1 -1
- package/out-tsc/test/temba-textinput.test.js +1 -1
- package/out-tsc/test/temba-textinput.test.js.map +1 -1
- package/out-tsc/test/temba-tip.test.js +1 -1
- package/out-tsc/test/temba-tip.test.js.map +1 -1
- package/out-tsc/test/temba-toast.test.js +1 -1
- package/out-tsc/test/temba-toast.test.js.map +1 -1
- package/out-tsc/test/temba-utils-index.test.js +1 -1
- package/out-tsc/test/temba-utils-index.test.js.map +1 -1
- package/out-tsc/test/temba-utils-uuid.test.js +38 -0
- package/out-tsc/test/temba-utils-uuid.test.js.map +1 -0
- package/out-tsc/test/temba-webchat.test.js +28 -12
- package/out-tsc/test/temba-webchat.test.js.map +1 -1
- package/out-tsc/test/utils.test.js +2 -6
- package/out-tsc/test/utils.test.js.map +1 -1
- package/package.json +18 -9
- package/rollup.components.mjs +1 -1
- package/screenshots/truth/datepicker/range-picker-all.png +0 -0
- package/screenshots/truth/datepicker/range-picker-button-states.png +0 -0
- package/screenshots/truth/datepicker/range-picker-default.png +0 -0
- package/screenshots/truth/datepicker/range-picker-editing-start.png +0 -0
- package/screenshots/truth/datepicker/range-picker-initial-values.png +0 -0
- package/screenshots/truth/datepicker/range-picker-week.png +0 -0
- package/screenshots/truth/datepicker/range-picker-year.png +0 -0
- package/screenshots/truth/sticky-note/blue-color.png +0 -0
- package/screenshots/truth/sticky-note/blue.png +0 -0
- package/screenshots/truth/sticky-note/color-picker-expanded.png +0 -0
- package/screenshots/truth/sticky-note/default.png +0 -0
- package/screenshots/truth/sticky-note/gray-color.png +0 -0
- package/screenshots/truth/sticky-note/gray.png +0 -0
- package/screenshots/truth/sticky-note/green-color.png +0 -0
- package/screenshots/truth/sticky-note/green.png +0 -0
- package/screenshots/truth/sticky-note/pink-color.png +0 -0
- package/screenshots/truth/sticky-note/pink.png +0 -0
- package/screenshots/truth/sticky-note/yellow-color.png +0 -0
- package/screenshots/truth/sticky-note/yellow.png +0 -0
- package/src/{charcount → display}/CharCount.ts +164 -2
- package/src/{vectoricon/VectorIcon.ts → display/Icon.ts} +1 -1
- package/src/{leafletmap → display}/LeafletMap.ts +19 -1
- package/src/{thumbnail → display}/Thumbnail.ts +1 -1
- package/src/{tip → display}/Tip.ts +1 -2
- package/src/{contacts/events.ts → events.ts} +1 -64
- package/src/flow/Editor.ts +655 -165
- package/src/flow/EditorNode.ts +337 -22
- package/src/flow/Plumber.ts +186 -79
- package/src/flow/StickyNote.ts +165 -9
- package/src/flow/config.ts +114 -18
- package/src/flow/render.ts +398 -11
- package/src/{checkbox → form}/Checkbox.ts +2 -2
- package/src/{colorpicker → form}/ColorPicker.ts +2 -2
- package/src/{completion → form}/Completion.ts +3 -3
- package/src/{compose → form}/Compose.ts +7 -7
- package/src/{contactsearch → form}/ContactSearch.ts +6 -6
- package/src/{datepicker → form}/DatePicker.ts +1 -1
- package/src/{FormElement.ts → form/FormElement.ts} +1 -1
- package/src/{imagepicker → form}/ImagePicker.ts +2 -2
- package/src/{mediapicker → form}/MediaPicker.ts +1 -1
- package/src/{datepicker → form}/RangePicker.ts +3 -2
- package/src/{slider → form}/TembaSlider.ts +1 -1
- package/src/{templates → form}/TemplateEditor.ts +2 -2
- package/src/{textinput → form}/TextInput.ts +5 -5
- package/src/{omnibox → form/select}/Omnibox.ts +2 -2
- package/src/{select → form/select}/PopupSelect.ts +1 -1
- package/src/{select → form/select}/Select.ts +124 -126
- package/src/{select → form/select}/UserSelect.ts +1 -1
- package/src/{select → form/select}/WorkspaceSelect.ts +1 -1
- package/src/interfaces.ts +2 -1
- package/src/{dialog → layout}/Dialog.ts +1 -1
- package/src/list/NotificationList.ts +2 -2
- package/src/list/RunList.ts +3 -3
- package/src/list/ShortcutList.ts +1 -1
- package/src/list/TembaMenu.ts +2 -2
- package/src/list/TicketList.ts +1 -1
- package/src/{aliaseditor → live}/AliasEditor.ts +3 -3
- package/src/{contacts → live}/ContactBadges.ts +1 -1
- package/src/{contacts → live}/ContactChat.ts +118 -8
- package/src/{contacts → live}/ContactDetails.ts +1 -1
- package/src/{contacts → live}/ContactFieldEditor.ts +4 -4
- package/src/{contacts → live}/ContactFields.ts +1 -1
- package/src/{contacts → live}/ContactNotepad.ts +1 -1
- package/src/{contacts → live}/ContactPending.ts +1 -1
- package/src/{chart → live}/TembaChart.ts +5 -2
- package/src/locales/es.ts +13 -18
- package/src/locales/fr.ts +13 -18
- package/src/locales/locale-codes.ts +2 -11
- package/src/locales/pt.ts +13 -18
- package/src/store/AppState.ts +75 -29
- package/src/store/Store.ts +1 -1
- package/src/store/flow-definition.d.ts +125 -0
- package/src/{utils/index.ts → utils.ts} +26 -10
- package/src/webchat/WebChat.ts +1 -1
- package/static/css/temba-components.css +1 -0
- package/svg.js +1 -4
- package/temba-components.ts +2 -2
- package/temba-modules.ts +54 -54
- package/temba-webchat.ts +2 -2
- package/test/temba-alert.test.ts +1 -1
- package/test/temba-appstate-language.test.ts +108 -0
- package/test/temba-charcount.test.ts +1 -1
- package/test/temba-chart.test.ts +1 -1
- package/test/temba-checkbox.test.ts +1 -1
- package/test/temba-color-picker.test.ts +1 -1
- package/test/temba-completion.test.ts +1 -1
- package/test/temba-compose.test.ts +1 -1
- package/test/temba-contact-badges.test.ts +1 -1
- package/test/temba-contact-chat.test.ts +6 -4
- package/test/temba-contact-details.test.ts +1 -1
- package/test/temba-contact-fields.test.ts +1 -1
- package/test/temba-contact-search.test.ts +2 -2
- package/test/temba-date.test.ts +8 -3
- package/test/temba-datepicker.test.ts +1 -1
- package/test/temba-dialog.test.ts +1 -1
- package/test/temba-dropdown.test.ts +1 -1
- package/test/temba-excellent-helpers.test.ts +417 -0
- package/test/temba-field-manager.test.ts +2 -2
- package/test/temba-flow-editor-node.test.ts +536 -1
- package/test/temba-flow-editor.test.ts +224 -0
- package/test/temba-flow-editor.test.ts.backup +563 -0
- package/test/temba-flow-plumber-connections.test.ts +142 -0
- package/test/temba-flow-plumber.test.ts +83 -120
- package/test/temba-flow-render.test.ts +787 -4
- package/test/temba-flow-self-routing.test.ts +215 -0
- package/test/temba-formfield.test.ts +1 -1
- package/test/temba-icon.test.ts +1 -1
- package/test/temba-integration-markdown.test.ts +1 -1
- package/test/temba-label.test.ts +1 -1
- package/test/temba-lightbox.test.ts +1 -1
- package/test/temba-markdown.test.ts +162 -0
- package/test/temba-menu.test.ts +1 -1
- package/test/temba-modax.test.ts +2 -2
- package/test/temba-modules.test.ts +56 -0
- package/test/temba-omnibox.test.ts +1 -1
- package/test/temba-options.test.ts +1 -1
- package/test/temba-range-picker.test.ts +17 -2
- package/test/temba-rapid-element.test.ts +341 -0
- package/test/temba-resize-element.test.ts +104 -0
- package/test/temba-select.test.ts +2 -2
- package/test/temba-slider.test.ts +1 -1
- package/test/temba-sticky-note.test.ts +281 -0
- package/test/temba-template-editor.test.ts +1 -1
- package/test/temba-textinput.test.ts +1 -1
- package/test/temba-tip.test.ts +1 -1
- package/test/temba-toast.test.ts +1 -1
- package/test/temba-utils-index.test.ts +1 -1
- package/test/temba-utils-index.test.ts.backup +1737 -0
- package/test/temba-utils-uuid.test.ts +48 -0
- package/test/temba-webchat.test.ts +30 -12
- package/test/utils.test.ts +5 -9
- package/web-dev-server.config.mjs +1 -1
- package/demo/alert/example.html +0 -65
- package/demo/button/example.html +0 -71
- package/demo/chart/horizontal-demo.html +0 -81
- package/demo/checkbox/example.html +0 -72
- package/demo/compose/example.html +0 -72
- package/demo/dropdown/example.html +0 -99
- package/demo/progress/example.html +0 -59
- package/demo/select/drag-and-drop.html +0 -142
- package/demo/select/example.html +0 -82
- package/demo/select/multi.html +0 -73
- package/demo/slider/example.html +0 -59
- package/demo/tabs/example.html +0 -91
- package/demo/textinput/example.html +0 -61
- package/out-tsc/src/FormElement.js.map +0 -1
- package/out-tsc/src/alert/Alert.js.map +0 -1
- package/out-tsc/src/aliaseditor/AliasEditor.js.map +0 -1
- package/out-tsc/src/anchor/Anchor.js.map +0 -1
- package/out-tsc/src/button/Button.js.map +0 -1
- package/out-tsc/src/charcount/CharCount.js.map +0 -1
- package/out-tsc/src/charcount/helpers.js +0 -159
- package/out-tsc/src/charcount/helpers.js.map +0 -1
- package/out-tsc/src/chart/TembaChart.js.map +0 -1
- package/out-tsc/src/chat/Chat.js.map +0 -1
- package/out-tsc/src/checkbox/Checkbox.js.map +0 -1
- package/out-tsc/src/colorpicker/ColorPicker.js.map +0 -1
- package/out-tsc/src/completion/Completion.js.map +0 -1
- package/out-tsc/src/completion/ExcellentParser.js.map +0 -1
- package/out-tsc/src/completion/helpers.js.map +0 -1
- package/out-tsc/src/compose/Compose.js.map +0 -1
- package/out-tsc/src/contacts/ContactBadges.js.map +0 -1
- package/out-tsc/src/contacts/ContactChat.js.map +0 -1
- package/out-tsc/src/contacts/ContactDetails.js.map +0 -1
- package/out-tsc/src/contacts/ContactFieldEditor.js.map +0 -1
- package/out-tsc/src/contacts/ContactFields.js.map +0 -1
- package/out-tsc/src/contacts/ContactName.js.map +0 -1
- package/out-tsc/src/contacts/ContactNameFetch.js.map +0 -1
- package/out-tsc/src/contacts/ContactPending.js.map +0 -1
- package/out-tsc/src/contacts/ContactStoreElement.js.map +0 -1
- package/out-tsc/src/contacts/ContactUrn.js.map +0 -1
- package/out-tsc/src/contacts/events.js +0 -65
- package/out-tsc/src/contacts/events.js.map +0 -1
- package/out-tsc/src/contacts/helpers.js +0 -77
- package/out-tsc/src/contacts/helpers.js.map +0 -1
- package/out-tsc/src/contactsearch/ContactSearch.js.map +0 -1
- package/out-tsc/src/date/TembaDate.js.map +0 -1
- package/out-tsc/src/datepicker/DatePicker.js.map +0 -1
- package/out-tsc/src/datepicker/RangePicker.js.map +0 -1
- package/out-tsc/src/dialog/Dialog.js.map +0 -1
- package/out-tsc/src/dropdown/Dropdown.js.map +0 -1
- package/out-tsc/src/fields/FieldManager.js.map +0 -1
- package/out-tsc/src/formfield/FormField.js.map +0 -1
- package/out-tsc/src/imagepicker/CroppieCSS.js.map +0 -1
- package/out-tsc/src/imagepicker/ImagePicker.js.map +0 -1
- package/out-tsc/src/label/Label.js.map +0 -1
- package/out-tsc/src/leafletmap/LeafletMap.js.map +0 -1
- package/out-tsc/src/leafletmap/helpers.js +0 -17
- package/out-tsc/src/leafletmap/helpers.js.map +0 -1
- package/out-tsc/src/lightbox/Lightbox.js.map +0 -1
- package/out-tsc/src/mask/Mask.js.map +0 -1
- package/out-tsc/src/mediapicker/MediaPicker.js.map +0 -1
- package/out-tsc/src/omnibox/Omnibox.js.map +0 -1
- package/out-tsc/src/options/helpers.js +0 -28
- package/out-tsc/src/options/helpers.js.map +0 -1
- package/out-tsc/src/progress/ProgressBar.js.map +0 -1
- package/out-tsc/src/progress/StartProgress.js.map +0 -1
- package/out-tsc/src/resizer/Resizer.js.map +0 -1
- package/out-tsc/src/select/PopupSelect.js.map +0 -1
- package/out-tsc/src/select/Select.js.map +0 -1
- package/out-tsc/src/select/UserSelect.js.map +0 -1
- package/out-tsc/src/select/WorkspaceSelect.js.map +0 -1
- package/out-tsc/src/select/helpers.js +0 -1
- package/out-tsc/src/select/helpers.js.map +0 -1
- package/out-tsc/src/shadowless/Shadowless.js +0 -33
- package/out-tsc/src/shadowless/Shadowless.js.map +0 -1
- package/out-tsc/src/slider/TembaSlider.js.map +0 -1
- package/out-tsc/src/sms/gsmsplitter.js.map +0 -1
- package/out-tsc/src/sms/gsmvalidator.js.map +0 -1
- package/out-tsc/src/sms/index.js.map +0 -1
- package/out-tsc/src/sms/unicodesplitter.js.map +0 -1
- package/out-tsc/src/tabpane/Tab.js.map +0 -1
- package/out-tsc/src/tabpane/TabPane.js.map +0 -1
- package/out-tsc/src/templates/TemplateEditor.js.map +0 -1
- package/out-tsc/src/textinput/TextInput.js.map +0 -1
- package/out-tsc/src/textinput/helpers.js +0 -12
- package/out-tsc/src/textinput/helpers.js.map +0 -1
- package/out-tsc/src/thumbnail/Thumbnail.js.map +0 -1
- package/out-tsc/src/tip/Tip.js.map +0 -1
- package/out-tsc/src/tip/helpers.js +0 -7
- package/out-tsc/src/tip/helpers.js.map +0 -1
- package/out-tsc/src/toast/Toast.js.map +0 -1
- package/out-tsc/src/user/TembaUser.js.map +0 -1
- package/out-tsc/src/utils/index.js.map +0 -1
- package/out-tsc/src/vectoricon/VectorIcon.js.map +0 -1
- package/out-tsc/src/vectoricon/index.js.map +0 -1
- package/src/charcount/helpers.ts +0 -162
- package/src/contacts/helpers.ts +0 -103
- package/src/leafletmap/helpers.ts +0 -18
- package/src/options/helpers.ts +0 -37
- package/src/select/helpers.ts +0 -0
- package/src/shadowless/Shadowless.ts +0 -32
- package/src/textinput/helpers.ts +0 -11
- package/src/tip/helpers.ts +0 -7
- /package/out-tsc/src/{alert → display}/Alert.js +0 -0
- /package/out-tsc/src/{anchor → display}/Anchor.js +0 -0
- /package/out-tsc/src/{button → display}/Button.js +0 -0
- /package/out-tsc/src/{chat → display}/Chat.js +0 -0
- /package/out-tsc/src/{contacts → display}/ContactName.js +0 -0
- /package/out-tsc/src/{contacts → display}/ContactUrn.js +0 -0
- /package/out-tsc/src/{dropdown → display}/Dropdown.js +0 -0
- /package/out-tsc/src/{label → display}/Label.js +0 -0
- /package/out-tsc/src/{lightbox → display}/Lightbox.js +0 -0
- /package/out-tsc/src/{loading → display}/Loading.js +0 -0
- /package/out-tsc/src/{options → display}/Options.js +0 -0
- /package/out-tsc/src/{progress → display}/ProgressBar.js +0 -0
- /package/out-tsc/src/{date → display}/TembaDate.js +0 -0
- /package/out-tsc/src/{user → display}/TembaUser.js +0 -0
- /package/out-tsc/src/{thumbnail → display}/Thumbnail.js +0 -0
- /package/out-tsc/src/{toast → display}/Toast.js +0 -0
- /package/out-tsc/src/{sms → display/sms}/gsmsplitter.js +0 -0
- /package/out-tsc/src/{sms → display/sms}/gsmvalidator.js +0 -0
- /package/out-tsc/src/{sms → display/sms}/index.js +0 -0
- /package/out-tsc/src/{sms → display/sms}/unicodesplitter.js +0 -0
- /package/out-tsc/src/{completion → excellent}/ExcellentParser.js +0 -0
- /package/out-tsc/src/{completion → excellent}/helpers.js +0 -0
- /package/out-tsc/src/{imagepicker → form}/CroppieCSS.js +0 -0
- /package/out-tsc/src/{formfield → form}/FormField.js +0 -0
- /package/out-tsc/src/{dialog → layout}/Dialog.js +0 -0
- /package/out-tsc/src/{mask → layout}/Mask.js +0 -0
- /package/out-tsc/src/{dialog → layout}/Modax.js +0 -0
- /package/out-tsc/src/{resizer → layout}/Resizer.js +0 -0
- /package/out-tsc/src/{tabpane → layout}/Tab.js +0 -0
- /package/out-tsc/src/{tabpane → layout}/TabPane.js +0 -0
- /package/out-tsc/src/{contacts → live}/ContactFields.js +0 -0
- /package/out-tsc/src/{contacts → live}/ContactNameFetch.js +0 -0
- /package/out-tsc/src/{contacts → live}/ContactStoreElement.js +0 -0
- /package/out-tsc/src/{fields → live}/FieldManager.js +0 -0
- /package/out-tsc/src/{progress → live}/StartProgress.js +0 -0
- /package/src/{vectoricon/index.ts → Icons.ts} +0 -0
- /package/src/{alert → display}/Alert.ts +0 -0
- /package/src/{anchor → display}/Anchor.ts +0 -0
- /package/src/{button → display}/Button.ts +0 -0
- /package/src/{chat → display}/Chat.ts +0 -0
- /package/src/{contacts → display}/ContactName.ts +0 -0
- /package/src/{contacts → display}/ContactUrn.ts +0 -0
- /package/src/{dropdown → display}/Dropdown.ts +0 -0
- /package/src/{label → display}/Label.ts +0 -0
- /package/src/{lightbox → display}/Lightbox.ts +0 -0
- /package/src/{loading → display}/Loading.ts +0 -0
- /package/src/{options → display}/Options.ts +0 -0
- /package/src/{progress → display}/ProgressBar.ts +0 -0
- /package/src/{date → display}/TembaDate.ts +0 -0
- /package/src/{user → display}/TembaUser.ts +0 -0
- /package/src/{toast → display}/Toast.ts +0 -0
- /package/src/{sms → display/sms}/gsmsplitter.ts +0 -0
- /package/src/{sms → display/sms}/gsmvalidator.ts +0 -0
- /package/src/{sms → display/sms}/index.ts +0 -0
- /package/src/{sms → display/sms}/unicodesplitter.ts +0 -0
- /package/src/{completion → excellent}/ExcellentParser.ts +0 -0
- /package/src/{completion → excellent}/helpers.ts +0 -0
- /package/src/{imagepicker → form}/CroppieCSS.ts +0 -0
- /package/src/{formfield → form}/FormField.ts +0 -0
- /package/src/{mask → layout}/Mask.ts +0 -0
- /package/src/{dialog → layout}/Modax.ts +0 -0
- /package/src/{resizer → layout}/Resizer.ts +0 -0
- /package/src/{tabpane → layout}/Tab.ts +0 -0
- /package/src/{tabpane → layout}/TabPane.ts +0 -0
- /package/src/{contacts → live}/ContactNameFetch.ts +0 -0
- /package/src/{contacts → live}/ContactStoreElement.ts +0 -0
- /package/src/{fields → live}/FieldManager.ts +0 -0
- /package/src/{progress → live}/StartProgress.ts +0 -0
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
body {
|
|
2
|
+
font-family: sans-serif;
|
|
3
|
+
padding: 20px;
|
|
4
|
+
max-width: 800px;
|
|
5
|
+
margin: 0 auto;
|
|
6
|
+
background: #f3f3f3;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.example {
|
|
10
|
+
margin: 30px 0;
|
|
11
|
+
padding: 20px;
|
|
12
|
+
border: 1px solid #ddd;
|
|
13
|
+
border-radius: var(--curvature);
|
|
14
|
+
background: white;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.example h3 {
|
|
18
|
+
margin-top: 0;
|
|
19
|
+
color: #333;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.example p {
|
|
23
|
+
color: #666;
|
|
24
|
+
margin-bottom: 15px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.example label {
|
|
28
|
+
display: block;
|
|
29
|
+
margin-bottom: 5px;
|
|
30
|
+
font-weight: bold;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.expected {
|
|
34
|
+
background-color: #f0f8ff;
|
|
35
|
+
padding: 10px;
|
|
36
|
+
border-radius: 4px;
|
|
37
|
+
margin-top: 10px;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.expected strong {
|
|
41
|
+
color: #006400;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.header {
|
|
45
|
+
margin-bottom: 1em;
|
|
46
|
+
font-size: 2em;
|
|
47
|
+
font-weight: 400;
|
|
48
|
+
color: #777;
|
|
49
|
+
display: inline;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.nav {
|
|
53
|
+
margin: 20px 0;
|
|
54
|
+
padding: 20px;
|
|
55
|
+
background: white;
|
|
56
|
+
border-radius: 8px;
|
|
57
|
+
border: 1px solid #ddd;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.nav h2 {
|
|
61
|
+
margin-top: 0;
|
|
62
|
+
color: #333;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.nav ul {
|
|
66
|
+
list-style: none;
|
|
67
|
+
padding: 0;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.nav li {
|
|
71
|
+
margin: 10px 0;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.nav a {
|
|
75
|
+
color: #0066cc;
|
|
76
|
+
text-decoration: none;
|
|
77
|
+
font-size: 16px;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nav a:hover {
|
|
81
|
+
text-decoration: underline;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.component-grid {
|
|
85
|
+
display: flex;
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
gap: 30px;
|
|
88
|
+
margin: 20px 0;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.component-section {
|
|
92
|
+
background: white;
|
|
93
|
+
padding: 20px;
|
|
94
|
+
border-radius: 8px;
|
|
95
|
+
border: 1px solid #ddd;
|
|
96
|
+
justify-content: space-between;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.component-section h2 {
|
|
100
|
+
margin-top: 0;
|
|
101
|
+
margin-bottom: 20px;
|
|
102
|
+
color: #333;
|
|
103
|
+
border-bottom: 2px solid #0066cc;
|
|
104
|
+
padding-bottom: 10px;
|
|
105
|
+
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.component-section .component-card {
|
|
109
|
+
display: inline-block;
|
|
110
|
+
width: calc(50% - 60px);
|
|
111
|
+
vertical-align: top;
|
|
112
|
+
margin:10px;
|
|
113
|
+
|
|
114
|
+
border: 1px solid #eee;
|
|
115
|
+
background: #f9f9f9;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.component-section .component-card:nth-child(even) {
|
|
119
|
+
margin-right: 0;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
@media (max-width: 768px) {
|
|
123
|
+
.component-section .component-card {
|
|
124
|
+
width: 100%;
|
|
125
|
+
margin-right: 0;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.component-card {
|
|
130
|
+
background: white;
|
|
131
|
+
padding: 20px;
|
|
132
|
+
border-radius: 8px;
|
|
133
|
+
border: 1px solid #ddd;
|
|
134
|
+
text-align: center;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.component-card h3 {
|
|
138
|
+
margin-top: 0;
|
|
139
|
+
color: #333;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.component-card p {
|
|
143
|
+
color: #666;
|
|
144
|
+
margin-bottom: 15px;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.component-card a {
|
|
148
|
+
color: #0066cc;
|
|
149
|
+
text-decoration: none;
|
|
150
|
+
font-weight: bold;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
.component-card a:hover {
|
|
154
|
+
text-decoration: underline;
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
/* Preserve some styling from original demo */
|
|
158
|
+
.linked {
|
|
159
|
+
text-decoration: underline;
|
|
160
|
+
color: blue;
|
|
161
|
+
cursor: pointer;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
temba-dropdown {
|
|
165
|
+
position: relative;
|
|
166
|
+
display: inline-block;
|
|
167
|
+
margin: 0em 0.5em;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
temba-slider {
|
|
171
|
+
margin-top: 1em;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Make components visible after they load */
|
|
175
|
+
temba-tabs *,
|
|
176
|
+
temba-tab * {
|
|
177
|
+
opacity: 0;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
temba-tabs:defined *,
|
|
181
|
+
temba-tab:defined * {
|
|
182
|
+
opacity: 1;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Documentation section styles */
|
|
186
|
+
.doc-section {
|
|
187
|
+
margin: 2em 0 1em 0;
|
|
188
|
+
padding: 1em;
|
|
189
|
+
background: #fff;
|
|
190
|
+
border: 1px solid #e0e0e0;
|
|
191
|
+
border-radius: 6px;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.doc-section h2 {
|
|
195
|
+
margin-top: 0;
|
|
196
|
+
font-size: 1.1em;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
.doc-section p {
|
|
200
|
+
font-size: 0.97em;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
/* Code examples */
|
|
204
|
+
.example-html {
|
|
205
|
+
background: #f4f4f4;
|
|
206
|
+
padding: 0.7em;
|
|
207
|
+
border-radius: 4px;
|
|
208
|
+
margin-top: 0.7em;
|
|
209
|
+
font-size: 0.97em;
|
|
210
|
+
overflow-x: auto;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
/* Output display */
|
|
214
|
+
.demo-output {
|
|
215
|
+
margin-top: 0.5em;
|
|
216
|
+
font-family: monospace;
|
|
217
|
+
background: #f7f7f7;
|
|
218
|
+
padding: 0.5em;
|
|
219
|
+
border-radius: 4px;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
/* Attribute table - enhanced */
|
|
223
|
+
.attr-table {
|
|
224
|
+
width: 100%;
|
|
225
|
+
border-collapse: collapse;
|
|
226
|
+
background: #fff;
|
|
227
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
228
|
+
margin-top: 3em;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
.attr-table th {
|
|
232
|
+
text-align: left;
|
|
233
|
+
padding: 8px;
|
|
234
|
+
border: 1px solid #ddd;
|
|
235
|
+
background-color: #f2f2f2;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.attr-table td {
|
|
239
|
+
padding: 8px;
|
|
240
|
+
border: 1px solid #ddd;
|
|
241
|
+
}
|
|
242
|
+
|
|
243
|
+
.attr-table td:first-child {
|
|
244
|
+
background: #edfdff;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
/* Code highlighting improvements */
|
|
248
|
+
pre.language-javascript, pre.language-markup {
|
|
249
|
+
padding: 1em !important;
|
|
250
|
+
border-radius: var(--curvature);
|
|
251
|
+
background: #edfdff7e !important;
|
|
252
|
+
border: 1px solid #ddd !important;
|
|
253
|
+
}
|
|
@@ -1,100 +1,94 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
2
|
+
<html lang="en-GB">
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="utf-8" />
|
|
5
|
-
<title>
|
|
5
|
+
<title>Sticky Note Example</title>
|
|
6
6
|
<link
|
|
7
7
|
href="/static/css/temba-components.css"
|
|
8
8
|
rel="stylesheet"
|
|
9
9
|
type="text/css"
|
|
10
10
|
/>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
.instructions {
|
|
22
|
-
background: #e3f2fd;
|
|
23
|
-
padding: 20px;
|
|
24
|
-
border-radius: 8px;
|
|
25
|
-
margin-bottom: 20px;
|
|
26
|
-
border-left: 4px solid #1976d2;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.instructions h2 {
|
|
30
|
-
margin-top: 0;
|
|
31
|
-
color: #1976d2;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.instructions ul {
|
|
35
|
-
margin-bottom: 0;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.instructions li {
|
|
39
|
-
margin-bottom: 8px;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.demo-container {
|
|
43
|
-
position: relative;
|
|
44
|
-
background-color: #f9f9f9;
|
|
45
|
-
height: 600px;
|
|
46
|
-
border: 1px solid #ddd;
|
|
47
|
-
margin: 20px 0;
|
|
48
|
-
border-radius: 8px;
|
|
49
|
-
overflow: hidden;
|
|
50
|
-
}
|
|
51
|
-
.demo-title {
|
|
52
|
-
font-size: 18px;
|
|
53
|
-
font-weight: bold;
|
|
54
|
-
margin-bottom: 10px;
|
|
55
|
-
}
|
|
56
|
-
.instructions {
|
|
57
|
-
background-color: #e6f3ff;
|
|
58
|
-
padding: 15px;
|
|
59
|
-
border-radius: 8px;
|
|
60
|
-
margin-bottom: 20px;
|
|
61
|
-
}
|
|
62
|
-
.instructions ul {
|
|
63
|
-
margin: 10px 0;
|
|
64
|
-
padding-left: 20px;
|
|
65
|
-
}
|
|
66
|
-
</style>
|
|
11
|
+
<link
|
|
12
|
+
href="https://fonts.googleapis.com/css?family=Roboto+Mono:300|Roboto:300,400,500"
|
|
13
|
+
rel="stylesheet"
|
|
14
|
+
/>
|
|
15
|
+
<link href="../styles.css" rel="stylesheet" type="text/css" />
|
|
16
|
+
<script type="module" src="../src/flow/StickyNote.ts"></script>
|
|
17
|
+
<link href="/demo/static/css/prism.css" rel="stylesheet" />
|
|
18
|
+
<script type="module" src="/demo/static/js/prism-loader.js"></script>
|
|
67
19
|
</head>
|
|
68
20
|
<body>
|
|
69
|
-
<h1>
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
<
|
|
74
|
-
<
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
</
|
|
21
|
+
<h1>Sticky Note Example</h1>
|
|
22
|
+
<p><a href="../index.html">← Back to main demo</a></p>
|
|
23
|
+
|
|
24
|
+
<table class="attr-table">
|
|
25
|
+
<thead>
|
|
26
|
+
<tr>
|
|
27
|
+
<th>Attribute</th>
|
|
28
|
+
<th>Description</th>
|
|
29
|
+
<th>Default</th>
|
|
30
|
+
</tr>
|
|
31
|
+
</thead>
|
|
32
|
+
<tbody>
|
|
33
|
+
<tr>
|
|
34
|
+
<td>uuid</td>
|
|
35
|
+
<td>Unique identifier for the sticky note</td>
|
|
36
|
+
<td>None (required)</td>
|
|
37
|
+
</tr>
|
|
38
|
+
<tr>
|
|
39
|
+
<td>data</td>
|
|
40
|
+
<td>
|
|
41
|
+
Object containing position, title, body, and color properties.
|
|
42
|
+
Position: {left: number, top: number}, color: 'yellow' | 'blue' | 'pink' | 'green' | 'gray'
|
|
43
|
+
</td>
|
|
44
|
+
<td>None (required)</td>
|
|
45
|
+
</tr>
|
|
46
|
+
</tbody>
|
|
47
|
+
</table>
|
|
48
|
+
|
|
49
|
+
<section class="doc-section">
|
|
50
|
+
<h2>Events</h2>
|
|
51
|
+
<p>
|
|
52
|
+
The sticky note component fires events when its content is updated through the flow store system.
|
|
53
|
+
Updates to title and body content are automatically synchronized with the flow state.
|
|
54
|
+
</p>
|
|
55
|
+
</section>
|
|
56
|
+
|
|
57
|
+
<div class="example">
|
|
58
|
+
<h3>Basic Sticky Note</h3>
|
|
59
|
+
<p>A simple yellow sticky note with default positioning</p>
|
|
60
|
+
<pre class="example-html"><code class="language-markup"><temba-sticky-note uuid="basic-note"></temba-sticky-note></code></pre>
|
|
61
|
+
<div class="demo-container">
|
|
62
|
+
<temba-sticky-note id="basic-note"></temba-sticky-note>
|
|
63
|
+
</div>
|
|
80
64
|
</div>
|
|
81
65
|
|
|
82
|
-
<div class="
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
<
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
<
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
66
|
+
<div class="example">
|
|
67
|
+
<h3>Colored Sticky Notes</h3>
|
|
68
|
+
<p>Sticky notes with different color themes - click to edit the text, drag to move them around</p>
|
|
69
|
+
<pre class="example-html"><code class="language-markup"><!-- Multiple colored sticky notes -->
|
|
70
|
+
<temba-sticky-note uuid="yellow-note"></temba-sticky-note>
|
|
71
|
+
<temba-sticky-note uuid="blue-note"></temba-sticky-note>
|
|
72
|
+
<temba-sticky-note uuid="pink-note"></temba-sticky-note>
|
|
73
|
+
<temba-sticky-note uuid="green-note"></temba-sticky-note>
|
|
74
|
+
<temba-sticky-note uuid="gray-note"></temba-sticky-note></code></pre>
|
|
75
|
+
<div class="demo-container">
|
|
76
|
+
<temba-sticky-note id="yellow-note"></temba-sticky-note>
|
|
77
|
+
<temba-sticky-note id="blue-note"></temba-sticky-note>
|
|
78
|
+
<temba-sticky-note id="pink-note"></temba-sticky-note>
|
|
79
|
+
<temba-sticky-note id="green-note"></temba-sticky-note>
|
|
80
|
+
<temba-sticky-note id="gray-note"></temba-sticky-note>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="expected">
|
|
83
|
+
<strong>How to use:</strong>
|
|
84
|
+
<ul>
|
|
85
|
+
<li>Click and drag the sticky notes to move them around</li>
|
|
86
|
+
<li>Click on the title or body text to edit it inline</li>
|
|
87
|
+
<li>Press Enter or Escape to finish editing</li>
|
|
88
|
+
<li>Notes snap to a 20px grid when you finish dragging</li>
|
|
89
|
+
<li>Each color has its own visual theme</li>
|
|
90
|
+
</ul>
|
|
91
|
+
</div>
|
|
98
92
|
</div>
|
|
99
93
|
|
|
100
94
|
<script type="module">
|
|
@@ -102,6 +96,15 @@
|
|
|
102
96
|
|
|
103
97
|
// Configure the sticky notes with sample data
|
|
104
98
|
document.addEventListener('DOMContentLoaded', () => {
|
|
99
|
+
const basicNote = document.getElementById('basic-note');
|
|
100
|
+
basicNote.uuid = 'basic-uuid';
|
|
101
|
+
basicNote.data = {
|
|
102
|
+
position: { left: 50, top: 50 },
|
|
103
|
+
title: 'Basic Note',
|
|
104
|
+
body: 'This is a basic sticky note example.',
|
|
105
|
+
color: 'yellow'
|
|
106
|
+
};
|
|
107
|
+
|
|
105
108
|
const yellowNote = document.getElementById('yellow-note');
|
|
106
109
|
yellowNote.uuid = 'yellow-uuid';
|
|
107
110
|
yellowNote.data = {
|
package/demo/styles.css
CHANGED
|
@@ -250,4 +250,28 @@ pre.language-javascript, pre.language-markup {
|
|
|
250
250
|
border-radius: var(--curvature);
|
|
251
251
|
background: #edfdff7e !important;
|
|
252
252
|
border: 1px solid #ddd !important;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
/* Demo container for sticky notes and interactive components */
|
|
256
|
+
.demo-container {
|
|
257
|
+
position: relative;
|
|
258
|
+
background-color: #f9f9f9;
|
|
259
|
+
height: 600px;
|
|
260
|
+
border: 1px solid #ddd;
|
|
261
|
+
margin: 20px 0;
|
|
262
|
+
border-radius: 8px;
|
|
263
|
+
overflow: hidden;
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
/* Button group layout for demo purposes */
|
|
267
|
+
.button-group {
|
|
268
|
+
display: flex;
|
|
269
|
+
gap: 10px;
|
|
270
|
+
flex-wrap: wrap;
|
|
271
|
+
max-width: 400px;
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.button-group > div {
|
|
275
|
+
flex: 0 0 auto;
|
|
276
|
+
max-width: 100px;
|
|
253
277
|
}
|
package/dist/locales/es.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
/* eslint-disable no-irregular-whitespace */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
scf1453991c986b25: `Tab para completar, enter para seleccionar`,
|
|
7
|
+
s73b4d70c02f4b4e0: `No options`,
|
|
8
|
+
s8f02e3a18ffc083a: `Are not currently in a flow`,
|
|
9
|
+
s638236250662c6b3: `Have sent a message in the last`,
|
|
10
|
+
s4788ee206c4570c7: `Have not started this flow in the last 90 days`
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=es.js.map
|
package/dist/locales/es.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"es.js","sourceRoot":"","sources":["../../../src/locales/es.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,4CAA4C;IAC/D,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n scf1453991c986b25: `Tab para completar, enter para seleccionar`,\n s73b4d70c02f4b4e0: `No options`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
|
package/dist/locales/fr.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
/* eslint-disable no-irregular-whitespace */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
s73b4d70c02f4b4e0: `No options`,
|
|
7
|
+
scf1453991c986b25: `Tab to complete, enter to select`,
|
|
8
|
+
s8f02e3a18ffc083a: `Are not currently in a flow`,
|
|
9
|
+
s638236250662c6b3: `Have sent a message in the last`,
|
|
10
|
+
s4788ee206c4570c7: `Have not started this flow in the last 90 days`
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=fr.js.map
|
package/dist/locales/fr.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"fr.js","sourceRoot":"","sources":["../../../src/locales/fr.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
|
|
@@ -8,18 +8,9 @@ export const sourceLocale = `en`;
|
|
|
8
8
|
* The other locale codes that this application is localized into. Sorted
|
|
9
9
|
* lexicographically.
|
|
10
10
|
*/
|
|
11
|
-
export const targetLocales = [
|
|
12
|
-
`es`,
|
|
13
|
-
`fr`,
|
|
14
|
-
`pt`,
|
|
15
|
-
];
|
|
11
|
+
export const targetLocales = [`es`, `fr`, `pt`];
|
|
16
12
|
/**
|
|
17
13
|
* All valid project locale codes. Sorted lexicographically.
|
|
18
14
|
*/
|
|
19
|
-
export const allLocales = [
|
|
20
|
-
`en`,
|
|
21
|
-
`es`,
|
|
22
|
-
`fr`,
|
|
23
|
-
`pt`,
|
|
24
|
-
];
|
|
15
|
+
export const allLocales = [`en`, `es`, `fr`, `pt`];
|
|
25
16
|
//# sourceMappingURL=locale-codes.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG
|
|
1
|
+
{"version":3,"file":"locale-codes.js","sourceRoot":"","sources":["../../../src/locales/locale-codes.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,iDAAiD;AAEjD;;GAEG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC;AAEjC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC;AAEzD;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,CAAU,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize.\n\n/**\n * The locale code that templates in this source code are written in.\n */\nexport const sourceLocale = `en`;\n\n/**\n * The other locale codes that this application is localized into. Sorted\n * lexicographically.\n */\nexport const targetLocales = [`es`, `fr`, `pt`] as const;\n\n/**\n * All valid project locale codes. Sorted lexicographically.\n */\nexport const allLocales = [`en`, `es`, `fr`, `pt`] as const;\n"]}
|
package/dist/locales/pt.js
CHANGED
|
@@ -3,10 +3,10 @@
|
|
|
3
3
|
/* eslint-disable no-irregular-whitespace */
|
|
4
4
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
5
5
|
export const templates = {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
s73b4d70c02f4b4e0: `No options`,
|
|
7
|
+
scf1453991c986b25: `Tab to complete, enter to select`,
|
|
8
|
+
s8f02e3a18ffc083a: `Are not currently in a flow`,
|
|
9
|
+
s638236250662c6b3: `Have sent a message in the last`,
|
|
10
|
+
s4788ee206c4570c7: `Have not started this flow in the last 90 days`
|
|
11
11
|
};
|
|
12
12
|
//# sourceMappingURL=pt.js.map
|
package/dist/locales/pt.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pt.js","sourceRoot":"","sources":["../../../src/locales/pt.ts"],"names":[],"mappings":"AAAA,mCAAmC;AACnC,gDAAgD;AAEhD,4CAA4C;AAC5C,uDAAuD;AAEvD,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,iBAAiB,EAAE,YAAY;IAC/B,iBAAiB,EAAE,kCAAkC;IACrD,iBAAiB,EAAE,6BAA6B;IAChD,iBAAiB,EAAE,iCAAiC;IACpD,iBAAiB,EAAE,gDAAgD;CACpE,CAAC","sourcesContent":["// Do not modify this file by hand!\n// Re-generate this file by running lit-localize\n\n/* eslint-disable no-irregular-whitespace */\n/* eslint-disable @typescript-eslint/no-explicit-any */\n\nexport const templates = {\n s73b4d70c02f4b4e0: `No options`,\n scf1453991c986b25: `Tab to complete, enter to select`,\n s8f02e3a18ffc083a: `Are not currently in a flow`,\n s638236250662c6b3: `Have sent a message in the last`,\n s4788ee206c4570c7: `Have not started this flow in the last 90 days`\n};\n"]}
|