@uva-glass/component-library 3.41.1 → 3.42.0
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/dist/{Lexical.prod-7x3WP3vd.js → Lexical.prod-C1B_JvcI.js} +100 -99
- package/dist/Lexical.prod-C1B_JvcI.js.map +1 -0
- package/dist/{LexicalClipboard.prod-BMLLh6JL.js → LexicalClipboard.prod-Dd64YQH0.js} +10 -10
- package/dist/{LexicalClipboard.prod-BMLLh6JL.js.map → LexicalClipboard.prod-Dd64YQH0.js.map} +1 -1
- package/dist/{LexicalLink.prod-Dr6L083o.js → LexicalLink.prod-ldhpNY9X.js} +3 -3
- package/dist/{LexicalLink.prod-Dr6L083o.js.map → LexicalLink.prod-ldhpNY9X.js.map} +1 -1
- package/dist/{LexicalList.prod-nl__pKjG.js → LexicalList.prod-7DmvPZ_J.js} +4 -4
- package/dist/{LexicalList.prod-nl__pKjG.js.map → LexicalList.prod-7DmvPZ_J.js.map} +1 -1
- package/dist/{LexicalSelection.prod-CB_xP0pP.js → LexicalSelection.prod-Dmiwka3x.js} +5 -5
- package/dist/{LexicalSelection.prod-CB_xP0pP.js.map → LexicalSelection.prod-Dmiwka3x.js.map} +1 -1
- package/dist/{LexicalTable.prod-CwkGGOke.js → LexicalTable.prod-iqHmKv_G.js} +666 -625
- package/dist/LexicalTable.prod-iqHmKv_G.js.map +1 -0
- package/dist/LexicalUtils.prod-w0fZ_Z8S.js +123 -0
- package/dist/{LexicalUtils.prod-CtYaCJNB.js.map → LexicalUtils.prod-w0fZ_Z8S.js.map} +1 -1
- package/dist/RteEditor.module-dE9wQTC9.js +42 -0
- package/dist/RteEditor.module-dE9wQTC9.js.map +1 -0
- package/dist/TableCellResizerPlugin-D6jjhYoD.js +239 -0
- package/dist/TableCellResizerPlugin-D6jjhYoD.js.map +1 -0
- package/dist/TablePlugin-cMMBdz-x.js +306 -0
- package/dist/TablePlugin-cMMBdz-x.js.map +1 -0
- package/dist/assets/RteEditor.css +1 -1
- package/dist/assets/TableCellResizerPlugin.css +1 -0
- package/dist/components/CheckboxTree/CheckboxTree.js +9 -8
- package/dist/components/CheckboxTree/CheckboxTree.js.map +1 -1
- package/dist/components/FormInput/FormInput.js +4 -3
- package/dist/components/FormInput/FormInput.js.map +1 -1
- package/dist/components/InputField/InputField.stories.js +4 -3
- package/dist/components/InputField/InputField.stories.js.map +1 -1
- package/dist/components/MultiSelect/MultiSelect.js +1 -1
- package/dist/components/MultiSelect/MultiSelect.stories.js +1 -1
- package/dist/components/MultiSelect/components/MultiSelectHeader.js +3 -2
- package/dist/components/MultiSelect/components/MultiSelectHeader.js.map +1 -1
- package/dist/components/MultiSelect/index.js +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js +4 -3
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js +4 -3
- package/dist/components/ProgrammeCard/ProgrammeCard.stories.js.map +1 -1
- package/dist/components/RadioTabSelector/RadioTabSelector.js +4 -3
- package/dist/components/RadioTabSelector/RadioTabSelector.js.map +1 -1
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js +4 -3
- package/dist/components/RteEditor/EditorHeader/EditorHeader.js.map +1 -1
- package/dist/components/RteEditor/Plugins/BlockFormatPlugin/BlockFormatPlugin.js +2 -2
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js +14 -13
- package/dist/components/RteEditor/Plugins/HistoryPlugin/HistoryPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js +5 -4
- package/dist/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js +26 -25
- package/dist/components/RteEditor/Plugins/LinkPlugin/LinkPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/LinkPlugin/helpers.js +1 -1
- package/dist/components/RteEditor/Plugins/ListPlugin/ListPlugin.js +6 -6
- package/dist/components/RteEditor/Plugins/PasteHandlerPlugin/PasteHandlerPlugin.js +3 -3
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.d.ts +2 -0
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.js +13 -0
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/TableCellResizerPlugin.js.map +1 -0
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/index.d.ts +1 -0
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/index.js +5 -0
- package/dist/components/RteEditor/Plugins/TableCellResizerPlugin/index.js.map +1 -0
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js +4 -3
- package/dist/components/RteEditor/Plugins/TablePlugin/AddTableFrom.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js +9 -6
- package/dist/components/RteEditor/Plugins/TablePlugin/TablePlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.d.ts +9 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js +73 -56
- package/dist/components/RteEditor/Plugins/TablePlugin/helpers.js.map +1 -1
- package/dist/components/RteEditor/Plugins/TablePlugin/index.js +1 -1
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js +11 -9
- package/dist/components/RteEditor/Plugins/ToolbarPlugin/ToolbarPlugin.js.map +1 -1
- package/dist/components/RteEditor/Plugins/index.d.ts +2 -0
- package/dist/components/RteEditor/Plugins/index.js +13 -9
- package/dist/components/RteEditor/Plugins/index.js.map +1 -1
- package/dist/components/RteEditor/RteEditor.js +275 -287
- package/dist/components/RteEditor/RteEditor.js.map +1 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.d.ts +1 -0
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js +2 -1
- package/dist/components/RteEditor/UvaTheme/UvaTheme.js.map +1 -1
- package/dist/components/RteEditor/helpers.js +4 -4
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.d.ts +15 -0
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js +69 -0
- package/dist/components/RteEditor/nodes/TableWrapperNode/TableWrapperNode.js.map +1 -0
- package/dist/components/RteEditor/nodes/TableWrapperNode/index.d.ts +1 -0
- package/dist/components/RteEditor/nodes/TableWrapperNode/index.js +10 -0
- package/dist/components/RteEditor/nodes/TableWrapperNode/index.js.map +1 -0
- package/dist/components/RteEditor/nodes/index.d.ts +1 -0
- package/dist/components/RteEditor/nodes/index.js +10 -0
- package/dist/components/RteEditor/nodes/index.js.map +1 -0
- package/dist/components/index.js +1 -1
- package/dist/{helpers-B0VCD9f3.js → helpers-BO6Gg9y6.js} +4 -4
- package/dist/{helpers-B0VCD9f3.js.map → helpers-BO6Gg9y6.js.map} +1 -1
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/dist/Lexical.prod-7x3WP3vd.js.map +0 -1
- package/dist/LexicalTable.prod-CwkGGOke.js.map +0 -1
- package/dist/LexicalUtils.prod-CtYaCJNB.js +0 -107
- package/dist/RteEditor.module-B_3uFnFu.js +0 -41
- package/dist/RteEditor.module-B_3uFnFu.js.map +0 -1
- package/dist/TablePlugin-DNGtPPjq.js +0 -301
- package/dist/TablePlugin-DNGtPPjq.js.map +0 -1
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TablePlugin-cMMBdz-x.js","sources":["../src/components/MultiSelect/components/MultiSelectHeader.tsx","../src/components/MultiSelect/MultiSelect.tsx","../src/components/RteEditor/Plugins/LinkPlugin/AddLinkForm/AddLinkFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/AddTableFrom.tsx","../src/components/RteEditor/Plugins/TablePlugin/TablePlugin.tsx"],"sourcesContent":["import styles from 'components/MultiSelect/MultiSelect.module.css';\nimport { Label } from 'components/Label';\nimport { Button } from 'components';\n\nexport interface MultiSelectHeaderProps {\n label: string;\n clearTrigger?: string;\n onClear?: () => void;\n}\n\nexport function MultiSelectHeader({ label, clearTrigger, onClear }: MultiSelectHeaderProps) {\n return (\n <header className={styles['multi-select__header']}>\n <Label htmlFor=\"multi-select-list\">{label}</Label>\n {clearTrigger && (\n <Button variant={'blank'} onClick={onClear}>\n {clearTrigger}\n </Button>\n )}\n </header>\n );\n}\n","import { clsx } from 'clsx';\n\nimport type { PropsWithChildren, ReactNode } from 'react';\n\nimport styles from './MultiSelect.module.css';\n\nimport { MultiSelectItem } from 'components/MultiSelect/components/MultiSelectItem';\nimport { MultiSelectHeader } from 'components/MultiSelect/components/MultiSelectHeader';\n\nexport interface MultiSelectProps {\n /** `true` if the container should scroll on overflow; otherwise, `false` to resize the container to its contents. The default is `true`. */\n scrollable?: boolean;\n /** `true` to disable the border around the container; otherwise, `false`. The default is `false`. */\n noBorder?: boolean;\n /** The header contents. */\n header?: ReactNode;\n}\n\n/** Represents a component to list a number of checkboxes. */\nexport const MultiSelect = ({ scrollable = true, noBorder, header, children }: PropsWithChildren<MultiSelectProps>) => (\n <>\n {header}\n <div\n className={clsx(styles['multi-select'], {\n [styles['multi-select--no-border']]: noBorder,\n })}\n >\n <ul\n className={clsx(styles['multi-select__list'], {\n [styles['multi-select__list--scrollable']]: scrollable,\n })}\n id=\"multi-select-list\"\n >\n {children}\n </ul>\n </div>\n </>\n);\n\nMultiSelect.MultiSelectHeader = MultiSelectHeader;\nMultiSelect.MultiSelectItem = MultiSelectItem;\n","import { useState, forwardRef, useImperativeHandle, useRef, useId } from 'react';\n\nimport type { ChangeEvent, JSX } from 'react';\nimport type { LinkType } from 'components/RteEditor/Plugins/LinkPlugin';\n\nimport styles from './AddLinkForm.module.css';\n\nimport { ensureHttps, validateUrlWithProtocol } from 'components/RteEditor/Plugins/LinkPlugin/helpers';\nimport { Button, FeedbackBox, FormField, Icon, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface AddLinkFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (url: string, linktext: string) => void;\n isLink: LinkType;\n}\n\nexport interface addLinkFormMethods {\n clearForm: () => void;\n focusFirstField: () => void;\n setDefaults: (url: string, linktext: string) => void;\n}\n\nexport const AddLinkForm = forwardRef(\n (\n { onCloseHandler, onSaveHandler, isLink = { active: false, url: '', linktext: '' } }: AddLinkFormProps,\n ref\n ): JSX.Element => {\n const t = useTranslation();\n const [url, setUrl] = useState<string>(isLink.url || '');\n const [linkText, setLinkText] = useState<string>(isLink.linktext || '');\n const [showLinktextField, setShowLinktextField] = useState<boolean>(false);\n const [urlError, setUrlError] = useState<string | null>(null);\n const [linkTextError, setLinkTextError] = useState<string | null>(null);\n const firstField = useRef<HTMLInputElement>(null);\n const linkId = `link_${useId()}`;\n const textId = `text_${useId()}`;\n\n const handleOpenUrl = () => {\n window.open(ensureHttps(url), '_blank');\n };\n\n const handleUrl = (event: ChangeEvent<HTMLInputElement>) => {\n setUrl(event.target.value);\n };\n\n const handleLinkText = (event: ChangeEvent<HTMLInputElement>) => {\n setLinkText(event.target.value);\n };\n\n const validateUrl = (url: string): boolean => {\n if (validateUrlWithProtocol(url) === false || url.trim() === '') {\n setUrlError(t.errortext.urlNotValid);\n return false;\n }\n setUrlError(null);\n return true;\n };\n\n const validateLinkText = (linkText: string): boolean => {\n if (linkText.trim() === '') {\n setLinkTextError(t.errortext.linkTextNotValid);\n return false;\n }\n setLinkTextError(null);\n return true;\n };\n\n const handleSave = () => {\n if (!validateUrl(url) || (showLinktextField && !validateLinkText(linkText))) {\n return;\n }\n\n onSaveHandler(url, linkText);\n resetForm();\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setUrl('');\n setShowLinktextField(false);\n setUrlError(null);\n setLinkTextError(null);\n };\n\n const setDefaults = (url: string, linktext: string) => {\n setUrl(url);\n if (!linktext && !url) {\n setShowLinktextField(true);\n }\n };\n\n const focusFirstField = () => {\n if (firstField.current) {\n firstField.current.focus();\n }\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField,\n setDefaults,\n }));\n\n return (\n <div className={styles['linkform']}>\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={linkId}>{t.links.linkLabel}</Label>\n <div className={styles['linkform__input-url-wrapper']}>\n <InputField\n id={linkId}\n placeholder={t.links.linkPlaceholder}\n value={url}\n onChange={(event) => handleUrl(event)}\n onFocus={() => setUrlError(null)}\n ref={firstField}\n aria-label={t.aria.labels.linkField}\n />\n {url && (\n <button type=\"button\" onClick={handleOpenUrl} className={styles['linkform__open-url-button']}>\n <Icon name=\"ArrowTopRightOnSquare\" size={20} />\n </button>\n )}\n </div>\n {urlError && <FeedbackBox level=\"error\" feedback={urlError} />}\n </FormField>\n {showLinktextField && (\n <FormField className={styles['linkform__input-field']}>\n <Label htmlFor={textId}>{t.links.linkText}</Label>\n <InputField\n id={textId}\n value={linkText}\n onChange={(event) => handleLinkText(event)}\n onFocus={() => setLinkTextError(null)}\n aria-label={t.aria.labels.linkTextfield}\n />\n {linkTextError && <FeedbackBox level=\"error\" feedback={linkTextError} />}\n </FormField>\n )}\n <div className={styles['linkform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel} type=\"button\">\n {t.common.cancel}\n </Button>\n <Button variant={'primary'} onClick={handleSave} aria-label={t.aria.labels.linkOkButton} type=\"button\">\n {t.links.addLink}\n </Button>\n </div>\n </div>\n );\n }\n);\n","import { useState, forwardRef, useImperativeHandle, useRef, useId, useEffect } from 'react';\n\nimport type { ChangeEvent } from 'react';\n\nimport styles from './AddTableFrom.module.css';\n\nimport { Button, FormField, InputField, Label } from 'components';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\nimport { removeScrollableContainers, setScrollableContainers } from 'components/RteEditor/helpers';\n\ninterface AddTableFormProps {\n onCloseHandler: () => void;\n onSaveHandler: (nrfOfRows: number, nrOfColumns: number) => void;\n}\n\nexport interface addTableForm {\n clearForm: () => void;\n focusFirstField: () => void;\n}\n\nexport const AddTableForm = forwardRef(({ onCloseHandler, onSaveHandler }: AddTableFormProps, ref) => {\n const t = useTranslation();\n const [rowCount, setRowCount] = useState<number>();\n const [columnCount, setColumnCount] = useState<number>();\n const firstField = useRef<HTMLInputElement>(null);\n const rowId = `row_${useId()}`;\n const columnId = `column_${useId()}`;\n\n const handleDimentionChange = (event: ChangeEvent<HTMLInputElement>, type: string) => {\n const value = event.target.value;\n type === 'row' ? setRowCount(parseInt(value)) : setColumnCount(parseInt(value));\n };\n\n const handleSave = () => {\n if (rowCount !== undefined && columnCount !== undefined) {\n onSaveHandler(rowCount, columnCount);\n resetForm();\n }\n };\n\n const handleClose = () => {\n onCloseHandler();\n resetForm();\n };\n\n const resetForm = () => {\n setRowCount(undefined);\n setColumnCount(undefined);\n };\n\n useImperativeHandle(ref, () => ({\n clearForm: resetForm,\n focusFirstField: () => firstField.current?.focus(),\n }));\n\n useEffect(() => {\n const handleResizeScroll = () => {\n handleClose();\n };\n\n setScrollableContainers(handleResizeScroll);\n\n window.addEventListener('scroll', handleResizeScroll);\n window.addEventListener('resize', handleResizeScroll);\n\n return () => {\n window.removeEventListener('scroll', handleResizeScroll);\n window.removeEventListener('resize', handleResizeScroll);\n removeScrollableContainers(handleResizeScroll);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n return (\n <div className={styles['tableform']}>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={rowId}>{t.table.nrofRows}</Label>\n <InputField\n id={rowId}\n placeholder={t.table.nrofRowsPlaceholder}\n value={rowCount ? rowCount : ''}\n onChange={(event) => handleDimentionChange(event, 'row')}\n aria-label={t.aria.labels.tableRowfield}\n ref={firstField}\n />\n </FormField>\n <FormField className={styles['tableform__input-field']}>\n <Label htmlFor={columnId}>{t.table.nrofColumns}</Label>\n <InputField\n id={columnId}\n placeholder={t.table.nrofColumnsPlaceholder}\n value={columnCount ? columnCount : ''}\n onChange={(event) => handleDimentionChange(event, 'column')}\n aria-label={t.aria.labels.tableColumnfield}\n />\n </FormField>\n <div className={styles['tableform__footer']}>\n <Button variant={'secondary'} onClick={handleClose} aria-label={t.common.cancel}>\n {t.common.cancel}\n </Button>\n <Button\n variant={'primary'}\n onClick={handleSave}\n disabled={!rowCount || !columnCount}\n aria-label={t.aria.labels.tableOkButton}\n >\n {t.common.add}\n </Button>\n </div>\n </div>\n );\n});\n","import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';\nimport { clsx } from 'clsx';\nimport { $getTableCellNodeFromLexicalNode, $isTableCellNode, TableCellNode } from '@lexical/table';\nimport {\n $getSelection,\n $isRangeSelection,\n $getRoot,\n KEY_DOWN_COMMAND,\n COMMAND_PRIORITY_EDITOR,\n $isNodeSelection,\n} from 'lexical';\nimport { $getNearestNodeOfType } from '@lexical/utils';\nimport { useRef, useEffect, useImperativeHandle, forwardRef } from 'react';\n\nimport type { TableNode } from '@lexical/table';\nimport type { JSX } from 'react';\nimport type { TextNode } from 'lexical';\nimport type { addTableForm } from './AddTableFrom';\nimport type { Actions } from './TableCellContextMenu';\n\nimport { AddTableForm } from './AddTableFrom';\nimport {\n createTable,\n DEFAULT_COL_WIDTH,\n DEFAULT_EDITOR_WIDTH,\n deleteColumn,\n deleteRow,\n deleteTable,\n getEditorContentWidth,\n getEditorParrentCellWidth,\n insertColumn,\n insertRow,\n PREVENT_OPEN_DELAY,\n} from './helpers';\n\nimport { $createTableWrapperNode } from 'components/RteEditor/nodes';\nimport { useFlyout } from 'components/RteEditor/hooks/useFlyout';\nimport { Icon } from 'components';\nimport styles from 'components/RteEditor/RteEditor.module.css';\nimport { useTranslation } from 'components/RteEditor/hooks/useTranslation';\n\ninterface TablePluginProps {\n isActive: boolean;\n}\nexport interface TableMutation {\n mutateTable: (type: Actions) => void;\n}\n\nexport const TablePlugin = forwardRef(({ isActive }: TablePluginProps, ref): JSX.Element => {\n const t = useTranslation();\n const [editor] = useLexicalComposerContext();\n const { flyout, showFlyout, hideFlyout, isVisible } = useFlyout();\n const addTableForm = useRef<addTableForm>(undefined);\n const buttonRef = useRef<HTMLButtonElement>(null);\n const preventOpen = useRef(false);\n const isVisibleRef = useRef(isVisible);\n\n const openFlyout = () => {\n const rect = buttonRef.current?.getBoundingClientRect();\n if (!preventOpen.current && rect) {\n showFlyout({ position: { top: rect.bottom, left: rect.left }, ...flyoutOptions });\n }\n };\n\n const closeFlyout = () => {\n hideFlyout();\n };\n\n const insertTable = (nrOfRows: number, nrOfColumns: number) => {\n editor.update(() => {\n const selection = $getSelection();\n const tableNode = createTable(nrOfRows, nrOfColumns);\n\n const anchorNode =\n ($isRangeSelection(selection) && selection.anchor.getNode()) ||\n ($isNodeSelection(selection) && selection.getNodes()[0]) ||\n null;\n\n const willBeNested = anchorNode ? $getNearestNodeOfType(anchorNode, TableCellNode) : null;\n\n const availibleWidth = willBeNested\n ? getEditorParrentCellWidth(willBeNested, nrOfColumns, editor)\n : getEditorContentWidth(editor) || DEFAULT_EDITOR_WIDTH;\n\n const perCol = Math.max(DEFAULT_COL_WIDTH, Math.floor(availibleWidth / Math.max(1, nrOfColumns)));\n\n const colWidths = Array.from({ length: nrOfColumns }, () => perCol);\n\n (tableNode as TableNode).setColWidths(colWidths);\n\n const tableWrapper = $createTableWrapperNode();\n tableWrapper.append(tableNode);\n if ($isRangeSelection(selection)) {\n selection.insertNodes([tableWrapper]);\n } else {\n $getRoot().append(tableWrapper);\n }\n const firstDescendant = tableWrapper.getFirstDescendant();\n if (firstDescendant) {\n (firstDescendant as TextNode).select();\n }\n });\n\n closeFlyout();\n };\n\n const mutateTable = (action: Actions) => {\n editor.update(() => {\n const selection = $getSelection();\n if ($isRangeSelection(selection)) {\n const anchorNode = selection.anchor.getNode();\n const currentNode = $getTableCellNodeFromLexicalNode(anchorNode);\n\n if ($isTableCellNode(currentNode)) {\n switch (action) {\n case 'insertRowAbove':\n case 'insertRowBelow':\n insertRow(currentNode, action);\n break;\n case 'deleteRow':\n deleteRow(currentNode);\n break;\n case 'insertColumnLeft':\n case 'insertColumnRight':\n insertColumn(currentNode, action);\n break;\n case 'deleteColumn':\n deleteColumn(currentNode);\n break;\n case 'deleteTable':\n deleteTable(currentNode);\n break;\n }\n }\n }\n });\n };\n\n const flyoutOptions = {\n children: (\n <AddTableForm\n onCloseHandler={closeFlyout}\n onSaveHandler={(rows, columns) => insertTable(rows, columns)}\n ref={addTableForm}\n />\n ),\n };\n\n useEffect(() => {\n if (!isVisible) {\n addTableForm.current?.clearForm();\n setTimeout(() => (preventOpen.current = false), PREVENT_OPEN_DELAY);\n } else {\n preventOpen.current = true;\n addTableForm.current?.focusFirstField();\n }\n }, [addTableForm, isVisible]);\n\n useEffect(() => {\n const removeKeyboardShortcut = editor.registerCommand(\n KEY_DOWN_COMMAND,\n (event: KeyboardEvent) => {\n if (event.ctrlKey && event.shiftKey && event.code === 'Digit9') {\n event.preventDefault();\n openFlyout();\n return true;\n }\n return false;\n },\n COMMAND_PRIORITY_EDITOR\n );\n\n return () => {\n removeKeyboardShortcut();\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [editor]);\n\n useEffect(() => {\n isVisibleRef.current = isVisible;\n }, [isVisible]);\n\n useEffect(() => {\n const removeKeydown = (event: KeyboardEvent) => {\n if (event.key === 'Escape' && isVisibleRef.current) {\n event.preventDefault();\n event.stopPropagation();\n closeFlyout();\n }\n };\n\n document.addEventListener('keydown', removeKeydown, { capture: true });\n\n return () => {\n document.removeEventListener('keydown', removeKeydown);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n\n useImperativeHandle(ref, () => ({\n mutateTable,\n }));\n\n return (\n <div className={styles['editor__toolbar-button-group']}>\n <div className={styles['editor__toolbar-button-flyoutwrapper']}>\n <button\n onClick={openFlyout}\n title={t.table.tableTooltip}\n className={clsx(styles['editor__toolbar-button'], isActive && styles[`editor__toolbar-button--active`])}\n aria-label={t.aria.labels.table}\n aria-keyshortcuts={t.aria.keyshortcuts.table}\n ref={buttonRef}\n type=\"button\"\n >\n <Icon name=\"Table\" size={24} />\n </button>\n {flyout}\n </div>\n </div>\n );\n});\n"],"names":["MultiSelectHeader","label","clearTrigger","onClear","jsxs","styles","jsx","Label","Button","MultiSelect","scrollable","noBorder","header","children","Fragment","clsx","MultiSelectItem","AddLinkForm","forwardRef","onCloseHandler","onSaveHandler","isLink","ref","t","useTranslation","url","setUrl","useState","linkText","setLinkText","showLinktextField","setShowLinktextField","urlError","setUrlError","linkTextError","setLinkTextError","firstField","useRef","linkId","useId","textId","handleOpenUrl","ensureHttps","handleUrl","event","handleLinkText","validateUrl","validateUrlWithProtocol","validateLinkText","handleSave","resetForm","handleClose","setDefaults","linktext","focusFirstField","useImperativeHandle","FormField","InputField","Icon","FeedbackBox","AddTableForm","rowCount","setRowCount","columnCount","setColumnCount","rowId","columnId","handleDimentionChange","type","value","useEffect","handleResizeScroll","setScrollableContainers","removeScrollableContainers","TablePlugin","isActive","editor","useLexicalComposerContext","flyout","showFlyout","hideFlyout","isVisible","useFlyout","addTableForm","buttonRef","preventOpen","isVisibleRef","openFlyout","rect","flyoutOptions","closeFlyout","insertTable","nrOfRows","nrOfColumns","selection","$getSelection","tableNode","createTable","anchorNode","$isRangeSelection","$isNodeSelection","willBeNested","$getNearestNodeOfType","TableCellNode","availibleWidth","getEditorParrentCellWidth","getEditorContentWidth","DEFAULT_EDITOR_WIDTH","perCol","DEFAULT_COL_WIDTH","colWidths","tableWrapper","$createTableWrapperNode","$getRoot","firstDescendant","mutateTable","action","currentNode","$getTableCellNodeFromLexicalNode","$isTableCellNode","insertRow","deleteRow","insertColumn","deleteColumn","deleteTable","rows","columns","PREVENT_OPEN_DELAY","removeKeyboardShortcut","KEY_DOWN_COMMAND","COMMAND_PRIORITY_EDITOR","removeKeydown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,GAAkB,EAAE,OAAAC,GAAO,cAAAC,GAAc,SAAAC,KAAmC;AAC1F,SACE,gBAAAC,EAAC,UAAA,EAAO,WAAWC,EAAO,sBAAsB,GAC9C,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAA,EAAM,SAAQ,qBAAqB,UAAAN,GAAM;AAAA,IACzCC,KACC,gBAAAI,EAACE,GAAA,EAAO,SAAS,SAAS,SAASL,GAChC,UAAAD,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ;ACFO,MAAMO,IAAc,CAAC,EAAE,YAAAC,IAAa,IAAM,UAAAC,GAAU,QAAAC,GAAQ,UAAAC,QACjE,gBAAAT,EAAAU,GAAA,EACG,UAAA;AAAA,EAAAF;AAAA,EACD,gBAAAN;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWS,EAAKV,EAAO,cAAc,GAAG;AAAA,QACtC,CAACA,EAAO,yBAAyB,CAAC,GAAGM;AAAA,MAAA,CACtC;AAAA,MAED,UAAA,gBAAAL;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,WAAWS,EAAKV,EAAO,oBAAoB,GAAG;AAAA,YAC5C,CAACA,EAAO,gCAAgC,CAAC,GAAGK;AAAA,UAAA,CAC7C;AAAA,UACD,IAAG;AAAA,UAEF,UAAAG;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AACF,EAAA,CACF;AAGFJ,EAAY,oBAAoBT;AAChCS,EAAY,kBAAkBO;;;;;;;GCjBjBC,KAAcC;AAAA,EACzB,CACE,EAAE,gBAAAC,GAAgB,eAAAC,GAAe,QAAAC,IAAS,EAAE,QAAQ,IAAO,KAAK,IAAI,UAAU,GAAA,EAAG,GACjFC,MACgB;AAChB,UAAMC,IAAIC,EAAA,GACJ,CAACC,GAAKC,CAAM,IAAIC,EAAiBN,EAAO,OAAO,EAAE,GACjD,CAACO,GAAUC,CAAW,IAAIF,EAAiBN,EAAO,YAAY,EAAE,GAChE,CAACS,GAAmBC,CAAoB,IAAIJ,EAAkB,EAAK,GACnE,CAACK,GAAUC,CAAW,IAAIN,EAAwB,IAAI,GACtD,CAACO,GAAeC,CAAgB,IAAIR,EAAwB,IAAI,GAChES,IAAaC,EAAyB,IAAI,GAC1CC,IAAS,QAAQC,EAAA,CAAO,IACxBC,IAAS,QAAQD,EAAA,CAAO,IAExBE,IAAgB,MAAM;AAC1B,aAAO,KAAKC,GAAYjB,CAAG,GAAG,QAAQ;AAAA,IAAA,GAGlCkB,IAAY,CAACC,MAAyC;AAC1D,MAAAlB,EAAOkB,EAAM,OAAO,KAAK;AAAA,IAAA,GAGrBC,IAAiB,CAACD,MAAyC;AAC/D,MAAAf,EAAYe,EAAM,OAAO,KAAK;AAAA,IAAA,GAG1BE,IAAc,CAACrB,MACfsB,GAAwBtB,CAAG,MAAM,MAASA,EAAI,KAAA,MAAW,MAC3DQ,EAAYV,EAAE,UAAU,WAAW,GAC5B,OAETU,EAAY,IAAI,GACT,KAGHe,IAAmB,CAACpB,MACpBA,EAAS,KAAA,MAAW,MACtBO,EAAiBZ,EAAE,UAAU,gBAAgB,GACtC,OAETY,EAAiB,IAAI,GACd,KAGHc,IAAa,MAAM;AACvB,MAAI,CAACH,EAAYrB,CAAG,KAAMK,KAAqB,CAACkB,EAAiBpB,CAAQ,MAIzER,EAAcK,GAAKG,CAAQ,GAC3BsB,EAAA;AAAA,IAAU,GAGNC,IAAc,MAAM;AACxB,MAAAhC,EAAA,GACA+B,EAAA;AAAA,IAAU,GAGNA,IAAY,MAAM;AACtB,MAAAxB,EAAO,EAAE,GACTK,EAAqB,EAAK,GAC1BE,EAAY,IAAI,GAChBE,EAAiB,IAAI;AAAA,IAAA,GAGjBiB,IAAc,CAAC3B,GAAa4B,MAAqB;AACrD,MAAA3B,EAAOD,CAAG,GACN,CAAC4B,KAAY,CAAC5B,KAChBM,EAAqB,EAAI;AAAA,IAC3B,GAGIuB,IAAkB,MAAM;AAC5B,MAAIlB,EAAW,WACbA,EAAW,QAAQ,MAAA;AAAA,IACrB;AAGF,WAAAmB,EAAoBjC,GAAK,OAAO;AAAA,MAC9B,WAAW4B;AAAA,MACX,iBAAAI;AAAA,MACA,aAAAF;AAAA,IAAA,EACA,GAGA,gBAAAhD,EAAC,OAAA,EAAI,WAAWC,EAAO,UACrB,UAAA;AAAA,MAAA,gBAAAD,EAACoD,GAAA,EAAU,WAAWnD,EAAO,uBAAuB,GAClD,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAM,SAAS+B,GAAS,UAAAf,EAAE,MAAM,WAAU;AAAA,QAC3C,gBAAAnB,EAAC,OAAA,EAAI,WAAWC,EAAO,6BAA6B,GAClD,UAAA;AAAA,UAAA,gBAAAC;AAAA,YAACmD;AAAA,YAAA;AAAA,cACC,IAAInB;AAAA,cACJ,aAAaf,EAAE,MAAM;AAAA,cACrB,OAAOE;AAAA,cACP,UAAU,CAACmB,MAAUD,EAAUC,CAAK;AAAA,cACpC,SAAS,MAAMX,EAAY,IAAI;AAAA,cAC/B,KAAKG;AAAA,cACL,cAAYb,EAAE,KAAK,OAAO;AAAA,YAAA;AAAA,UAAA;AAAA,UAE3BE,KACC,gBAAAnB,EAAC,UAAA,EAAO,MAAK,UAAS,SAASmC,GAAe,WAAWpC,EAAO,2BAA2B,GACzF,UAAA,gBAAAC,EAACoD,GAAA,EAAK,MAAK,yBAAwB,MAAM,IAAI,EAAA,CAC/C;AAAA,QAAA,GAEJ;AAAA,QACC1B,KAAY,gBAAA1B,EAACqD,GAAA,EAAY,OAAM,SAAQ,UAAU3B,EAAA,CAAU;AAAA,MAAA,GAC9D;AAAA,MACCF,KACC,gBAAA1B,EAACoD,GAAA,EAAU,WAAWnD,EAAO,uBAAuB,GAClD,UAAA;AAAA,QAAA,gBAAAC,EAACC,GAAA,EAAM,SAASiC,GAAS,UAAAjB,EAAE,MAAM,UAAS;AAAA,QAC1C,gBAAAjB;AAAA,UAACmD;AAAA,UAAA;AAAA,YACC,IAAIjB;AAAA,YACJ,OAAOZ;AAAA,YACP,UAAU,CAACgB,MAAUC,EAAeD,CAAK;AAAA,YACzC,SAAS,MAAMT,EAAiB,IAAI;AAAA,YACpC,cAAYZ,EAAE,KAAK,OAAO;AAAA,UAAA;AAAA,QAAA;AAAA,QAE3BW,KAAiB,gBAAA5B,EAACqD,GAAA,EAAY,OAAM,SAAQ,UAAUzB,EAAA,CAAe;AAAA,MAAA,GACxE;AAAA,MAEF,gBAAA9B,EAAC,OAAA,EAAI,WAAWC,EAAO,kBACrB,UAAA;AAAA,QAAA,gBAAAC,EAACE,GAAA,EAAO,SAAS,aAAa,SAAS2C,GAAa,cAAY5B,EAAE,OAAO,QAAQ,MAAK,UACnF,UAAAA,EAAE,OAAO,QACZ;AAAA,QACA,gBAAAjB,EAACE,GAAA,EAAO,SAAS,WAAW,SAASyC,GAAY,cAAY1B,EAAE,KAAK,OAAO,cAAc,MAAK,UAC3F,UAAAA,EAAE,MAAM,QAAA,CACX;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAAA,EAAA;AAGN;;;;GCtIaqC,KAAe1C,EAAW,CAAC,EAAE,gBAAAC,GAAgB,eAAAC,EAAA,GAAoCE,MAAQ;AACpG,QAAMC,IAAIC,EAAA,GACJ,CAACqC,GAAUC,CAAW,IAAInC,EAAA,GAC1B,CAACoC,GAAaC,CAAc,IAAIrC,EAAA,GAChCS,IAAaC,EAAyB,IAAI,GAC1C4B,IAAQ,OAAO1B,EAAA,CAAO,IACtB2B,IAAW,UAAU3B,EAAA,CAAO,IAE5B4B,IAAwB,CAACvB,GAAsCwB,MAAiB;AACpF,UAAMC,IAAQzB,EAAM,OAAO;AAC3B,IAAAwB,MAAS,QAAQN,EAAY,SAASO,CAAK,CAAC,IAAIL,EAAe,SAASK,CAAK,CAAC;AAAA,EAAA,GAG1EpB,IAAa,MAAM;AACvB,IAAIY,MAAa,UAAaE,MAAgB,WAC5C3C,EAAcyC,GAAUE,CAAW,GACnCb,EAAA;AAAA,EACF,GAGIC,IAAc,MAAM;AACxB,IAAAhC,EAAA,GACA+B,EAAA;AAAA,EAAU,GAGNA,IAAY,MAAM;AACtB,IAAAY,EAAY,MAAS,GACrBE,EAAe,MAAS;AAAA,EAAA;AAG1B,SAAAT,EAAoBjC,GAAK,OAAO;AAAA,IAC9B,WAAW4B;AAAA,IACX,iBAAiB,MAAMd,EAAW,SAAS,MAAA;AAAA,EAAM,EACjD,GAEFkC,EAAU,MAAM;AACd,UAAMC,IAAqB,MAAM;AAC/B,MAAApB,EAAA;AAAA,IAAY;AAGd,WAAAqB,GAAwBD,CAAkB,GAE1C,OAAO,iBAAiB,UAAUA,CAAkB,GACpD,OAAO,iBAAiB,UAAUA,CAAkB,GAE7C,MAAM;AACX,aAAO,oBAAoB,UAAUA,CAAkB,GACvD,OAAO,oBAAoB,UAAUA,CAAkB,GACvDE,GAA2BF,CAAkB;AAAA,IAAA;AAAA,EAC/C,GAEC,EAAE,GAGH,gBAAAnE,EAAC,OAAA,EAAI,WAAWC,EAAO,WACrB,UAAA;AAAA,IAAA,gBAAAD,EAACoD,GAAA,EAAU,WAAWnD,EAAO,wBAAwB,GACnD,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAM,SAAS0D,GAAQ,UAAA1C,EAAE,MAAM,UAAS;AAAA,MACzC,gBAAAjB;AAAA,QAACmD;AAAA,QAAA;AAAA,UACC,IAAIQ;AAAA,UACJ,aAAa1C,EAAE,MAAM;AAAA,UACrB,OAAOsC,KAAsB;AAAA,UAC7B,UAAU,CAACjB,MAAUuB,EAAsBvB,GAAO,KAAK;AAAA,UACvD,cAAYrB,EAAE,KAAK,OAAO;AAAA,UAC1B,KAAKa;AAAA,QAAA;AAAA,MAAA;AAAA,IACP,GACF;AAAA,IACA,gBAAAhC,EAACoD,GAAA,EAAU,WAAWnD,EAAO,wBAAwB,GACnD,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAA,EAAM,SAAS2D,GAAW,UAAA3C,EAAE,MAAM,aAAY;AAAA,MAC/C,gBAAAjB;AAAA,QAACmD;AAAA,QAAA;AAAA,UACC,IAAIS;AAAA,UACJ,aAAa3C,EAAE,MAAM;AAAA,UACrB,OAAOwC,KAA4B;AAAA,UACnC,UAAU,CAACnB,MAAUuB,EAAsBvB,GAAO,QAAQ;AAAA,UAC1D,cAAYrB,EAAE,KAAK,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IAC5B,GACF;AAAA,IACA,gBAAAnB,EAAC,OAAA,EAAI,WAAWC,EAAO,mBACrB,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAA,EAAO,SAAS,aAAa,SAAS2C,GAAa,cAAY5B,EAAE,OAAO,QACtE,UAAAA,EAAE,OAAO,QACZ;AAAA,MACA,gBAAAjB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,SAAS;AAAA,UACT,SAASyC;AAAA,UACT,UAAU,CAACY,KAAY,CAACE;AAAA,UACxB,cAAYxC,EAAE,KAAK,OAAO;AAAA,UAEzB,YAAE,OAAO;AAAA,QAAA;AAAA,MAAA;AAAA,IACZ,EAAA,CACF;AAAA,EAAA,GACF;AAEJ,CAAC,GC/DYmD,KAAcxD,EAAW,CAAC,EAAE,UAAAyD,EAAA,GAA8BrD,MAAqB;AAC1F,QAAMC,IAAIC,EAAA,GACJ,CAACoD,CAAM,IAAIC,GAAA,GACX,EAAE,QAAAC,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,GAAA,GAChDC,IAAe9C,EAAqB,MAAS,GAC7C+C,IAAY/C,EAA0B,IAAI,GAC1CgD,IAAchD,EAAO,EAAK,GAC1BiD,IAAejD,EAAO4C,CAAS,GAE/BM,IAAa,MAAM;AACvB,UAAMC,IAAOJ,EAAU,SAAS,sBAAA;AAChC,IAAI,CAACC,EAAY,WAAWG,KAC1BT,EAAW,EAAE,UAAU,EAAE,KAAKS,EAAK,QAAQ,MAAMA,EAAK,QAAQ,GAAGC,EAAA,CAAe;AAAA,EAClF,GAGIC,IAAc,MAAM;AACxB,IAAAV,EAAA;AAAA,EAAW,GAGPW,IAAc,CAACC,GAAkBC,MAAwB;AAC7D,IAAAjB,EAAO,OAAO,MAAM;AAClB,YAAMkB,IAAYC,EAAA,GACZC,IAAYC,GAAYL,GAAUC,CAAW,GAE7CK,IACHC,EAAkBL,CAAS,KAAKA,EAAU,OAAO,QAAA,KACjDM,GAAiBN,CAAS,KAAKA,EAAU,SAAA,EAAW,CAAC,KACtD,MAEIO,IAAeH,IAAaI,GAAsBJ,GAAYK,EAAa,IAAI,MAE/EC,IAAiBH,IACnBI,GAA0BJ,GAAcR,GAAajB,CAAM,IAC3D8B,GAAsB9B,CAAM,KAAK+B,IAE/BC,IAAS,KAAK,IAAIC,IAAmB,KAAK,MAAML,IAAiB,KAAK,IAAI,GAAGX,CAAW,CAAC,CAAC,GAE1FiB,IAAY,MAAM,KAAK,EAAE,QAAQjB,EAAA,GAAe,MAAMe,CAAM;AAEjE,MAAAZ,EAAwB,aAAac,CAAS;AAE/C,YAAMC,IAAeC,GAAA;AACrB,MAAAD,EAAa,OAAOf,CAAS,GACzBG,EAAkBL,CAAS,IAC7BA,EAAU,YAAY,CAACiB,CAAY,CAAC,IAEpCE,GAAA,EAAW,OAAOF,CAAY;AAEhC,YAAMG,IAAkBH,EAAa,mBAAA;AACrC,MAAIG,KACDA,EAA6B,OAAA;AAAA,IAChC,CACD,GAEDxB,EAAA;AAAA,EAAY,GAGRyB,IAAc,CAACC,MAAoB;AACvC,IAAAxC,EAAO,OAAO,MAAM;AAClB,YAAMkB,IAAYC,EAAA;AAClB,UAAII,EAAkBL,CAAS,GAAG;AAChC,cAAMI,IAAaJ,EAAU,OAAO,QAAA,GAC9BuB,IAAcC,GAAiCpB,CAAU;AAE/D,YAAIqB,GAAiBF,CAAW;AAC9B,kBAAQD,GAAA;AAAA,YACN,KAAK;AAAA,YACL,KAAK;AACH,cAAAI,GAAUH,GAAaD,CAAM;AAC7B;AAAA,YACF,KAAK;AACH,cAAAK,GAAUJ,CAAW;AACrB;AAAA,YACF,KAAK;AAAA,YACL,KAAK;AACH,cAAAK,GAAaL,GAAaD,CAAM;AAChC;AAAA,YACF,KAAK;AACH,cAAAO,GAAaN,CAAW;AACxB;AAAA,YACF,KAAK;AACH,cAAAO,GAAYP,CAAW;AACvB;AAAA,UAAA;AAAA,MAEN;AAAA,IACF,CACD;AAAA,EAAA,GAGG5B,IAAgB;AAAA,IACpB,UACE,gBAAAnF;AAAA,MAACsD;AAAA,MAAA;AAAA,QACC,gBAAgB8B;AAAA,QAChB,eAAe,CAACmC,GAAMC,MAAYnC,EAAYkC,GAAMC,CAAO;AAAA,QAC3D,KAAK3C;AAAA,MAAA;AAAA,IAAA;AAAA,EACP;AAIJ,SAAAb,EAAU,MAAM;AACd,IAAKW,KAIHI,EAAY,UAAU,IACtBF,EAAa,SAAS,gBAAA,MAJtBA,EAAa,SAAS,UAAA,GACtB,WAAW,MAAOE,EAAY,UAAU,IAAQ0C,EAAkB;AAAA,EAIpE,GACC,CAAC5C,GAAcF,CAAS,CAAC,GAE5BX,EAAU,MAAM;AACd,UAAM0D,IAAyBpD,EAAO;AAAA,MACpCqD;AAAAA,MACA,CAACrF,MACKA,EAAM,WAAWA,EAAM,YAAYA,EAAM,SAAS,YACpDA,EAAM,eAAA,GACN2C,EAAA,GACO,MAEF;AAAA,MAET2C;AAAAA,IAAA;AAGF,WAAO,MAAM;AACX,MAAAF,EAAA;AAAA,IAAuB;AAAA,EACzB,GAEC,CAACpD,CAAM,CAAC,GAEXN,EAAU,MAAM;AACd,IAAAgB,EAAa,UAAUL;AAAA,EAAA,GACtB,CAACA,CAAS,CAAC,GAEdX,EAAU,MAAM;AACd,UAAM6D,IAAgB,CAACvF,MAAyB;AAC9C,MAAIA,EAAM,QAAQ,YAAY0C,EAAa,YACzC1C,EAAM,eAAA,GACNA,EAAM,gBAAA,GACN8C,EAAA;AAAA,IACF;AAGF,oBAAS,iBAAiB,WAAWyC,GAAe,EAAE,SAAS,IAAM,GAE9D,MAAM;AACX,eAAS,oBAAoB,WAAWA,CAAa;AAAA,IAAA;AAAA,EACvD,GAEC,EAAE,GAEL5E,EAAoBjC,GAAK,OAAO;AAAA,IAC9B,aAAA6F;AAAA,EAAA,EACA,GAGA,gBAAA7G,EAAC,OAAA,EAAI,WAAWD,EAAO,8BAA8B,GACnD,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAWC,EAAO,sCAAsC,GAC3D,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASiF;AAAA,QACT,OAAOhE,EAAE,MAAM;AAAA,QACf,WAAWR,EAAKV,EAAO,wBAAwB,GAAGsE,KAAYtE,EAAO,gCAAgC,CAAC;AAAA,QACtG,cAAYkB,EAAE,KAAK,OAAO;AAAA,QAC1B,qBAAmBA,EAAE,KAAK,aAAa;AAAA,QACvC,KAAK6D;AAAA,QACL,MAAK;AAAA,QAEL,UAAA,gBAAA9E,EAACoD,GAAA,EAAK,MAAK,SAAQ,MAAM,GAAA,CAAI;AAAA,MAAA;AAAA,IAAA;AAAA,IAE9BoB;AAAA,EAAA,EAAA,CACH,EAAA,CACF;AAEJ,CAAC;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._editor__container_ng60c_1{background-color:var(--new-color-uva-white);display:flex;flex-direction:column}._editor__header_ng60c_7{align-items:center;display:flex;justify-content:space-between;margin-bottom:.5rem;min-height:1.5rem}._editor__header-word-count_ng60c_15{align-self:flex-end;font-size:.875rem;margin-left:.5rem;text-align:right;white-space:nowrap;width:4.5rem}._editor__header-word-count--alert_ng60c_24{color:var(--new-color-red-600);font-weight:700}._editor_ng60c_1{border:1px solid var(--new-color-grey-600);border-radius:4px;margin-bottom:.5rem;padding:.25rem}._editor_ng60c_1:has(._editor__field_ng60c_36:focus-visible){outline:1px solid var(--new-color-navy-600)}._editor__toolbar_ng60c_40{align-items:center;display:flex;gap:.25rem;justify-content:flex-start;margin-bottom:.25rem;padding:.25rem}._editor__toolbar-button-group_ng60c_49{align-items:center;display:flex;gap:.125rem;justify-content:center}._editor__toolbar-button_ng60c_49{align-items:center;background-color:var(--new-color-uva-white);border:none;border-radius:.25rem;cursor:pointer;display:flex;font-size:1.1rem;height:2rem;justify-content:center;width:2rem}._editor__toolbar-button_ng60c_49:hover{background-color:var(--new-color-grey-400);border:1px solid var(--new-color-grey-700)}._editor__toolbar-button_ng60c_49:focus-visible{outline:.125rem dotted var(--new-color-navy-600);outline-offset:.125rem;z-index:1}._editor__toolbar-button--active_ng60c_80,._editor__toolbar-button_ng60c_49:active{background-color:var(--new-color-uva-black);border-color:var(--new-color-uva-black);color:var(--new-color-uva-white)}._editor__toolbar-button_ng60c_49:disabled{border-color:var(--new-color-grey-300);color:var(--new-color-grey-400);cursor:not-allowed}._editor__toolbar-button_ng60c_49:hover:disabled{background-color:var(--new-color-grey-300);border-color:var(--new-color-grey-300);color:var(--new-color-grey-500);cursor:not-allowed}._editor__toolbar-button--bold_ng60c_100{font-weight:700}._editor__toolbar-button--italic_ng60c_104{font-style:italic}._editor__toolbar-button_ng60c_49:active:hover{color:var(--new-color-uva-white)}._editor__toolbar-button--active_ng60c_80:hover{color:var(--new-color-uva-black)}._editor__toolbar-button--active_ng60c_80:disabled{background-color:var(--new-color-grey-300);border-color:var(--new-color-grey-300);color:var(--new-color-grey-500);cursor:not-allowed}._editor__toolbar-button-flyoutwrapper_ng60c_123,._editor__field-wrapper_ng60c_127{position:relative}._editor__field-wrapper_ng60c_127:before{border-top:1px solid var(--new-color-grey-600);content:"";display:block;height:0;margin-left:-.25rem;margin-top:-.3rem;width:calc(100% + .5rem)}._editor__field_ng60c_36{background-color:var(--new-color-uva-white);margin-top:.5rem;min-height:8rem;overflow-x:hidden;padding:0 .5rem .5rem;position:relative}._editor__field_ng60c_36::-webkit-scrollbar{cursor:default;width:12px}._editor__field_ng60c_36::-webkit-scrollbar-track{background:var(--new-color-uva-white)}._editor__field_ng60c_36::-webkit-scrollbar-thumb{background-color:var(--new-color-grey-500);border:3px solid var(--new-color-uva-white);border-radius:20px;cursor:default}._editor__field_ng60c_36:focus-visible{outline:none}._editor__placeholder_ng60c_170{color:var(--new-color-grey-500);left:.45rem;pointer-events:none;position:absolute;top:.55rem}._guide-text-ltr_ng60c_180{text-align:left}._guide-text-rtl_ng60c_184{text-align:right}._guide-text-paragraph_ng60c_188{margin:0;position:relative}._guide-text__text--bold_ng60c_193{font-weight:700}._guide-text__text--italic_ng60c_197{font-style:italic}._listitem_ng60c_201{margin:0 2rem 0 1rem}._guide-text__list--ol_ng60c_205{list-style-position:inside;margin:0 0 0 -1.25rem}._guide-text__list--ol2_ng60c_210{list-style-position:inside;list-style-type:upper-alpha;margin:0;padding:0}._guide-text__list--ol3_ng60c_217{list-style-position:inside;list-style-type:lower-alpha;margin:0;padding:0}._guide-text__list--ol4_ng60c_224{list-style-position:inside;list-style-type:upper-roman;margin:0;padding:0}._guide-text__list--ol5_ng60c_231{list-style-position:inside;list-style-type:lower-roman;margin:0;padding:0}._guide-text__list--ul_ng60c_238{list-style-position:inside;margin:0 0 0 -1rem;padding:0}._guide-text__list--ul2_ng60c_244{list-style-position:inside;list-style-type:circle;margin:0;padding:0}._guide-text__list--ul3_ng60c_251{list-style-position:inside;list-style-type:square;margin:0;padding:0}._guide-text__list--ul4_ng60c_258{list-style-position:inside;list-style-type:disc;margin:0;padding:0}._guide-text__list--ul5_ng60c_265{list-style-position:inside;list-style-type:circle;margin:0;padding:0}._guide-text__list--listitem_ng60c_272{margin:0 1.5rem}._guide-text__list--ol_ng60c_205 ._guide-text__list--nested-listitem_ng60c_276,._guide-text__list--ul_ng60c_238 ._guide-text__list--nested-listitem_ng60c_276{list-style-type:none}._guide-text__link_ng60c_281{color:var(--new-color-navy-600);cursor:pointer;text-decoration:underline}._guide-text__table-wrapper_ng60c_287{margin:0 1rem .5rem 0;overflow-x:auto}._guide-text__table_ng60c_287{border:2px solid var(--new-color-grey-400);border-collapse:collapse;border-spacing:0;margin:.5rem 0;overflow-x:scroll;overflow-y:scroll;table-layout:fixed;width:fit-content}._guide-text__table_ng60c_287>tr:nth-child(2n){background-color:var(--new-color-grey-100)}._guide-text__table_ng60c_287>tr td{border:1px dotted var(--new-color-grey-400);padding:.25rem .5rem;position:relative;vertical-align:top}td ._guide-text__table-wrapper_ng60c_287{margin:0}td:has(._guide-text__table-wrapper_ng60c_287){padding:0!important}td:has(._guide-text__table-wrapper_ng60c_287) table{border:0;margin:0}td:has(._guide-text__table-wrapper_ng60c_287) table tr{background-color:transparent!important}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
._table-cell-resizer__resizer_2hhfo_17{position:absolute}
|
|
@@ -18,10 +18,11 @@ import "../IconButton/IconButton.js";
|
|
|
18
18
|
import "../Input/Input.js";
|
|
19
19
|
import "../InputField/InputField.js";
|
|
20
20
|
import "react-router";
|
|
21
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
22
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
23
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
24
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "react-dom";
|
|
25
26
|
import "../../index-nrPtQ1dv.js";
|
|
26
27
|
import "../SelectListbox/SelectListbox.js";
|
|
27
28
|
import "../SelectListbox/SelectProvider.js";
|
|
@@ -37,14 +38,14 @@ import '../../assets/CheckboxTree.css';const a = {
|
|
|
37
38
|
"checkbox-tree__leaves": "_checkbox-tree__leaves_l338d_39",
|
|
38
39
|
"checkbox-tree__leaves--expanded": "_checkbox-tree__leaves--expanded_l338d_48",
|
|
39
40
|
"checkbox-tree__leaf": "_checkbox-tree__leaf_l338d_52"
|
|
40
|
-
},
|
|
41
|
+
}, pe = ({
|
|
41
42
|
title: f,
|
|
42
43
|
checkboxTree: F,
|
|
43
44
|
selectedValues: d,
|
|
44
45
|
noLabelFrontWeight: p = !1,
|
|
45
46
|
onChange: b
|
|
46
47
|
}) => {
|
|
47
|
-
const c = G({}), [
|
|
48
|
+
const c = G({}), [m, x] = S([]), { lessThan: h } = N(), R = (r, e) => {
|
|
48
49
|
if (r.length !== e.length) return !1;
|
|
49
50
|
const t = (o) => o.reduce((_, O) => (_[O] = (_[O] || 0) + 1, _), {}), n = t(r), s = t(e);
|
|
50
51
|
return !Object.keys(n).some((o) => n[o] !== s[o]);
|
|
@@ -53,7 +54,7 @@ import '../../assets/CheckboxTree.css';const a = {
|
|
|
53
54
|
Object.entries(c.current).forEach(([e]) => {
|
|
54
55
|
const t = c.current[e].current;
|
|
55
56
|
t && t.name.indexOf("Group") === -1 && t.checked && r.push(t.value);
|
|
56
|
-
}),
|
|
57
|
+
}), x(r), b && b(r);
|
|
57
58
|
}, u = (r) => {
|
|
58
59
|
if (r === "") return;
|
|
59
60
|
const e = [];
|
|
@@ -94,16 +95,16 @@ import '../../assets/CheckboxTree.css';const a = {
|
|
|
94
95
|
g(e, t);
|
|
95
96
|
};
|
|
96
97
|
return E(() => {
|
|
97
|
-
d && !R(d,
|
|
98
|
+
d && !R(d, m) && Object.entries(c.current).forEach(([r]) => {
|
|
98
99
|
const e = c.current[r].current;
|
|
99
|
-
e && (d?.includes(e.value) ? e.checked = !0 : e.checked = !1, e.name.indexOf("Group") !== -1 &&
|
|
100
|
+
e && (d?.includes(e.value) ? e.checked = !0 : e.checked = !1, e.name.indexOf("Group") !== -1 && x(d || []));
|
|
100
101
|
});
|
|
101
102
|
}, [d]), E(() => {
|
|
102
103
|
Object.entries(c.current).forEach(([r]) => {
|
|
103
104
|
const e = c.current[r].current;
|
|
104
105
|
e && e.name.indexOf("Group") !== -1 && u(e.name);
|
|
105
106
|
});
|
|
106
|
-
}, [
|
|
107
|
+
}, [m]), /* @__PURE__ */ l("div", { children: [
|
|
107
108
|
f && /* @__PURE__ */ i("span", { className: a["checkbox-tree__header"], children: f }),
|
|
108
109
|
/* @__PURE__ */ i("div", { onClick: $, "data-ul": !0, role: "tree", tabIndex: 0, children: F.map(({ itemName: r, children: e }, t) => /* @__PURE__ */ l(
|
|
109
110
|
"div",
|
|
@@ -164,6 +165,6 @@ import '../../assets/CheckboxTree.css';const a = {
|
|
|
164
165
|
] });
|
|
165
166
|
};
|
|
166
167
|
export {
|
|
167
|
-
|
|
168
|
+
pe as CheckboxTree
|
|
168
169
|
};
|
|
169
170
|
//# sourceMappingURL=CheckboxTree.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. */\n title?: string;\n /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n checkboxTree: CheckboxBranch[];\n /** Array of selected values. */\n selectedValues?: string[];\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noLabelFrontWeight?: boolean;\n /** Returns array of selected values. */\n onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement | null>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] || 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox || !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') || '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues || []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"CheckboxTree.js","sources":["../../../src/components/CheckboxTree/CheckboxTree.tsx"],"sourcesContent":["import { createRef, useEffect, useRef, useState } from 'react';\nimport { clsx } from 'clsx';\n\nimport type { MouseEventHandler, RefObject } from 'react';\n\nimport styles from './CheckboxTree.module.css';\n\nimport { Button, Checkbox, FormField, Icon, Label } from 'components';\nimport { useResponsive } from 'components/hooks/useResponsive';\n\n// TODO: Currently the checkbox tree shows odd behavior when a disabled checkbox is checked.\n// When deselecting the parent checkbox, the disabled checkbox is deselected, and will never\n// be checked again. We'll leave this for now, until we run into a real world\n// example where this is necessary.\n\nexport type CheckboxLeaf = {\n itemName: string;\n itemValue: string;\n disabled?: boolean;\n};\n\nexport type CheckboxBranch = {\n itemName: string;\n children: CheckboxLeaf[];\n};\n\nexport interface CheckboxTreeProps {\n /** The title of the component. */\n title?: string;\n /** Array of checkbox groups with a label and array of children (itemName, itemValue and disabled boolean). */\n checkboxTree: CheckboxBranch[];\n /** Array of selected values. */\n selectedValues?: string[];\n /** `true` if the font-weight needs to be unset; otherwise, `false`. The default is `false`. */\n noLabelFrontWeight?: boolean;\n /** Returns array of selected values. */\n onChange?: (value: string[]) => void;\n}\n\n/** Represents a component to render a tree of checkboxes. */\nexport const CheckboxTree = ({\n title,\n checkboxTree,\n selectedValues,\n noLabelFrontWeight = false,\n onChange,\n}: CheckboxTreeProps) => {\n const checkboxRefs = useRef<Record<string, RefObject<HTMLInputElement | null>>>({});\n const [values, setValues] = useState<string[]>([]);\n const { lessThan } = useResponsive();\n\n const valuesAreEqual = (values1: string[], values2: string[]): boolean => {\n if (values1.length !== values2.length) return false;\n\n const countElements = (list: string[]) =>\n list.reduce((acc: Record<string, number>, val) => {\n acc[val] = (acc[val] || 0) + 1;\n return acc;\n }, {});\n\n const numberOfValues1 = countElements(values1);\n const numberOfValues2 = countElements(values2);\n\n return !Object.keys(numberOfValues1).some((key) => numberOfValues1[key] !== numberOfValues2[key]);\n };\n\n const createRefForKey = (key: string) => {\n if (!checkboxRefs.current[key]) {\n checkboxRefs.current[key] = createRef();\n }\n return checkboxRefs.current[key];\n };\n\n const setValue = () => {\n const newValues: string[] = [];\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (chkBox && chkBox.name.indexOf('Group') === -1 && chkBox.checked) {\n newValues.push(chkBox.value);\n }\n });\n setValues(newValues);\n if (onChange) onChange(newValues);\n };\n\n const setCheckboxesState = (checkGroupName: string) => {\n if (checkGroupName === '') return;\n\n const groupStatus: boolean[] = [];\n\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox?.getAttribute('data-groupname') === checkGroupName) {\n groupStatus.push(chkBox.checked);\n }\n });\n\n const every = groupStatus.every(Boolean);\n const some = groupStatus.some(Boolean);\n\n if (checkboxRefs.current[checkGroupName].current) {\n checkboxRefs.current[checkGroupName].current.checked = every;\n checkboxRefs.current[checkGroupName].current.indeterminate = !every && every !== some;\n checkboxRefs.current[checkGroupName].current.checked = every && every === some;\n }\n };\n\n const setExpandedAttributes = (trigger: HTMLButtonElement, container: Element | null) => {\n const children = container?.querySelector('[data-ul]');\n\n (trigger.childNodes[0] as Element).classList.toggle(styles['checkbox-tree__branch--icon--expanded']);\n container\n ?.closest('[data-li]')\n ?.setAttribute(\n 'aria-expanded',\n container?.closest('[data-li]')?.getAttribute('aria-expanded') === 'false' ? 'true' : 'false'\n );\n\n if (children) {\n children.classList.toggle(styles['checkbox-tree__leaves--expanded']);\n }\n };\n\n const handleChange: MouseEventHandler<HTMLDivElement> = (event) => {\n const check = event.target as HTMLInputElement;\n\n if (check.type !== 'checkbox' && check.type !== 'button') return;\n\n if (\n lessThan.md &&\n check.name.indexOf('Group') !== -1 &&\n check.parentNode &&\n (check.parentNode.parentNode as HTMLElement).getAttribute('aria-expanded') === 'false'\n ) {\n event.preventDefault();\n setExpandedAttributes(check.parentNode as HTMLButtonElement, check.parentNode.parentNode as HTMLElement);\n return;\n }\n\n if (check.name.indexOf('Group') !== -1) {\n const childPrefix = check.name;\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n if (key.indexOf(`${childPrefix}_`) !== -1) {\n const chkBox = checkboxRefs.current[key].current;\n const parentCheckbox = checkboxRefs.current[childPrefix].current;\n if (!chkBox || !parentCheckbox) return;\n chkBox.checked = parentCheckbox.checked ? true : false;\n }\n });\n setCheckboxesState(childPrefix);\n setValue();\n return;\n }\n setCheckboxesState(check.getAttribute('data-groupname') || '');\n setValue();\n };\n\n const handleExpanded: MouseEventHandler<HTMLButtonElement> = (event) => {\n const target = event.target as HTMLButtonElement;\n const parent = target.closest('[data-li]');\n setExpandedAttributes(target, parent);\n };\n\n useEffect(() => {\n if (selectedValues && !valuesAreEqual(selectedValues, values)) {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (selectedValues?.includes(chkBox.value)) {\n chkBox.checked = true;\n } else {\n chkBox.checked = false;\n }\n if (chkBox.name.indexOf('Group') !== -1) {\n setValues(selectedValues || []);\n }\n });\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedValues]);\n\n useEffect(() => {\n Object.entries(checkboxRefs.current).forEach(([key]) => {\n const chkBox = checkboxRefs.current[key].current;\n if (!chkBox) return;\n if (chkBox.name.indexOf('Group') !== -1) {\n setCheckboxesState(chkBox.name);\n }\n });\n }, [values]);\n\n return (\n <div>\n {title && <span className={styles['checkbox-tree__header']}>{title}</span>}\n {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}\n <div onClick={handleChange} data-ul role=\"tree\" tabIndex={0}>\n {checkboxTree.map(({ itemName, children }, index) => (\n <div\n key={itemName}\n className={styles['checkbox-tree__branch']}\n data-li\n aria-expanded={lessThan.md ? 'false' : 'true'}\n >\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Button variant=\"blank\" onClick={handleExpanded}>\n <Icon\n name=\"CheveronRight\"\n size={16}\n className={clsx(styles['checkbox-tree__branch--icon'], {\n [styles['checkbox-tree__branch--icon--expanded']]: !lessThan.md,\n })}\n />\n </Button>\n <Checkbox\n id={itemName}\n name={`Group${index}`}\n disabled={children.every((checkbox) => checkbox.disabled)}\n ref={createRefForKey(`Group${index}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n <div\n className={clsx(styles['checkbox-tree__leaves'], {\n [styles['checkbox-tree__leaves--expanded']]: !lessThan.md,\n })}\n data-ul\n >\n {children.map(({ itemName, itemValue, disabled }) => (\n <div key={itemName} className={styles['checkbox-tree__leaf']} data-li>\n <FormField inline className={styles['checkbox-tree__branch--formfield']}>\n <Checkbox\n id={itemName}\n name={itemName}\n value={itemValue}\n disabled={disabled}\n data-groupname={`Group${index}`}\n ref={createRefForKey(`Group${index}_${itemName}`)}\n />\n <Label htmlFor={itemName} noFontWeight={noLabelFrontWeight}>\n {itemName}\n </Label>\n </FormField>\n </div>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n );\n};\n"],"names":["CheckboxTree","title","checkboxTree","selectedValues","noLabelFrontWeight","onChange","checkboxRefs","useRef","values","setValues","useState","lessThan","useResponsive","valuesAreEqual","values1","values2","countElements","list","acc","val","numberOfValues1","numberOfValues2","key","createRefForKey","createRef","setValue","newValues","chkBox","setCheckboxesState","checkGroupName","groupStatus","every","some","setExpandedAttributes","trigger","container","children","styles","handleChange","event","check","childPrefix","parentCheckbox","handleExpanded","target","parent","useEffect","itemName","index","jsxs","FormField","jsx","Button","Icon","clsx","Checkbox","checkbox","Label","itemValue","disabled"],"mappings":"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"}
|
|
@@ -17,10 +17,11 @@ import "../IconButton/IconButton.js";
|
|
|
17
17
|
import "../Input/Input.js";
|
|
18
18
|
import "../InputField/InputField.js";
|
|
19
19
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
21
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
24
|
+
import "react-dom";
|
|
24
25
|
import "../../index-nrPtQ1dv.js";
|
|
25
26
|
import "../SelectListbox/SelectListbox.js";
|
|
26
27
|
import "../SelectListbox/SelectProvider.js";
|
|
@@ -33,7 +34,7 @@ import '../../assets/FormInput.css';const o = {
|
|
|
33
34
|
"form-input__input-feedback-container": "_form-input__input-feedback-container_c0vpz_25",
|
|
34
35
|
"form-input__input-container": "_form-input__input-container_c0vpz_35",
|
|
35
36
|
"form-input__input": "_form-input__input_c0vpz_25"
|
|
36
|
-
},
|
|
37
|
+
}, X = ({
|
|
37
38
|
id: i,
|
|
38
39
|
label: n,
|
|
39
40
|
labelPosition: f = "top",
|
|
@@ -65,6 +66,6 @@ import '../../assets/FormInput.css';const o = {
|
|
|
65
66
|
return u ? c : /* @__PURE__ */ t("div", { className: v(o["form-input__container"], o[`form-input__container--label-${f}`]), children: c });
|
|
66
67
|
};
|
|
67
68
|
export {
|
|
68
|
-
|
|
69
|
+
X as FormInput
|
|
69
70
|
};
|
|
70
71
|
//# sourceMappingURL=FormInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange?: (value: string) => void;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FormInput.js","sources":["../../../src/components/FormInput/FormInput.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport type { ReactNode } from 'react';\n\nimport styles from './FormInput.module.css';\n\nimport { FeedbackBox, Label } from 'components';\n\nexport interface FormInputProps {\n /** The id of the input element. */\n id: string;\n /** label text if empthy the label is not renderd */\n label: string;\n /** label position `top` or `left`. The default is `top`. */\n labelPosition?: 'top' | 'left';\n /** The type of the input element. */\n type?: 'text' | 'password' | 'email' | 'number';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange?: (value: string) => void;\n /** Determines if the container wrapper is rendered. */\n noContainer?: boolean;\n /** Optional custom input that will replace the default input */\n customInput?: ReactNode;\n}\n\nexport const FormInput = ({\n id,\n label,\n labelPosition = 'top',\n type = 'text',\n required = false,\n notValidatedText = '',\n onChange,\n noContainer = false,\n customInput,\n}: FormInputProps) => {\n const blockInvalidChar = (event: React.KeyboardEvent<HTMLInputElement>) =>\n ['e', 'E', '+', '-'].includes(event.key) && event.preventDefault();\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (typeof onChange === 'function') {\n onChange(event.target.value);\n }\n };\n\n const componentContent = (\n <>\n {label && (\n <Label htmlFor={id} required={required} alignRight>\n {label}\n </Label>\n )}\n\n <div className={styles['form-input__input-feedback-container']}>\n {customInput ? (\n customInput\n ) : (\n <div className={styles['form-input__input-container']}>\n <input\n id={id}\n type={type}\n {...(type === 'number' && { onKeyDown: blockInvalidChar })}\n onChange={handleChange}\n className={styles['form-input__input']}\n />\n </div>\n )}\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </>\n );\n\n return noContainer ? (\n componentContent\n ) : (\n <div className={clsx(styles['form-input__container'], styles[`form-input__container--label-${labelPosition}`])}>\n {componentContent}\n </div>\n );\n};\n"],"names":["FormInput","id","label","labelPosition","type","required","notValidatedText","onChange","noContainer","customInput","blockInvalidChar","event","handleChange","componentContent","jsxs","Fragment","Label","styles","jsx","FeedbackBox","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BaA,IAAY,CAAC;AAAA,EACxB,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,MAAAC,IAAO;AAAA,EACP,UAAAC,IAAW;AAAA,EACX,kBAAAC,IAAmB;AAAA,EACnB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,aAAAC;AACF,MAAsB;AACpB,QAAMC,IAAmB,CAACC,MACxB,CAAC,KAAK,KAAK,KAAK,GAAG,EAAE,SAASA,EAAM,GAAG,KAAKA,EAAM,eAAA,GAE9CC,IAAe,CAACD,MAA+C;AACnE,IAAI,OAAOJ,KAAa,cACtBA,EAASI,EAAM,OAAO,KAAK;AAAA,EAC7B,GAGIE,IACJ,gBAAAC,EAAAC,GAAA,EACG,UAAA;AAAA,IAAAb,uBACEc,GAAA,EAAM,SAASf,GAAI,UAAAI,GAAoB,YAAU,IAC/C,UAAAH,EAAA,CACH;AAAA,IAGF,gBAAAY,EAAC,OAAA,EAAI,WAAWG,EAAO,sCAAsC,GAC1D,UAAA;AAAA,MAAAR,KAGC,gBAAAS,EAAC,OAAA,EAAI,WAAWD,EAAO,6BAA6B,GAClD,UAAA,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAAjB;AAAA,UACA,MAAAG;AAAA,UACC,GAAIA,MAAS,YAAY,EAAE,WAAWM,EAAA;AAAA,UACvC,UAAUE;AAAA,UACV,WAAWK,EAAO,mBAAmB;AAAA,QAAA;AAAA,MAAA,GAEzC;AAAA,MAEDX,MAAqB,MAAM,gBAAAY,EAACC,KAAY,OAAM,SAAQ,UAAUb,EAAA,CAAkB;AAAA,IAAA,EAAA,CACrF;AAAA,EAAA,GACF;AAGF,SAAOE,IACLK,IAEA,gBAAAK,EAAC,OAAA,EAAI,WAAWE,EAAKH,EAAO,uBAAuB,GAAGA,EAAO,gCAAgCd,CAAa,EAAE,CAAC,GAC1G,UAAAU,GACH;AAEJ;"}
|
|
@@ -17,10 +17,11 @@ import "../GridRow/GridRow.js";
|
|
|
17
17
|
import "../IconButton/IconButton.js";
|
|
18
18
|
import "../Input/Input.js";
|
|
19
19
|
import "react-router";
|
|
20
|
-
import "../../TablePlugin-
|
|
20
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
21
21
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
22
22
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
23
23
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
24
|
+
import "react-dom";
|
|
24
25
|
import "../../index-nrPtQ1dv.js";
|
|
25
26
|
import "../SelectListbox/SelectListbox.js";
|
|
26
27
|
import "../SelectListbox/SelectProvider.js";
|
|
@@ -33,7 +34,7 @@ const C = `
|
|
|
33
34
|
`, f = (t) => {
|
|
34
35
|
const r = t.variant ?? [];
|
|
35
36
|
return { ...t, variant: r.toString() };
|
|
36
|
-
},
|
|
37
|
+
}, X = {
|
|
37
38
|
title: "Atoms/InputField",
|
|
38
39
|
component: e,
|
|
39
40
|
argTypes: {
|
|
@@ -104,6 +105,6 @@ export {
|
|
|
104
105
|
b as InputFieldExample,
|
|
105
106
|
y as WithIconClearTrigger,
|
|
106
107
|
v as WithStringClearTrigger,
|
|
107
|
-
|
|
108
|
+
X as default
|
|
108
109
|
};
|
|
109
110
|
//# sourceMappingURL=InputField.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from 'storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InputField.stories.js","sources":["../../../src/components/InputField/InputField.stories.tsx"],"sourcesContent":["import { useRef, useState } from 'react';\nimport { fn } from 'storybook/test';\n\nimport type { ChangeEvent } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { InputFieldProps } from './InputField';\n\nimport { InputField } from './InputField';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon } from 'components';\n\nconst codeString = `\n// Has all HTMLInputElement props available except \"className\" and \"style\" \n<InputField aria-labelledby={aria-labelledby} id={id} onChange={onChangeFunction}\n value={value} type={type} clearTrigger={clearTrigger} />\n`;\n\nconst transformArgs = (args: InputFieldProps) => {\n // args.variant is provided as an array because the control type is set to a checkbox. So this transforms the selected value into its proper value: a string\n const variantArray = (args.variant as unknown as string[]) ?? [];\n return { ...args, ...{ variant: variantArray.toString() } } as InputFieldProps;\n};\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/InputField',\n component: InputField,\n argTypes: {\n variant: {\n options: ['large'],\n control: 'check',\n },\n width: {\n control: 'radio',\n options: [undefined, 'small', 'compact'],\n },\n type: {\n control: 'radio',\n options: ['text', 'password', 'email'],\n },\n background: {\n control: 'check',\n options: ['white'],\n },\n id: {\n control: 'text',\n },\n autoComplete: {\n table: {\n disable: true,\n },\n },\n },\n parameters: {\n inspectComponent: InputField,\n codeString: codeString,\n },\n} as Meta<InputFieldProps>;\n\nconst Template: StoryFn<InputFieldProps> = (args) => {\n const [inputValue, setInputValue] = useState<InputFieldProps['value']>('');\n const inputRef = useRef<HTMLInputElement>(null);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n setInputValue(event.target.value);\n fn()('handleChange');\n };\n\n const handleClear = () => {\n setInputValue('');\n fn()('handleClear');\n };\n\n return (\n <Container>\n <InputField\n {...transformArgs(args)}\n value={inputValue}\n onChange={handleChange}\n onClear={handleClear}\n ref={inputRef}\n />\n </Container>\n );\n};\n\nconst defaultArgs: Partial<InputFieldProps> = {\n type: 'text',\n variant: undefined,\n id: '4f9ca77d',\n};\n\nexport const InputFieldExample = Template.bind({});\nInputFieldExample.args = {\n ...defaultArgs,\n};\n\nexport const WithStringClearTrigger = Template.bind({});\nWithStringClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: 'Clear',\n};\n\nexport const WithIconClearTrigger = Template.bind({});\nWithIconClearTrigger.args = {\n ...defaultArgs,\n clearTrigger: <Icon name=\"Cross\" />,\n};\n"],"names":["codeString","transformArgs","args","variantArray","InputField_stories","InputField","Template","inputValue","setInputValue","useState","inputRef","useRef","handleChange","event","fn","handleClear","Container","jsx","defaultArgs","InputFieldExample","WithStringClearTrigger","WithIconClearTrigger","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAMA,IAAa;AAAA;AAAA;AAAA;AAAA,GAMbC,IAAgB,CAACC,MAA0B;AAE/C,QAAMC,IAAgBD,EAAK,WAAmC,CAAA;AAC9D,SAAO,EAAE,GAAGA,GAAW,SAASC,EAAa,SAAA,EAAW;AAC1D,GAGAC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,SAAS,CAAC,OAAO;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,IAEX,OAAO;AAAA,MACL,SAAS;AAAA,MACT,SAAS,CAAC,QAAW,SAAS,SAAS;AAAA,IAAA;AAAA,IAEzC,MAAM;AAAA,MACJ,SAAS;AAAA,MACT,SAAS,CAAC,QAAQ,YAAY,OAAO;AAAA,IAAA;AAAA,IAEvC,YAAY;AAAA,MACV,SAAS;AAAA,MACT,SAAS,CAAC,OAAO;AAAA,IAAA;AAAA,IAEnB,IAAI;AAAA,MACF,SAAS;AAAA,IAAA;AAAA,IAEX,cAAc;AAAA,MACZ,OAAO;AAAA,QACL,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAEF,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAL;AAAA,EAAA;AAEJ,GAEMM,IAAqC,CAACJ,MAAS;AACnD,QAAM,CAACK,GAAYC,CAAa,IAAIC,EAAmC,EAAE,GACnEC,IAAWC,EAAyB,IAAI,GAExCC,IAAe,CAACC,MAAyC;AAC7D,IAAAL,EAAcK,EAAM,OAAO,KAAK,GAChCC,EAAA,EAAK,cAAc;AAAA,EAAA,GAGfC,IAAc,MAAM;AACxB,IAAAP,EAAc,EAAE,GAChBM,EAAA,EAAK,aAAa;AAAA,EAAA;AAGpB,2BACGE,GAAA,EACC,UAAA,gBAAAC;AAAA,IAACZ;AAAA,IAAA;AAAA,MACE,GAAGJ,EAAcC,CAAI;AAAA,MACtB,OAAOK;AAAA,MACP,UAAUK;AAAA,MACV,SAASG;AAAA,MACT,KAAKL;AAAA,IAAA;AAAA,EAAA,GAET;AAEJ,GAEMQ,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,IAAI;AACN,GAEaC,IAAoBb,EAAS,KAAK,CAAA,CAAE;AACjDa,EAAkB,OAAO;AAAA,EACvB,GAAGD;AACL;AAEO,MAAME,IAAyBd,EAAS,KAAK,CAAA,CAAE;AACtDc,EAAuB,OAAO;AAAA,EAC5B,GAAGF;AAAA,EACH,cAAc;AAChB;AAEO,MAAMG,IAAuBf,EAAS,KAAK,CAAA,CAAE;AACpDe,EAAqB,OAAO;AAAA,EAC1B,GAAGH;AAAA,EACH,cAAc,gBAAAD,EAACK,GAAA,EAAK,MAAK,QAAA,CAAQ;AACnC;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsxs as S, jsx as r } from "react/jsx-runtime";
|
|
2
2
|
import { l as d } from "../../index-BYGu3RV5.js";
|
|
3
3
|
import { useState as p } from "react";
|
|
4
|
-
import { M as e } from "../../TablePlugin-
|
|
4
|
+
import { M as e } from "../../TablePlugin-cMMBdz-x.js";
|
|
5
5
|
import { Container as M } from "../../storyComponents/Container/Container.js";
|
|
6
6
|
const C = `
|
|
7
7
|
// MultiSelectHeader can be added optionally
|
|
@@ -16,16 +16,17 @@ import "../../IconButton/IconButton.js";
|
|
|
16
16
|
import "../../Input/Input.js";
|
|
17
17
|
import "../../InputField/InputField.js";
|
|
18
18
|
import "react-router";
|
|
19
|
-
import { a as
|
|
19
|
+
import { a as A } from "../../../TablePlugin-cMMBdz-x.js";
|
|
20
20
|
import "../../RteEditor/Providers/LanguageProvider.js";
|
|
21
21
|
import "../../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
22
22
|
import "../../RteEditor/hooks/components/Flyout.js";
|
|
23
|
+
import "react-dom";
|
|
23
24
|
import "../../../index-nrPtQ1dv.js";
|
|
24
25
|
import "../../SelectListbox/SelectListbox.js";
|
|
25
26
|
import "../../SelectListbox/SelectProvider.js";
|
|
26
27
|
import "../../Sortable/components/SortableItem.js";
|
|
27
28
|
import "../../../SortableProvider-l8-7ClBJ.js";
|
|
28
29
|
export {
|
|
29
|
-
|
|
30
|
+
A as MultiSelectHeader
|
|
30
31
|
};
|
|
31
32
|
//# sourceMappingURL=MultiSelectHeader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"MultiSelectHeader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -18,10 +18,11 @@ import "../Input/Input.js";
|
|
|
18
18
|
import "../InputField/InputField.js";
|
|
19
19
|
import { Label as D } from "../Label/Label.js";
|
|
20
20
|
import "react-router";
|
|
21
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
22
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
23
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
24
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "react-dom";
|
|
25
26
|
import "../../index-nrPtQ1dv.js";
|
|
26
27
|
import "../SelectListbox/SelectListbox.js";
|
|
27
28
|
import "../SelectListbox/SelectProvider.js";
|
|
@@ -38,7 +39,7 @@ import '../../assets/PeriodSelector.css';const s = {
|
|
|
38
39
|
for (let o = 0; o < i.length; o += _)
|
|
39
40
|
n.push(i.slice(o, o + _));
|
|
40
41
|
return n;
|
|
41
|
-
},
|
|
42
|
+
}, _e = ({
|
|
42
43
|
maxPeriods: i = I,
|
|
43
44
|
defaultValues: n,
|
|
44
45
|
label: o,
|
|
@@ -88,6 +89,6 @@ import '../../assets/PeriodSelector.css';const s = {
|
|
|
88
89
|
);
|
|
89
90
|
};
|
|
90
91
|
export {
|
|
91
|
-
|
|
92
|
+
_e as PeriodSelector
|
|
92
93
|
};
|
|
93
94
|
//# sourceMappingURL=PeriodSelector.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n notValidated={notValidatedText !== ''}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
|
|
@@ -18,16 +18,17 @@ import "../GridRow/GridRow.js";
|
|
|
18
18
|
import "../IconButton/IconButton.js";
|
|
19
19
|
import "../Input/Input.js";
|
|
20
20
|
import "../InputField/InputField.js";
|
|
21
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
22
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
23
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
24
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "react-dom";
|
|
25
26
|
import "../../index-nrPtQ1dv.js";
|
|
26
27
|
import "../SelectListbox/SelectListbox.js";
|
|
27
28
|
import "../SelectListbox/SelectProvider.js";
|
|
28
29
|
import "../Sortable/components/SortableItem.js";
|
|
29
30
|
import "../../SortableProvider-l8-7ClBJ.js";
|
|
30
|
-
const p = "<ProgrammeCard key={key} header={header} details={details} href={href} />",
|
|
31
|
+
const p = "<ProgrammeCard key={key} header={header} details={details} href={href} />", L = {
|
|
31
32
|
title: "Atoms/ProgrammeCard",
|
|
32
33
|
component: o,
|
|
33
34
|
parameters: {
|
|
@@ -76,6 +77,6 @@ export {
|
|
|
76
77
|
c as MultiProgrammeCards,
|
|
77
78
|
l as ProgrammeCardExample,
|
|
78
79
|
d as WithComplexContent,
|
|
79
|
-
|
|
80
|
+
L as default
|
|
80
81
|
};
|
|
81
82
|
//# sourceMappingURL=ProgrammeCard.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { BrowserRouter } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\nconst codeString = '<ProgrammeCard key={key} header={header} details={details} href={href} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n parameters: {\n inspectComponent: ProgrammeCard,\n codeString: codeString,\n },\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n </BrowserRouter>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n href: '/',\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n </BrowserRouter>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","BrowserRouter","Container","ProgrammeCardExample","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ProgrammeCard.stories.js","sources":["../../../src/components/ProgrammeCard/ProgrammeCard.stories.tsx"],"sourcesContent":["import { BrowserRouter } from 'react-router';\n\nimport type { Meta, StoryFn } from '@storybook/react';\nimport type { ProgrammeCardProps } from './ProgrammeCard';\n\nimport { ProgrammeCard } from './ProgrammeCard';\n\nimport { Container } from 'storyComponents/Container';\nimport { Icon, Repeater } from 'components';\n\nconst codeString = '<ProgrammeCard key={key} header={header} details={details} href={href} />';\n\n// eslint-disable-next-line import/no-default-export\nexport default {\n title: 'Atoms/ProgrammeCard',\n component: ProgrammeCard,\n parameters: {\n inspectComponent: ProgrammeCard,\n codeString: codeString,\n },\n} as Meta<ProgrammeCardProps>;\n\nconst Template: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <ProgrammeCard {...args} />\n </Container>\n </BrowserRouter>\n);\n\nexport const ProgrammeCardExample = Template.bind({});\nProgrammeCardExample.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n\nexport const WithComplexContent = Template.bind({});\nWithComplexContent.args = {\n header: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Icon name=\"Envelope\" size={32} />\n <h2 style={{ margin: 0 }}>This is my header</h2>\n </Repeater>\n ),\n details: (\n <Repeater flexDirection=\"row\" gap=\"150\">\n <Repeater flexDirection=\"row\">\n <Icon name=\"FaceFrown\" />\n Details 1\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Heart\" />\n Details 2\n </Repeater>\n <Repeater flexDirection=\"row\">\n <Icon name=\"Sparkles\" />\n Details 3\n </Repeater>\n </Repeater>\n ),\n href: '/',\n};\n\nconst MultiProgrammeCardsTemplate: StoryFn<ProgrammeCardProps> = (args) => (\n <BrowserRouter>\n <Container size=\"large\">\n <Repeater>\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n <ProgrammeCard {...args} />\n </Repeater>\n </Container>\n </BrowserRouter>\n);\n\nexport const MultiProgrammeCards = MultiProgrammeCardsTemplate.bind({});\nMultiProgrammeCards.args = {\n header: 'This is my header',\n details: 'This is my details',\n href: '/',\n};\n"],"names":["codeString","ProgrammeCard_stories","ProgrammeCard","Template","args","jsx","BrowserRouter","Container","ProgrammeCardExample","WithComplexContent","jsxs","Repeater","Icon","MultiProgrammeCardsTemplate","MultiProgrammeCards"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,MAAMA,IAAa,6EAGnBC,IAAe;AAAA,EACb,OAAO;AAAA,EACP,WAAWC;AAAA,EACX,YAAY;AAAA,IACV,kBAAkBA;AAAA,IAClB,YAAAF;AAAA,EAAA;AAEJ,GAEMG,IAAwC,CAACC,MAC7C,gBAAAC,EAACC,KACC,UAAA,gBAAAD,EAACE,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAF,EAACH,GAAA,EAAe,GAAGE,EAAA,CAAM,GAC3B,GACF,GAGWI,IAAuBL,EAAS,KAAK,CAAA,CAAE;AACpDK,EAAqB,OAAO;AAAA,EAC1B,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;AAEO,MAAMC,IAAqBN,EAAS,KAAK,CAAA,CAAE;AAClDM,EAAmB,OAAO;AAAA,EACxB,QACE,gBAAAC,EAACC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,YAAW,MAAM,IAAI;AAAA,sBAC/B,MAAA,EAAG,OAAO,EAAE,QAAQ,EAAA,GAAK,UAAA,oBAAA,CAAiB;AAAA,EAAA,GAC7C;AAAA,EAEF,SACE,gBAAAF,EAACC,GAAA,EAAS,eAAc,OAAM,KAAI,OAChC,UAAA;AAAA,IAAA,gBAAAD,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,YAAA,CAAY;AAAA,MAAE;AAAA,IAAA,GAE3B;AAAA,IACA,gBAAAF,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,QAAA,CAAQ;AAAA,MAAE;AAAA,IAAA,GAEvB;AAAA,IACA,gBAAAF,EAACC,GAAA,EAAS,eAAc,OACtB,UAAA;AAAA,MAAA,gBAAAN,EAACO,GAAA,EAAK,MAAK,WAAA,CAAW;AAAA,MAAE;AAAA,IAAA,EAAA,CAE1B;AAAA,EAAA,GACF;AAAA,EAEF,MAAM;AACR;AAEA,MAAMC,IAA2D,CAACT,MAChE,gBAAAC,EAACC,GAAA,EACC,4BAACC,GAAA,EAAU,MAAK,SACd,UAAA,gBAAAG,EAACC,GAAA,EACC,UAAA;AAAA,EAAA,gBAAAN,EAACH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAA,EAAe,GAAGE,GAAM;AAAA,EACzB,gBAAAC,EAACH,GAAA,EAAe,GAAGE,EAAA,CAAM;AAAA,EAAA,CAC3B,GACF,GACF,GAGWU,IAAsBD,EAA4B,KAAK,CAAA,CAAE;AACtEC,EAAoB,OAAO;AAAA,EACzB,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AACR;"}
|
|
@@ -18,10 +18,11 @@ import "../IconButton/IconButton.js";
|
|
|
18
18
|
import "../Input/Input.js";
|
|
19
19
|
import "../InputField/InputField.js";
|
|
20
20
|
import "react-router";
|
|
21
|
-
import "../../TablePlugin-
|
|
21
|
+
import "../../TablePlugin-cMMBdz-x.js";
|
|
22
22
|
import "../RteEditor/Providers/LanguageProvider.js";
|
|
23
23
|
import "../RteEditor/Plugins/LinkPlugin/LinkContextMenu/LinkContextMenu.js";
|
|
24
24
|
import "../RteEditor/hooks/components/Flyout.js";
|
|
25
|
+
import "react-dom";
|
|
25
26
|
import "../../index-nrPtQ1dv.js";
|
|
26
27
|
import "../SelectListbox/SelectListbox.js";
|
|
27
28
|
import "../SelectListbox/SelectProvider.js";
|
|
@@ -34,7 +35,7 @@ import '../../assets/RadioTabSelector.css';const t = {
|
|
|
34
35
|
"radio-tab-selector-button-bar__row-container": "_radio-tab-selector-button-bar__row-container_a4wnc_18",
|
|
35
36
|
"radio-tab-selector-button-bar__row": "_radio-tab-selector-button-bar__row_a4wnc_18",
|
|
36
37
|
"radio-tab-selector-button-bar__row--not-validated": "_radio-tab-selector-button-bar__row--not-validated_a4wnc_35"
|
|
37
|
-
},
|
|
38
|
+
}, T = ({
|
|
38
39
|
buttons: l,
|
|
39
40
|
radioGroupName: c,
|
|
40
41
|
defaultValue: _,
|
|
@@ -86,6 +87,6 @@ import '../../assets/RadioTabSelector.css';const t = {
|
|
|
86
87
|
);
|
|
87
88
|
};
|
|
88
89
|
export {
|
|
89
|
-
|
|
90
|
+
T as RadioTabSelector
|
|
90
91
|
};
|
|
91
92
|
//# sourceMappingURL=RadioTabSelector.js.map
|