@limetech/lime-elements 37.68.0 → 37.69.1

package/dist/collection/components/text-editor/prosemirror-adapter/plugins/trigger/factory.js.map

@@ -1 +1 @@
-{"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts"],"names":[],"mappings":"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","sourcesContent":["import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';\nimport { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';\nimport { EditorView } from 'prosemirror-view';\nimport { inserterFactory } from './inserter';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n} from 'src/components/text-editor/text-editor.types';\n\nconst isTrigger = (\n    key: string,\n    validTriggers: TriggerCharacter[],\n): key is TriggerCharacter => {\n    return key.length === 1 && validTriggers.includes(key as TriggerCharacter);\n};\n\nconst shouldTrigger = (state: EditorState): boolean => {\n    const { $from } = state.selection;\n\n    if ($from.pos === 1) {\n        return true;\n    }\n\n    // Getting the position immediately before the current selection\n    const prevPos = $from.pos - 1;\n\n    if (prevPos > 0) {\n        // allow trigger if the cursor is at the start of a new paragraph\n        if ($from.parentOffset === 0) {\n            return true;\n        }\n\n        const prevChar = state.doc.textBetween(prevPos, $from.pos);\n\n        return prevChar === ' ' || prevChar === '\\n';\n    }\n\n    return false;\n};\n\nconst stillHasTrigger = (\n    state: EditorState,\n    activeTrigger: string,\n    triggerPosition: number,\n    triggerLength: number,\n): boolean => {\n    const cursorPosition = state.selection.$from.pos;\n\n    if (\n        cursorPosition < triggerPosition ||\n        cursorPosition > triggerPosition + triggerLength + 1\n    ) {\n        return false;\n    }\n\n    return (\n        state.doc.textBetween(triggerPosition, triggerPosition + 1) ===\n        activeTrigger\n    );\n};\n\nconst getTriggerEventDetail = (\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n): TriggerEventDetail => {\n    return {\n        trigger: trigger,\n        textEditor: inserterFactory(view),\n        value: value,\n    };\n};\n\nconst sendTriggerEvent = (\n    type: 'triggerStart' | 'triggerStop' | 'triggerChange',\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n) => {\n    const event = new CustomEvent<TriggerEventDetail>(type, {\n        detail: getTriggerEventDetail(view, trigger, value),\n        bubbles: true,\n        composed: true,\n    });\n    view.dom.dispatchEvent(event);\n};\n\nconst processTransactions = (\n    text: string,\n    transactions: Transaction[],\n    oldState: EditorState,\n): string => {\n    let textAdded = '';\n    let textRemoved = '';\n\n    transactions.forEach((transaction) => {\n        if (transaction.docChanged) {\n            transaction.steps.forEach((step) => {\n                if (\n                    step instanceof ReplaceStep ||\n                    step instanceof ReplaceAroundStep\n                ) {\n                    const slice = step.slice;\n                    const fromPos = step.from;\n                    const toPos = step.to;\n\n                    if (slice?.size) {\n                        // Text added\n                        textAdded += slice.content.textBetween(0, slice.size);\n                    } else if (fromPos !== toPos) {\n                        // Text removed\n                        const removedText = oldState.doc.textBetween(\n                            fromPos,\n                            toPos,\n                        );\n                        textRemoved += removedText;\n                    }\n                }\n            });\n        }\n    });\n\n    if (textAdded) {\n        text += textAdded;\n    } else if (textRemoved) {\n        text = text.slice(0, -textRemoved.length);\n    }\n\n    return text;\n};\n\nexport const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {\n    let activeTrigger: TriggerCharacter | null = null;\n    let triggerText = '';\n    let pluginView: EditorView | null = null;\n    let triggerPosition: number | null = null;\n\n    const stopTrigger = () => {\n        triggerText = '';\n        sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);\n        triggerPosition = null;\n        activeTrigger = null;\n    };\n\n    const handleKeyDown = (view: EditorView, event: any) => {\n        const { state } = view;\n\n        if (event.key === 'Escape') {\n            stopTrigger();\n\n            return true;\n        }\n\n        if (isTrigger(event.key, triggerCharacters) && shouldTrigger(state)) {\n            activeTrigger = event.key;\n            triggerText = '';\n            triggerPosition = state.selection.$from.pos - triggerText.length;\n            sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);\n\n            return false;\n        }\n\n        return false;\n    };\n\n    const appendTransactions = (\n        transactions: Transaction[],\n        oldState: EditorState,\n        newState: EditorState,\n    ): Transaction => {\n        if (!activeTrigger || !triggerPosition || !pluginView) {\n            return;\n        }\n\n        if (\n            !stillHasTrigger(\n                newState,\n                activeTrigger,\n                triggerPosition,\n                triggerText.length,\n            )\n        ) {\n            return;\n        }\n\n        const updatedText = processTransactions(\n            triggerText,\n            transactions,\n            oldState,\n        );\n\n        if (updatedText !== triggerText) {\n            triggerText = updatedText;\n            sendTriggerEvent(\n                'triggerChange',\n                pluginView,\n                activeTrigger,\n                triggerText.slice(1),\n            );\n        }\n    };\n\n    return new Plugin({\n        key: new PluginKey('triggerPlugin'),\n        view: (view: EditorView) => {\n            pluginView = view;\n\n            return {};\n        },\n        state: {\n            init: () => {\n                return {};\n            },\n            apply: (transaction: Transaction) => {\n                if (transaction.getMeta('stopTrigger')) {\n                    stopTrigger();\n                }\n\n                return {};\n            },\n        },\n        props: {\n            handleKeyDown: handleKeyDown,\n        },\n        appendTransaction: appendTransactions,\n    });\n};\n"]}
+{"version":3,"file":"factory.js","sourceRoot":"","sources":["../../../../../../src/components/text-editor/prosemirror-adapter/plugins/trigger/factory.ts"],"names":[],"mappings":"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","sourcesContent":["import { Plugin, PluginKey, EditorState, Transaction } from 'prosemirror-state';\nimport { ReplaceStep, ReplaceAroundStep } from 'prosemirror-transform';\nimport { EditorView } from 'prosemirror-view';\nimport { inserterFactory } from './inserter';\nimport {\n    TriggerCharacter,\n    TriggerEventDetail,\n} from 'src/components/text-editor/text-editor.types';\n\nconst isTrigger = (\n    key: string,\n    validTriggers: TriggerCharacter[],\n): key is TriggerCharacter => {\n    return key.length === 1 && validTriggers.includes(key as TriggerCharacter);\n};\n\nconst shouldTrigger = (state: EditorState): boolean => {\n    const { $from } = state.selection;\n\n    if ($from.pos === 1) {\n        return true;\n    }\n\n    // Getting the position immediately before the current selection\n    const prevPos = $from.pos - 1;\n\n    if (prevPos > 0) {\n        // allow trigger if the cursor is at the start of a new paragraph\n        if ($from.parentOffset === 0) {\n            return true;\n        }\n\n        const prevChar = state.doc.textBetween(prevPos, $from.pos);\n\n        return prevChar === ' ' || prevChar === '\\n';\n    }\n\n    return false;\n};\n\nconst stillHasTrigger = (\n    state: EditorState,\n    activeTrigger: string,\n    triggerPosition: number,\n    triggerLength: number,\n): boolean => {\n    const cursorPosition = state.selection.$from.pos;\n\n    if (\n        cursorPosition < triggerPosition ||\n        cursorPosition > triggerPosition + triggerLength + 1\n    ) {\n        return false;\n    }\n\n    return (\n        state.doc.textBetween(triggerPosition, triggerPosition + 1) ===\n        activeTrigger\n    );\n};\n\nconst getTriggerEventDetail = (\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n): TriggerEventDetail => {\n    return {\n        trigger: trigger,\n        textEditor: inserterFactory(view),\n        value: value,\n    };\n};\n\nconst sendTriggerEvent = (\n    type: 'triggerStart' | 'triggerStop' | 'triggerChange',\n    view: EditorView,\n    trigger: TriggerCharacter,\n    value: string,\n) => {\n    const event = new CustomEvent<TriggerEventDetail>(type, {\n        detail: getTriggerEventDetail(view, trigger, value),\n        bubbles: true,\n        composed: true,\n    });\n    view.dom.dispatchEvent(event);\n};\n\nconst processTransactions = (\n    text: string,\n    transactions: Transaction[],\n    oldState: EditorState,\n): string => {\n    let textAdded = '';\n    let textRemoved = '';\n\n    transactions.forEach((transaction) => {\n        if (transaction.docChanged) {\n            transaction.steps.forEach((step) => {\n                if (\n                    step instanceof ReplaceStep ||\n                    step instanceof ReplaceAroundStep\n                ) {\n                    const slice = step.slice;\n                    const fromPos = step.from;\n                    const toPos = step.to;\n\n                    if (slice?.size) {\n                        // Text added\n                        textAdded += slice.content.textBetween(0, slice.size);\n                    } else if (fromPos !== toPos) {\n                        // Text removed\n                        const removedText = oldState.doc.textBetween(\n                            fromPos,\n                            toPos,\n                        );\n                        textRemoved += removedText;\n                    }\n                }\n            });\n        }\n    });\n\n    if (textAdded) {\n        text += textAdded;\n    } else if (textRemoved) {\n        text = text.slice(0, -textRemoved.length);\n    }\n\n    return text;\n};\n\nexport const createTriggerPlugin = (triggerCharacters: TriggerCharacter[]) => {\n    let activeTrigger: TriggerCharacter | null = null;\n    let triggerText = '';\n    let pluginView: EditorView | null = null;\n    let triggerPosition: number | null = null;\n\n    const stopTrigger = () => {\n        triggerText = '';\n        sendTriggerEvent('triggerStop', pluginView, activeTrigger, triggerText);\n        triggerPosition = null;\n        activeTrigger = null;\n    };\n\n    const handleKeyDown = (_: EditorView, event: any) => {\n        if (event.key === 'Escape') {\n            stopTrigger();\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleInput = (view: EditorView, event: any) => {\n        const { state } = view;\n\n        if (\n            event.inputType === 'insertText' &&\n            isTrigger(event.data, triggerCharacters) &&\n            shouldTrigger(state)\n        ) {\n            activeTrigger = event.data;\n            triggerText = '';\n            triggerPosition = state.selection.$from.pos - triggerText.length;\n            sendTriggerEvent('triggerStart', view, activeTrigger, triggerText);\n\n            return false;\n        }\n\n        return false;\n    };\n\n    const appendTransactions = (\n        transactions: Transaction[],\n        oldState: EditorState,\n        newState: EditorState,\n    ): Transaction => {\n        if (!activeTrigger || !triggerPosition || !pluginView) {\n            return;\n        }\n\n        if (\n            !stillHasTrigger(\n                newState,\n                activeTrigger,\n                triggerPosition,\n                triggerText.length,\n            )\n        ) {\n            return;\n        }\n\n        const updatedText = processTransactions(\n            triggerText,\n            transactions,\n            oldState,\n        );\n\n        if (updatedText !== triggerText) {\n            triggerText = updatedText;\n            sendTriggerEvent(\n                'triggerChange',\n                pluginView,\n                activeTrigger,\n                triggerText.slice(1),\n            );\n        }\n    };\n\n    return new Plugin({\n        key: new PluginKey('triggerPlugin'),\n        view: (view: EditorView) => {\n            pluginView = view;\n\n            return {};\n        },\n        state: {\n            init: () => {\n                return {};\n            },\n            apply: (transaction: Transaction) => {\n                if (transaction.getMeta('stopTrigger')) {\n                    stopTrigger();\n                }\n\n                return {};\n            },\n        },\n        props: {\n            handleKeyDown: handleKeyDown,\n            handleDOMEvents: {\n                input: handleInput,\n            },\n        },\n        appendTransaction: appendTransactions,\n    });\n};\n"]}

package/dist/esm/lime-elements.js

@@ -17,7 +17,7 @@ const patchBrowser = () => {
 };
 
 patchBrowser().then(options => {
-  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-dynamic-label_4\",[[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}],[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]],[\"limel-breadcrumbs_5\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}]]],[\"limel-action-bar_4\",[[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}],[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]]]"), options);
+  return bootstrapLazy(JSON.parse("[[\"limel-text-editor\",[[1,\"limel-text-editor\",{\"contentType\":[1,\"content-type\"],\"language\":[513],\"disabled\":[516],\"readonly\":[516],\"helperText\":[513,\"helper-text\"],\"placeholder\":[513],\"label\":[513],\"invalid\":[516],\"value\":[513],\"customElements\":[16],\"triggers\":[16],\"required\":[516],\"allowResize\":[516,\"allow-resize\"],\"ui\":[513]}]]],[\"limel-file\",[[1,\"limel-file\",{\"value\":[16],\"label\":[513],\"required\":[516],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"accept\":[513],\"language\":[1]}]]],[\"limel-card\",[[1,\"limel-card\",{\"heading\":[513],\"subheading\":[513],\"image\":[16],\"icon\":[513],\"value\":[1],\"actions\":[16],\"clickable\":[516],\"orientation\":[513]}]]],[\"limel-picker\",[[1,\"limel-picker\",{\"disabled\":[4],\"readonly\":[516],\"label\":[1],\"searchLabel\":[1,\"search-label\"],\"helperText\":[513,\"helper-text\"],\"leadingIcon\":[1,\"leading-icon\"],\"emptyResultMessage\":[1,\"empty-result-message\"],\"required\":[4],\"invalid\":[516],\"value\":[16],\"searcher\":[16],\"multiple\":[4],\"delimiter\":[513],\"actions\":[16],\"actionPosition\":[1,\"action-position\"],\"actionScrollBehavior\":[1,\"action-scroll-behavior\"],\"badgeIcons\":[516,\"badge-icons\"],\"items\":[32],\"textValue\":[32],\"loading\":[32],\"chips\":[32]}]]],[\"limel-split-button\",[[17,\"limel-split-button\",{\"label\":[513],\"primary\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"items\":[16]}]]],[\"limel-file-viewer\",[[1,\"limel-file-viewer\",{\"url\":[513],\"filename\":[513],\"alt\":[513],\"allowFullscreen\":[516,\"allow-fullscreen\"],\"allowOpenInNewTab\":[516,\"allow-open-in-new-tab\"],\"allowDownload\":[516,\"allow-download\"],\"language\":[1],\"officeViewer\":[513,\"office-viewer\"],\"actions\":[16],\"isFullscreen\":[32],\"fileType\":[32],\"loading\":[32],\"fileUrl\":[32]}]]],[\"limel-color-picker\",[[1,\"limel-color-picker\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"tooltipLabel\":[513,\"tooltip-label\"],\"required\":[516],\"readonly\":[516],\"isOpen\":[32]}]]],[\"limel-date-picker\",[[1,\"limel-date-picker\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516],\"value\":[16],\"type\":[513],\"format\":[513],\"language\":[513],\"formatter\":[16],\"internalFormat\":[32],\"showPortal\":[32]}]]],[\"limel-dock\",[[1,\"limel-dock\",{\"dockItems\":[16],\"dockFooterItems\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"expanded\":[516],\"allowResize\":[516,\"allow-resize\"],\"mobileBreakPoint\":[514,\"mobile-break-point\"],\"useMobileLayout\":[32]}]]],[\"limel-snackbar\",[[1,\"limel-snackbar\",{\"open\":[516],\"message\":[1],\"timeout\":[514],\"actionText\":[1,\"action-text\"],\"dismissible\":[4],\"multiline\":[4],\"language\":[1],\"offset\":[32],\"isOpen\":[32],\"closing\":[32],\"show\":[64]},[[0,\"changeOffset\",\"onChangeIndex\"]]]]],[\"limel-tab-panel\",[[1,\"limel-tab-panel\",{\"tabs\":[1040]}]]],[\"limel-select\",[[1,\"limel-select\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"required\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"value\":[16],\"options\":[16],\"multiple\":[4],\"menuOpen\":[32]}]]],[\"limel-button-group\",[[1,\"limel-button-group\",{\"value\":[16],\"disabled\":[516],\"selectedButtonId\":[32]}]]],[\"limel-chart\",[[1,\"limel-chart\",{\"language\":[513],\"accessibleLabel\":[513,\"accessible-label\"],\"accessibleItemsLabel\":[513,\"accessible-items-label\"],\"items\":[16],\"type\":[513],\"orientation\":[513],\"maxValue\":[514,\"max-value\"],\"axisIncrement\":[514,\"axis-increment\"],\"loading\":[516]}]]],[\"limel-collapsible-section\",[[1,\"limel-collapsible-section\",{\"isOpen\":[1540,\"is-open\"],\"header\":[513],\"actions\":[16]}]]],[\"limel-help\",[[1,\"limel-help\",{\"value\":[1],\"trigger\":[1],\"readMoreLink\":[16],\"openDirection\":[513,\"open-direction\"],\"isOpen\":[32]}]]],[\"limel-table\",[[1,\"limel-table\",{\"data\":[16],\"columns\":[16],\"mode\":[1],\"layout\":[1],\"pageSize\":[2,\"page-size\"],\"totalRows\":[2,\"total-rows\"],\"sorting\":[16],\"activeRow\":[1040],\"movableColumns\":[4,\"movable-columns\"],\"loading\":[4],\"page\":[2],\"emptyMessage\":[1,\"empty-message\"],\"aggregates\":[16],\"selectable\":[4],\"selection\":[16]}]]],[\"limel-info-tile\",[[1,\"limel-info-tile\",{\"value\":[520],\"icon\":[1],\"label\":[513],\"prefix\":[513],\"suffix\":[513],\"disabled\":[516],\"badge\":[520],\"loading\":[516],\"link\":[16],\"progress\":[16]}]]],[\"limel-switch\",[[1,\"limel-switch\",{\"label\":[513],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"value\":[516],\"helperText\":[513,\"helper-text\"],\"readonlyLabels\":[16],\"fieldId\":[32]}]]],[\"limel-dialog\",[[1,\"limel-dialog\",{\"heading\":[1],\"fullscreen\":[516],\"open\":[1540],\"closingActions\":[16]}]]],[\"limel-progress-flow\",[[1,\"limel-progress-flow\",{\"flowItems\":[16],\"disabled\":[4],\"readonly\":[4]}]]],[\"limel-shortcut\",[[1,\"limel-shortcut\",{\"icon\":[513],\"label\":[513],\"disabled\":[516],\"badge\":[520],\"link\":[16]}]]],[\"limel-banner\",[[1,\"limel-banner\",{\"message\":[513],\"icon\":[513],\"isOpen\":[32],\"open\":[64],\"close\":[64]}]]],[\"limel-callout\",[[1,\"limel-callout\",{\"heading\":[513],\"icon\":[513],\"type\":[513],\"language\":[1]}]]],[\"limel-slider\",[[1,\"limel-slider\",{\"disabled\":[516],\"readonly\":[516],\"factor\":[514],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"unit\":[513],\"value\":[514],\"valuemax\":[514],\"valuemin\":[514],\"step\":[514],\"percentageClass\":[32]}]]],[\"limel-code-editor\",[[1,\"limel-code-editor\",{\"value\":[1],\"language\":[1],\"readonly\":[4],\"lineNumbers\":[4,\"line-numbers\"],\"fold\":[4],\"lint\":[4],\"colorScheme\":[1,\"color-scheme\"],\"random\":[32]}]]],[\"limel-config\",[[1,\"limel-config\",{\"config\":[16]}]]],[\"limel-flex-container\",[[1,\"limel-flex-container\",{\"direction\":[513],\"justify\":[513],\"align\":[513],\"reverse\":[516]}]]],[\"limel-form\",[[1,\"limel-form\",{\"schema\":[16],\"value\":[16],\"disabled\":[4],\"propsFactory\":[16],\"transformErrors\":[16],\"errors\":[16]}]]],[\"limel-grid\",[[1,\"limel-grid\"]]],[\"limel-prosemirror-adapter\",[[1,\"limel-prosemirror-adapter\",{\"contentType\":[1,\"content-type\"],\"value\":[1],\"language\":[513],\"customElements\":[16],\"triggerCharacters\":[16],\"view\":[32],\"actionBarItems\":[32],\"link\":[32],\"isLinkMenuOpen\":[32]}]]],[\"limel-color-picker-palette\",[[17,\"limel-color-picker-palette\",{\"value\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"required\":[516]}]]],[\"limel-dock-button\",[[0,\"limel-dock-button\",{\"item\":[16],\"expanded\":[516],\"useMobileLayout\":[516,\"use-mobile-layout\"],\"isOpen\":[32]}]]],[\"limel-icon-button\",[[17,\"limel-icon-button\",{\"icon\":[513],\"elevated\":[516],\"label\":[513],\"disabled\":[516]}]]],[\"limel-tab-bar\",[[1,\"limel-tab-bar\",{\"tabs\":[1040],\"canScrollLeft\":[32],\"canScrollRight\":[32]},[[9,\"resize\",\"handleWindowResize\"]]]]],[\"limel-checkbox\",[[1,\"limel-checkbox\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"checked\":[516],\"indeterminate\":[516],\"required\":[516],\"readonlyLabels\":[16],\"modified\":[32]}]]],[\"limel-header\",[[1,\"limel-header\",{\"icon\":[1],\"heading\":[1],\"subheading\":[1],\"supportingText\":[1,\"supporting-text\"],\"subheadingDivider\":[1,\"subheading-divider\"]}]]],[\"limel-help-content\",[[1,\"limel-help-content\",{\"value\":[1],\"readMoreLink\":[16]}]]],[\"limel-progress-flow-item\",[[0,\"limel-progress-flow-item\",{\"item\":[16],\"disabled\":[4],\"readonly\":[4],\"currentStep\":[4,\"current-step\"]}]]],[\"limel-circular-progress\",[[1,\"limel-circular-progress\",{\"value\":[2],\"maxValue\":[2,\"max-value\"],\"prefix\":[513],\"suffix\":[1],\"displayPercentageColors\":[4,\"display-percentage-colors\"],\"size\":[513]}]]],[\"limel-flatpickr-adapter\",[[1,\"limel-flatpickr-adapter\",{\"value\":[16],\"type\":[1],\"format\":[1],\"isOpen\":[4,\"is-open\"],\"inputElement\":[16],\"language\":[1],\"formatter\":[16]}]]],[\"limel-file-dropzone_2\",[[1,\"limel-file-dropzone\",{\"accept\":[513],\"disabled\":[4],\"text\":[1],\"helperText\":[1,\"helper-text\"],\"hasFileToDrop\":[32]}],[1,\"limel-file-input\",{\"accept\":[513],\"disabled\":[516],\"multiple\":[516]}]]],[\"limel-markdown\",[[1,\"limel-markdown\",{\"value\":[1],\"whitelist\":[16]}]]],[\"limel-portal\",[[1,\"limel-portal\",{\"openDirection\":[513,\"open-direction\"],\"position\":[513],\"containerId\":[513,\"container-id\"],\"containerStyle\":[16],\"inheritParentWidth\":[516,\"inherit-parent-width\"],\"visible\":[516],\"anchor\":[16]}]]],[\"limel-icon\",[[1,\"limel-icon\",{\"size\":[513],\"name\":[513],\"badge\":[516]}]]],[\"limel-dynamic-label_2\",[[1,\"limel-dynamic-label\",{\"value\":[8],\"defaultLabel\":[16],\"labels\":[16]}],[1,\"limel-helper-line\",{\"helperText\":[513,\"helper-text\"],\"length\":[514],\"maxLength\":[514,\"max-length\"],\"invalid\":[516],\"helperTextId\":[513,\"helper-text-id\"]}]]],[\"limel-badge_3\",[[1,\"limel-badge\",{\"label\":[520]}],[1,\"limel-tooltip\",{\"elementId\":[513,\"element-id\"],\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514],\"openDirection\":[513,\"open-direction\"],\"open\":[32]}],[1,\"limel-tooltip-content\",{\"label\":[513],\"helperLabel\":[513,\"helper-label\"],\"maxlength\":[514]}]]],[\"limel-breadcrumbs_7\",[[1,\"limel-menu\",{\"items\":[16],\"disabled\":[516],\"openDirection\":[513,\"open-direction\"],\"surfaceWidth\":[513,\"surface-width\"],\"open\":[1540],\"badgeIcons\":[516,\"badge-icons\"],\"gridLayout\":[516,\"grid-layout\"],\"loading\":[516],\"currentSubMenu\":[1040],\"rootItem\":[16],\"searcher\":[16],\"emptyResultMessage\":[1,\"empty-result-message\"],\"loadingSubItems\":[32],\"searchValue\":[32],\"searchResults\":[32]}],[1,\"limel-breadcrumbs\",{\"items\":[16],\"divider\":[1]}],[17,\"limel-menu-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-input-field\",{\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"label\":[513],\"placeholder\":[513],\"helperText\":[513,\"helper-text\"],\"prefix\":[513],\"suffix\":[513],\"required\":[516],\"value\":[513],\"trailingIcon\":[513,\"trailing-icon\"],\"leadingIcon\":[513,\"leading-icon\"],\"pattern\":[513],\"type\":[513],\"formatNumber\":[516,\"format-number\"],\"step\":[520],\"max\":[514],\"min\":[514],\"maxlength\":[514],\"minlength\":[514],\"completions\":[16],\"showLink\":[516,\"show-link\"],\"locale\":[513],\"isFocused\":[32],\"wasInvalid\":[32],\"showCompletions\":[32]}],[1,\"limel-spinner\",{\"size\":[513],\"limeBranded\":[4,\"lime-branded\"]}],[17,\"limel-list\",{\"items\":[16],\"badgeIcons\":[4,\"badge-icons\"],\"iconSize\":[1,\"icon-size\"],\"type\":[1],\"maxLinesSecondaryText\":[2,\"max-lines-secondary-text\"]}],[1,\"limel-menu-surface\",{\"open\":[4],\"allowClicksElement\":[16]}]]],[\"limel-chip_2\",[[1,\"limel-chip-set\",{\"value\":[16],\"type\":[513],\"label\":[513],\"helperText\":[513,\"helper-text\"],\"disabled\":[516],\"readonly\":[516],\"invalid\":[516],\"inputType\":[513,\"input-type\"],\"maxItems\":[514,\"max-items\"],\"required\":[516],\"searchLabel\":[513,\"search-label\"],\"emptyInputOnBlur\":[516,\"empty-input-on-blur\"],\"clearAllButton\":[4,\"clear-all-button\"],\"leadingIcon\":[513,\"leading-icon\"],\"delimiter\":[513],\"autocomplete\":[513],\"language\":[1],\"editMode\":[32],\"textValue\":[32],\"blurred\":[32],\"inputChipIndexSelected\":[32],\"selectedChipIds\":[32],\"getEditMode\":[64],\"setFocus\":[64],\"emptyInput\":[64]}],[17,\"limel-chip\",{\"language\":[513],\"text\":[513],\"icon\":[1],\"image\":[16],\"link\":[16],\"badge\":[520],\"disabled\":[516],\"readonly\":[516],\"selected\":[516],\"invalid\":[516],\"removable\":[516],\"type\":[513],\"loading\":[516],\"progress\":[514],\"identifier\":[520],\"menuItems\":[16]}]]],[\"limel-button\",[[17,\"limel-button\",{\"label\":[513],\"primary\":[516],\"outlined\":[516],\"icon\":[513],\"disabled\":[516],\"loading\":[516],\"loadingFailed\":[516,\"loading-failed\"],\"justLoaded\":[32]}]]],[\"limel-linear-progress\",[[1,\"limel-linear-progress\",{\"language\":[513],\"value\":[514],\"indeterminate\":[516],\"accessibleLabel\":[513,\"accessible-label\"]}]]],[\"limel-action-bar-item_2\",[[0,\"limel-action-bar-overflow-menu\",{\"items\":[16],\"openDirection\":[513,\"open-direction\"]}],[0,\"limel-action-bar-item\",{\"item\":[16],\"isVisible\":[516,\"is-visible\"],\"selected\":[516]}]]],[\"limel-action-bar_2\",[[1,\"limel-text-editor-link-menu\",{\"link\":[16],\"language\":[513],\"isOpen\":[516,\"is-open\"]}],[1,\"limel-action-bar\",{\"actions\":[16],\"accessibleLabel\":[513,\"accessible-label\"],\"layout\":[513],\"openDirection\":[513,\"open-direction\"],\"overflowCutoff\":[32]}]]],[\"limel-popover_2\",[[1,\"limel-popover\",{\"open\":[4],\"openDirection\":[513,\"open-direction\"]}],[1,\"limel-popover-surface\",{\"contentCollection\":[16]}]]]]"), options);
 });
 
 //# sourceMappingURL=lime-elements.js.map

package/dist/esm/limel-action-bar-item_2.entry.js

@@ -0,0 +1,117 @@
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-6156b4fd.js';
+import { c as createRandomString } from './random-string-812b1c35.js';
+import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-a30589fb.js';
+import { g as getIconName, a as getIconColor } from './get-icon-props-0b65f85e.js';
+
+const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
+
+const ActionBarButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.select = createEvent(this, "select", 7);
+    this.handleClick = (event) => {
+      event.stopPropagation();
+      this.select.emit(this.item);
+    };
+    this.item = undefined;
+    this.isVisible = true;
+    this.selected = false;
+    this.tooltipId = createRandomString();
+  }
+  componentWillLoad() {
+    makeEnterClickable(this.host);
+  }
+  componentDidLoad() {
+    this.triggerIconColorWarning();
+  }
+  disconnectedCallback() {
+    removeEnterClickable(this.host);
+  }
+  render() {
+    if (!this.isItem(this.item) && this.item.separator) {
+      return h("div", { role: "separator" });
+    }
+    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
+        'is-selected': this.isItem(this.item) && this.item.selected,
+      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
+  }
+  isItem(item) {
+    return !('separator' in item);
+  }
+  isDisabled() {
+    if (this.isItem(this.item) && this.item.disabled) {
+      return true;
+    }
+    if (!this.isVisible) {
+      return true;
+    }
+  }
+  renderIcon() {
+    if (this.isItem(this.item) && !this.item.icon) {
+      return;
+    }
+    if ('icon' in this.item) {
+      const name = getIconName(this.item.icon);
+      const color = getIconColor(this.item.icon, this.item.iconColor);
+      return (h("limel-icon", { name: name, style: {
+          '--action-bar-item-icon-color': `${color}`,
+        } }));
+    }
+  }
+  renderLabel() {
+    if (!this.isItem(this.item) || this.item.iconOnly) {
+      return;
+    }
+    return h("span", { class: "text" }, this.item.text);
+  }
+  renderTooltip() {
+    if (!this.isItem(this.item)) {
+      return;
+    }
+    if (this.item.text) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.text, helperLabel: this.item.commandText }));
+    }
+    if (this.item.commandText) {
+      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.commandText }));
+    }
+  }
+  triggerIconColorWarning() {
+    if (this.isItem(this.item) && this.item.iconColor) {
+      /* eslint-disable-next-line no-console */
+      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
+    }
+  }
+  get host() { return getElement(this); }
+};
+ActionBarButton.style = actionBarItemCss;
+
+const ActionBarOverflowMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.select = createEvent(this, "select", 7);
+    this.countOverflowedItems = () => {
+      return `+${this.numberOfMenuItems}`;
+    };
+    this.handleSelect = (event) => {
+      event.stopPropagation();
+      this.select.emit(event.detail);
+    };
+    this.items = undefined;
+    this.openDirection = 'bottom-end';
+  }
+  render() {
+    return [
+      h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.countOverflowedItems())),
+    ];
+  }
+  get numberOfMenuItems() {
+    return this.items.filter((item) => this.isMenuItem(item)).length;
+  }
+  isMenuItem(item) {
+    return !('separator' in item);
+  }
+};
+
+export { ActionBarButton as limel_action_bar_item, ActionBarOverflowMenu as limel_action_bar_overflow_menu };
+
+//# sourceMappingURL=limel-action-bar-item_2.entry.js.map

package/dist/esm/limel-action-bar-item_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-action-bar-item.limel-action-bar-overflow-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar-item/action-bar-item.scss?tag=limel-action-bar-item","./src/components/action-bar/action-bar-item/action-bar-item.tsx","./src/components/action-bar/action-bar-item/action-bar-overflow-menu.tsx"],"sourcesContent":["@use '../../../style/mixins';\n@use '../../../style/functions';\n\nlimel-action-bar-item {\n    transition: opacity 0.2s ease-in-out;\n    position: relative;\n    display: flex;\n    align-items: center;\n\n    &:not([is-visible]) {\n        opacity: 0;\n        pointer-events: none;\n    }\n}\n\nbutton {\n    all: unset;\n\n    &:not([disabled]) {\n        @include mixins.is-flat-inset-clickable(\n            $color: var(--limel-action-bar-item-text-color),\n            $color--hovered: var(--limel-action-bar-item-text-color),\n            $background-color: var(--action-bar-background-color),\n            $background-color--hovered: var(--action-bar-background-color),\n            $background-color--inset: var(--action-bar-background-color)\n        );\n        @include mixins.visualize-keyboard-focus;\n    }\n\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 0.25rem;\n\n    width: 100%;\n    min-width: var(--action-bar-item-height);\n    max-width: var(--action-bar-item-max-width, 10rem);\n    height: var(--action-bar-item-height);\n    color: var(--limel-action-bar-item-text-color);\n\n    border-radius: var(--action-bar-item-height);\n    font-size: functions.pxToRem(14);\n    padding: 0 0.25rem;\n\n    &:has(.text) {\n        padding: 0 0.5rem;\n    }\n\n    &[disabled] {\n        opacity: 0.4;\n    }\n\n    &.is-selected {\n        &:not(:hover) {\n            box-shadow: var(--button-shadow-inset);\n        }\n        color: var(--mdc-theme-primary) !important;\n    }\n}\n\n.text {\n    @include mixins.truncate-text();\n    padding: 0 0.25rem;\n}\n\nlimel-icon {\n    flex-shrink: 0;\n    width: calc(var(--action-bar-item-height) - 0.75rem);\n    height: calc(var(--action-bar-item-height) - 0.75rem);\n    color: var(\n        --action-bar-item-icon-color,\n        var(--limel-action-bar-item-text-color)\n    );\n}\n\ndiv[role='separator'] {\n    width: 1px;\n    height: 1.5rem;\n    border-radius: var(--action-bar-item-height);\n    background-color: var(--limel-action-bar-item-text-color);\n    opacity: 0.2;\n\n    @media (pointer: fine) {\n        margin-right: 0.5rem;\n        margin-left: 0.5rem;\n    }\n}\n\n// 👇 Overflow menu\n\nlimel-menu {\n    --notification-badge-background-color: rgb(var(--contrast-600));\n    --notification-badge-text-color: rgb(var(--contrast-1200));\n\n    &[open] {\n        button {\n            box-shadow: var(--button-shadow-inset);\n        }\n    }\n}\n\nbutton[slot='trigger'] {\n    animation: fade-in ease-out 0.25s;\n    font-size: 0.75rem;\n    font-weight: bold;\n    transform: translate3d(0, 0, 0);\n}\n\n@keyframes fade-in {\n    0% {\n        scale: 0.8;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import {\n    Component,\n    Element,\n    Event,\n    EventEmitter,\n    h,\n    Prop,\n} from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { createRandomString } from '../../../util/random-string';\nimport {\n    makeEnterClickable,\n    removeEnterClickable,\n} from '../../../util/make-enter-clickable';\nimport { getIconColor, getIconName } from '../../icon/get-icon-props';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-item',\n    shadow: false,\n    styleUrl: 'action-bar-item.scss',\n})\nexport class ActionBarButton {\n    /**\n     * Item that is placed in the action bar.\n     */\n    @Prop()\n    public item!: ActionBarItem | ListSeparator;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem | ListSeparator>;\n\n    /**\n     * When the item is displayed in the available width,\n     * this will be `false`.\n     */\n    @Prop({ reflect: true })\n    public isVisible: boolean = true;\n\n    /**\n     * When the item is selected, this will be `true`.\n     */\n    @Prop({ reflect: true })\n    public selected: boolean = false;\n\n    @Element()\n    private host: HTMLLimelActionBarItemElement;\n\n    /**\n     * Used to attach the right tooltip to the right button\n     */\n    private tooltipId: string;\n\n    constructor() {\n        this.tooltipId = createRandomString();\n    }\n\n    public componentWillLoad() {\n        makeEnterClickable(this.host);\n    }\n\n    public componentDidLoad() {\n        this.triggerIconColorWarning();\n    }\n\n    public disconnectedCallback() {\n        removeEnterClickable(this.host);\n    }\n\n    public render() {\n        if (!this.isItem(this.item) && this.item.separator) {\n            return <div role=\"separator\" />;\n        }\n\n        return (\n            <button\n                id={this.tooltipId}\n                type=\"button\"\n                onClick={this.handleClick}\n                disabled={this.isDisabled()}\n                class={{\n                    'is-selected': this.isItem(this.item) && this.item.selected,\n                }}\n            >\n                {this.renderIcon()}\n                {this.renderLabel()}\n                {this.renderTooltip()}\n            </button>\n        );\n    }\n\n    private handleClick = (event: MouseEvent) => {\n        event.stopPropagation();\n        this.select.emit(this.item);\n    };\n\n    private isItem(item: ActionBarItem | ListSeparator): item is ActionBarItem {\n        return !('separator' in item);\n    }\n\n    private isDisabled() {\n        if (this.isItem(this.item) && this.item.disabled) {\n            return true;\n        }\n\n        if (!this.isVisible) {\n            return true;\n        }\n    }\n\n    private renderIcon() {\n        if (this.isItem(this.item) && !this.item.icon) {\n            return;\n        }\n\n        if ('icon' in this.item) {\n            const name = getIconName(this.item.icon);\n            const color = getIconColor(this.item.icon, this.item.iconColor);\n\n            return (\n                <limel-icon\n                    name={name}\n                    style={{\n                        '--action-bar-item-icon-color': `${color}`,\n                    }}\n                />\n            );\n        }\n    }\n\n    private renderLabel() {\n        if (!this.isItem(this.item) || this.item.iconOnly) {\n            return;\n        }\n\n        return <span class=\"text\">{this.item.text}</span>;\n    }\n\n    private renderTooltip() {\n        if (!this.isItem(this.item)) {\n            return;\n        }\n\n        if (this.item.text) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.text}\n                    helperLabel={this.item.commandText}\n                />\n            );\n        }\n\n        if (this.item.commandText) {\n            return (\n                <limel-tooltip\n                    elementId={this.tooltipId}\n                    label={this.item.commandText}\n                />\n            );\n        }\n    }\n\n    private triggerIconColorWarning() {\n        if (this.isItem(this.item) && this.item.iconColor) {\n            /* eslint-disable-next-line no-console */\n            console.warn(\n                \"The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.\",\n            );\n        }\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { ActionBarItem } from '../../action-bar/action-bar.types';\nimport { ListSeparator } from '../../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../../menu/menu.types';\nimport { LimelMenuCustomEvent } from '../../../components';\n\n/**\n * @private\n */\n@Component({\n    tag: 'limel-action-bar-overflow-menu',\n    shadow: false,\n})\nexport class ActionBarOverflowMenu {\n    /**\n     * List of the items that should be rendered in the overflow menu.\n     */\n    @Prop()\n    public items: Array<MenuItem | ListSeparator>;\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     * It defaults to `bottom-end`, since in normal scenarios\n     * (for example when the action bar is not floating at the bottom of the screen)\n     * this menu is the right-most item in the user interface of the component.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection = 'bottom-end';\n\n    /**\n     * Fired when an item in the action bar overflow menu has been clicked.\n     * @public\n     */\n    @Event()\n    public select: EventEmitter<ActionBarItem>;\n\n    public render() {\n        return [\n            <limel-menu\n                openDirection={this.openDirection}\n                items={this.items}\n                onSelect={this.handleSelect}\n            >\n                <button slot=\"trigger\">{this.countOverflowedItems()}</button>\n            </limel-menu>,\n        ];\n    }\n\n    private countOverflowedItems = () => {\n        return `+${this.numberOfMenuItems}`;\n    };\n\n    private handleSelect = (event: LimelMenuCustomEvent<MenuItem>) => {\n        event.stopPropagation();\n        this.select.emit(event.detail);\n    };\n\n    private get numberOfMenuItems() {\n        return this.items.filter((item) => this.isMenuItem(item)).length;\n    }\n\n    private isMenuItem(item: MenuItem | ListSeparator): item is MenuItem {\n        return !('separator' in item);\n    }\n}\n"],"version":3}

package/dist/esm/{limel-action-bar_4.entry.js → limel-action-bar_2.entry.js}

@@ -1,8 +1,5 @@
 import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-6156b4fd.js';
 import { i as isItem } from './isItem-b0459122.js';
-import { c as createRandomString } from './random-string-812b1c35.js';
-import { m as makeEnterClickable, r as removeEnterClickable } from './make-enter-clickable-a30589fb.js';
-import { g as getIconName, a as getIconColor } from './get-icon-props-0b65f85e.js';
 import { t as translate } from './translations-453e0db7.js';
 import { a as ENTER, E as ESCAPE } from './keycodes-bf11a644.js';
 
@@ -106,115 +103,6 @@ const ActionBar = class {
 };
 ActionBar.style = actionBarCss;
 
-const actionBarItemCss = "@charset \"UTF-8\";limel-action-bar-item{transition:opacity 0.2s ease-in-out;position:relative;display:flex;align-items:center}limel-action-bar-item:not([is-visible]){opacity:0;pointer-events:none}button{all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:0.25rem;width:100%;min-width:var(--action-bar-item-height);max-width:var(--action-bar-item-max-width, 10rem);height:var(--action-bar-item-height);color:var(--limel-action-bar-item-text-color);border-radius:var(--action-bar-item-height);font-size:0.875rem;padding:0 0.25rem}button:not([disabled]){transition:color var(--limel-clickable-transition-speed, 0.4s) ease, background-color var(--limel-clickable-transition-speed, 0.4s) ease, box-shadow var(--limel-clickable-transform-speed, 0.4s) ease, transform var(--limel-clickable-transform-speed, 0.4s) var(--limel-clickable-transform-timing-function, ease);cursor:pointer;color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color)}button:not([disabled]):hover,button:not([disabled]):focus,button:not([disabled]):focus-visible{will-change:color, background-color, box-shadow, transform}button:not([disabled]):hover{transform:translate3d(0, -0.04rem, 0);color:var(--limel-action-bar-item-text-color);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-hovered)}button:not([disabled]):active{--limel-clickable-transform-timing-function:cubic-bezier(\n      0.83,\n      -0.15,\n      0.49,\n      1.16\n  );transform:translate3d(0, 0.05rem, 0);background-color:var(--action-bar-background-color);box-shadow:var(--button-shadow-inset-pressed)}button:not([disabled]):hover,button:not([disabled]):active{--limel-clickable-transition-speed:0.2s;--limel-clickable-transform-speed:0.16s}button:not([disabled]):focus{outline:none}button:not([disabled]):focus-visible{outline:none;box-shadow:var(--shadow-depth-8-focused)}button:has(.text){padding:0 0.5rem}button[disabled]{opacity:0.4}button.is-selected{color:var(--mdc-theme-primary) !important}button.is-selected:not(:hover){box-shadow:var(--button-shadow-inset)}.text{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 0.25rem}limel-icon{flex-shrink:0;width:calc(var(--action-bar-item-height) - 0.75rem);height:calc(var(--action-bar-item-height) - 0.75rem);color:var(--action-bar-item-icon-color, var(--limel-action-bar-item-text-color))}div[role=separator]{width:1px;height:1.5rem;border-radius:var(--action-bar-item-height);background-color:var(--limel-action-bar-item-text-color);opacity:0.2}@media (pointer: fine){div[role=separator]{margin-right:0.5rem;margin-left:0.5rem}}limel-menu{--notification-badge-background-color:rgb(var(--contrast-600));--notification-badge-text-color:rgb(var(--contrast-1200))}limel-menu[open] button{box-shadow:var(--button-shadow-inset)}button[slot=trigger]{animation:fade-in ease-out 0.25s;font-size:0.75rem;font-weight:bold;transform:translate3d(0, 0, 0)}@keyframes fade-in{0%{scale:0.8;opacity:0}100%{scale:1;opacity:1}}";
-
-const ActionBarButton = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.select = createEvent(this, "select", 7);
-    this.handleClick = (event) => {
-      event.stopPropagation();
-      this.select.emit(this.item);
-    };
-    this.item = undefined;
-    this.isVisible = true;
-    this.selected = false;
-    this.tooltipId = createRandomString();
-  }
-  componentWillLoad() {
-    makeEnterClickable(this.host);
-  }
-  componentDidLoad() {
-    this.triggerIconColorWarning();
-  }
-  disconnectedCallback() {
-    removeEnterClickable(this.host);
-  }
-  render() {
-    if (!this.isItem(this.item) && this.item.separator) {
-      return h("div", { role: "separator" });
-    }
-    return (h("button", { id: this.tooltipId, type: "button", onClick: this.handleClick, disabled: this.isDisabled(), class: {
-        'is-selected': this.isItem(this.item) && this.item.selected,
-      } }, this.renderIcon(), this.renderLabel(), this.renderTooltip()));
-  }
-  isItem(item) {
-    return !('separator' in item);
-  }
-  isDisabled() {
-    if (this.isItem(this.item) && this.item.disabled) {
-      return true;
-    }
-    if (!this.isVisible) {
-      return true;
-    }
-  }
-  renderIcon() {
-    if (this.isItem(this.item) && !this.item.icon) {
-      return;
-    }
-    if ('icon' in this.item) {
-      const name = getIconName(this.item.icon);
-      const color = getIconColor(this.item.icon, this.item.iconColor);
-      return (h("limel-icon", { name: name, style: {
-          '--action-bar-item-icon-color': `${color}`,
-        } }));
-    }
-  }
-  renderLabel() {
-    if (!this.isItem(this.item) || this.item.iconOnly) {
-      return;
-    }
-    return h("span", { class: "text" }, this.item.text);
-  }
-  renderTooltip() {
-    if (!this.isItem(this.item)) {
-      return;
-    }
-    if (this.item.text) {
-      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.text, helperLabel: this.item.commandText }));
-    }
-    if (this.item.commandText) {
-      return (h("limel-tooltip", { elementId: this.tooltipId, label: this.item.commandText }));
-    }
-  }
-  triggerIconColorWarning() {
-    if (this.isItem(this.item) && this.item.iconColor) {
-      /* eslint-disable-next-line no-console */
-      console.warn("The `iconColor` prop is deprecated now! Use the new `Icon` interface and instead of `iconColor: 'color-name'` write `icon {name: 'icon-name', color: 'color-name'}`.");
-    }
-  }
-  get host() { return getElement(this); }
-};
-ActionBarButton.style = actionBarItemCss;
-
-const ActionBarOverflowMenu = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.select = createEvent(this, "select", 7);
-    this.countOverflowedItems = () => {
-      return `+${this.numberOfMenuItems}`;
-    };
-    this.handleSelect = (event) => {
-      event.stopPropagation();
-      this.select.emit(event.detail);
-    };
-    this.items = undefined;
-    this.openDirection = 'bottom-end';
-  }
-  render() {
-    return [
-      h("limel-menu", { openDirection: this.openDirection, items: this.items, onSelect: this.handleSelect }, h("button", { slot: "trigger" }, this.countOverflowedItems())),
-    ];
-  }
-  get numberOfMenuItems() {
-    return this.items.filter((item) => this.isMenuItem(item)).length;
-  }
-  isMenuItem(item) {
-    return !('separator' in item);
-  }
-};
-
 const editorLinkMenuCss = ":host(limel-text-editor-link-menu){animation:fade 0.2s ease forwards;animation-delay:0.1s;opacity:0;display:flex;flex-direction:column;gap:0.5rem;padding:0.5rem;max-width:calc(100vw - 2rem);border-radius:0.5rem;background-color:var(--lime-elevated-surface-background-color);box-shadow:var(--shadow-depth-16)}.actions{display:flex;justify-content:end;gap:0.5rem}@keyframes fade{0%{scale:0.86;opacity:0}100%{scale:1;opacity:1}}";
 
 const TextEditorLinkMenu = class {
@@ -323,6 +211,6 @@ const TextEditorLinkMenu = class {
 };
 TextEditorLinkMenu.style = editorLinkMenuCss;
 
-export { ActionBar as limel_action_bar, ActionBarButton as limel_action_bar_item, ActionBarOverflowMenu as limel_action_bar_overflow_menu, TextEditorLinkMenu as limel_text_editor_link_menu };
+export { ActionBar as limel_action_bar, TextEditorLinkMenu as limel_text_editor_link_menu };
 
-//# sourceMappingURL=limel-action-bar_4.entry.js.map
+//# sourceMappingURL=limel-action-bar_2.entry.js.map

package/dist/esm/limel-action-bar_2.entry.js.map

@@ -0,0 +1 @@
+{"file":"limel-action-bar.limel-text-editor-link-menu.entry.js","mappings":"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","names":[],"sources":["./src/components/action-bar/action-bar.scss?tag=limel-action-bar&encapsulation=shadow","./src/components/action-bar/action-bar.tsx","./src/components/text-editor/link-menu/editor-link-menu.scss?tag=limel-text-editor-link-menu&encapsulation=shadow","./src/components/text-editor/link-menu/editor-link-menu.tsx"],"sourcesContent":["/**\n* @prop --action-bar-item-text-color: Text color of action bar items, defaults to `--contrast-1100`.\n* @prop --action-bar-item-icon-color: Color of the icons displayed on each action bar item. Defaults to the text color. To specify a color for an individual item, use the `iconColor` prop instead.\n* @prop --action-bar-item-max-width: Maximum width of a button in the action bar. Defaults to `10rem`. Keep in mind that the buttons should not appear too big.\n* @prop --action-bar-border-radius: Defines the roundness of the corners of the action bar. Defaults to `0`.\n* @prop --action-bar-background-color: Background color of the whole component. Defaults to `--contrast-100`.\n*/\n\n:host(limel-action-bar) {\n    --action-bar-item-height: 2rem;\n\n    --limel-action-bar-item-text-color: var(\n        --action-bar-item-text-color,\n        rgb(var(--contrast-1100))\n    );\n\n    box-sizing: border-box;\n\n    display: inline-flex;\n    align-items: center;\n    padding: 0.125rem 0.25rem;\n    max-width: 100%;\n    border-radius: var(--action-bar-border-radius);\n\n    background-color: var(\n        --action-bar-background-color,\n        rgb(var(--contrast-100))\n    );\n}\n\n:host(limel-action-bar),\n.items {\n    gap: 0.25rem;\n    @media (pointer: coarse) {\n        gap: 0.5rem;\n    }\n}\n\n.items {\n    display: inline-flex;\n    max-width: 100%;\n    min-width: 0;\n}\n\n:host(limel-action-bar.is-full-width) {\n    width: 100%;\n}\n\n:host(limel-action-bar.is-floating) {\n    --action-bar-border-radius: 100vw;\n    border: 1px solid rgb(var(--contrast-400));\n\n    padding-right: 0.125rem;\n    padding-left: 0.125rem;\n\n    max-width: calc(100% - 2rem);\n    box-shadow: var(--shadow-depth-16), var(--shadow-depth-8);\n}\n","import {\n    Component,\n    Event,\n    EventEmitter,\n    h,\n    Host,\n    Prop,\n    State,\n    Element,\n} from '@stencil/core';\nimport { ListSeparator } from '../list/list-item.types';\nimport { MenuItem, OpenDirection } from '../menu/menu.types';\nimport { ActionBarItem } from './action-bar.types';\nimport { isItem } from './isItem';\n\n/**\n * An action bar is a user interface element commonly found in software applications and websites.\n * It typically appears at the top of the screen or within a specific section\n * and serves as a centralized hub for accessing various actions and commands\n * relevant to the current context or page.\n *\n * The action bar often contains a set of clickable icons or buttons (icons + labels)\n * that represent specific actions, such as saving, deleting, editing, sharing,\n * or bulk operations for selected items.\n *\n * The purpose of an action bar is to provide quick and convenient access to\n * frequently used functionalities, enabling users to perform common tasks efficiently.\n * It enhances usability by organizing important actions in a visually prominent and easily accessible location.\n *\n * The action bar's design and layout can vary based on the platform or application,\n * but its primary goal remains consistent—to\n * empower users to interact with the software and perform desired actions effortlessly.\n *\n * @exampleComponent limel-example-action-bar-basic\n * @exampleComponent limel-example-action-bar-overflow-menu\n * @exampleComponent limel-example-action-bar-selected-item\n * @exampleComponent limel-example-action-bar-colors\n * @exampleComponent limel-example-action-bar-floating\n * @exampleComponent limel-example-action-bar-styling\n * @exampleComponent limel-example-action-bar-as-primary-component\n */\n@Component({\n    tag: 'limel-action-bar',\n    shadow: true,\n    styleUrl: 'action-bar.scss',\n})\nexport class ActionBar {\n    /**\n     * Items that are placed in the action bar.\n     * These represent primary actions.\n     */\n    @Prop()\n    public actions: Array<ActionBarItem | ListSeparator> = [];\n\n    /**\n     * A label used to describe the purpose of the element to users\n     * of assistive technologies, like screen readers.\n     * Example value: \"toolbar\"\n     */\n    @Prop({ reflect: true })\n    public accessibleLabel?: string;\n\n    /**\n     * - When set to `fullWidth`, the component will take the\n     * entire width of its container.\n     * - When set to `floating`, the component will get basic stylings\n     * to visualize the floating state.\n     * :::note\n     * You should still properly position the component\n     * according to the structure of your user interface.\n     * For example, use an `absolute` or `fixed` position.\n     * :::\n     */\n    @Prop({ reflect: true })\n    public layout?: 'fullWidth' | 'floating';\n\n    /**\n     * Defines the location that the content of the overflow menu\n     * appears, in relation to its trigger.\n     */\n    @Prop({ reflect: true })\n    public openDirection: OpenDirection;\n\n    /**\n     * Fired when a action bar item has been clicked.\n     * @public\n     */\n    @Event()\n    public itemSelected: EventEmitter<ActionBarItem>;\n\n    @Element()\n    private host: HTMLElement;\n\n    @State()\n    private overflowCutoff: number = this.actions.length;\n\n    private intersectionObserver: IntersectionObserver;\n    private firstRender = true;\n    private actionBarItems: HTMLLimelActionBarItemElement[] = [];\n\n    public render() {\n        let overflowActions: Array<MenuItem | ListSeparator> = [];\n        if (this.actions.length) {\n            overflowActions = this.actions.slice(this.overflowCutoff);\n        }\n\n        return (\n            <Host\n                aria-label={this.accessibleLabel}\n                class={{\n                    'is-full-width': this.layout === 'fullWidth',\n                    'is-floating': this.layout === 'floating',\n                }}\n                role=\"grid\"\n            >\n                <div class=\"items\" role=\"rowgroup\">\n                    {this.actions.map(this.renderActionBarItem)}\n                </div>\n                {this.renderOverflowMenu(overflowActions)}\n            </Host>\n        );\n    }\n\n    public connectedCallback() {}\n\n    public componentDidRender() {\n        if (this.haveItemsChanged()) {\n            this.intersectionObserver?.disconnect();\n            this.createIntersectionObserver();\n        }\n    }\n\n    public disconnectedCallback() {\n        this.intersectionObserver?.disconnect();\n        this.intersectionObserver = undefined;\n        this.actionBarItems = [];\n        this.connectedCallback = () => this.createIntersectionObserver();\n    }\n\n    private renderActionBarItem = (item: ActionBarItem, index: number) => {\n        return (\n            <limel-action-bar-item\n                item={item}\n                onSelect={this.handleSelect}\n                isVisible={this.isVisible(index)}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private renderOverflowMenu = (items: Array<MenuItem | ListSeparator>) => {\n        if (!(this.actions.length - this.overflowCutoff)) {\n            return;\n        }\n\n        return (\n            <limel-action-bar-overflow-menu\n                openDirection={this.openDirection}\n                items={items}\n                onSelect={this.handleSelect}\n                role=\"gridcell\"\n            />\n        );\n    };\n\n    private isVisible(index: number) {\n        return index < this.overflowCutoff;\n    }\n\n    private handleSelect = (\n        event: CustomEvent<ActionBarItem | ListSeparator>,\n    ) => {\n        event.stopPropagation();\n        if (isItem(event.detail)) {\n            this.itemSelected.emit(event.detail);\n        }\n    };\n\n    private handleIntersection = (entries: IntersectionObserverEntry[]) => {\n        const intersectingItems = entries.filter(\n            (entry) => entry.isIntersecting,\n        );\n\n        const notIntersectingItems = entries.filter(\n            (entry) => !entry.isIntersecting,\n        );\n\n        if (this.firstRender) {\n            this.overflowCutoff = intersectingItems.length;\n        } else {\n            this.overflowCutoff =\n                this.overflowCutoff +\n                intersectingItems.length -\n                notIntersectingItems.length;\n        }\n\n        this.firstRender = false;\n    };\n\n    private createIntersectionObserver() {\n        const options = {\n            root: this.host.shadowRoot.querySelector('.items'),\n            rootMargin: '0px',\n            threshold: 1.0,\n        };\n\n        this.overflowCutoff = this.actions.length;\n        this.firstRender = true;\n\n        this.actionBarItems = [];\n\n        this.intersectionObserver = new IntersectionObserver(\n            this.handleIntersection,\n            options,\n        );\n\n        this.host.shadowRoot\n            .querySelectorAll('limel-action-bar-item')\n            .forEach((actionBarItem) => {\n                this.observe(actionBarItem);\n            });\n    }\n\n    private observe(actionBarItem: HTMLLimelActionBarItemElement) {\n        this.intersectionObserver.observe(actionBarItem);\n        this.actionBarItems.push(actionBarItem);\n    }\n\n    private haveItemsChanged() {\n        const someItemRemoved = this.actionBarItems.some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.host.shadowRoot.contains(actionBarItem),\n        );\n\n        const someItemAdded = Array.from(\n            this.host.shadowRoot.querySelectorAll('limel-action-bar-item'),\n        ).some(\n            (actionBarItem: HTMLLimelActionBarItemElement) =>\n                !this.actionBarItems.includes(actionBarItem),\n        );\n\n        return someItemRemoved || someItemAdded;\n    }\n}\n",":host(limel-text-editor-link-menu) {\n    animation: fade 0.2s ease forwards;\n    animation-delay: 0.1s; // prevents the visual glitch when the link opens\n    opacity: 0;\n\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n    padding: 0.5rem;\n    max-width: calc(100vw - 2rem);\n    border-radius: 0.5rem;\n    background-color: var(--lime-elevated-surface-background-color);\n    box-shadow: var(--shadow-depth-16);\n}\n\n.actions {\n    display: flex;\n    justify-content: end;\n    gap: 0.5rem;\n}\n\n@keyframes fade {\n    0% {\n        scale: 0.86;\n        opacity: 0;\n    }\n    100% {\n        scale: 1;\n        opacity: 1;\n    }\n}\n","import { Component, Prop, h, Event, EventEmitter } from '@stencil/core';\nimport { EditorTextLink } from '../prosemirror-adapter/menu/types';\nimport { Languages } from '../../date-picker/date.types';\nimport translate from '../../../global/translations';\nimport { LimelInputFieldCustomEvent } from '../../../components';\nimport { ENTER, ESCAPE } from '../../../util/keycodes';\n\n/**\n * This component is a menu for editing a link in the text editor.\n * It allows the user to input the text and url for the link.\n * @beta\n * @private\n */\n@Component({\n    tag: 'limel-text-editor-link-menu',\n    shadow: true,\n    styleUrl: 'editor-link-menu.scss',\n})\nexport class TextEditorLinkMenu {\n    /**\n     * The link\n     */\n    @Prop({ reflect: true })\n    public link: EditorTextLink;\n\n    /**\n     * Defines the language for translations.\n     */\n    @Prop({ reflect: true })\n    public language: Languages = 'en';\n\n    /**\n     * Open state of the link-menu dialog\n     */\n    @Prop({ reflect: true })\n    public isOpen: boolean = false;\n\n    /**\n     * Emitted when the menu is closed from inside the component.\n     * (*Not* emitted when the consumer sets the `open`-property to `false`.)\n     */\n    @Event()\n    private cancel: EventEmitter<void>;\n\n    /**\n     * Emitted when the menu is saved from inside the component.\n     */\n    @Event()\n    private save: EventEmitter<void>;\n\n    /**\n     * Emitted when the user inputs new values for the link\n     */\n    @Event()\n    private linkChange: EventEmitter<EditorTextLink>;\n\n    private textInput: HTMLLimelInputFieldElement;\n    private saveButton: HTMLLimelButtonElement;\n\n    public connectedCallback() {\n        this.setupGlobalHandlers();\n    }\n\n    public disconnectedCallback() {\n        this.teardownGlobalHandlers();\n    }\n\n    private setupGlobalHandlers() {\n        if (this.isOpen) {\n            document.addEventListener('keyup', this.handleCancel);\n        }\n    }\n\n    private teardownGlobalHandlers() {\n        document.removeEventListener('keyup', this.handleCancel);\n    }\n\n    public componentDidLoad() {\n        this.focusOnTextInput();\n    }\n\n    private focusOnTextInput() {\n        if (this.textInput) {\n            const inputField = this.textInput.shadowRoot.querySelector('input');\n            if (inputField) {\n                requestAnimationFrame(() => {\n                    inputField.focus();\n                });\n            }\n        }\n    }\n\n    public render() {\n        const isValid = this.isValid(this.link.href);\n\n        return [\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.text')}\n                value={this.link?.text || ''}\n                leadingIcon=\"text_cursor\"\n                onChange={this.handleLinkTitleChange}\n                onKeyDown={this.handleKeyDown}\n                ref={(el) =>\n                    (this.textInput = el as HTMLLimelInputFieldElement)\n                }\n            />,\n            <limel-input-field\n                label={this.getTranslation('editor-link-menu.link')}\n                value={this.link?.href || ''}\n                type=\"text\"\n                leadingIcon=\"-lime-text-link\"\n                trailingIcon=\"external_link\"\n                invalid={!isValid}\n                onChange={this.handleLinkValueChange}\n                onAction={this.handleLinkInputAction}\n                onKeyDown={this.handleKeyDown}\n            />,\n            <div class=\"actions\">\n                <limel-button\n                    label={this.getTranslation('cancel')}\n                    onClick={this.handleCancel}\n                />\n                <limel-button\n                    primary={true}\n                    label={this.getTranslation('save')}\n                    disabled={!isValid}\n                    onClick={this.handleSave}\n                    ref={(el) =>\n                        (this.saveButton = el as HTMLLimelButtonElement)\n                    }\n                    slot=\"button\"\n                />\n            </div>,\n        ];\n    }\n\n    private getTranslation = (key: string) => {\n        return translate.get(key, this.language);\n    };\n\n    private isValid = (href: string): boolean => {\n        try {\n            new URL(href);\n        } catch {\n            return false;\n        }\n\n        return true;\n    };\n\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key !== ENTER) {\n            return;\n        }\n\n        if (this.saveButton) {\n            this.saveButton.focus();\n        }\n\n        event.preventDefault();\n        if (this.isValid(this.link?.href)) {\n            this.handleSave(event);\n        }\n    };\n\n    private handleCancel = (event: MouseEvent | KeyboardEvent) => {\n        if (event instanceof KeyboardEvent && event.key !== ESCAPE) {\n            return;\n        }\n\n        event.stopPropagation();\n        event.preventDefault();\n        this.cancel.emit();\n    };\n\n    private handleSave = (event: MouseEvent | KeyboardEvent) => {\n        event.stopPropagation();\n\n        this.save.emit();\n    };\n\n    private handleLinkInputAction = (\n        event: LimelInputFieldCustomEvent<void>,\n    ) => {\n        window.open(this.link.href, '_blank');\n        event.stopPropagation();\n    };\n\n    private handleLinkTitleChange = (event: CustomEvent<string>) => {\n        this.emitLinkChange(event.detail, this.link?.href);\n    };\n\n    private handleLinkValueChange = (event: CustomEvent<string>) => {\n        const href = event.detail;\n\n        this.emitLinkChange(this.link?.text, href);\n    };\n\n    private emitLinkChange = (text: string, href: string) => {\n        const newLink: EditorTextLink = {\n            text: text,\n            href: href,\n        };\n\n        this.linkChange.emit(newLink);\n    };\n}\n"],"version":3}