@tylertech/forge-ai 0.1.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/LICENSE +202 -0
- package/README.md +3 -0
- package/custom-elements.json +4963 -0
- package/dist/ai-actions-toolbar/ai-actions-toolbar.d.ts +25 -0
- package/dist/ai-actions-toolbar/ai-actions-toolbar.mjs +74 -0
- package/dist/ai-actions-toolbar/ai-actions-toolbar.scss.mjs +4 -0
- package/dist/ai-actions-toolbar/index.d.ts +1 -0
- package/dist/ai-actions-toolbar/index.mjs +5 -0
- package/dist/ai-artifact/ai-artifact.d.ts +20 -0
- package/dist/ai-artifact/ai-artifact.mjs +39 -0
- package/dist/ai-artifact/ai-artifact.scss.mjs +4 -0
- package/dist/ai-artifact/index.d.ts +1 -0
- package/dist/ai-artifact/index.mjs +5 -0
- package/dist/ai-button/ai-button.d.ts +21 -0
- package/dist/ai-button/ai-button.mjs +67 -0
- package/dist/ai-button/ai-button.scss.mjs +4 -0
- package/dist/ai-button/index.d.ts +1 -0
- package/dist/ai-button/index.mjs +5 -0
- package/dist/ai-chain-of-thought/ai-chain-of-thought.d.ts +17 -0
- package/dist/ai-chain-of-thought/ai-chain-of-thought.mjs +45 -0
- package/dist/ai-chain-of-thought/ai-chain-of-thought.scss.mjs +4 -0
- package/dist/ai-chain-of-thought/index.d.ts +5 -0
- package/dist/ai-chain-of-thought/index.mjs +17 -0
- package/dist/ai-chain-of-thought/thought-base/index.d.ts +1 -0
- package/dist/ai-chain-of-thought/thought-base/index.mjs +5 -0
- package/dist/ai-chain-of-thought/thought-base/thought-base.d.ts +20 -0
- package/dist/ai-chain-of-thought/thought-base/thought-base.mjs +43 -0
- package/dist/ai-chain-of-thought/thought-base/thought-base.scss.mjs +4 -0
- package/dist/ai-chain-of-thought/thought-detail/index.d.ts +1 -0
- package/dist/ai-chain-of-thought/thought-detail/index.mjs +5 -0
- package/dist/ai-chain-of-thought/thought-detail/thought-detail.d.ts +14 -0
- package/dist/ai-chain-of-thought/thought-detail/thought-detail.mjs +34 -0
- package/dist/ai-chain-of-thought/thought-detail/thought-detail.scss.mjs +4 -0
- package/dist/ai-chain-of-thought/thought-image/index.d.ts +1 -0
- package/dist/ai-chain-of-thought/thought-image/index.mjs +5 -0
- package/dist/ai-chain-of-thought/thought-image/thought-image.d.ts +16 -0
- package/dist/ai-chain-of-thought/thought-image/thought-image.mjs +43 -0
- package/dist/ai-chain-of-thought/thought-image/thought-image.scss.mjs +4 -0
- package/dist/ai-chain-of-thought/thought-search-result/index.d.ts +1 -0
- package/dist/ai-chain-of-thought/thought-search-result/index.mjs +5 -0
- package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.d.ts +22 -0
- package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.mjs +62 -0
- package/dist/ai-chain-of-thought/thought-search-result/thought-search-result.scss.mjs +4 -0
- package/dist/ai-chat-header/ai-chat-header.d.ts +54 -0
- package/dist/ai-chat-header/ai-chat-header.mjs +198 -0
- package/dist/ai-chat-header/ai-chat-header.scss.mjs +4 -0
- package/dist/ai-chat-header/index.d.ts +1 -0
- package/dist/ai-chat-header/index.mjs +5 -0
- package/dist/ai-chat-interface/ai-chat-interface.d.ts +38 -0
- package/dist/ai-chat-interface/ai-chat-interface.mjs +117 -0
- package/dist/ai-chat-interface/ai-chat-interface.scss.mjs +4 -0
- package/dist/ai-chat-interface/index.d.ts +1 -0
- package/dist/ai-chat-interface/index.mjs +5 -0
- package/dist/ai-dialog/ai-dialog.d.ts +56 -0
- package/dist/ai-dialog/ai-dialog.mjs +270 -0
- package/dist/ai-dialog/ai-dialog.scss.mjs +4 -0
- package/dist/ai-dialog/index.d.ts +1 -0
- package/dist/ai-dialog/index.mjs +5 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item-group.d.ts +26 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item-group.mjs +80 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item-group.scss.mjs +4 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item.d.ts +133 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item.mjs +335 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-item.scss.mjs +4 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-separator.d.ts +18 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-separator.mjs +26 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu-separator.scss.mjs +4 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu.d.ts +143 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu.mjs +327 -0
- package/dist/ai-dropdown-menu/ai-dropdown-menu.scss.mjs +4 -0
- package/dist/ai-dropdown-menu/index.d.ts +4 -0
- package/dist/ai-dropdown-menu/index.mjs +10 -0
- package/dist/ai-dropdown-menu/navigation-controller.d.ts +79 -0
- package/dist/ai-dropdown-menu/navigation-controller.mjs +205 -0
- package/dist/ai-dropdown-menu/selection-manager.d.ts +145 -0
- package/dist/ai-dropdown-menu/selection-manager.mjs +183 -0
- package/dist/ai-embedded-chat/ai-embedded-chat.d.ts +47 -0
- package/dist/ai-embedded-chat/ai-embedded-chat.mjs +139 -0
- package/dist/ai-embedded-chat/ai-embedded-chat.scss.mjs +4 -0
- package/dist/ai-embedded-chat/index.d.ts +1 -0
- package/dist/ai-embedded-chat/index.mjs +5 -0
- package/dist/ai-empty-state/ai-empty-state.d.ts +19 -0
- package/dist/ai-empty-state/ai-empty-state.mjs +136 -0
- package/dist/ai-empty-state/ai-empty-state.scss.mjs +4 -0
- package/dist/ai-empty-state/index.d.ts +1 -0
- package/dist/ai-empty-state/index.mjs +5 -0
- package/dist/ai-fab/ai-fab.d.ts +23 -0
- package/dist/ai-fab/ai-fab.mjs +75 -0
- package/dist/ai-fab/ai-fab.scss.mjs +4 -0
- package/dist/ai-fab/index.d.ts +1 -0
- package/dist/ai-fab/index.mjs +5 -0
- package/dist/ai-file-picker/ai-file-picker.d.ts +77 -0
- package/dist/ai-file-picker/ai-file-picker.mjs +176 -0
- package/dist/ai-file-picker/ai-file-picker.scss.mjs +4 -0
- package/dist/ai-file-picker/index.d.ts +1 -0
- package/dist/ai-file-picker/index.mjs +4 -0
- package/dist/ai-floating-chat/ai-floating-chat.d.ts +65 -0
- package/dist/ai-floating-chat/ai-floating-chat.mjs +153 -0
- package/dist/ai-floating-chat/ai-floating-chat.scss.mjs +4 -0
- package/dist/ai-floating-chat/index.d.ts +1 -0
- package/dist/ai-floating-chat/index.mjs +5 -0
- package/dist/ai-gradient-container/ai-gradient-container.d.ts +26 -0
- package/dist/ai-gradient-container/ai-gradient-container.mjs +61 -0
- package/dist/ai-gradient-container/ai-gradient-container.scss.mjs +4 -0
- package/dist/ai-gradient-container/index.d.ts +1 -0
- package/dist/ai-gradient-container/index.mjs +5 -0
- package/dist/ai-icon/ai-icon.d.ts +22 -0
- package/dist/ai-icon/ai-icon.mjs +71 -0
- package/dist/ai-icon/ai-icon.scss.mjs +4 -0
- package/dist/ai-icon/index.d.ts +1 -0
- package/dist/ai-icon/index.mjs +5 -0
- package/dist/ai-modal/ai-modal.d.ts +49 -0
- package/dist/ai-modal/ai-modal.mjs +132 -0
- package/dist/ai-modal/ai-modal.scss.mjs +4 -0
- package/dist/ai-modal/index.d.ts +1 -0
- package/dist/ai-modal/index.mjs +4 -0
- package/dist/ai-prompt/ai-prompt.d.ts +42 -0
- package/dist/ai-prompt/ai-prompt.mjs +123 -0
- package/dist/ai-prompt/ai-prompt.scss.mjs +4 -0
- package/dist/ai-prompt/index.d.ts +1 -0
- package/dist/ai-prompt/index.mjs +5 -0
- package/dist/ai-prompt/prompt-button/index.d.ts +1 -0
- package/dist/ai-prompt/prompt-button/index.mjs +5 -0
- package/dist/ai-prompt/prompt-button/prompt-button.d.ts +16 -0
- package/dist/ai-prompt/prompt-button/prompt-button.mjs +40 -0
- package/dist/ai-prompt/prompt-button/prompt-button.scss.mjs +4 -0
- package/dist/ai-reasoning/ai-reasoning.d.ts +17 -0
- package/dist/ai-reasoning/ai-reasoning.mjs +44 -0
- package/dist/ai-reasoning/ai-reasoning.scss.mjs +4 -0
- package/dist/ai-reasoning/index.d.ts +2 -0
- package/dist/ai-reasoning/index.mjs +8 -0
- package/dist/ai-reasoning/reasoning-content/index.d.ts +1 -0
- package/dist/ai-reasoning/reasoning-content/index.mjs +5 -0
- package/dist/ai-reasoning/reasoning-content/reasoning-content.d.ts +22 -0
- package/dist/ai-reasoning/reasoning-content/reasoning-content.mjs +90 -0
- package/dist/ai-reasoning/reasoning-content/reasoning-content.scss.mjs +4 -0
- package/dist/ai-reasoning-header/ai-reasoning-header.d.ts +24 -0
- package/dist/ai-reasoning-header/ai-reasoning-header.mjs +68 -0
- package/dist/ai-reasoning-header/ai-reasoning-header.scss.mjs +4 -0
- package/dist/ai-reasoning-header/index.d.ts +1 -0
- package/dist/ai-reasoning-header/index.mjs +5 -0
- package/dist/ai-response-message/ai-response-message.d.ts +40 -0
- package/dist/ai-response-message/ai-response-message.mjs +137 -0
- package/dist/ai-response-message/ai-response-message.scss.mjs +4 -0
- package/dist/ai-response-message/index.d.ts +1 -0
- package/dist/ai-response-message/index.mjs +5 -0
- package/dist/ai-sidebar/ai-sidebar.d.ts +44 -0
- package/dist/ai-sidebar/ai-sidebar.mjs +105 -0
- package/dist/ai-sidebar/ai-sidebar.scss.mjs +4 -0
- package/dist/ai-sidebar/index.d.ts +1 -0
- package/dist/ai-sidebar/index.mjs +5 -0
- package/dist/ai-sidebar-chat/ai-sidebar-chat.d.ts +64 -0
- package/dist/ai-sidebar-chat/ai-sidebar-chat.mjs +170 -0
- package/dist/ai-sidebar-chat/ai-sidebar-chat.scss.mjs +4 -0
- package/dist/ai-sidebar-chat/index.d.ts +1 -0
- package/dist/ai-sidebar-chat/index.mjs +5 -0
- package/dist/ai-suggestions/ai-suggestions.d.ts +39 -0
- package/dist/ai-suggestions/ai-suggestions.mjs +96 -0
- package/dist/ai-suggestions/ai-suggestions.scss.mjs +4 -0
- package/dist/ai-suggestions/index.d.ts +1 -0
- package/dist/ai-suggestions/index.mjs +5 -0
- package/dist/ai-threads/ai-threads.d.ts +48 -0
- package/dist/ai-threads/ai-threads.mjs +203 -0
- package/dist/ai-threads/ai-threads.scss.mjs +4 -0
- package/dist/ai-threads/index.d.ts +1 -0
- package/dist/ai-threads/index.mjs +5 -0
- package/dist/ai-user-message/ai-user-message.d.ts +15 -0
- package/dist/ai-user-message/ai-user-message.mjs +43 -0
- package/dist/ai-user-message/ai-user-message.scss.mjs +4 -0
- package/dist/ai-user-message/index.d.ts +1 -0
- package/dist/ai-user-message/index.mjs +5 -0
- package/dist/ai-voice-input/ai-voice-input.d.ts +68 -0
- package/dist/ai-voice-input/ai-voice-input.mjs +107 -0
- package/dist/ai-voice-input/ai-voice-input.scss.mjs +4 -0
- package/dist/ai-voice-input/index.d.ts +1 -0
- package/dist/ai-voice-input/index.mjs +5 -0
- package/dist/core/drag-controller.d.ts +66 -0
- package/dist/core/drag-controller.mjs +219 -0
- package/dist/core/index.d.ts +1 -0
- package/dist/core/index.mjs +4 -0
- package/dist/core/overlay/index.d.ts +1 -0
- package/dist/core/overlay/index.mjs +4 -0
- package/dist/core/overlay/overlay.d.ts +61 -0
- package/dist/core/overlay/overlay.mjs +142 -0
- package/dist/core/overlay/overlay.scss.mjs +4 -0
- package/dist/core/popover/index.d.ts +1 -0
- package/dist/core/popover/index.mjs +4 -0
- package/dist/core/popover/popover.d.ts +56 -0
- package/dist/core/popover/popover.mjs +71 -0
- package/dist/core/popover/popover.scss.mjs +4 -0
- package/dist/core/tooltip/index.d.ts +1 -0
- package/dist/core/tooltip/index.mjs +4 -0
- package/dist/core/tooltip/tooltip.d.ts +91 -0
- package/dist/core/tooltip/tooltip.mjs +243 -0
- package/dist/core/tooltip/tooltip.scss.mjs +4 -0
- package/dist/index.d.ts +27 -0
- package/dist/index.mjs +98 -0
- package/dist/utils.d.ts +14 -0
- package/dist/utils.mjs +22 -0
- package/package.json +122 -0
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n.forge-toolbar {\n --_toolbar-background: var(--forge-toolbar-background, var(--forge-theme-surface, #ffffff));\n --_toolbar-height: var(--forge-toolbar-height, 56px);\n --_toolbar-min-height: var(--forge-toolbar-min-height, var(--_toolbar-height));\n --_toolbar-divider-width: var(--forge-toolbar-divider-width, var(--forge-border-thin, 1px));\n --_toolbar-divider-style: var(--forge-toolbar-divider-style, solid);\n --_toolbar-divider-color: var(--forge-toolbar-divider-color, var(--forge-theme-outline, #e0e0e0));\n --_toolbar-shape: var(--forge-toolbar-shape, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_toolbar-start-start-shape: var(--forge-toolbar-start-start-shape, var(--_toolbar-shape));\n --_toolbar-start-end-shape: var(--forge-toolbar-start-end-shape, var(--_toolbar-shape));\n --_toolbar-end-start-shape: var(--forge-toolbar-end-start-shape, 0);\n --_toolbar-end-end-shape: var(--forge-toolbar-end-end-shape, 0);\n --_toolbar-padding: var(--forge-toolbar-padding, var(--forge-spacing-medium, 16px));\n --_toolbar-padding-block: var(--forge-toolbar-padding-block, 0);\n --_toolbar-padding-inline: var(--forge-toolbar-padding-inline, var(--_toolbar-padding));\n --_toolbar-columns: var(--forge-toolbar-columns, auto 1fr auto);\n}\n\n.forge-toolbar {\n display: grid;\n grid-template-columns: var(--_toolbar-columns);\n height: var(--_toolbar-height);\n min-height: var(--_toolbar-min-height);\n box-sizing: border-box;\n padding-inline: 0;\n border-block-end-width: var(--_toolbar-divider-width);\n border-block-end-style: var(--_toolbar-divider-style);\n border-block-end-color: var(--_toolbar-divider-color);\n border-start-start-radius: var(--_toolbar-start-start-shape);\n border-start-end-radius: var(--_toolbar-start-end-shape);\n border-end-start-radius: var(--_toolbar-end-start-shape);\n border-end-end-radius: var(--_toolbar-end-end-shape);\n background: var(--_toolbar-background);\n grid-template-columns: 1fr;\n grid-template-areas: "start";\n}\n\n.forge-toolbar:has(.forge-toolbar__center), .forge-toolbar:has(.forge-toolbar__end) {\n grid-template-columns: auto 1fr auto;\n grid-template-areas: "start center end";\n}\n\n.forge-toolbar:has(.forge-toolbar__end):not(:has(.forge-toolbar__center)) {\n grid-template-columns: 1fr auto;\n grid-template-areas: "start end";\n}\n\n.forge-toolbar--inverted {\n --_toolbar-start-start-shape: var(--forge-toolbar-start-start-shape, 0);\n --_toolbar-start-end-shape: var(--forge-toolbar-start-end-shape, 0);\n --_toolbar-end-start-shape: var(--_toolbar-shape);\n --_toolbar-end-end-shape: var(--_toolbar-shape);\n border-block-end: none;\n border-block-start-width: var(--_toolbar-divider-width);\n border-block-start-style: var(--_toolbar-divider-style);\n border-block-start-color: var(--_toolbar-divider-color);\n}\n\n.forge-toolbar--no-divider {\n border: none;\n}\n\n.forge-toolbar--auto-height {\n --_toolbar-height: var(--forge-toolbar-height, auto);\n}\n\n.forge-toolbar :where(h1, h2, h3, h4, h5, h6) {\n margin: 0;\n}\n\n.forge-toolbar__start, .forge-toolbar__center, .forge-toolbar__end {\n display: flex;\n align-items: center;\n width: 100%;\n box-sizing: border-box;\n}\n\n.forge-toolbar__start {\n grid-area: start;\n}\n\n.forge-toolbar__center {\n justify-content: center;\n min-width: 0;\n grid-area: center;\n}\n\n.forge-toolbar__end {\n justify-content: end;\n grid-area: end;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-icon-button {\n --_icon-button-display: var(--forge-icon-button-display, inline-flex);\n --_icon-button-size: var(--forge-icon-button-size, 48px);\n --_icon-button-gap: var(--forge-icon-button-gap, 0);\n --_icon-button-icon-color: var(--forge-icon-button-icon-color, currentColor);\n --_icon-button-background-color: var(--forge-icon-button-background-color, none);\n --_icon-button-icon-size: var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n --_icon-button-cursor: var(--forge-icon-button-cursor, pointer);\n --_icon-button-padding: var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-border: var(--forge-icon-button-border, none);\n --_icon-button-shadow: var(--forge-icon-button-shadow, none);\n --_icon-button-transition-duration: var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_icon-button-transition-timing: var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_icon-button-shape: var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_icon-button-shape-start-start: var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n --_icon-button-shape-start-end: var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n --_icon-button-shape-end-start: var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n --_icon-button-shape-end-end: var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n --_icon-button-shape-squared: var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_icon-button-outlined-border-width: var(--forge-icon-button-outlined-border-width, 1px);\n --_icon-button-outlined-border-style: var(--forge-icon-button-outlined-border-style, solid);\n --_icon-button-outlined-border-color: var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n --_icon-button-tonal-icon-color: var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n --_icon-button-tonal-background-color: var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-filled-icon-color: var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-filled-background-color: var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-raised-shadow: var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-hover-shadow: var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-active-shadow: var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-disabled-shadow: var(--forge-icon-button-raised-disabled-shadow, none);\n --_icon-button-density-small-size: var(--forge-icon-button-density-small-size, 24px);\n --_icon-button-density-small-padding: var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n --_icon-button-density-small-icon-size: var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);\n --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-tonal-toggle-background-color: var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-tonal-toggle-on-background-color: var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-tonal-toggle-on-icon-color: var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-background-color: var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-filled-toggle-icon-color: var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-background-color: var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-icon-color: var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-disabled-cursor: var(--forge-icon-button-disabled-cursor, not-allowed);\n --_icon-button-disabled-opacity: var(--forge-icon-button-disabled-opacity, 0.38);\n --_icon-button-popover-icon-padding: var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n --_icon-button-focus-indicator-color: var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n display: var(--_icon-button-display);\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n z-index: 0;\n display: var(--_icon-button-display);\n align-items: center;\n justify-content: center;\n gap: var(--_icon-button-gap);\n box-sizing: border-box;\n height: var(--_icon-button-density-large-size);\n min-width: var(--_icon-button-density-large-size);\n border: var(--_icon-button-border);\n border-start-start-radius: var(--_icon-button-shape-start-start);\n border-start-end-radius: var(--_icon-button-shape-start-end);\n border-end-start-radius: var(--_icon-button-shape-end-start);\n border-end-end-radius: var(--_icon-button-shape-end-end);\n padding: var(--_icon-button-padding);\n box-shadow: var(--_icon-button-shadow);\n color: var(--_icon-button-icon-color);\n background: var(--_icon-button-background-color);\n font-size: var(--_icon-button-icon-size);\n cursor: var(--_icon-button-cursor);\n user-select: none;\n transition-property: box-shadow, background;\n transition-duration: var(--_icon-button-transition-duration);\n transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img,\n.forge-icon-button svg {\n height: var(--_icon-button-icon-size);\n width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n --_state-layer-display: var(--forge-state-layer-display, flex);\n --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n opacity: 0;\n position: absolute;\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-icon-button:not(:disabled) {\n outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text,\n:not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n border-width: var(--_icon-button-outlined-border-width);\n border-style: var(--_icon-button-outlined-border-style);\n border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n --_icon-button-icon-color: var(--_icon-button-tonal-icon-color);\n --_icon-button-background-color: var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n --_icon-button-icon-color: var(--_icon-button-filled-icon-color);\n --_icon-button-background-color: var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n --_icon-button-shadow: var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n --_icon-button-raised-shadow: var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n --_icon-button-raised-shadow: var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n --_icon-button-shape: var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n --_icon-button-size: var(--_icon-button-density-small-size);\n --_icon-button-icon-size: var(--_icon-button-density-small-icon-size);\n --_icon-button-padding: var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n --_icon-button-size: var(--_icon-button-density-medium-size);\n --_icon-button-padding: var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n pointer-events: none;\n opacity: var(--_icon-button-disabled-opacity);\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n --forge-circular-progress-track-color: transparent;\n --forge-circular-progress-size: 1em;\n}\n\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-icon {\n --_icon-color: var(--forge-icon-color, currentColor);\n --_icon-size: var(--forge-icon-size, 1em);\n --_icon-width: var(--forge-icon-width, var(--_icon-size));\n --_icon-height: var(--forge-icon-height, var(--_icon-size));\n --_icon-font-size: var(--forge-icon-font-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n}\n\nimg.forge-icon,\nsvg.forge-icon {\n display: inline-block;\n box-sizing: content-box;\n contain: content;\n font-size: var(--_icon-font-size);\n display: inline-block;\n}\n\nimg.forge-icon {\n width: var(--_icon-width);\n height: var(--_icon-height);\n}\n\nsvg {\n width: var(--_icon-width);\n height: var(--_icon-height);\n display: block;\n fill: var(--_icon-color);\n stroke: var(--_icon-color);\n stroke-width: 0;\n}\n\n:host {\n display: block;\n}\n\n.ai-icon-button,\n.ai-icon-button > svg {\n fill: var(--forge-theme-text-medium);\n}\n\n.header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding-inline: var(--forge-spacing-medium, 16px);\n}\n\n.start {\n display: flex;\n align-items: center;\n gap: var(--forge-spacing-medium, 16px);\n}\n.start h1 {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-heading3-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-heading3-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading3-font-size-scale, 1.125)));\n font-weight: var(--forge-typography-heading3-font-weight, 500);\n line-height: var(--forge-typography-heading3-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-heading3-line-height-scale, 1.375)));\n letter-spacing: var(--forge-typography-heading3-letter-spacing, 0.0083333333em);\n text-transform: var(--forge-typography-heading3-text-transform, inherit);\n text-decoration: var(--forge-typography-heading3-text-decoration, inherit);\n}\n\n.end {\n display: flex;\n align-items: center;\n}';
|
|
2
|
+
export {
|
|
3
|
+
styles as default
|
|
4
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AiChatHeaderComponent, AiChatHeaderComponentTagName } from './ai-chat-header';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
import { MinimizeIconType } from '../ai-chat-header/ai-chat-header';
|
|
3
|
+
declare global {
|
|
4
|
+
interface HTMLElementTagNameMap {
|
|
5
|
+
'forge-ai-chat-interface': AiChatInterfaceComponent;
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
export declare const AiChatInterfaceComponentTagName: keyof HTMLElementTagNameMap;
|
|
9
|
+
/**
|
|
10
|
+
* @tag forge-ai-chat-interface
|
|
11
|
+
*
|
|
12
|
+
* @slot - Default slot for messages
|
|
13
|
+
* @slot suggestions - Slot for AI suggestions component
|
|
14
|
+
* @slot prompt - Slot for AI prompt component
|
|
15
|
+
*/
|
|
16
|
+
export declare class AiChatInterfaceComponent extends LitElement {
|
|
17
|
+
#private;
|
|
18
|
+
static styles: import('lit').CSSResult;
|
|
19
|
+
/**
|
|
20
|
+
* Controls whether the expand button is visible in the header
|
|
21
|
+
*/
|
|
22
|
+
showExpandButton: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Controls whether the minimize button is visible in the header
|
|
25
|
+
*/
|
|
26
|
+
showMinimizeButton: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Indicates the current expanded state for displaying the appropriate expand/collapse icon
|
|
29
|
+
*/
|
|
30
|
+
expanded: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Controls which minimize icon to display in the header
|
|
33
|
+
*/
|
|
34
|
+
minimizeIcon: MinimizeIconType;
|
|
35
|
+
private _slottedSuggestionsNodes;
|
|
36
|
+
private _hasMessages;
|
|
37
|
+
render(): TemplateResult;
|
|
38
|
+
}
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { unsafeCSS, LitElement, html, nothing } from "lit";
|
|
2
|
+
import { property, queryAssignedNodes, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import { when } from "lit/directives/when.js";
|
|
4
|
+
import "../ai-chat-header/ai-chat-header.mjs";
|
|
5
|
+
import "../ai-empty-state/ai-empty-state.mjs";
|
|
6
|
+
import "../ai-gradient-container/ai-gradient-container.mjs";
|
|
7
|
+
import styles from "./ai-chat-interface.scss.mjs";
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
+
var __typeError = (msg) => {
|
|
11
|
+
throw TypeError(msg);
|
|
12
|
+
};
|
|
13
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
14
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
15
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
16
|
+
if (decorator = decorators[i])
|
|
17
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
18
|
+
if (kind && result) __defProp(target, key, result);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
22
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
23
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
24
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
25
|
+
var _AiChatInterfaceComponent_instances, header_get, _suggestionsSlot, suggestions_get, _promptSlot, prompt_get, _messagesSlot, messagesContainer_get, handleSlotChange_fn;
|
|
26
|
+
const AiChatInterfaceComponentTagName = "forge-ai-chat-interface";
|
|
27
|
+
let AiChatInterfaceComponent = class extends LitElement {
|
|
28
|
+
constructor() {
|
|
29
|
+
super(...arguments);
|
|
30
|
+
__privateAdd(this, _AiChatInterfaceComponent_instances);
|
|
31
|
+
this.showExpandButton = false;
|
|
32
|
+
this.showMinimizeButton = false;
|
|
33
|
+
this.expanded = false;
|
|
34
|
+
this.minimizeIcon = "default";
|
|
35
|
+
this._hasMessages = false;
|
|
36
|
+
__privateAdd(this, _suggestionsSlot, html`<slot name="suggestions" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
|
|
37
|
+
__privateAdd(this, _promptSlot, html`<slot name="prompt" @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
|
|
38
|
+
__privateAdd(this, _messagesSlot, html`<slot @slotchange=${__privateMethod(this, _AiChatInterfaceComponent_instances, handleSlotChange_fn)}></slot>`);
|
|
39
|
+
}
|
|
40
|
+
render() {
|
|
41
|
+
return html`
|
|
42
|
+
<div class="ai-chat-interface">
|
|
43
|
+
${__privateGet(this, _AiChatInterfaceComponent_instances, header_get)} ${__privateGet(this, _AiChatInterfaceComponent_instances, messagesContainer_get)} ${__privateGet(this, _AiChatInterfaceComponent_instances, suggestions_get)}
|
|
44
|
+
<div class="prompt-container">${__privateGet(this, _AiChatInterfaceComponent_instances, prompt_get)}</div>
|
|
45
|
+
</div>
|
|
46
|
+
`;
|
|
47
|
+
}
|
|
48
|
+
};
|
|
49
|
+
_AiChatInterfaceComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
50
|
+
header_get = function() {
|
|
51
|
+
return html`
|
|
52
|
+
<forge-ai-chat-header
|
|
53
|
+
?show-expand-button=${this.showExpandButton}
|
|
54
|
+
?show-minimize-button=${this.showMinimizeButton}
|
|
55
|
+
?expanded=${this.expanded}
|
|
56
|
+
minimize-icon=${this.minimizeIcon}>
|
|
57
|
+
</forge-ai-chat-header>
|
|
58
|
+
`;
|
|
59
|
+
};
|
|
60
|
+
_suggestionsSlot = /* @__PURE__ */ new WeakMap();
|
|
61
|
+
suggestions_get = function() {
|
|
62
|
+
const hasSuggestions = this._slottedSuggestionsNodes.length > 0;
|
|
63
|
+
return when(
|
|
64
|
+
hasSuggestions,
|
|
65
|
+
() => html`<div class="suggestions-container">${__privateGet(this, _suggestionsSlot)}</div>`,
|
|
66
|
+
() => __privateGet(this, _suggestionsSlot)
|
|
67
|
+
);
|
|
68
|
+
};
|
|
69
|
+
_promptSlot = /* @__PURE__ */ new WeakMap();
|
|
70
|
+
prompt_get = function() {
|
|
71
|
+
return __privateGet(this, _promptSlot);
|
|
72
|
+
};
|
|
73
|
+
_messagesSlot = /* @__PURE__ */ new WeakMap();
|
|
74
|
+
messagesContainer_get = function() {
|
|
75
|
+
return html`
|
|
76
|
+
<div class="messages-container">
|
|
77
|
+
${__privateGet(this, _messagesSlot)} ${!this._hasMessages ? html`<forge-ai-empty-state></forge-ai-empty-state>` : nothing}
|
|
78
|
+
</div>
|
|
79
|
+
`;
|
|
80
|
+
};
|
|
81
|
+
handleSlotChange_fn = function(evt) {
|
|
82
|
+
const slotName = evt.target.name || "default";
|
|
83
|
+
if (slotName === "default") {
|
|
84
|
+
const slot = evt.target;
|
|
85
|
+
const assignedElements = slot.assignedElements();
|
|
86
|
+
this._hasMessages = assignedElements.length > 0;
|
|
87
|
+
}
|
|
88
|
+
if (["suggestions", "prompt", "default"].includes(slotName)) {
|
|
89
|
+
this.requestUpdate();
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
AiChatInterfaceComponent.styles = unsafeCSS(styles);
|
|
93
|
+
__decorateClass([
|
|
94
|
+
property({ type: Boolean, attribute: "show-expand-button" })
|
|
95
|
+
], AiChatInterfaceComponent.prototype, "showExpandButton", 2);
|
|
96
|
+
__decorateClass([
|
|
97
|
+
property({ type: Boolean, attribute: "show-minimize-button" })
|
|
98
|
+
], AiChatInterfaceComponent.prototype, "showMinimizeButton", 2);
|
|
99
|
+
__decorateClass([
|
|
100
|
+
property({ type: Boolean })
|
|
101
|
+
], AiChatInterfaceComponent.prototype, "expanded", 2);
|
|
102
|
+
__decorateClass([
|
|
103
|
+
property({ attribute: "minimize-icon" })
|
|
104
|
+
], AiChatInterfaceComponent.prototype, "minimizeIcon", 2);
|
|
105
|
+
__decorateClass([
|
|
106
|
+
queryAssignedNodes({ slot: "suggestions", flatten: true })
|
|
107
|
+
], AiChatInterfaceComponent.prototype, "_slottedSuggestionsNodes", 2);
|
|
108
|
+
__decorateClass([
|
|
109
|
+
state()
|
|
110
|
+
], AiChatInterfaceComponent.prototype, "_hasMessages", 2);
|
|
111
|
+
AiChatInterfaceComponent = __decorateClass([
|
|
112
|
+
customElement(AiChatInterfaceComponentTagName)
|
|
113
|
+
], AiChatInterfaceComponent);
|
|
114
|
+
export {
|
|
115
|
+
AiChatInterfaceComponent,
|
|
116
|
+
AiChatInterfaceComponentTagName
|
|
117
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n:host {\n display: block;\n height: 100%;\n flex-grow: 1;\n}\n\n.ai-chat-interface {\n -moz-osx-font-smoothing: grayscale;\n -webkit-font-smoothing: antialiased;\n font-family: var(--forge-typography-body1-font-family, var(--forge-typography-font-family, "Roboto", sans-serif));\n font-size: var(--forge-typography-body1-font-size, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-font-size-scale, 0.875)));\n font-weight: var(--forge-typography-body1-font-weight, 400);\n line-height: var(--forge-typography-body1-line-height, calc(var(--forge-typography-font-size, 1rem) * var(--forge-typography-body-line-height-scale, 1.125)));\n letter-spacing: var(--forge-typography-body1-letter-spacing, 0.0357142857em);\n text-transform: var(--forge-typography-body1-text-transform, inherit);\n text-decoration: var(--forge-typography-body1-text-decoration, inherit);\n color: var(--forge-theme-on-surface, #000000);\n display: flex;\n flex-direction: column;\n height: 100%;\n}\n\n.messages-container::-webkit-scrollbar {\n height: var(--forge-scrollbar-height, 16px);\n width: var(--forge-scrollbar-width, 16px);\n}\n.messages-container::-webkit-scrollbar-track {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-track:hover {\n background-color: var(--forge-scrollbar-track-container-hover, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-corner {\n background-color: var(--forge-scrollbar-track-container, var(--forge-theme-surface-container-low, #ebebeb));\n}\n.messages-container::-webkit-scrollbar-thumb {\n height: var(--forge-scrollbar-thumb-min-height, 32px);\n width: var(--forge-scrollbar-thumb-min-width, 32px);\n border-radius: var(--forge-scrollbar-border-radius, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n border-width: var(--forge-scrollbar-border-width, 3px);\n border-style: solid;\n border-color: transparent;\n background-color: var(--forge-scrollbar-thumb-container, var(--forge-theme-surface-container-medium, #c2c2c2));\n background-clip: content-box;\n}\n.messages-container::-webkit-scrollbar-thumb:hover {\n background-color: var(--forge-scrollbar-thumb-container-hover, var(--forge-theme-surface-container-high, #9e9e9e));\n}\n.messages-container {\n padding-inline-start: var(--forge-spacing-medium, 16px);\n padding-block-end: var(--forge-spacing-medium, 16px);\n scrollbar-gutter: stable;\n overflow-y: auto;\n}\n@media not all and (min-resolution: 0.001dpcm) {\n @supports (-webkit-appearance: none) {\n .messages-container {\n overflow-y: scroll;\n }\n }\n}\n.messages-container {\n background: linear-gradient(to top, var(--forge-theme-primary-container-minimum, #f7f8fc), var(--forge-theme-surface, #ffffff));\n border-block-end: 1px solid var(--forge-theme-outline, #e0e0e0);\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n gap: var(--forge-spacing-medium, 16px);\n}\n\n.suggestions-container {\n padding-inline: var(--forge-spacing-medium, 16px);\n padding-block-start: var(--forge-spacing-medium, 16px);\n}\n\n.prompt-container {\n padding: var(--forge-spacing-medium, 16px);\n}';
|
|
2
|
+
export {
|
|
3
|
+
styles as default
|
|
4
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AiChatInterfaceComponent, AiChatInterfaceComponentTagName } from './ai-chat-interface.js';
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { LitElement, TemplateResult } from 'lit';
|
|
2
|
+
declare global {
|
|
3
|
+
interface HTMLElementTagNameMap {
|
|
4
|
+
'forge-ai-dialog': AiDialogComponent;
|
|
5
|
+
}
|
|
6
|
+
interface HTMLElementEventMap {
|
|
7
|
+
'forge-ai-dialog-fullscreen-change': CustomEvent<{
|
|
8
|
+
isFullscreen: boolean;
|
|
9
|
+
}>;
|
|
10
|
+
'forge-ai-dialog-close': CustomEvent<void>;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
export declare const AiDialogComponentTagName: keyof HTMLElementTagNameMap;
|
|
14
|
+
/**
|
|
15
|
+
* @tag forge-ai-dialog
|
|
16
|
+
*
|
|
17
|
+
* @slot - Default slot for dialog content (typically ai-chat-interface)
|
|
18
|
+
*
|
|
19
|
+
* @event {CustomEvent<{ isFullscreen: boolean }>} forge-ai-dialog-fullscreen-change - Fired when the fullscreen state changes due to viewport size
|
|
20
|
+
* @event {CustomEvent<void>} forge-ai-dialog-close - Fired when the dialog is closed
|
|
21
|
+
*/
|
|
22
|
+
export declare class AiDialogComponent extends LitElement {
|
|
23
|
+
#private;
|
|
24
|
+
static styles: import('lit').CSSResult;
|
|
25
|
+
/**
|
|
26
|
+
* Indicates whether the dialog is open.
|
|
27
|
+
*/
|
|
28
|
+
open: boolean;
|
|
29
|
+
/**
|
|
30
|
+
* Controls the dialog's positioning and size behavior.
|
|
31
|
+
* When true, the dialog will have an expanded width and be centered on the screen.
|
|
32
|
+
* When false, the dialog will be positioned at the bottom-right corner with a fixed width.
|
|
33
|
+
*/
|
|
34
|
+
expanded: boolean;
|
|
35
|
+
private _isFullscreen;
|
|
36
|
+
/**
|
|
37
|
+
* Gets the current fullscreen state (readonly)
|
|
38
|
+
*/
|
|
39
|
+
get isFullscreen(): boolean;
|
|
40
|
+
connectedCallback(): void;
|
|
41
|
+
disconnectedCallback(): void;
|
|
42
|
+
updated(changedProperties: Map<string | number | symbol, unknown>): void;
|
|
43
|
+
render(): TemplateResult;
|
|
44
|
+
/**
|
|
45
|
+
* Opens the dialog.
|
|
46
|
+
*/
|
|
47
|
+
show(): void;
|
|
48
|
+
/**
|
|
49
|
+
* Closes the dialog.
|
|
50
|
+
*/
|
|
51
|
+
close(): void;
|
|
52
|
+
/**
|
|
53
|
+
* Toggles the dialog open state.
|
|
54
|
+
*/
|
|
55
|
+
toggle(): void;
|
|
56
|
+
}
|
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
import { unsafeCSS, LitElement, html } from "lit";
|
|
2
|
+
import { property, state, customElement } from "lit/decorators.js";
|
|
3
|
+
import { when } from "lit/directives/when.js";
|
|
4
|
+
import { createRef, ref } from "lit/directives/ref.js";
|
|
5
|
+
import "../ai-modal/ai-modal.mjs";
|
|
6
|
+
import { DragController } from "../core/drag-controller.mjs";
|
|
7
|
+
import styles from "./ai-dialog.scss.mjs";
|
|
8
|
+
var __defProp = Object.defineProperty;
|
|
9
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
10
|
+
var __typeError = (msg) => {
|
|
11
|
+
throw TypeError(msg);
|
|
12
|
+
};
|
|
13
|
+
var __decorateClass = (decorators, target, key, kind) => {
|
|
14
|
+
var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
|
|
15
|
+
for (var i = decorators.length - 1, decorator; i >= 0; i--)
|
|
16
|
+
if (decorator = decorators[i])
|
|
17
|
+
result = (kind ? decorator(target, key, result) : decorator(result)) || result;
|
|
18
|
+
if (kind && result) __defProp(target, key, result);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
|
|
22
|
+
var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
|
|
23
|
+
var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
|
|
24
|
+
var __privateSet = (obj, member, value, setter) => (__accessCheck(obj, member, "write to private field"), member.set(obj, value), value);
|
|
25
|
+
var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
|
|
26
|
+
var _mediaQuery, _popoverElementRef, _aiModalElementRef, _dragHandleRef, _escapeKeyAbortController, _dragController, _content, _AiDialogComponent_instances, popoverTemplate_get, modalTemplate_get, setupMediaQuery_fn, setupDragController_fn, cleanupMediaQuery_fn, _handleMediaChange, handleOpenStateChange_fn, handlePopoverToggle_fn, handleDialogClose_fn, addEscapeKeyListener_fn, removeEscapeKeyListener_fn, _handleKeyDown;
|
|
27
|
+
const VIEWPORT_WIDTH_THRESHOLD = 768;
|
|
28
|
+
const AiDialogComponentTagName = "forge-ai-dialog";
|
|
29
|
+
let AiDialogComponent = class extends LitElement {
|
|
30
|
+
constructor() {
|
|
31
|
+
super(...arguments);
|
|
32
|
+
__privateAdd(this, _AiDialogComponent_instances);
|
|
33
|
+
this.open = false;
|
|
34
|
+
this.expanded = false;
|
|
35
|
+
this._isFullscreen = window.innerWidth <= VIEWPORT_WIDTH_THRESHOLD;
|
|
36
|
+
__privateAdd(this, _mediaQuery);
|
|
37
|
+
__privateAdd(this, _popoverElementRef, createRef());
|
|
38
|
+
__privateAdd(this, _aiModalElementRef, createRef());
|
|
39
|
+
__privateAdd(this, _dragHandleRef, createRef());
|
|
40
|
+
__privateAdd(this, _escapeKeyAbortController);
|
|
41
|
+
__privateAdd(this, _dragController);
|
|
42
|
+
__privateAdd(this, _content, html`<slot></slot>`);
|
|
43
|
+
__privateAdd(this, _handleMediaChange, (e) => {
|
|
44
|
+
const previousFullscreen = this._isFullscreen;
|
|
45
|
+
this._isFullscreen = e.matches;
|
|
46
|
+
if (previousFullscreen !== this._isFullscreen) {
|
|
47
|
+
const event = new CustomEvent("forge-ai-dialog-fullscreen-change", {
|
|
48
|
+
bubbles: true,
|
|
49
|
+
composed: true,
|
|
50
|
+
detail: { isFullscreen: this._isFullscreen }
|
|
51
|
+
});
|
|
52
|
+
this.dispatchEvent(event);
|
|
53
|
+
}
|
|
54
|
+
const previousUseDialog = previousFullscreen || this.expanded;
|
|
55
|
+
const currentUseDialog = this._isFullscreen || this.expanded;
|
|
56
|
+
if (previousUseDialog !== currentUseDialog && this.open) {
|
|
57
|
+
this.requestUpdate();
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
__privateAdd(this, _handleKeyDown, (event) => {
|
|
61
|
+
if (event.key === "Escape") {
|
|
62
|
+
event.preventDefault();
|
|
63
|
+
this.close();
|
|
64
|
+
}
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* Gets the current fullscreen state (readonly)
|
|
69
|
+
*/
|
|
70
|
+
get isFullscreen() {
|
|
71
|
+
return this._isFullscreen;
|
|
72
|
+
}
|
|
73
|
+
connectedCallback() {
|
|
74
|
+
super.connectedCallback();
|
|
75
|
+
__privateMethod(this, _AiDialogComponent_instances, setupMediaQuery_fn).call(this);
|
|
76
|
+
__privateMethod(this, _AiDialogComponent_instances, setupDragController_fn).call(this);
|
|
77
|
+
}
|
|
78
|
+
disconnectedCallback() {
|
|
79
|
+
super.disconnectedCallback();
|
|
80
|
+
__privateMethod(this, _AiDialogComponent_instances, cleanupMediaQuery_fn).call(this);
|
|
81
|
+
__privateMethod(this, _AiDialogComponent_instances, removeEscapeKeyListener_fn).call(this);
|
|
82
|
+
}
|
|
83
|
+
updated(changedProperties) {
|
|
84
|
+
super.updated(changedProperties);
|
|
85
|
+
if (changedProperties.has("open") || changedProperties.has("expanded") || changedProperties.has("_isFullscreen")) {
|
|
86
|
+
if (changedProperties.has("open") && !this.open) {
|
|
87
|
+
__privateGet(this, _dragController)?.resetPosition();
|
|
88
|
+
} else if (changedProperties.has("expanded") || changedProperties.has("_isFullscreen")) {
|
|
89
|
+
const useModal = this._isFullscreen || this.expanded;
|
|
90
|
+
if (useModal) {
|
|
91
|
+
__privateGet(this, _dragController)?.resetPosition();
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
__privateMethod(this, _AiDialogComponent_instances, handleOpenStateChange_fn).call(this);
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
render() {
|
|
98
|
+
const useModal = this._isFullscreen || this.expanded;
|
|
99
|
+
return when(
|
|
100
|
+
useModal,
|
|
101
|
+
() => __privateGet(this, _AiDialogComponent_instances, modalTemplate_get),
|
|
102
|
+
() => __privateGet(this, _AiDialogComponent_instances, popoverTemplate_get)
|
|
103
|
+
);
|
|
104
|
+
}
|
|
105
|
+
/**
|
|
106
|
+
* Opens the dialog.
|
|
107
|
+
*/
|
|
108
|
+
show() {
|
|
109
|
+
this.open = true;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* Closes the dialog.
|
|
113
|
+
*/
|
|
114
|
+
close() {
|
|
115
|
+
if (this.expanded) {
|
|
116
|
+
this.expanded = false;
|
|
117
|
+
}
|
|
118
|
+
this.open = false;
|
|
119
|
+
__privateGet(this, _dragController)?.resetPosition();
|
|
120
|
+
const event = new CustomEvent("forge-ai-dialog-close", {
|
|
121
|
+
bubbles: true,
|
|
122
|
+
composed: true
|
|
123
|
+
});
|
|
124
|
+
this.dispatchEvent(event);
|
|
125
|
+
}
|
|
126
|
+
/**
|
|
127
|
+
* Toggles the dialog open state.
|
|
128
|
+
*/
|
|
129
|
+
toggle() {
|
|
130
|
+
if (this.open) {
|
|
131
|
+
this.close();
|
|
132
|
+
} else {
|
|
133
|
+
this.show();
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
};
|
|
137
|
+
_mediaQuery = /* @__PURE__ */ new WeakMap();
|
|
138
|
+
_popoverElementRef = /* @__PURE__ */ new WeakMap();
|
|
139
|
+
_aiModalElementRef = /* @__PURE__ */ new WeakMap();
|
|
140
|
+
_dragHandleRef = /* @__PURE__ */ new WeakMap();
|
|
141
|
+
_escapeKeyAbortController = /* @__PURE__ */ new WeakMap();
|
|
142
|
+
_dragController = /* @__PURE__ */ new WeakMap();
|
|
143
|
+
_content = /* @__PURE__ */ new WeakMap();
|
|
144
|
+
_AiDialogComponent_instances = /* @__PURE__ */ new WeakSet();
|
|
145
|
+
popoverTemplate_get = function() {
|
|
146
|
+
return html`
|
|
147
|
+
<dialog
|
|
148
|
+
${ref(__privateGet(this, _popoverElementRef))}
|
|
149
|
+
aria-modal="false"
|
|
150
|
+
aria-labelledby="dialog-title"
|
|
151
|
+
popover="manual"
|
|
152
|
+
class="ai-dialog ${__privateGet(this, _dragController)?.isDragging ? "dragging" : ""}"
|
|
153
|
+
@toggle=${__privateMethod(this, _AiDialogComponent_instances, handlePopoverToggle_fn)}>
|
|
154
|
+
<button
|
|
155
|
+
${ref(__privateGet(this, _dragHandleRef))}
|
|
156
|
+
id="drag-handle"
|
|
157
|
+
aria-label="Move dialog"
|
|
158
|
+
class="forge-icon-button forge-icon-button--small ai-icon-button drag-handle"
|
|
159
|
+
tabindex="0"
|
|
160
|
+
@pointerdown=${__privateGet(this, _dragController)?.handlePointerDown}
|
|
161
|
+
@keydown=${__privateGet(this, _dragController)?.handleKeyDown}>
|
|
162
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
163
|
+
<path fill="none" d="M0 0h24v24H0z" />
|
|
164
|
+
<path d="M20 9H4v2h16zM4 15h16v-2H4z" />
|
|
165
|
+
</svg>
|
|
166
|
+
</button>
|
|
167
|
+
${__privateGet(this, _content)}
|
|
168
|
+
</dialog>
|
|
169
|
+
`;
|
|
170
|
+
};
|
|
171
|
+
modalTemplate_get = function() {
|
|
172
|
+
return html`
|
|
173
|
+
<forge-ai-modal ${ref(__privateGet(this, _aiModalElementRef))} @forge-ai-modal-close=${__privateMethod(this, _AiDialogComponent_instances, handleDialogClose_fn)}>
|
|
174
|
+
${__privateGet(this, _content)}
|
|
175
|
+
</forge-ai-modal>
|
|
176
|
+
`;
|
|
177
|
+
};
|
|
178
|
+
setupMediaQuery_fn = function() {
|
|
179
|
+
__privateSet(this, _mediaQuery, window.matchMedia(`(max-width: ${VIEWPORT_WIDTH_THRESHOLD}px)`));
|
|
180
|
+
__privateGet(this, _mediaQuery).addEventListener("change", __privateGet(this, _handleMediaChange));
|
|
181
|
+
__privateGet(this, _handleMediaChange).call(this, __privateGet(this, _mediaQuery));
|
|
182
|
+
};
|
|
183
|
+
setupDragController_fn = function() {
|
|
184
|
+
__privateSet(this, _dragController, new DragController(this, {
|
|
185
|
+
targetElementRef: __privateGet(this, _popoverElementRef),
|
|
186
|
+
dragHandleRef: __privateGet(this, _dragHandleRef),
|
|
187
|
+
snapToViewport: true,
|
|
188
|
+
constrainKeyboardNavigation: true,
|
|
189
|
+
keyboardStep: 10,
|
|
190
|
+
snapAnimationDuration: 200,
|
|
191
|
+
allowOutOfBounds: true
|
|
192
|
+
}));
|
|
193
|
+
};
|
|
194
|
+
cleanupMediaQuery_fn = function() {
|
|
195
|
+
__privateGet(this, _mediaQuery)?.removeEventListener("change", __privateGet(this, _handleMediaChange));
|
|
196
|
+
};
|
|
197
|
+
_handleMediaChange = /* @__PURE__ */ new WeakMap();
|
|
198
|
+
handleOpenStateChange_fn = function() {
|
|
199
|
+
const useDialog = this._isFullscreen || this.expanded;
|
|
200
|
+
if (useDialog) {
|
|
201
|
+
__privateMethod(this, _AiDialogComponent_instances, removeEscapeKeyListener_fn).call(this);
|
|
202
|
+
const dialogElement = __privateGet(this, _aiModalElementRef).value;
|
|
203
|
+
if (dialogElement) {
|
|
204
|
+
if (this.open) {
|
|
205
|
+
if (!dialogElement.open) {
|
|
206
|
+
dialogElement.show();
|
|
207
|
+
}
|
|
208
|
+
} else {
|
|
209
|
+
if (dialogElement.open) {
|
|
210
|
+
dialogElement.close();
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
} else {
|
|
215
|
+
const popoverElement = __privateGet(this, _popoverElementRef).value;
|
|
216
|
+
if (popoverElement) {
|
|
217
|
+
if (this.open) {
|
|
218
|
+
__privateMethod(this, _AiDialogComponent_instances, addEscapeKeyListener_fn).call(this);
|
|
219
|
+
popoverElement.showPopover();
|
|
220
|
+
} else {
|
|
221
|
+
__privateMethod(this, _AiDialogComponent_instances, removeEscapeKeyListener_fn).call(this);
|
|
222
|
+
popoverElement.hidePopover();
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
};
|
|
227
|
+
handlePopoverToggle_fn = function(event) {
|
|
228
|
+
const wasOpen = this.open;
|
|
229
|
+
this.open = event.newState === "open";
|
|
230
|
+
if (this.open && !wasOpen) {
|
|
231
|
+
__privateMethod(this, _AiDialogComponent_instances, addEscapeKeyListener_fn).call(this);
|
|
232
|
+
} else if (!this.open && wasOpen) {
|
|
233
|
+
__privateMethod(this, _AiDialogComponent_instances, removeEscapeKeyListener_fn).call(this);
|
|
234
|
+
}
|
|
235
|
+
};
|
|
236
|
+
handleDialogClose_fn = function() {
|
|
237
|
+
this.close();
|
|
238
|
+
};
|
|
239
|
+
addEscapeKeyListener_fn = function() {
|
|
240
|
+
if (!__privateGet(this, _escapeKeyAbortController)) {
|
|
241
|
+
__privateSet(this, _escapeKeyAbortController, new AbortController());
|
|
242
|
+
document.addEventListener("keydown", __privateGet(this, _handleKeyDown), {
|
|
243
|
+
signal: __privateGet(this, _escapeKeyAbortController).signal
|
|
244
|
+
});
|
|
245
|
+
}
|
|
246
|
+
};
|
|
247
|
+
removeEscapeKeyListener_fn = function() {
|
|
248
|
+
if (__privateGet(this, _escapeKeyAbortController)) {
|
|
249
|
+
__privateGet(this, _escapeKeyAbortController).abort();
|
|
250
|
+
__privateSet(this, _escapeKeyAbortController, void 0);
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
_handleKeyDown = /* @__PURE__ */ new WeakMap();
|
|
254
|
+
AiDialogComponent.styles = unsafeCSS(styles);
|
|
255
|
+
__decorateClass([
|
|
256
|
+
property({ type: Boolean })
|
|
257
|
+
], AiDialogComponent.prototype, "open", 2);
|
|
258
|
+
__decorateClass([
|
|
259
|
+
property({ type: Boolean })
|
|
260
|
+
], AiDialogComponent.prototype, "expanded", 2);
|
|
261
|
+
__decorateClass([
|
|
262
|
+
state()
|
|
263
|
+
], AiDialogComponent.prototype, "_isFullscreen", 2);
|
|
264
|
+
AiDialogComponent = __decorateClass([
|
|
265
|
+
customElement(AiDialogComponentTagName)
|
|
266
|
+
], AiDialogComponent);
|
|
267
|
+
export {
|
|
268
|
+
AiDialogComponent,
|
|
269
|
+
AiDialogComponentTagName
|
|
270
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
const styles = '/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/**\n * @license\n * Copyright Tyler Technologies, Inc. \n * License: Apache-2.0\n */\n/* prettier-ignore */\n.forge-icon-button {\n --_icon-button-display: var(--forge-icon-button-display, inline-flex);\n --_icon-button-size: var(--forge-icon-button-size, 48px);\n --_icon-button-gap: var(--forge-icon-button-gap, 0);\n --_icon-button-icon-color: var(--forge-icon-button-icon-color, currentColor);\n --_icon-button-background-color: var(--forge-icon-button-background-color, none);\n --_icon-button-icon-size: var(--forge-icon-button-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.5));\n --_icon-button-cursor: var(--forge-icon-button-cursor, pointer);\n --_icon-button-padding: var(--forge-icon-button-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-border: var(--forge-icon-button-border, none);\n --_icon-button-shadow: var(--forge-icon-button-shadow, none);\n --_icon-button-transition-duration: var(--forge-icon-button-transition-duration, var(--forge-animation-duration-short3, 150ms));\n --_icon-button-transition-timing: var(--forge-icon-button-transition-timing, var(--forge-animation-easing-standard, cubic-bezier(0.2, 0, 0, 1)));\n --_icon-button-shape: var(--forge-icon-button-shape, calc(var(--forge-shape-full, 9999px) * var(--forge-shape-factor, 1)));\n --_icon-button-shape-start-start: var(--forge-icon-button-shape-start-start, var(--_icon-button-shape));\n --_icon-button-shape-start-end: var(--forge-icon-button-shape-start-end, var(--_icon-button-shape));\n --_icon-button-shape-end-start: var(--forge-icon-button-shape-end-start, var(--_icon-button-shape));\n --_icon-button-shape-end-end: var(--forge-icon-button-shape-end-end, var(--_icon-button-shape));\n --_icon-button-shape-squared: var(--forge-icon-button-shape-squared, calc(var(--forge-shape-medium, 4px) * var(--forge-shape-factor, 1)));\n --_icon-button-outlined-border-width: var(--forge-icon-button-outlined-border-width, 1px);\n --_icon-button-outlined-border-style: var(--forge-icon-button-outlined-border-style, solid);\n --_icon-button-outlined-border-color: var(--forge-icon-button-outlined-border-color, var(--_icon-button-icon-color));\n --_icon-button-tonal-icon-color: var(--forge-icon-button-tonal-icon-color, var(--forge-theme-on-primary-container, #222c62));\n --_icon-button-tonal-background-color: var(--forge-icon-button-tonal-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-filled-icon-color: var(--forge-icon-button-filled-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-filled-background-color: var(--forge-icon-button-filled-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-raised-shadow: var(--forge-icon-button-raised-shadow, 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-hover-shadow: var(--forge-icon-button-raised-hover-shadow, 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-active-shadow: var(--forge-icon-button-raised-active-shadow, 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12));\n --_icon-button-raised-disabled-shadow: var(--forge-icon-button-raised-disabled-shadow, none);\n --_icon-button-density-small-size: var(--forge-icon-button-density-small-size, 24px);\n --_icon-button-density-small-padding: var(--forge-icon-button-density-small-padding, var(--forge-spacing-xxxsmall, 2px));\n --_icon-button-density-small-icon-size: var(--forge-icon-button-density-small-icon-size, calc(var(--forge-typography-font-size, 1rem) * 1.125));\n --_icon-button-density-medium-size: var(--forge-icon-button-density-medium-size, 36px);\n --_icon-button-density-medium-padding: var(--forge-icon-button-density-medium-padding, var(--forge-spacing-xxsmall, 4px));\n --_icon-button-density-large-size: var(--forge-icon-button-density-large-size, var(--_icon-button-size));\n --_icon-button-toggle-on-background-color: var(--forge-icon-button-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-toggle-on-icon-color: var(--forge-icon-button-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-outlined-toggle-on-background-color: var(--forge-icon-button-outlined-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-outlined-toggle-on-icon-color: var(--forge-icon-button-outlined-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-tonal-toggle-background-color: var(--forge-icon-button-tonal-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-tonal-toggle-on-background-color: var(--forge-icon-button-tonal-toggle-on-background-color, var(--forge-theme-primary-container, #d1d5ed));\n --_icon-button-tonal-toggle-on-icon-color: var(--forge-icon-button-tonal-toggle-on-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-background-color: var(--forge-icon-button-filled-toggle-background-color, var(--forge-theme-surface-container-low, #ebebeb));\n --_icon-button-filled-toggle-icon-color: var(--forge-icon-button-filled-toggle-icon-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-background-color: var(--forge-icon-button-filled-toggle-on-background-color, var(--forge-theme-primary, #3f51b5));\n --_icon-button-filled-toggle-on-icon-color: var(--forge-icon-button-filled-toggle-on-icon-color, var(--forge-theme-on-primary, #ffffff));\n --_icon-button-disabled-cursor: var(--forge-icon-button-disabled-cursor, not-allowed);\n --_icon-button-disabled-opacity: var(--forge-icon-button-disabled-opacity, 0.38);\n --_icon-button-popover-icon-padding: var(--forge-icon-button-popover-icon-padding, var(--forge-spacing-xsmall, 8px));\n --_icon-button-focus-indicator-color: var(--forge-icon-button-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n}\n\n.forge-icon-button {\n display: var(--_icon-button-display);\n position: relative;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n position: relative;\n z-index: 0;\n display: var(--_icon-button-display);\n align-items: center;\n justify-content: center;\n gap: var(--_icon-button-gap);\n box-sizing: border-box;\n height: var(--_icon-button-density-large-size);\n min-width: var(--_icon-button-density-large-size);\n border: var(--_icon-button-border);\n border-start-start-radius: var(--_icon-button-shape-start-start);\n border-start-end-radius: var(--_icon-button-shape-start-end);\n border-end-start-radius: var(--_icon-button-shape-end-start);\n border-end-end-radius: var(--_icon-button-shape-end-end);\n padding: var(--_icon-button-padding);\n box-shadow: var(--_icon-button-shadow);\n color: var(--_icon-button-icon-color);\n background: var(--_icon-button-background-color);\n font-size: var(--_icon-button-icon-size);\n cursor: var(--_icon-button-cursor);\n user-select: none;\n transition-property: box-shadow, background;\n transition-duration: var(--_icon-button-transition-duration);\n transition-timing-function: var(--_icon-button-transition-timing);\n}\n\n.forge-icon-button img,\n.forge-icon-button svg {\n height: var(--_icon-button-icon-size);\n width: var(--_icon-button-icon-size);\n}\n\n.forge-icon-button svg {\n fill: currentColor;\n}\n\n.forge-icon-button:not(:disabled) {\n --_state-layer-display: var(--forge-state-layer-display, flex);\n --_state-layer-color: var(--forge-state-layer-color, var(--forge-theme-on-surface, #000000));\n --_state-layer-hover-color: var(--forge-state-layer-hover-color, var(--_state-layer-color));\n --_state-layer-hover-opacity: var(--forge-state-layer-hover-opacity, 0.08);\n --_state-layer-pressed-color: var(--forge-state-layer-pressed-color, var(--_state-layer-color));\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.12);\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 15ms);\n --_state-layer-pressed-duration: var(--forge-state-layer-pressed-duration, 105ms);\n --_state-layer-animation-duration: var(--forge-state-layer-animation-duration, 375ms);\n}\n\n.forge-icon-button:not(:disabled)::before {\n opacity: 0;\n position: absolute;\n background-color: var(--_state-layer-hover-color);\n inset: 0;\n transition: opacity var(--_state-layer-hover-duration) linear, background-color var(--_state-layer-hover-duration) linear;\n --_state-layer-hover-duration: var(--forge-state-layer-hover-duration, 100ms);\n content: "";\n opacity: 0;\n border-radius: inherit;\n}\n\n.forge-icon-button:not(:disabled):hover::before {\n background-color: var(--_state-layer-hover-color);\n opacity: var(--_state-layer-hover-opacity);\n}\n\n.forge-icon-button:not(:disabled):active::before {\n opacity: var(--_state-layer-pressed-opacity);\n transition-duration: var(--_state-layer-pressed-duration);\n --_state-layer-pressed-opacity: var(--forge-state-layer-pressed-opacity, 0.18);\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-state-layer-color: var(--_icon-button-icon-color);\n}\n\n@keyframes forge-focus-indicator-outward-grow {\n from {\n outline-width: 0;\n }\n to {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-outward-shrink {\n from {\n outline-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-grow {\n from {\n border-width: 0;\n }\n to {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n@keyframes forge-focus-indicator-inward-shrink {\n from {\n border-width: var(--_focus-indicator-active-width);\n }\n}\n.forge-icon-button:not(:disabled) {\n outline: none;\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n --_focus-indicator-display: var(--forge-focus-indicator-display, flex);\n --_focus-indicator-width: var(--forge-focus-indicator-width, var(--forge-border-medium, 2px));\n --_focus-indicator-active-width: var(--forge-focus-indicator-active-width, 6px);\n --_focus-indicator-color: var(--forge-focus-indicator-color, var(--forge-theme-primary, #3f51b5));\n --_focus-indicator-shape: var(--forge-focus-indicator-shape, calc(var(--forge-shape-extra-small, 1px) * var(--forge-shape-factor, 1)));\n --_focus-indicator-duration: var(--forge-focus-indicator-duration, var(--forge-animation-duration-long4, 600ms));\n --_focus-indicator-easing: var(--forge-focus-indicator-easing, var(--forge-animation-easing-emphasized, cubic-bezier(0.2, 0, 0, 1)));\n --_focus-indicator-shape-start-start: var(--forge-focus-indicator-shape-start-start, var(--_focus-indicator-shape));\n --_focus-indicator-shape-start-end: var(--forge-focus-indicator-shape-start-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-end: var(--forge-focus-indicator-shape-end-end, var(--_focus-indicator-shape));\n --_focus-indicator-shape-end-start: var(--forge-focus-indicator-shape-end-start, var(--_focus-indicator-shape));\n --_focus-indicator-outward-offset: var(--forge-focus-indicator-outward-offset, var(--forge-spacing-xxsmall, 4px));\n --_focus-indicator-inward-offset: var(--forge-focus-indicator-inward-offset, 0px);\n --_focus-indicator-offset-block: var(--forge-focus-indicator-offset-block, 0);\n --_focus-indicator-offset-inline: var(--forge-focus-indicator-offset-inline, 0);\n}\n\n.forge-icon-button:not(:disabled):focus-visible::after {\n animation-delay: 0s, calc(var(--_focus-indicator-duration) * 0.25);\n animation-duration: calc(var(--_focus-indicator-duration) * 0.25), calc(var(--_focus-indicator-duration) * 0.75);\n animation-timing-function: var(--_focus-indicator-easing);\n box-sizing: border-box;\n color: var(--_focus-indicator-color);\n display: none;\n pointer-events: none;\n position: absolute;\n margin-block: var(--_focus-indicator-offset-block);\n margin-inline: var(--_focus-indicator-offset-inline);\n animation-name: forge-focus-indicator-outward-grow, forge-focus-indicator-outward-shrink;\n border-end-end-radius: calc(var(--_focus-indicator-shape-end-end) + var(--_focus-indicator-outward-offset));\n border-end-start-radius: calc(var(--_focus-indicator-shape-end-start) + var(--_focus-indicator-outward-offset));\n border-start-end-radius: calc(var(--_focus-indicator-shape-start-end) + var(--_focus-indicator-outward-offset));\n border-start-start-radius: calc(var(--_focus-indicator-shape-start-start) + var(--_focus-indicator-outward-offset));\n inset: calc(-1 * var(--_focus-indicator-outward-offset));\n outline: var(--_focus-indicator-width) solid currentColor;\n content: "";\n display: block;\n}\n\n.forge-icon-button:not(:disabled) {\n --forge-focus-indicator-color: var(--_icon-button-focus-indicator-color);\n --forge-focus-indicator-shape: var(--_icon-button-shape);\n}\n\n.forge-icon-button:not(:disabled):where(.forge-icon-button--text,\n:not(:where(.forge-icon-button--outlined, .forge-icon-button--tonal, .forge-icon-button--filled, .forge-icon-button--raised))) {\n --forge-focus-indicator-outward-offset: 0px;\n}\n\n.forge-icon-button--outlined {\n border-width: var(--_icon-button-outlined-border-width);\n border-style: var(--_icon-button-outlined-border-style);\n border-color: var(--_icon-button-outlined-border-color);\n}\n\n.forge-icon-button--tonal {\n --_icon-button-icon-color: var(--_icon-button-tonal-icon-color);\n --_icon-button-background-color: var(--_icon-button-tonal-background-color);\n}\n\n.forge-icon-button--filled, .forge-icon-button--raised {\n --_icon-button-icon-color: var(--_icon-button-filled-icon-color);\n --_icon-button-background-color: var(--_icon-button-filled-background-color);\n}\n\n.forge-icon-button--raised {\n --_icon-button-shadow: var(--_icon-button-raised-shadow);\n}\n\n.forge-icon-button--raised:hover {\n --_icon-button-raised-shadow: var(--_icon-button-raised-hover-shadow);\n}\n\n.forge-icon-button--raised:active {\n --_icon-button-raised-shadow: var(--_icon-button-raised-active-shadow);\n}\n\n.forge-icon-button--squared {\n --_icon-button-shape: var(--_icon-button-shape-squared);\n}\n\n.forge-icon-button--small {\n --_icon-button-size: var(--_icon-button-density-small-size);\n --_icon-button-icon-size: var(--_icon-button-density-small-icon-size);\n --_icon-button-padding: var(--_icon-button-density-small-padding);\n}\n\n.forge-icon-button--small > * {\n font-size: var(--_icon-button-density-small-icon-size);\n}\n\n.forge-icon-button--medium {\n --_icon-button-size: var(--_icon-button-density-medium-size);\n --_icon-button-padding: var(--_icon-button-density-medium-padding);\n}\n\n.forge-icon-button:disabled {\n pointer-events: none;\n opacity: var(--_icon-button-disabled-opacity);\n pointer-events: auto;\n cursor: not-allowed;\n}\n\n.forge-icon-button forge-circular-progress {\n --forge-circular-progress-indicator-color: var(--_icon-button-icon-color);\n --forge-circular-progress-track-color: transparent;\n --forge-circular-progress-size: 1em;\n}\n\n.ai-icon-button > svg {\n fill: var(--forge-theme-text-medium, rgba(0, 0, 0, 0.6));\n}\n\n:host {\n display: contents;\n}\n\nforge-ai-chat-interface {\n flex-grow: 1;\n}\n\n.ai-dialog {\n position: relative;\n overflow: hidden;\n box-sizing: border-box;\n background: var(--forge-theme-surface-bright, #ffffff);\n border-radius: calc(var(--forge-shape-large, 8px) * var(--forge-shape-factor, 1));\n box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n border: none;\n width: 420px;\n height: calc(100vh - 72px);\n padding: 0;\n inset: auto;\n bottom: var(--forge-spacing-medium, 16px);\n right: var(--forge-spacing-medium, 16px);\n animation-duration: 150ms;\n animation-timing-function: cubic-bezier(0, 0, 0, 1);\n animation-name: fadein, zoomin;\n transform-origin: right bottom;\n}\n\n@keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n@keyframes zoomin {\n from {\n transform: scale(0.8);\n }\n to {\n transform: scale(1);\n }\n}\n.drag-handle {\n position: absolute;\n top: var(--forge-spacing-xxsmall, 4px);\n left: 50%;\n transform: translateX(-50%);\n z-index: 10;\n opacity: 0;\n visibility: hidden;\n transition: opacity 150ms ease, visibility 150ms ease;\n cursor: grab;\n}\n.drag-handle:active {\n cursor: grabbing;\n}\n\n.ai-dialog:hover .drag-handle,\n.ai-dialog:focus-within .drag-handle {\n opacity: 1;\n visibility: visible;\n}\n\n.ai-dialog.dragging {\n opacity: 0.7;\n transition: none;\n}';
|
|
2
|
+
export {
|
|
3
|
+
styles as default
|
|
4
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { AiDialogComponent, AiDialogComponentTagName } from './ai-dialog';
|