/* eslint-disable */ /* tslint:disable */ /** * This is an autogenerated file created by the Stencil compiler. * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime"; import { Meeting, Peer, WaitlistedParticipant } from "./types/dyte-client"; import { Chat, ChatChannel, Notification, PartialStateEvent, Poll, PollObject, Size, States, Transcript } from "./types/props"; import { UIConfig } from "./types/ui-config"; import { IconPack } from "./lib/icons"; import { DyteI18n } from "./lib/lang"; import { AIView } from "./components/dyte-ai/dyte-ai"; import { ControlBarVariant } from "./components/dyte-controlbar-button/dyte-controlbar-button"; import { DyteI18n as DyteI18n1, IconPack as IconPack1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports"; import { AudioVisualizerVariant } from "./components/dyte-audio-visualizer/dyte-audio-visualizer"; import { AvatarVariant } from "./components/dyte-avatar/dyte-avatar"; import { DraftMeeting } from "./utils/breakout-rooms-manager"; import { ButtonKind, ButtonVariant } from "./components/dyte-button/dyte-button"; import { DyteBasicParticipant, DytePermissionsPreset, DytePlugin, FileMessage, ImageMessage, Message, TextMessage } from "@dytesdk/web-core"; import { ChatFilter } from "./components/dyte-chat/dyte-chat"; import { DyteNewMessageEvent } from "./components/dyte-chat-composer-ui/dyte-chat-composer-ui"; import { NewMessageEvent } from "./components/dyte-chat-composer-view/dyte-chat-composer-view"; import { ChatGroup, ChatGroupChangedType } from "./components/dyte-chat-selector-ui/dyte-chat-selector-ui"; import { ControlBarVariant as ControlBarVariant1 } from "./components/dyte-controlbar-button/dyte-controlbar-button"; import { GridLayout, GridSize } from "./components/dyte-grid/dyte-grid"; import { GridPaginationVariants } from "./components/dyte-grid-pagination/dyte-grid-pagination"; import { IconVariant } from "./components/dyte-icon/dyte-icon"; import { ModalDataConfig } from "./components/dyte-join-stage/dyte-join-stage"; import { MeetingMode } from "./components/dyte-meeting/dyte-meeting"; import { GridLayout as GridLayout1, GridSize as GridSize1 } from "./components/dyte-grid/dyte-grid"; import { Placement } from "./types/floating-ui"; import { MessageAction } from "./components/dyte-message-view/dyte-message-view"; import { DyteNameTagVariant } from "./components/dyte-name-tag/dyte-name-tag"; import { VNode } from "./stencil-public-runtime"; import { DataNode } from "./components/dyte-paginated-list/dyte-paginated-list"; import { ParticipantViewMode } from "./components/dyte-participant/dyte-participant"; import { ParticipantsTabId } from "./components/dyte-participants/dyte-participants"; import { ParticipantsViewMode } from "./components/dyte-participants/dyte-participants"; import { DyteSidebarTab, DyteSidebarView } from "./components/dyte-sidebar-ui/dyte-sidebar-ui"; import { DyteSidebarSection } from "./components/dyte-sidebar/dyte-sidebar"; import { DyteSidebarTab as DyteSidebarTab1, DyteSidebarView as DyteSidebarView1 } from "./components/dyte-sidebar-ui/dyte-sidebar-ui"; import { Tab } from "./components/dyte-tab-bar/dyte-tab-bar"; import { TooltipKind, TooltipVariant } from "./components/dyte-tooltip/dyte-tooltip"; import { ViewerCountVariant } from "./components/dyte-viewer-count/dyte-viewer-count"; import { Peer as Peer1 } from "."; export { Meeting, Peer, WaitlistedParticipant } from "./types/dyte-client"; export { Chat, ChatChannel, Notification, PartialStateEvent, Poll, PollObject, Size, States, Transcript } from "./types/props"; export { UIConfig } from "./types/ui-config"; export { IconPack } from "./lib/icons"; export { DyteI18n } from "./lib/lang"; export { AIView } from "./components/dyte-ai/dyte-ai"; export { ControlBarVariant } from "./components/dyte-controlbar-button/dyte-controlbar-button"; export { DyteI18n as DyteI18n1, IconPack as IconPack1, Size as Size1, States as States1, UIConfig as UIConfig1 } from "./exports"; export { AudioVisualizerVariant } from "./components/dyte-audio-visualizer/dyte-audio-visualizer"; export { AvatarVariant } from "./components/dyte-avatar/dyte-avatar"; export { DraftMeeting } from "./utils/breakout-rooms-manager"; export { ButtonKind, ButtonVariant } from "./components/dyte-button/dyte-button"; export { DyteBasicParticipant, DytePermissionsPreset, DytePlugin, FileMessage, ImageMessage, Message, TextMessage } from "@dytesdk/web-core"; export { ChatFilter } from "./components/dyte-chat/dyte-chat"; export { DyteNewMessageEvent } from "./components/dyte-chat-composer-ui/dyte-chat-composer-ui"; export { NewMessageEvent } from "./components/dyte-chat-composer-view/dyte-chat-composer-view"; export { ChatGroup, ChatGroupChangedType } from "./components/dyte-chat-selector-ui/dyte-chat-selector-ui"; export { ControlBarVariant as ControlBarVariant1 } from "./components/dyte-controlbar-button/dyte-controlbar-button"; export { GridLayout, GridSize } from "./components/dyte-grid/dyte-grid"; export { GridPaginationVariants } from "./components/dyte-grid-pagination/dyte-grid-pagination"; export { IconVariant } from "./components/dyte-icon/dyte-icon"; export { ModalDataConfig } from "./components/dyte-join-stage/dyte-join-stage"; export { MeetingMode } from "./components/dyte-meeting/dyte-meeting"; export { GridLayout as GridLayout1, GridSize as GridSize1 } from "./components/dyte-grid/dyte-grid"; export { Placement } from "./types/floating-ui"; export { MessageAction } from "./components/dyte-message-view/dyte-message-view"; export { DyteNameTagVariant } from "./components/dyte-name-tag/dyte-name-tag"; export { VNode } from "./stencil-public-runtime"; export { DataNode } from "./components/dyte-paginated-list/dyte-paginated-list"; export { ParticipantViewMode } from "./components/dyte-participant/dyte-participant"; export { ParticipantsTabId } from "./components/dyte-participants/dyte-participants"; export { ParticipantsViewMode } from "./components/dyte-participants/dyte-participants"; export { DyteSidebarTab, DyteSidebarView } from "./components/dyte-sidebar-ui/dyte-sidebar-ui"; export { DyteSidebarSection } from "./components/dyte-sidebar/dyte-sidebar"; export { DyteSidebarTab as DyteSidebarTab1, DyteSidebarView as DyteSidebarView1 } from "./components/dyte-sidebar-ui/dyte-sidebar-ui"; export { Tab } from "./components/dyte-tab-bar/dyte-tab-bar"; export { TooltipKind, TooltipVariant } from "./components/dyte-tooltip/dyte-tooltip"; export { ViewerCountVariant } from "./components/dyte-viewer-count/dyte-viewer-count"; export { Peer as Peer1 } from "."; export namespace Components { interface DyteAi { /** * Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * View type */ "view": AIView; } interface DyteAiToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteAiTranscriptions { /** * Initial transcriptions */ "initialTranscriptions": Transcript[]; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n; } interface DyteAudioGrid { /** * Config */ "config": UIConfig1; /** * Whether to hide self in the grid */ "hideSelf": boolean; /** * Icon Pack */ "iconPack": IconPack1; /** * Meeting */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States */ "states": States1; /** * Language */ "t": DyteI18n1; } interface DyteAudioTile { /** * Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting */ "meeting": Meeting; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * States */ "states": States1; /** * Language */ "t": DyteI18n1; } /** * An audio visualizer component which visualizes a participants audio. * Commonly used inside `dyte-name-tag`. */ interface DyteAudioVisualizer { /** * Hide when there is no audio / audio is muted */ "hideMuted": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack */ "isScreenShare": boolean; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": AudioVisualizerVariant; } /** * Avatar component which renders a participant's image or their initials. */ interface DyteAvatar { /** * Icon pack */ "iconPack": IconPack; /** * Participant object */ "participant": Peer | WaitlistedParticipant | { name: string; picture: string }; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Avatar type */ "variant": AvatarVariant; } interface DyteBreakoutRoomManager { /** * allow room delete */ "allowDelete": boolean; /** * Enable updating participants */ "assigningParticipants": boolean; /** * display expanded card by default */ "defaultExpanded": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Drag mode */ "isDragMode": boolean; /** * Meeting object */ "meeting": Meeting; /** * Mode in which selector is used */ "mode": 'edit' | 'create'; /** * Connected Room Config Object */ "room": DraftMeeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteBreakoutRoomParticipants { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Participant ids */ "participantIds": string[]; /** * selected participants */ "selectedParticipantIds": string[]; /** * Language */ "t": DyteI18n; } interface DyteBreakoutRoomsManager { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A button which toggles visibility of breakout rooms. * You need to pass the `meeting` object to it. */ interface DyteBreakoutRoomsToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteBroadcastMessageModal { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n; } /** * A button that follows Dyte's Design System. */ interface DyteButton { /** * Where the button is disabled or not */ "disabled": boolean; /** * Button type */ "kind": ButtonKind; /** * Whether to reverse order of children */ "reverse": boolean; /** * Size */ "size": Size; /** * Button type */ "type": HTMLButtonElement['type']; /** * Button variant */ "variant": ButtonVariant; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteCameraSelector { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * variant */ "variant": 'full' | 'inline'; } /** * A button which toggles your camera. */ interface DyteCameraToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteCaptionToggle { /** * Config */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteChannelCreator { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n1; } interface DyteChannelDetails { /** * Channel object */ "channel": ChatChannel; /** * Icon pack */ "iconPack": IconPack1; /** * List of channel members */ "members": DyteBasicParticipant[]; /** * Language */ "t": DyteI18n1; } interface DyteChannelHeader { /** * Channel object */ "channel": ChatChannel; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Show back button */ "showBackButton": boolean; /** * Language */ "t": DyteI18n1; } interface DyteChannelSelectorUi { /** * Channels */ "channels": ChatChannel[]; /** * Icon pack */ "iconPack": IconPack1; /** * Selected channel id */ "selectedChannelId": string; /** * show recent message in channel */ "showRecentMessage": boolean; /** * Language */ "t": DyteI18n1; } interface DyteChannelSelectorView { /** * Channels */ "channels": { id: string; name: string; avatarUrl?: string; icon?: keyof IconPack1; latestMessage?: string; latestMessageTime?: Date; unreadCount?: number; }[]; /** * Disables search bar (default = false) */ "disableSearch": boolean; /** * Hides avatar (default = false) */ "hideAvatar": boolean; /** * Icon Pack */ "iconPack": IconPack1; /** * Selected channel id */ "selectedChannelId": string; /** * Language */ "t": DyteI18n1; /** * Render as dropdown or list (default = list) */ "viewAs": 'dropdown' | 'list'; } /** * Fully featured chat component with image & file upload, emoji picker and auto-scroll. */ interface DyteChat { /** * Config */ "config": UIConfig1; /** * disables private chat */ "disablePrivateChat": boolean; /** * @deprecated Beta API, will change in future A filter function for messages to be displayed */ "displayFilter": ChatFilter; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * @deprecated Beta API, will change in future List of target presets allowed as private chat recipient */ "privatePresetFilter": String[]; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } interface DyteChatComposerUi { /** * Whether user can send file messages */ "canSendFiles": boolean; /** * Whether user can send text messages */ "canSendTextMessage": boolean; /** * channel id */ "channelId"?: string; /** * Whether to show emoji picker */ "disableEmojiPicker"?: boolean; /** * Icon pack */ "iconPack": IconPack1; /** * list of members that can be mentioned */ "members"?: DyteBasicParticipant[]; /** * prefill the composer */ "prefill": { suggestedReplies?: string[]; editMessage?: TextMessage; replyMessage?: TextMessage; }; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; } /** * A component which renders a chat composer */ interface DyteChatComposerView { /** * Whether user can send file messages */ "canSendFiles": boolean; /** * Whether user can send text messages */ "canSendTextMessage": boolean; /** * Whether to show emoji picker */ "disableEmojiPicker"?: boolean; /** * Icon pack */ "iconPack": IconPack1; /** * Placeholder for text input */ "inputTextPlaceholder": string; /** * Sets composer to edit mode */ "isEditing": boolean; /** * Max length for text input */ "maxLength": number; /** * Message to be pre-populated */ "message": string; /** * Quote message to be displayed */ "quotedMessage": string; /** * Rate limits */ "rateLimits": { period: number; maxInvocations: number; }; /** * Key for storing message in localStorage */ "storageKey": string; /** * Language */ "t": DyteI18n1; } interface DyteChatMessage { /** * aligns message to right */ "alignRight": boolean; /** * can delete message */ "canDelete": boolean; /** * can edit message */ "canEdit": boolean; /** * can pin this message */ "canPin": boolean; /** * can quote reply this message */ "canReply": boolean; /** * Child */ "child": HTMLElement; /** * disables controls */ "disableControls": boolean; /** * hides avatar */ "hideAvatar": boolean; /** * Icon pack */ "iconPack": IconPack1; /** * is continued */ "isContinued": boolean; /** * if sender is self */ "isSelf": boolean; /** * is unread */ "isUnread": boolean; /** * Whether to left align the chat bubbles */ "leftAlign": boolean; /** * message item */ "message": Message; /** * sender display picture url */ "senderDisplayPicture": string; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n1; } interface DyteChatMessagesUi { /** * Can current user pin/unpin messages */ "canPinMessages": boolean; /** * Icon pack */ "iconPack": IconPack1; /** * Chat Messages */ "messages": Chat[]; /** * Selected group key */ "selectedGroup": string; /** * User ID of self user */ "selfUserId": string; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; } interface DyteChatMessagesUiPaginated { /** * Icon pack */ "iconPack": IconPack; /** * Whether to align chat bubbles to the left */ "leftAlign": boolean; /** * Meeting object */ "meeting": Meeting; /** * Selected channel */ "selectedChannel"?: ChatChannel; /** * Selected channel id */ "selectedChannelId"?: string; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } interface DyteChatSearchResults { /** * Channel id */ "channelId": string; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Search query */ "query": string; /** * Language */ "t": DyteI18n1; } interface DyteChatSelectorUi { /** * Participants */ "groups": ChatGroup[]; /** * Icon pack */ "iconPack": IconPack1; /** * Selected participant */ "selectedGroupId": string; /** * Self User ID */ "selfUserId": string; /** * Language */ "t": DyteI18n; /** * Unread counts */ "unreadCounts": Record; } /** * A button which toggles visibility of chat. * You need to pass the `meeting` object to it to see the unread messages count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'chat' } * ``` */ interface DyteChatToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * Shows the time elapsed in a meeting. */ interface DyteClock { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; } /** * A confirmation modal. */ interface DyteConfirmationModal { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * Controlbar component provides you with various designs as variants. */ interface DyteControlbar { /** * Config */ "config": UIConfig1; /** * Whether to render the default UI */ "disableRender": boolean; /** * Icon Pack */ "iconPack": IconPack1; /** * Meeting */ "meeting": Meeting; /** * Size */ "size": Size; /** * States */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": 'solid' | 'boxed'; } /** * A skeleton component used for composing custom controlbar buttons. */ interface DyteControlbarButton { /** * Whether icon requires brand color */ "brandIcon": boolean; /** * Whether button is disabled */ "disabled": boolean; /** * Icon */ "icon": string; /** * Icon pack */ "iconPack": IconPack; /** * Loading state Ignores current icon and shows a spinner if true */ "isLoading": boolean; /** * Label of button */ "label": string; /** * Whether to show warning icon */ "showWarning": boolean; /** * Size */ "size": Size; /** * Variant */ "variant": ControlBarVariant1; } /** * A number picker with increment and decrement buttons. */ interface DyteCounter { /** * Icon pack */ "iconPack": IconPack1; /** * Minimum value */ "minValue": number; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; /** * Initial value */ "value": number; } /** * A troubleshooting component to identify and fix any issues in the meeting. */ interface DyteDebugger { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteDebuggerAudio { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n1; } interface DyteDebuggerScreenshare { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n1; } interface DyteDebuggerSystem { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n1; } interface DyteDebuggerToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteDebuggerVideo { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n1; } /** * A dialog component. */ interface DyteDialog { /** * UI Config */ "config": UIConfig; /** * Whether Escape key can close the modal */ "disableEscapeKey": boolean; /** * Whether to show the close button */ "hideCloseButton": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Whether a dialog is open or not */ "open": boolean; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which handles all dialog elements in a component such as: * - dyte-settings * - dyte-leave-meeting * - dyte-permissions-message * - dyte-image-viewer * - dyte-breakout-rooms-manager * This components depends on the values from `states` object. */ interface DyteDialogManager { /** * UI Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which renders the draft attachment to send */ interface DyteDraftAttachmentView { /** * Attachment to display */ "attachment": { type: 'image' | 'file'; file: File; }; /** * Icon pack */ "iconPack": IconPack1; /** * Language */ "t": DyteI18n1; } /** * A very simple emoji picker component. */ interface DyteEmojiPicker { /** * Controls whether or not to focus on mount */ "focusWhenOpened": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Language */ "t": DyteI18n; } interface DyteEmojiPickerButton { /** * Icon pack */ "iconPack": IconPack1; /** * Active state indicator */ "isActive": boolean; /** * Language */ "t": DyteI18n1; } /** * A screen which shows a meeting has ended. */ interface DyteEndedScreen { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Global states */ "meeting": Meeting; /** * Size */ "size": Size; /** * Global states */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteFileDropzone { /** * Host element on which drop events to attach */ "hostEl": HTMLElement; /** * Icon pack */ "iconPack": IconPack1; /** * Language */ "t": DyteI18n1; } /** * A component which renders a file message from chat. */ interface DyteFileMessage { /** * Icon pack */ "iconPack": IconPack; /** * Whether the message is continued by same user */ "isContinued": boolean; /** * Text message object */ "message": FileMessage; /** * Date object of now, to calculate distance between dates */ "now": Date; /** * show message in bubble */ "showBubble": boolean; /** * Language */ "t": DyteI18n; } /** * A component which renders a file message. */ interface DyteFileMessageView { /** * Icon pack */ "iconPack": IconPack1; /** * Name of the file */ "name": string; /** * Size of the file */ "size": number; /** * Url of the file */ "url": string; } interface DyteFilePickerButton { /** * File type filter to open file picker with */ "filter": string; /** * Icon */ "icon": keyof IconPack1; /** * Icon pack */ "iconPack": IconPack1; /** * Label for tooltip */ "label": string; /** * Language */ "t": DyteI18n1; } /** * A button which toggles full screen mode for any * existing `dyte-meeting` component in the DOM. */ interface DyteFullscreenToggle { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Target Element to fullscreen */ "targetElement": HTMLElement; /** * Variant */ "variant": ControlBarVariant; } /** * The main grid component which abstracts all the grid handling logic and renders it for you. */ interface DyteGrid { /** * The aspect ratio of each participant */ "aspectRatio": string; /** * Config object */ "config": UIConfig; /** * Gap between participants */ "gap": number; /** * Grid size */ "gridSize": GridSize; /** * Icon pack */ "iconPack": IconPack; /** * Grid Layout */ "layout": GridLayout; /** * Meeting object */ "meeting": Meeting; /** * @deprecated */ "overrides": any; /** * Size */ "size": Size; /** * States */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which allows you to change current page and view mode * of active participants list. This is reflected in the `dyte-grid` component. */ interface DyteGridPagination { /** * Icon Pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size Prop */ "size": Size; /** * States */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": GridPaginationVariants; } /** * A component that houses all the header components. */ interface DyteHeader { /** * Config */ "config": UIConfig1; /** * Whether to render the default UI */ "disableRender": boolean; /** * Icon Pack */ "iconPack": IconPack1; /** * Meeting */ "meeting": Meeting; /** * Size */ "size": Size; /** * States */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": 'solid' | 'boxed'; } /** * An icon component which accepts an svg string and renders it. */ interface DyteIcon { /** * Icon */ "icon": string; /** * Size */ "size": Size1; /** * Icon variant */ "variant": IconVariant; } /** * A screen that handles the idle state, * i.e; when you are waiting for data about the meeting, specifically the `meeting` object. */ interface DyteIdleScreen { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting */ "meeting": Meeting; /** * Language */ "t": DyteI18n; } /** * A component which renders an image message from chat. */ interface DyteImageMessage { /** * Icon pack */ "iconPack": IconPack; /** * Whether the message is continued by same user */ "isContinued": boolean; /** * Text message object */ "message": ImageMessage; /** * Date object of now, to calculate distance between dates */ "now": Date; /** * show message in bubble */ "showBubble": boolean; /** * Language */ "t": DyteI18n; } /** * A component which renders an image message. */ interface DyteImageMessageView { /** * Icon pack */ "iconPack": IconPack1; /** * Language */ "t": DyteI18n1; /** * Url of the image */ "url": string; } /** * A component which shows an image sent via chat. */ interface DyteImageViewer { /** * Icon pack */ "iconPack": IconPack; /** * Image message */ "image": ImageMessage; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } interface DyteInformationTooltip { /** * Icon pack */ "iconPack": IconPack1; } interface DyteJoinStage { /** * UI Config */ "config": UIConfig; /** * Content Config */ "dataConfig": ModalDataConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A button which toggles visilibility of the leave confirmation dialog. */ interface DyteLeaveButton { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which allows you to leave a meeting or * end meeting for all, if you have the permission. */ interface DyteLeaveMeeting { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteLivestreamIndicator { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n1; } interface DyteLivestreamPlayer { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n1; } interface DyteLivestreamToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which loads the logo from your config, or via the `logo-url` attribute. */ interface DyteLogo { /** * Config object */ "config": UIConfig; /** * Logo URL */ "logoUrl": string; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n; } interface DyteMarkdownView { /** * max length of text to render as markdown */ "maxLength": number; /** * raw text to render as markdown */ "text": string; } /** * A single component which renders an entire meeting UI. * It loads your preset and renders the UI based on it. * With this component, you don't have to handle all the states, * dialogs and other smaller bits of managing the application. */ interface DyteMeeting { /** * Whether to apply the design system on the document root from config */ "applyDesignSystem": boolean; /** * UI Config */ "config": UIConfig; /** * Grid layout */ "gridLayout": GridLayout1; /** * Icon pack */ "iconPack": IconPack; /** * Whether participant should leave when this component gets unmounted */ "leaveOnUnmount": boolean; /** * Whether to load config from preset */ "loadConfigFromPreset": boolean; /** * Meeting object */ "meeting": Meeting; /** * Fill type */ "mode": MeetingMode; /** * Whether to show setup screen or not */ "showSetupScreen": boolean; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * Displays the title of the meeting. */ interface DyteMeetingTitle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n; } /** * A menu component. */ interface DyteMenu { /** * Icon pack */ "iconPack": IconPack; /** * Offset in px */ "offset": number; /** * Placement of menu */ "placement": Placement; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A menu item component. */ interface DyteMenuItem { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A menu list component. */ interface DyteMenuList { /** * Icon pack */ "iconPack": IconPack; /** * Language */ "t": DyteI18n; } /** * A component which renders list of messages. */ interface DyteMessageListView { /** * Estimated height of an item */ "estimateItemSize": number; /** * Icon pack */ "iconPack": IconPack1; /** * Function to load more messages. Messages returned from this will be preprended */ "loadMore": (lastMessage: Message) => Promise; /** * Messages to render */ "messages": Message[]; /** * Render function of the message */ "renderer": (message: Message, index: number) => HTMLElement; /** * Maximum visible messages */ "visibleItemsCount": number; } interface DyteMessageView { /** * List of actions to show in menu */ "actions": MessageAction[]; /** * Author display label */ "authorName": string; /** * Avatar image url */ "avatarUrl": string; /** * Hides author display label */ "hideAuthorName": boolean; /** * Hides avatar */ "hideAvatar": boolean; /** * Hides metadata (time) */ "hideMetadata": boolean; /** * Icon pack */ "iconPack": IconPack1; /** * Time when message was sent */ "time": Date; /** * Appearance */ "variant": 'plain' | 'bubble'; /** * Render */ "viewType": 'incoming' | 'outgoing'; } /** * A button which toggles your microphone. */ interface DyteMicToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteMicrophoneSelector { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * variant */ "variant": 'full' | 'inline'; } /** * A grid component which handles screenshares, plugins and participants. */ interface DyteMixedGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio": string; /** * UI Config */ "config": UIConfig; /** * Gap between participant tiles */ "gap": number; /** * Grid size */ "gridSize": GridSize1; /** * Icon Pack */ "iconPack": IconPack; /** * Grid Layout */ "layout": GridLayout1; /** * Meeting object */ "meeting": Meeting; /** * Participants */ "participants": Peer[]; /** * Pinned Participants */ "pinnedParticipants": Peer[]; /** * Active Plugins */ "plugins": DytePlugin[]; /** * Screenshare Participants */ "screenShareParticipants": Peer[]; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A button which toggles visibility of a more menu. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeMoreMenu: boolean; } * ``` */ interface DyteMoreToggle { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteMuteAllButton { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteMuteAllConfirmation { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which shows a participant's name. */ interface DyteNameTag { /** * Icon pack */ "iconPack": IconPack; /** * Whether it is used in a screen share view */ "isScreenShare": boolean; /** * Meeting object */ "meeting": Meeting; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Name tag variant */ "variant": DyteNameTagVariant; } interface DyteNetworkIndicator { /** * Icon pack */ "iconPack": IconPack1; /** * Is for screenshare */ "isScreenShare": boolean; /** * Meeting */ "meeting": Meeting; /** * Participant or Self */ "participant": Peer; /** * Language */ "t": DyteI18n1; } /** * A component which shows a notification. * You need to remove the element after you receive the * `dyteNotificationDismiss` event. */ interface DyteNotification { /** * Icon pack */ "iconPack": IconPack; /** * Message */ "notification": Notification; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A component which handles notifications. * You can configure which notifications you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface DyteNotifications { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A confirmation modal. */ interface DyteOverlayModal { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DytePaginatedList { /** * auto scroll list to bottom */ "autoScroll": boolean; /** * Create nodes */ "createNodes": (data: unknown[]) => VNode[]; /** * label to show when empty */ "emptyListLabel": string; /** * Fetch the data */ "fetchData": (timestamp: number, size: number, reversed: boolean) => Promise; /** * Icon pack */ "iconPack": IconPack; /** * On a new node created */ "onNewNode": (node: DataNode) => Promise; /** * On node deleted */ "onNodeDelete": (key: string) => Promise; /** * On node updated */ "onNodeUpdate": (key: string, newItem: DataNode) => Promise; /** * Page Size */ "pageSize": number; /** * Number of pages allowed to be shown */ "pagesAllowed": number; /** * Item id */ "selectedItemId"?: string; /** * Language */ "t": DyteI18n; } /** * A participant entry component used inside `dyte-participants` which shows data like: * name, picture and media device status. * You can perform privileged actions on the participant too. */ interface DyteParticipant { /** * Config object */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Participant object */ "participant": Peer; /** * States */ "states": States1; /** * Language */ "t": DyteI18n; /** * Show participant summary */ "view": ParticipantViewMode; } /** * A component which shows count of total joined participants in a meeting. */ interface DyteParticipantCount { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } interface DyteParticipantSetup { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Whether tile is used for preview */ "isPreview": boolean; /** * Position of name tag */ "nameTagPosition": | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": 'solid' | 'gradient'; } /** * A component which plays a participants video and allows for placement * of components like `dyte-name-tag`, `dyte-audio-visualizer` or any other component. */ interface DyteParticipantTile { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Whether tile is used for preview */ "isPreview": boolean; /** * Meeting object */ "meeting": Meeting; /** * Position of name tag */ "nameTagPosition": | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": 'solid' | 'gradient'; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteParticipants { /** * Config */ "config": UIConfig; /** * Default section */ "defaultParticipantsTabId": ParticipantsTabId; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which plays all the audio from participants and screenshares. */ interface DyteParticipantsAudio { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Pass existing audio element */ "preloadedAudioElem": HTMLAudioElement; /** * Language */ "t": DyteI18n; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteParticipantsStageList { /** * Config */ "config": UIConfig; /** * Hide Stage Participants Count Header */ "hideHeader": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Search */ "search": string; /** * Size */ "size": Size; /** * Meeting object */ "states": States1; /** * Language */ "t": DyteI18n; /** * View mode for participants list */ "view": ParticipantsViewMode; } interface DyteParticipantsStageQueue { /** * Config */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n1; /** * View mode for participants list */ "view": ParticipantsViewMode; } /** * A button which toggles visibility of participants. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'participants' } * ``` */ interface DyteParticipantsToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } interface DyteParticipantsViewerList { /** * Config */ "config": UIConfig1; /** * Hide Viewer Count Header */ "hideHeader": boolean; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Search */ "search": string; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n1; /** * View mode for participants list */ "view": ParticipantsViewMode; } interface DyteParticipantsWaitingList { /** * Config */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n1; /** * View mode for participants list */ "view": ParticipantsViewMode; } /** * A component which shows permission related troubleshooting * information. */ interface DytePermissionsMessage { /** * Icon Pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DytePipToggle { /** * Config */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States object */ "states": States1; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which loads a plugin. */ interface DytePluginMain { /** * Icon pack */ "iconPack": IconPack; /** * Meeting */ "meeting": Meeting; /** * Plugin */ "plugin": DytePlugin; /** * Language */ "t": DyteI18n; } /** * A component which lists all available plugins from their preset, * and ability to enable or disable plugins. */ interface DytePlugins { /** * Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A button which toggles visibility of plugins. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'plugins' } * ``` */ interface DytePluginsToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A poll component. * Shows a poll where a user can vote. */ interface DytePoll { /** * Icon pack */ "iconPack": IconPack; /** * Permissions Object */ "permissions": DytePermissionsPreset; /** * Poll */ "poll": Poll; /** * Self ID */ "self": string; /** * Language */ "t": DyteI18n; } /** * A component that lets you create a poll. */ interface DytePollForm { /** * Icon pack */ "iconPack": IconPack; /** * Language */ "t": DyteI18n; } /** * A component which lists all available plugins a user can access with * the ability to enable or disable them as per their permissions. */ interface DytePolls { /** * Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A button which toggles visibility of polls. * You need to pass the `meeting` object to it to see the unread polls count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'polls' } * ``` */ interface DytePollsToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which indicates the recording status of a meeting. * It will not render anything if no recording is taking place. */ interface DyteRecordingIndicator { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; } /** * A button which toggles recording state of a meeting. * Only a privileged user can perform this action, * thus the button will not be visible for participants * who don't have the permission to record a meeting. */ interface DyteRecordingToggle { /** * Disable the button */ "disabled": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A button which toggles your screenshare. */ interface DyteScreenShareToggle { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which plays a participant's screenshared video. * It also allows for placement of other components similar to `dyte-participant-tile`. * This component will not render anything if the participant hasn't start screensharing. */ interface DyteScreenshareView { /** * Hide full screen button */ "hideFullScreenButton": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Position of name tag */ "nameTagPosition": | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Participant object */ "participant": Peer; /** * Size */ "size": Size; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": 'solid' | 'gradient'; } /** * A settings component to see and change your audio/video devices * as well as see your connection quality. */ interface DyteSettings { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteSettingsAudio { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A button which toggles visibility of settings module. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSettings: boolean; } * ``` */ interface DyteSettingsToggle { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Variant */ "variant": ControlBarVariant; } /** * A component which lets to manage your camera devices and your video preferences. * Emits `dyteStateUpdate` event with data for toggling mirroring of self video: * ```ts * { * prefs: { * mirrorVideo: boolean * } * } * ``` */ interface DyteSettingsVideo { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A screen shown before joining the meeting, where you can edit your display name, * and media settings. */ interface DyteSetupScreen { /** * Config object */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which handles the sidebar and * you can customize which sections you want, and which section you want as the default. */ interface DyteSidebar { /** * Config */ "config": UIConfig; /** * Default section */ "defaultSection": DyteSidebarSection; /** * Enabled sections in sidebar */ "enabledSections": DyteSidebarTab[]; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * View type */ "view": DyteSidebarView; } interface DyteSidebarUi { /** * Default tab to open */ "currentTab": string; /** * Hide Close Action */ "hideCloseAction": boolean; /** * Hide Main Header */ "hideHeader": boolean; /** * Icon Pack */ "iconPack": { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }; /** * Language */ "t": DyteI18n1; /** * Tabs */ "tabs": DyteSidebarTab1[]; /** * View */ "view": DyteSidebarView1; } /** * A grid component which renders only the participants in a simple grid. */ interface DyteSimpleGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio": string; /** * UI Config */ "config": UIConfig; /** * Gap between participant tiles */ "gap": number; /** * Icon Pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Participants */ "participants": Peer[]; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteSpeakerSelector { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * variant */ "variant": 'full' | 'inline'; } /** * A component which shows an animating spinner. */ interface DyteSpinner { /** * Icon pack */ "iconPack": IconPack; /** * Size */ "size": Size1; } /** * A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. * You can customize the layout to a `column` view, by default is is `row`. * - Participants from `pinnedParticipants[]` are rendered inside a larger grid. * - Participants from `participants[]` array are rendered in a smaller grid. */ interface DyteSpotlightGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio": string; /** * UI Config */ "config": UIConfig; /** * Gap between participant tiles */ "gap": number; /** * Grid size */ "gridSize": GridSize1; /** * Icon Pack */ "iconPack": IconPack; /** * Grid Layout */ "layout": GridLayout1; /** * Meeting object */ "meeting": Meeting; /** * Participants */ "participants": Peer[]; /** * Pinned Participants */ "pinnedParticipants": Peer[]; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteSpotlightIndicator { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * Language */ "t": DyteI18n; } /** * A component used as a stage that commonly houses * the `grid` and `sidebar` components. */ interface DyteStage { /** * Icon pack */ "iconPack": IconPack; /** * Language */ "t": DyteI18n; } interface DyteStageToggle { /** * Icon pack */ "iconPack": IconPack1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size1; /** * States */ "states": States1; /** * Language */ "t": DyteI18n1; /** * Variant */ "variant": ControlBarVariant; } /** * A switch component which follows Dyte's Design System. */ interface DyteSwitch { /** * Whether the switch is enabled/checked */ "checked": boolean; /** * Whether switch is readonly */ "disabled": boolean; /** * Icon pack */ "iconPack": IconPack; /** * Whether switch is readonly */ "readonly": boolean; /** * Language */ "t": DyteI18n; } interface DyteTabBar { /** * Active tab */ "activeTab": Tab; /** * UI Config */ "config": UIConfig; /** * Icon Pack */ "iconPack": IconPack; /** * Grid Layout */ "layout": GridLayout1; /** * Meeting object */ "meeting": Meeting; /** * Size */ "size": Size; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; /** * Tabs */ "tabs": Tab[]; } /** * A component which renders a text composer */ interface DyteTextComposerView { /** * Disable the text input (default = false) */ "disabled": boolean; /** * Icon pack */ "iconPack": IconPack1; /** * Keydown event handler function */ "keyDownHandler": (e: KeyboardEvent) => void; /** * Max length for text input */ "maxLength": number; /** * Placeholder text */ "placeholder": string; /** * Boolean to indicate if rate limit is breached */ "rateLimitBreached": boolean; /** * Sets value of the text input */ "setText": (text: string, focus?: boolean) => Promise; /** * Language */ "t": DyteI18n1; /** * Default value for text input */ "value": string; } /** * A component which renders a text message from chat. */ interface DyteTextMessage { /** * Icon pack */ "iconPack": IconPack; /** * Whether the message is continued by same user */ "isContinued": boolean; /** * Text message object */ "message": TextMessage; /** * Date object of now, to calculate distance between dates */ "now": Date; /** * show message in bubble */ "showBubble": boolean; /** * Language */ "t": DyteI18n; } /** * A component which renders a text message from chat. */ interface DyteTextMessageView { /** * Renders text as markdown (default = true) */ "isMarkdown": boolean; /** * Text message */ "text": string; } /** * Tooltip component which follows Dyte's Design System. */ interface DyteTooltip { /** * Delay before showing the tooltip */ "delay": number; /** * Disabled */ "disabled": boolean; /** * Tooltip kind */ "kind": TooltipKind; /** * Tooltip label */ "label": string; /** * Open */ "open": boolean; /** * Placement of menu */ "placement": Placement; /** * Size */ "size": Size; /** * Tooltip variant */ "variant": TooltipVariant; } /** * A component which shows a transcript. * You need to remove the element after you receive the * `dyteTranscriptDismiss` event. */ interface DyteTranscript { /** * Language */ "t": DyteI18n; /** * Message */ "transcript": Transcript & { renderedId?: string }; } /** * A component which handles transcripts. * You can configure which transcripts you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface DyteTranscripts { /** * Config object */ "config": UIConfig; /** * Meeting object */ "meeting": Meeting; /** * States object */ "states": States; /** * Language */ "t": DyteI18n; } interface DyteUiProvider { /** * Config */ "config": UIConfig1; /** * Icon pack */ "iconPack": IconPack1; /** * Meeting */ "meeting": Meeting; /** * Do not render children until meeting is initialized * @default false */ "noRenderUntilMeeting": boolean; /** * Whether to show setup screen or not */ "showSetupScreen": boolean; /** * Size */ "size": Size1; /** * Language utility */ "t": DyteI18n1; } /** * A component which shows count of total joined participants in a meeting. */ interface DyteViewerCount { /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n; /** * Viewer count variant */ "variant": ViewerCountVariant; } interface DyteVirtualizedParticipantList { /** * Buffer items to render before and after the visible area */ "bufferedItemsCount": number; /** * Element to render if list is empty */ "emptyListElement": HTMLElement; /** * Height of each item in pixels (assumed fixed) */ "itemHeight": number; /** * Items to be virtualized */ "items": Peer1[]; /** * Function to render each item */ "renderItem": (item: Peer1, index: number) => HTMLElement; } interface DyteWaitingScreen { /** * Config */ "config": UIConfig; /** * Icon pack */ "iconPack": IconPack; /** * Meeting object */ "meeting": Meeting; /** * Language */ "t": DyteI18n; } } export interface DyteAiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteAiElement; } export interface DyteAiToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteAiToggleElement; } export interface DyteBreakoutRoomManagerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteBreakoutRoomManagerElement; } export interface DyteBreakoutRoomParticipantsCustomEvent extends CustomEvent { detail: T; target: HTMLDyteBreakoutRoomParticipantsElement; } export interface DyteBreakoutRoomsManagerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteBreakoutRoomsManagerElement; } export interface DyteBreakoutRoomsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteBreakoutRoomsToggleElement; } export interface DyteBroadcastMessageModalCustomEvent extends CustomEvent { detail: T; target: HTMLDyteBroadcastMessageModalElement; } export interface DyteCameraToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteCameraToggleElement; } export interface DyteCaptionToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteCaptionToggleElement; } export interface DyteChannelCreatorCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChannelCreatorElement; } export interface DyteChannelHeaderCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChannelHeaderElement; } export interface DyteChannelSelectorUiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChannelSelectorUiElement; } export interface DyteChannelSelectorViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChannelSelectorViewElement; } export interface DyteChatCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatElement; } export interface DyteChatComposerUiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatComposerUiElement; } export interface DyteChatComposerViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatComposerViewElement; } export interface DyteChatMessageCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatMessageElement; } export interface DyteChatMessagesUiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatMessagesUiElement; } export interface DyteChatMessagesUiPaginatedCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatMessagesUiPaginatedElement; } export interface DyteChatSelectorUiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatSelectorUiElement; } export interface DyteChatToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteChatToggleElement; } export interface DyteConfirmationModalCustomEvent extends CustomEvent { detail: T; target: HTMLDyteConfirmationModalElement; } export interface DyteCounterCustomEvent extends CustomEvent { detail: T; target: HTMLDyteCounterElement; } export interface DyteDebuggerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteDebuggerElement; } export interface DyteDebuggerToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteDebuggerToggleElement; } export interface DyteDialogCustomEvent extends CustomEvent { detail: T; target: HTMLDyteDialogElement; } export interface DyteDialogManagerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteDialogManagerElement; } export interface DyteDraftAttachmentViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteDraftAttachmentViewElement; } export interface DyteEmojiPickerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteEmojiPickerElement; } export interface DyteFileDropzoneCustomEvent extends CustomEvent { detail: T; target: HTMLDyteFileDropzoneElement; } export interface DyteFilePickerButtonCustomEvent extends CustomEvent { detail: T; target: HTMLDyteFilePickerButtonElement; } export interface DyteFullscreenToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteFullscreenToggleElement; } export interface DyteGridCustomEvent extends CustomEvent { detail: T; target: HTMLDyteGridElement; } export interface DyteImageMessageCustomEvent extends CustomEvent { detail: T; target: HTMLDyteImageMessageElement; } export interface DyteImageMessageViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteImageMessageViewElement; } export interface DyteImageViewerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteImageViewerElement; } export interface DyteJoinStageCustomEvent extends CustomEvent { detail: T; target: HTMLDyteJoinStageElement; } export interface DyteLeaveButtonCustomEvent extends CustomEvent { detail: T; target: HTMLDyteLeaveButtonElement; } export interface DyteLeaveMeetingCustomEvent extends CustomEvent { detail: T; target: HTMLDyteLeaveMeetingElement; } export interface DyteLivestreamPlayerCustomEvent extends CustomEvent { detail: T; target: HTMLDyteLivestreamPlayerElement; } export interface DyteLivestreamToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteLivestreamToggleElement; } export interface DyteMeetingCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMeetingElement; } export interface DyteMessageViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMessageViewElement; } export interface DyteMicToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMicToggleElement; } export interface DyteMoreToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMoreToggleElement; } export interface DyteMuteAllButtonCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMuteAllButtonElement; } export interface DyteMuteAllConfirmationCustomEvent extends CustomEvent { detail: T; target: HTMLDyteMuteAllConfirmationElement; } export interface DyteNotificationCustomEvent extends CustomEvent { detail: T; target: HTMLDyteNotificationElement; } export interface DyteOverlayModalCustomEvent extends CustomEvent { detail: T; target: HTMLDyteOverlayModalElement; } export interface DyteParticipantCustomEvent extends CustomEvent { detail: T; target: HTMLDyteParticipantElement; } export interface DyteParticipantTileCustomEvent extends CustomEvent { detail: T; target: HTMLDyteParticipantTileElement; } export interface DyteParticipantsCustomEvent extends CustomEvent { detail: T; target: HTMLDyteParticipantsElement; } export interface DyteParticipantsAudioCustomEvent extends CustomEvent { detail: T; target: HTMLDyteParticipantsAudioElement; } export interface DyteParticipantsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteParticipantsToggleElement; } export interface DytePermissionsMessageCustomEvent extends CustomEvent { detail: T; target: HTMLDytePermissionsMessageElement; } export interface DytePipToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDytePipToggleElement; } export interface DytePluginsCustomEvent extends CustomEvent { detail: T; target: HTMLDytePluginsElement; } export interface DytePluginsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDytePluginsToggleElement; } export interface DytePollCustomEvent extends CustomEvent { detail: T; target: HTMLDytePollElement; } export interface DytePollFormCustomEvent extends CustomEvent { detail: T; target: HTMLDytePollFormElement; } export interface DytePollsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDytePollsToggleElement; } export interface DyteRecordingToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteRecordingToggleElement; } export interface DyteScreenShareToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteScreenShareToggleElement; } export interface DyteScreenshareViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteScreenshareViewElement; } export interface DyteSettingsCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSettingsElement; } export interface DyteSettingsAudioCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSettingsAudioElement; } export interface DyteSettingsToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSettingsToggleElement; } export interface DyteSettingsVideoCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSettingsVideoElement; } export interface DyteSetupScreenCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSetupScreenElement; } export interface DyteSidebarCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSidebarElement; } export interface DyteSidebarUiCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSidebarUiElement; } export interface DyteStageCustomEvent extends CustomEvent { detail: T; target: HTMLDyteStageElement; } export interface DyteStageToggleCustomEvent extends CustomEvent { detail: T; target: HTMLDyteStageToggleElement; } export interface DyteSwitchCustomEvent extends CustomEvent { detail: T; target: HTMLDyteSwitchElement; } export interface DyteTabBarCustomEvent extends CustomEvent { detail: T; target: HTMLDyteTabBarElement; } export interface DyteTextComposerViewCustomEvent extends CustomEvent { detail: T; target: HTMLDyteTextComposerViewElement; } export interface DyteTooltipCustomEvent extends CustomEvent { detail: T; target: HTMLDyteTooltipElement; } export interface DyteTranscriptCustomEvent extends CustomEvent { detail: T; target: HTMLDyteTranscriptElement; } export interface DyteUiProviderCustomEvent extends CustomEvent { detail: T; target: HTMLDyteUiProviderElement; } declare global { interface HTMLDyteAiElementEventMap { "dyteStateUpdate": States; } interface HTMLDyteAiElement extends Components.DyteAi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteAiElement, ev: DyteAiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteAiElement, ev: DyteAiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteAiElement: { prototype: HTMLDyteAiElement; new (): HTMLDyteAiElement; }; interface HTMLDyteAiToggleElementEventMap { "dyteStateUpdate": States; } interface HTMLDyteAiToggleElement extends Components.DyteAiToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteAiToggleElement, ev: DyteAiToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteAiToggleElement, ev: DyteAiToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteAiToggleElement: { prototype: HTMLDyteAiToggleElement; new (): HTMLDyteAiToggleElement; }; interface HTMLDyteAiTranscriptionsElement extends Components.DyteAiTranscriptions, HTMLStencilElement { } var HTMLDyteAiTranscriptionsElement: { prototype: HTMLDyteAiTranscriptionsElement; new (): HTMLDyteAiTranscriptionsElement; }; interface HTMLDyteAudioGridElement extends Components.DyteAudioGrid, HTMLStencilElement { } var HTMLDyteAudioGridElement: { prototype: HTMLDyteAudioGridElement; new (): HTMLDyteAudioGridElement; }; interface HTMLDyteAudioTileElement extends Components.DyteAudioTile, HTMLStencilElement { } var HTMLDyteAudioTileElement: { prototype: HTMLDyteAudioTileElement; new (): HTMLDyteAudioTileElement; }; /** * An audio visualizer component which visualizes a participants audio. * Commonly used inside `dyte-name-tag`. */ interface HTMLDyteAudioVisualizerElement extends Components.DyteAudioVisualizer, HTMLStencilElement { } var HTMLDyteAudioVisualizerElement: { prototype: HTMLDyteAudioVisualizerElement; new (): HTMLDyteAudioVisualizerElement; }; /** * Avatar component which renders a participant's image or their initials. */ interface HTMLDyteAvatarElement extends Components.DyteAvatar, HTMLStencilElement { } var HTMLDyteAvatarElement: { prototype: HTMLDyteAvatarElement; new (): HTMLDyteAvatarElement; }; interface HTMLDyteBreakoutRoomManagerElementEventMap { "participantsAdd": null; "participantDelete": { customParticipantId: string; }; "roomJoin": null; "delete": string; "update": { title: string | undefined; id: string; }; } interface HTMLDyteBreakoutRoomManagerElement extends Components.DyteBreakoutRoomManager, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomManagerElement, ev: DyteBreakoutRoomManagerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomManagerElement, ev: DyteBreakoutRoomManagerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteBreakoutRoomManagerElement: { prototype: HTMLDyteBreakoutRoomManagerElement; new (): HTMLDyteBreakoutRoomManagerElement; }; interface HTMLDyteBreakoutRoomParticipantsElementEventMap { "selectedParticipantsUpdate": string[]; "allParticipantsToggleUpdate": string[]; "participantsDragging": boolean; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface HTMLDyteBreakoutRoomParticipantsElement extends Components.DyteBreakoutRoomParticipants, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomParticipantsElement, ev: DyteBreakoutRoomParticipantsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomParticipantsElement, ev: DyteBreakoutRoomParticipantsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteBreakoutRoomParticipantsElement: { prototype: HTMLDyteBreakoutRoomParticipantsElement; new (): HTMLDyteBreakoutRoomParticipantsElement; }; interface HTMLDyteBreakoutRoomsManagerElementEventMap { "dyteStateUpdate": PartialStateEvent; } interface HTMLDyteBreakoutRoomsManagerElement extends Components.DyteBreakoutRoomsManager, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomsManagerElement, ev: DyteBreakoutRoomsManagerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomsManagerElement, ev: DyteBreakoutRoomsManagerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteBreakoutRoomsManagerElement: { prototype: HTMLDyteBreakoutRoomsManagerElement; new (): HTMLDyteBreakoutRoomsManagerElement; }; interface HTMLDyteBreakoutRoomsToggleElementEventMap { "dyteStateUpdate": PartialStateEvent; } /** * A button which toggles visibility of breakout rooms. * You need to pass the `meeting` object to it. */ interface HTMLDyteBreakoutRoomsToggleElement extends Components.DyteBreakoutRoomsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomsToggleElement, ev: DyteBreakoutRoomsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteBreakoutRoomsToggleElement, ev: DyteBreakoutRoomsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteBreakoutRoomsToggleElement: { prototype: HTMLDyteBreakoutRoomsToggleElement; new (): HTMLDyteBreakoutRoomsToggleElement; }; interface HTMLDyteBroadcastMessageModalElementEventMap { "dyteStateUpdate": States1; } interface HTMLDyteBroadcastMessageModalElement extends Components.DyteBroadcastMessageModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteBroadcastMessageModalElement, ev: DyteBroadcastMessageModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteBroadcastMessageModalElement, ev: DyteBroadcastMessageModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteBroadcastMessageModalElement: { prototype: HTMLDyteBroadcastMessageModalElement; new (): HTMLDyteBroadcastMessageModalElement; }; /** * A button that follows Dyte's Design System. */ interface HTMLDyteButtonElement extends Components.DyteButton, HTMLStencilElement { } var HTMLDyteButtonElement: { prototype: HTMLDyteButtonElement; new (): HTMLDyteButtonElement; }; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface HTMLDyteCameraSelectorElement extends Components.DyteCameraSelector, HTMLStencilElement { } var HTMLDyteCameraSelectorElement: { prototype: HTMLDyteCameraSelectorElement; new (): HTMLDyteCameraSelectorElement; }; interface HTMLDyteCameraToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles your camera. */ interface HTMLDyteCameraToggleElement extends Components.DyteCameraToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteCameraToggleElement, ev: DyteCameraToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteCameraToggleElement, ev: DyteCameraToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteCameraToggleElement: { prototype: HTMLDyteCameraToggleElement; new (): HTMLDyteCameraToggleElement; }; interface HTMLDyteCaptionToggleElementEventMap { "dyteStateUpdate": States1; } interface HTMLDyteCaptionToggleElement extends Components.DyteCaptionToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteCaptionToggleElement, ev: DyteCaptionToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteCaptionToggleElement, ev: DyteCaptionToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteCaptionToggleElement: { prototype: HTMLDyteCaptionToggleElement; new (): HTMLDyteCaptionToggleElement; }; interface HTMLDyteChannelCreatorElementEventMap { "dyteStateUpdate": States1; "switchChannel": string; } interface HTMLDyteChannelCreatorElement extends Components.DyteChannelCreator, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChannelCreatorElement, ev: DyteChannelCreatorCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChannelCreatorElement, ev: DyteChannelCreatorCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChannelCreatorElement: { prototype: HTMLDyteChannelCreatorElement; new (): HTMLDyteChannelCreatorElement; }; interface HTMLDyteChannelDetailsElement extends Components.DyteChannelDetails, HTMLStencilElement { } var HTMLDyteChannelDetailsElement: { prototype: HTMLDyteChannelDetailsElement; new (): HTMLDyteChannelDetailsElement; }; interface HTMLDyteChannelHeaderElementEventMap { "search": string; "searchDismissed": any; "back": void; } interface HTMLDyteChannelHeaderElement extends Components.DyteChannelHeader, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChannelHeaderElement, ev: DyteChannelHeaderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChannelHeaderElement, ev: DyteChannelHeaderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChannelHeaderElement: { prototype: HTMLDyteChannelHeaderElement; new (): HTMLDyteChannelHeaderElement; }; interface HTMLDyteChannelSelectorUiElementEventMap { "channelChanged": string; } interface HTMLDyteChannelSelectorUiElement extends Components.DyteChannelSelectorUi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChannelSelectorUiElement, ev: DyteChannelSelectorUiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChannelSelectorUiElement, ev: DyteChannelSelectorUiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChannelSelectorUiElement: { prototype: HTMLDyteChannelSelectorUiElement; new (): HTMLDyteChannelSelectorUiElement; }; interface HTMLDyteChannelSelectorViewElementEventMap { "channelChange": { id: string; name: string; avatarUrl?: string; icon?: keyof IconPack1; latestMessage?: string; latestMessageTime?: Date; unreadCount?: number; }; } interface HTMLDyteChannelSelectorViewElement extends Components.DyteChannelSelectorView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChannelSelectorViewElement, ev: DyteChannelSelectorViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChannelSelectorViewElement, ev: DyteChannelSelectorViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChannelSelectorViewElement: { prototype: HTMLDyteChannelSelectorViewElement; new (): HTMLDyteChannelSelectorViewElement; }; interface HTMLDyteChatElementEventMap { "dyteStateUpdate": States1; } /** * Fully featured chat component with image & file upload, emoji picker and auto-scroll. */ interface HTMLDyteChatElement extends Components.DyteChat, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatElement, ev: DyteChatCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatElement, ev: DyteChatCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatElement: { prototype: HTMLDyteChatElement; new (): HTMLDyteChatElement; }; interface HTMLDyteChatComposerUiElementEventMap { "dyteNewMessage": DyteNewMessageEvent; "dyteEditMessage": { id: string; message: string; channelId?: string; }; "dyteEditCancelled": any; } interface HTMLDyteChatComposerUiElement extends Components.DyteChatComposerUi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatComposerUiElement, ev: DyteChatComposerUiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatComposerUiElement, ev: DyteChatComposerUiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatComposerUiElement: { prototype: HTMLDyteChatComposerUiElement; new (): HTMLDyteChatComposerUiElement; }; interface HTMLDyteChatComposerViewElementEventMap { "newMessage": NewMessageEvent; "editMessage": string; "editCancel": void; "quotedMessageDismiss": void; } /** * A component which renders a chat composer */ interface HTMLDyteChatComposerViewElement extends Components.DyteChatComposerView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatComposerViewElement, ev: DyteChatComposerViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatComposerViewElement, ev: DyteChatComposerViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatComposerViewElement: { prototype: HTMLDyteChatComposerViewElement; new (): HTMLDyteChatComposerViewElement; }; interface HTMLDyteChatMessageElementEventMap { "edit": Message; "reply": Message; "pin": Message; "delete": Message; } interface HTMLDyteChatMessageElement extends Components.DyteChatMessage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatMessageElement, ev: DyteChatMessageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatMessageElement, ev: DyteChatMessageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatMessageElement: { prototype: HTMLDyteChatMessageElement; new (): HTMLDyteChatMessageElement; }; interface HTMLDyteChatMessagesUiElementEventMap { "pinMessage": Message; "dyteStateUpdate": States; } interface HTMLDyteChatMessagesUiElement extends Components.DyteChatMessagesUi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatMessagesUiElement, ev: DyteChatMessagesUiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatMessagesUiElement, ev: DyteChatMessagesUiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatMessagesUiElement: { prototype: HTMLDyteChatMessagesUiElement; new (): HTMLDyteChatMessagesUiElement; }; interface HTMLDyteChatMessagesUiPaginatedElementEventMap { "editMessageInit": { payload: TextMessage; flags: { isReply?: boolean; isEdit?: boolean }; }; "pinMessage": Message; "deleteMessage": Message; "dyteStateUpdate": States; } interface HTMLDyteChatMessagesUiPaginatedElement extends Components.DyteChatMessagesUiPaginated, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatMessagesUiPaginatedElement, ev: DyteChatMessagesUiPaginatedCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatMessagesUiPaginatedElement, ev: DyteChatMessagesUiPaginatedCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatMessagesUiPaginatedElement: { prototype: HTMLDyteChatMessagesUiPaginatedElement; new (): HTMLDyteChatMessagesUiPaginatedElement; }; interface HTMLDyteChatSearchResultsElement extends Components.DyteChatSearchResults, HTMLStencilElement { } var HTMLDyteChatSearchResultsElement: { prototype: HTMLDyteChatSearchResultsElement; new (): HTMLDyteChatSearchResultsElement; }; interface HTMLDyteChatSelectorUiElementEventMap { "dyteChatGroupChanged": ChatGroupChangedType; } interface HTMLDyteChatSelectorUiElement extends Components.DyteChatSelectorUi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatSelectorUiElement, ev: DyteChatSelectorUiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatSelectorUiElement, ev: DyteChatSelectorUiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatSelectorUiElement: { prototype: HTMLDyteChatSelectorUiElement; new (): HTMLDyteChatSelectorUiElement; }; interface HTMLDyteChatToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of chat. * You need to pass the `meeting` object to it to see the unread messages count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'chat' } * ``` */ interface HTMLDyteChatToggleElement extends Components.DyteChatToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteChatToggleElement, ev: DyteChatToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteChatToggleElement, ev: DyteChatToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteChatToggleElement: { prototype: HTMLDyteChatToggleElement; new (): HTMLDyteChatToggleElement; }; /** * Shows the time elapsed in a meeting. */ interface HTMLDyteClockElement extends Components.DyteClock, HTMLStencilElement { } var HTMLDyteClockElement: { prototype: HTMLDyteClockElement; new (): HTMLDyteClockElement; }; interface HTMLDyteConfirmationModalElementEventMap { "dyteStateUpdate": States; } /** * A confirmation modal. */ interface HTMLDyteConfirmationModalElement extends Components.DyteConfirmationModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteConfirmationModalElement, ev: DyteConfirmationModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteConfirmationModalElement, ev: DyteConfirmationModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteConfirmationModalElement: { prototype: HTMLDyteConfirmationModalElement; new (): HTMLDyteConfirmationModalElement; }; /** * Controlbar component provides you with various designs as variants. */ interface HTMLDyteControlbarElement extends Components.DyteControlbar, HTMLStencilElement { } var HTMLDyteControlbarElement: { prototype: HTMLDyteControlbarElement; new (): HTMLDyteControlbarElement; }; /** * A skeleton component used for composing custom controlbar buttons. */ interface HTMLDyteControlbarButtonElement extends Components.DyteControlbarButton, HTMLStencilElement { } var HTMLDyteControlbarButtonElement: { prototype: HTMLDyteControlbarButtonElement; new (): HTMLDyteControlbarButtonElement; }; interface HTMLDyteCounterElementEventMap { "valueChange": string; } /** * A number picker with increment and decrement buttons. */ interface HTMLDyteCounterElement extends Components.DyteCounter, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteCounterElement, ev: DyteCounterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteCounterElement, ev: DyteCounterCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteCounterElement: { prototype: HTMLDyteCounterElement; new (): HTMLDyteCounterElement; }; interface HTMLDyteDebuggerElementEventMap { "dyteStateUpdate": States; } /** * A troubleshooting component to identify and fix any issues in the meeting. */ interface HTMLDyteDebuggerElement extends Components.DyteDebugger, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteDebuggerElement, ev: DyteDebuggerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteDebuggerElement, ev: DyteDebuggerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteDebuggerElement: { prototype: HTMLDyteDebuggerElement; new (): HTMLDyteDebuggerElement; }; interface HTMLDyteDebuggerAudioElement extends Components.DyteDebuggerAudio, HTMLStencilElement { } var HTMLDyteDebuggerAudioElement: { prototype: HTMLDyteDebuggerAudioElement; new (): HTMLDyteDebuggerAudioElement; }; interface HTMLDyteDebuggerScreenshareElement extends Components.DyteDebuggerScreenshare, HTMLStencilElement { } var HTMLDyteDebuggerScreenshareElement: { prototype: HTMLDyteDebuggerScreenshareElement; new (): HTMLDyteDebuggerScreenshareElement; }; interface HTMLDyteDebuggerSystemElement extends Components.DyteDebuggerSystem, HTMLStencilElement { } var HTMLDyteDebuggerSystemElement: { prototype: HTMLDyteDebuggerSystemElement; new (): HTMLDyteDebuggerSystemElement; }; interface HTMLDyteDebuggerToggleElementEventMap { "dyteStateUpdate": States; } interface HTMLDyteDebuggerToggleElement extends Components.DyteDebuggerToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteDebuggerToggleElement, ev: DyteDebuggerToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteDebuggerToggleElement, ev: DyteDebuggerToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteDebuggerToggleElement: { prototype: HTMLDyteDebuggerToggleElement; new (): HTMLDyteDebuggerToggleElement; }; interface HTMLDyteDebuggerVideoElement extends Components.DyteDebuggerVideo, HTMLStencilElement { } var HTMLDyteDebuggerVideoElement: { prototype: HTMLDyteDebuggerVideoElement; new (): HTMLDyteDebuggerVideoElement; }; interface HTMLDyteDialogElementEventMap { "dyteDialogClose": any; } /** * A dialog component. */ interface HTMLDyteDialogElement extends Components.DyteDialog, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteDialogElement, ev: DyteDialogCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteDialogElement, ev: DyteDialogCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteDialogElement: { prototype: HTMLDyteDialogElement; new (): HTMLDyteDialogElement; }; interface HTMLDyteDialogManagerElementEventMap { "dyteStateUpdate": States; } /** * A component which handles all dialog elements in a component such as: * - dyte-settings * - dyte-leave-meeting * - dyte-permissions-message * - dyte-image-viewer * - dyte-breakout-rooms-manager * This components depends on the values from `states` object. */ interface HTMLDyteDialogManagerElement extends Components.DyteDialogManager, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteDialogManagerElement, ev: DyteDialogManagerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteDialogManagerElement, ev: DyteDialogManagerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteDialogManagerElement: { prototype: HTMLDyteDialogManagerElement; new (): HTMLDyteDialogManagerElement; }; interface HTMLDyteDraftAttachmentViewElementEventMap { "deleteAttachment": any; } /** * A component which renders the draft attachment to send */ interface HTMLDyteDraftAttachmentViewElement extends Components.DyteDraftAttachmentView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteDraftAttachmentViewElement, ev: DyteDraftAttachmentViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteDraftAttachmentViewElement, ev: DyteDraftAttachmentViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteDraftAttachmentViewElement: { prototype: HTMLDyteDraftAttachmentViewElement; new (): HTMLDyteDraftAttachmentViewElement; }; interface HTMLDyteEmojiPickerElementEventMap { "pickerClose": void; "dyteEmojiClicked": string; } /** * A very simple emoji picker component. */ interface HTMLDyteEmojiPickerElement extends Components.DyteEmojiPicker, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteEmojiPickerElement, ev: DyteEmojiPickerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteEmojiPickerElement, ev: DyteEmojiPickerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteEmojiPickerElement: { prototype: HTMLDyteEmojiPickerElement; new (): HTMLDyteEmojiPickerElement; }; interface HTMLDyteEmojiPickerButtonElement extends Components.DyteEmojiPickerButton, HTMLStencilElement { } var HTMLDyteEmojiPickerButtonElement: { prototype: HTMLDyteEmojiPickerButtonElement; new (): HTMLDyteEmojiPickerButtonElement; }; /** * A screen which shows a meeting has ended. */ interface HTMLDyteEndedScreenElement extends Components.DyteEndedScreen, HTMLStencilElement { } var HTMLDyteEndedScreenElement: { prototype: HTMLDyteEndedScreenElement; new (): HTMLDyteEndedScreenElement; }; interface HTMLDyteFileDropzoneElementEventMap { "dropCallback": DragEvent; } interface HTMLDyteFileDropzoneElement extends Components.DyteFileDropzone, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteFileDropzoneElement, ev: DyteFileDropzoneCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteFileDropzoneElement, ev: DyteFileDropzoneCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteFileDropzoneElement: { prototype: HTMLDyteFileDropzoneElement; new (): HTMLDyteFileDropzoneElement; }; /** * A component which renders a file message from chat. */ interface HTMLDyteFileMessageElement extends Components.DyteFileMessage, HTMLStencilElement { } var HTMLDyteFileMessageElement: { prototype: HTMLDyteFileMessageElement; new (): HTMLDyteFileMessageElement; }; /** * A component which renders a file message. */ interface HTMLDyteFileMessageViewElement extends Components.DyteFileMessageView, HTMLStencilElement { } var HTMLDyteFileMessageViewElement: { prototype: HTMLDyteFileMessageViewElement; new (): HTMLDyteFileMessageViewElement; }; interface HTMLDyteFilePickerButtonElementEventMap { "fileChange": File; } interface HTMLDyteFilePickerButtonElement extends Components.DyteFilePickerButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteFilePickerButtonElement, ev: DyteFilePickerButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteFilePickerButtonElement, ev: DyteFilePickerButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteFilePickerButtonElement: { prototype: HTMLDyteFilePickerButtonElement; new (): HTMLDyteFilePickerButtonElement; }; interface HTMLDyteFullscreenToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles full screen mode for any * existing `dyte-meeting` component in the DOM. */ interface HTMLDyteFullscreenToggleElement extends Components.DyteFullscreenToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteFullscreenToggleElement, ev: DyteFullscreenToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteFullscreenToggleElement, ev: DyteFullscreenToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteFullscreenToggleElement: { prototype: HTMLDyteFullscreenToggleElement; new (): HTMLDyteFullscreenToggleElement; }; interface HTMLDyteGridElementEventMap { "dyteStateUpdate": States; } /** * The main grid component which abstracts all the grid handling logic and renders it for you. */ interface HTMLDyteGridElement extends Components.DyteGrid, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteGridElement, ev: DyteGridCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteGridElement, ev: DyteGridCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteGridElement: { prototype: HTMLDyteGridElement; new (): HTMLDyteGridElement; }; /** * A component which allows you to change current page and view mode * of active participants list. This is reflected in the `dyte-grid` component. */ interface HTMLDyteGridPaginationElement extends Components.DyteGridPagination, HTMLStencilElement { } var HTMLDyteGridPaginationElement: { prototype: HTMLDyteGridPaginationElement; new (): HTMLDyteGridPaginationElement; }; /** * A component that houses all the header components. */ interface HTMLDyteHeaderElement extends Components.DyteHeader, HTMLStencilElement { } var HTMLDyteHeaderElement: { prototype: HTMLDyteHeaderElement; new (): HTMLDyteHeaderElement; }; /** * An icon component which accepts an svg string and renders it. */ interface HTMLDyteIconElement extends Components.DyteIcon, HTMLStencilElement { } var HTMLDyteIconElement: { prototype: HTMLDyteIconElement; new (): HTMLDyteIconElement; }; /** * A screen that handles the idle state, * i.e; when you are waiting for data about the meeting, specifically the `meeting` object. */ interface HTMLDyteIdleScreenElement extends Components.DyteIdleScreen, HTMLStencilElement { } var HTMLDyteIdleScreenElement: { prototype: HTMLDyteIdleScreenElement; new (): HTMLDyteIdleScreenElement; }; interface HTMLDyteImageMessageElementEventMap { "dyteStateUpdate": States; } /** * A component which renders an image message from chat. */ interface HTMLDyteImageMessageElement extends Components.DyteImageMessage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteImageMessageElement, ev: DyteImageMessageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteImageMessageElement, ev: DyteImageMessageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteImageMessageElement: { prototype: HTMLDyteImageMessageElement; new (): HTMLDyteImageMessageElement; }; interface HTMLDyteImageMessageViewElementEventMap { "preview": string; } /** * A component which renders an image message. */ interface HTMLDyteImageMessageViewElement extends Components.DyteImageMessageView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteImageMessageViewElement, ev: DyteImageMessageViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteImageMessageViewElement, ev: DyteImageMessageViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteImageMessageViewElement: { prototype: HTMLDyteImageMessageViewElement; new (): HTMLDyteImageMessageViewElement; }; interface HTMLDyteImageViewerElementEventMap { "close": void; } /** * A component which shows an image sent via chat. */ interface HTMLDyteImageViewerElement extends Components.DyteImageViewer, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteImageViewerElement, ev: DyteImageViewerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteImageViewerElement, ev: DyteImageViewerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteImageViewerElement: { prototype: HTMLDyteImageViewerElement; new (): HTMLDyteImageViewerElement; }; interface HTMLDyteInformationTooltipElement extends Components.DyteInformationTooltip, HTMLStencilElement { } var HTMLDyteInformationTooltipElement: { prototype: HTMLDyteInformationTooltipElement; new (): HTMLDyteInformationTooltipElement; }; interface HTMLDyteJoinStageElementEventMap { "dyteStateUpdate": States; "dyteJoinStage": void; "dyteLeaveStage": void; } interface HTMLDyteJoinStageElement extends Components.DyteJoinStage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteJoinStageElement, ev: DyteJoinStageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteJoinStageElement, ev: DyteJoinStageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteJoinStageElement: { prototype: HTMLDyteJoinStageElement; new (): HTMLDyteJoinStageElement; }; interface HTMLDyteLeaveButtonElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visilibility of the leave confirmation dialog. */ interface HTMLDyteLeaveButtonElement extends Components.DyteLeaveButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteLeaveButtonElement, ev: DyteLeaveButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteLeaveButtonElement, ev: DyteLeaveButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteLeaveButtonElement: { prototype: HTMLDyteLeaveButtonElement; new (): HTMLDyteLeaveButtonElement; }; interface HTMLDyteLeaveMeetingElementEventMap { "dyteStateUpdate": States; } /** * A component which allows you to leave a meeting or * end meeting for all, if you have the permission. */ interface HTMLDyteLeaveMeetingElement extends Components.DyteLeaveMeeting, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteLeaveMeetingElement, ev: DyteLeaveMeetingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteLeaveMeetingElement, ev: DyteLeaveMeetingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteLeaveMeetingElement: { prototype: HTMLDyteLeaveMeetingElement; new (): HTMLDyteLeaveMeetingElement; }; interface HTMLDyteLivestreamIndicatorElement extends Components.DyteLivestreamIndicator, HTMLStencilElement { } var HTMLDyteLivestreamIndicatorElement: { prototype: HTMLDyteLivestreamIndicatorElement; new (): HTMLDyteLivestreamIndicatorElement; }; interface HTMLDyteLivestreamPlayerElementEventMap { "dyteAPIError": { trace: string; message: string; }; } interface HTMLDyteLivestreamPlayerElement extends Components.DyteLivestreamPlayer, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteLivestreamPlayerElement, ev: DyteLivestreamPlayerCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteLivestreamPlayerElement, ev: DyteLivestreamPlayerCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteLivestreamPlayerElement: { prototype: HTMLDyteLivestreamPlayerElement; new (): HTMLDyteLivestreamPlayerElement; }; interface HTMLDyteLivestreamToggleElementEventMap { "dyteStateUpdate": States1; "dyteAPIError": { trace: string; message: string; }; } interface HTMLDyteLivestreamToggleElement extends Components.DyteLivestreamToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteLivestreamToggleElement, ev: DyteLivestreamToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteLivestreamToggleElement, ev: DyteLivestreamToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteLivestreamToggleElement: { prototype: HTMLDyteLivestreamToggleElement; new (): HTMLDyteLivestreamToggleElement; }; /** * A component which loads the logo from your config, or via the `logo-url` attribute. */ interface HTMLDyteLogoElement extends Components.DyteLogo, HTMLStencilElement { } var HTMLDyteLogoElement: { prototype: HTMLDyteLogoElement; new (): HTMLDyteLogoElement; }; interface HTMLDyteMarkdownViewElement extends Components.DyteMarkdownView, HTMLStencilElement { } var HTMLDyteMarkdownViewElement: { prototype: HTMLDyteMarkdownViewElement; new (): HTMLDyteMarkdownViewElement; }; interface HTMLDyteMeetingElementEventMap { "dyteStatesUpdate": States; } /** * A single component which renders an entire meeting UI. * It loads your preset and renders the UI based on it. * With this component, you don't have to handle all the states, * dialogs and other smaller bits of managing the application. */ interface HTMLDyteMeetingElement extends Components.DyteMeeting, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMeetingElement, ev: DyteMeetingCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMeetingElement, ev: DyteMeetingCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMeetingElement: { prototype: HTMLDyteMeetingElement; new (): HTMLDyteMeetingElement; }; /** * Displays the title of the meeting. */ interface HTMLDyteMeetingTitleElement extends Components.DyteMeetingTitle, HTMLStencilElement { } var HTMLDyteMeetingTitleElement: { prototype: HTMLDyteMeetingTitleElement; new (): HTMLDyteMeetingTitleElement; }; /** * A menu component. */ interface HTMLDyteMenuElement extends Components.DyteMenu, HTMLStencilElement { } var HTMLDyteMenuElement: { prototype: HTMLDyteMenuElement; new (): HTMLDyteMenuElement; }; /** * A menu item component. */ interface HTMLDyteMenuItemElement extends Components.DyteMenuItem, HTMLStencilElement { } var HTMLDyteMenuItemElement: { prototype: HTMLDyteMenuItemElement; new (): HTMLDyteMenuItemElement; }; /** * A menu list component. */ interface HTMLDyteMenuListElement extends Components.DyteMenuList, HTMLStencilElement { } var HTMLDyteMenuListElement: { prototype: HTMLDyteMenuListElement; new (): HTMLDyteMenuListElement; }; /** * A component which renders list of messages. */ interface HTMLDyteMessageListViewElement extends Components.DyteMessageListView, HTMLStencilElement { } var HTMLDyteMessageListViewElement: { prototype: HTMLDyteMessageListViewElement; new (): HTMLDyteMessageListViewElement; }; interface HTMLDyteMessageViewElementEventMap { "action": string; } interface HTMLDyteMessageViewElement extends Components.DyteMessageView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMessageViewElement, ev: DyteMessageViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMessageViewElement, ev: DyteMessageViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMessageViewElement: { prototype: HTMLDyteMessageViewElement; new (): HTMLDyteMessageViewElement; }; interface HTMLDyteMicToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles your microphone. */ interface HTMLDyteMicToggleElement extends Components.DyteMicToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMicToggleElement, ev: DyteMicToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMicToggleElement, ev: DyteMicToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMicToggleElement: { prototype: HTMLDyteMicToggleElement; new (): HTMLDyteMicToggleElement; }; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface HTMLDyteMicrophoneSelectorElement extends Components.DyteMicrophoneSelector, HTMLStencilElement { } var HTMLDyteMicrophoneSelectorElement: { prototype: HTMLDyteMicrophoneSelectorElement; new (): HTMLDyteMicrophoneSelectorElement; }; /** * A grid component which handles screenshares, plugins and participants. */ interface HTMLDyteMixedGridElement extends Components.DyteMixedGrid, HTMLStencilElement { } var HTMLDyteMixedGridElement: { prototype: HTMLDyteMixedGridElement; new (): HTMLDyteMixedGridElement; }; interface HTMLDyteMoreToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of a more menu. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeMoreMenu: boolean; } * ``` */ interface HTMLDyteMoreToggleElement extends Components.DyteMoreToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMoreToggleElement, ev: DyteMoreToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMoreToggleElement, ev: DyteMoreToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMoreToggleElement: { prototype: HTMLDyteMoreToggleElement; new (): HTMLDyteMoreToggleElement; }; interface HTMLDyteMuteAllButtonElementEventMap { "dyteStateUpdate": States1; } interface HTMLDyteMuteAllButtonElement extends Components.DyteMuteAllButton, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMuteAllButtonElement, ev: DyteMuteAllButtonCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMuteAllButtonElement, ev: DyteMuteAllButtonCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMuteAllButtonElement: { prototype: HTMLDyteMuteAllButtonElement; new (): HTMLDyteMuteAllButtonElement; }; interface HTMLDyteMuteAllConfirmationElementEventMap { "dyteStateUpdate": States; } interface HTMLDyteMuteAllConfirmationElement extends Components.DyteMuteAllConfirmation, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteMuteAllConfirmationElement, ev: DyteMuteAllConfirmationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteMuteAllConfirmationElement, ev: DyteMuteAllConfirmationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteMuteAllConfirmationElement: { prototype: HTMLDyteMuteAllConfirmationElement; new (): HTMLDyteMuteAllConfirmationElement; }; /** * A component which shows a participant's name. */ interface HTMLDyteNameTagElement extends Components.DyteNameTag, HTMLStencilElement { } var HTMLDyteNameTagElement: { prototype: HTMLDyteNameTagElement; new (): HTMLDyteNameTagElement; }; interface HTMLDyteNetworkIndicatorElement extends Components.DyteNetworkIndicator, HTMLStencilElement { } var HTMLDyteNetworkIndicatorElement: { prototype: HTMLDyteNetworkIndicatorElement; new (): HTMLDyteNetworkIndicatorElement; }; interface HTMLDyteNotificationElementEventMap { "dyteNotificationDismiss": string; } /** * A component which shows a notification. * You need to remove the element after you receive the * `dyteNotificationDismiss` event. */ interface HTMLDyteNotificationElement extends Components.DyteNotification, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteNotificationElement, ev: DyteNotificationCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteNotificationElement, ev: DyteNotificationCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteNotificationElement: { prototype: HTMLDyteNotificationElement; new (): HTMLDyteNotificationElement; }; /** * A component which handles notifications. * You can configure which notifications you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface HTMLDyteNotificationsElement extends Components.DyteNotifications, HTMLStencilElement { } var HTMLDyteNotificationsElement: { prototype: HTMLDyteNotificationsElement; new (): HTMLDyteNotificationsElement; }; interface HTMLDyteOverlayModalElementEventMap { "dyteStateUpdate": States; } /** * A confirmation modal. */ interface HTMLDyteOverlayModalElement extends Components.DyteOverlayModal, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteOverlayModalElement, ev: DyteOverlayModalCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteOverlayModalElement, ev: DyteOverlayModalCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteOverlayModalElement: { prototype: HTMLDyteOverlayModalElement; new (): HTMLDyteOverlayModalElement; }; interface HTMLDytePaginatedListElement extends Components.DytePaginatedList, HTMLStencilElement { } var HTMLDytePaginatedListElement: { prototype: HTMLDytePaginatedListElement; new (): HTMLDytePaginatedListElement; }; interface HTMLDyteParticipantElementEventMap { "dyteSendNotification": { trace: string; message: string; }; } /** * A participant entry component used inside `dyte-participants` which shows data like: * name, picture and media device status. * You can perform privileged actions on the participant too. */ interface HTMLDyteParticipantElement extends Components.DyteParticipant, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteParticipantElement, ev: DyteParticipantCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteParticipantElement, ev: DyteParticipantCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteParticipantElement: { prototype: HTMLDyteParticipantElement; new (): HTMLDyteParticipantElement; }; /** * A component which shows count of total joined participants in a meeting. */ interface HTMLDyteParticipantCountElement extends Components.DyteParticipantCount, HTMLStencilElement { } var HTMLDyteParticipantCountElement: { prototype: HTMLDyteParticipantCountElement; new (): HTMLDyteParticipantCountElement; }; interface HTMLDyteParticipantSetupElement extends Components.DyteParticipantSetup, HTMLStencilElement { } var HTMLDyteParticipantSetupElement: { prototype: HTMLDyteParticipantSetupElement; new (): HTMLDyteParticipantSetupElement; }; interface HTMLDyteParticipantTileElementEventMap { "tileLoad": { participant: Peer; videoElement: HTMLVideoElement }; "tileUnload": Peer; } /** * A component which plays a participants video and allows for placement * of components like `dyte-name-tag`, `dyte-audio-visualizer` or any other component. */ interface HTMLDyteParticipantTileElement extends Components.DyteParticipantTile, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteParticipantTileElement, ev: DyteParticipantTileCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteParticipantTileElement, ev: DyteParticipantTileCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteParticipantTileElement: { prototype: HTMLDyteParticipantTileElement; new (): HTMLDyteParticipantTileElement; }; interface HTMLDyteParticipantsElementEventMap { "dyteStateUpdate": States; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface HTMLDyteParticipantsElement extends Components.DyteParticipants, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteParticipantsElement, ev: DyteParticipantsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteParticipantsElement, ev: DyteParticipantsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteParticipantsElement: { prototype: HTMLDyteParticipantsElement; new (): HTMLDyteParticipantsElement; }; interface HTMLDyteParticipantsAudioElementEventMap { "dialogClose": void; } /** * A component which plays all the audio from participants and screenshares. */ interface HTMLDyteParticipantsAudioElement extends Components.DyteParticipantsAudio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteParticipantsAudioElement, ev: DyteParticipantsAudioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteParticipantsAudioElement, ev: DyteParticipantsAudioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteParticipantsAudioElement: { prototype: HTMLDyteParticipantsAudioElement; new (): HTMLDyteParticipantsAudioElement; }; /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface HTMLDyteParticipantsStageListElement extends Components.DyteParticipantsStageList, HTMLStencilElement { } var HTMLDyteParticipantsStageListElement: { prototype: HTMLDyteParticipantsStageListElement; new (): HTMLDyteParticipantsStageListElement; }; interface HTMLDyteParticipantsStageQueueElement extends Components.DyteParticipantsStageQueue, HTMLStencilElement { } var HTMLDyteParticipantsStageQueueElement: { prototype: HTMLDyteParticipantsStageQueueElement; new (): HTMLDyteParticipantsStageQueueElement; }; interface HTMLDyteParticipantsToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of participants. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'participants' } * ``` */ interface HTMLDyteParticipantsToggleElement extends Components.DyteParticipantsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteParticipantsToggleElement, ev: DyteParticipantsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteParticipantsToggleElement, ev: DyteParticipantsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteParticipantsToggleElement: { prototype: HTMLDyteParticipantsToggleElement; new (): HTMLDyteParticipantsToggleElement; }; interface HTMLDyteParticipantsViewerListElement extends Components.DyteParticipantsViewerList, HTMLStencilElement { } var HTMLDyteParticipantsViewerListElement: { prototype: HTMLDyteParticipantsViewerListElement; new (): HTMLDyteParticipantsViewerListElement; }; interface HTMLDyteParticipantsWaitingListElement extends Components.DyteParticipantsWaitingList, HTMLStencilElement { } var HTMLDyteParticipantsWaitingListElement: { prototype: HTMLDyteParticipantsWaitingListElement; new (): HTMLDyteParticipantsWaitingListElement; }; interface HTMLDytePermissionsMessageElementEventMap { "dyteStateUpdate": States; } /** * A component which shows permission related troubleshooting * information. */ interface HTMLDytePermissionsMessageElement extends Components.DytePermissionsMessage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePermissionsMessageElement, ev: DytePermissionsMessageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePermissionsMessageElement, ev: DytePermissionsMessageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePermissionsMessageElement: { prototype: HTMLDytePermissionsMessageElement; new (): HTMLDytePermissionsMessageElement; }; interface HTMLDytePipToggleElementEventMap { "dyteStateUpdate": States1; } interface HTMLDytePipToggleElement extends Components.DytePipToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePipToggleElement, ev: DytePipToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePipToggleElement, ev: DytePipToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePipToggleElement: { prototype: HTMLDytePipToggleElement; new (): HTMLDytePipToggleElement; }; /** * A component which loads a plugin. */ interface HTMLDytePluginMainElement extends Components.DytePluginMain, HTMLStencilElement { } var HTMLDytePluginMainElement: { prototype: HTMLDytePluginMainElement; new (): HTMLDytePluginMainElement; }; interface HTMLDytePluginsElementEventMap { "dyteStateUpdate": States; } /** * A component which lists all available plugins from their preset, * and ability to enable or disable plugins. */ interface HTMLDytePluginsElement extends Components.DytePlugins, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePluginsElement, ev: DytePluginsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePluginsElement, ev: DytePluginsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePluginsElement: { prototype: HTMLDytePluginsElement; new (): HTMLDytePluginsElement; }; interface HTMLDytePluginsToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of plugins. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'plugins' } * ``` */ interface HTMLDytePluginsToggleElement extends Components.DytePluginsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePluginsToggleElement, ev: DytePluginsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePluginsToggleElement, ev: DytePluginsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePluginsToggleElement: { prototype: HTMLDytePluginsToggleElement; new (): HTMLDytePluginsToggleElement; }; interface HTMLDytePollElementEventMap { "dyteVotePoll": { id: string; index: number; }; } /** * A poll component. * Shows a poll where a user can vote. */ interface HTMLDytePollElement extends Components.DytePoll, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePollElement, ev: DytePollCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePollElement, ev: DytePollCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePollElement: { prototype: HTMLDytePollElement; new (): HTMLDytePollElement; }; interface HTMLDytePollFormElementEventMap { "dyteCreatePoll": PollObject; } /** * A component that lets you create a poll. */ interface HTMLDytePollFormElement extends Components.DytePollForm, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePollFormElement, ev: DytePollFormCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePollFormElement, ev: DytePollFormCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePollFormElement: { prototype: HTMLDytePollFormElement; new (): HTMLDytePollFormElement; }; /** * A component which lists all available plugins a user can access with * the ability to enable or disable them as per their permissions. */ interface HTMLDytePollsElement extends Components.DytePolls, HTMLStencilElement { } var HTMLDytePollsElement: { prototype: HTMLDytePollsElement; new (): HTMLDytePollsElement; }; interface HTMLDytePollsToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of polls. * You need to pass the `meeting` object to it to see the unread polls count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'polls' } * ``` */ interface HTMLDytePollsToggleElement extends Components.DytePollsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDytePollsToggleElement, ev: DytePollsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDytePollsToggleElement, ev: DytePollsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDytePollsToggleElement: { prototype: HTMLDytePollsToggleElement; new (): HTMLDytePollsToggleElement; }; /** * A component which indicates the recording status of a meeting. * It will not render anything if no recording is taking place. */ interface HTMLDyteRecordingIndicatorElement extends Components.DyteRecordingIndicator, HTMLStencilElement { } var HTMLDyteRecordingIndicatorElement: { prototype: HTMLDyteRecordingIndicatorElement; new (): HTMLDyteRecordingIndicatorElement; }; interface HTMLDyteRecordingToggleElementEventMap { "dyteAPIError": { trace: string; message: string; }; } /** * A button which toggles recording state of a meeting. * Only a privileged user can perform this action, * thus the button will not be visible for participants * who don't have the permission to record a meeting. */ interface HTMLDyteRecordingToggleElement extends Components.DyteRecordingToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteRecordingToggleElement, ev: DyteRecordingToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteRecordingToggleElement, ev: DyteRecordingToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteRecordingToggleElement: { prototype: HTMLDyteRecordingToggleElement; new (): HTMLDyteRecordingToggleElement; }; interface HTMLDyteScreenShareToggleElementEventMap { "dyteStateUpdate": States; "dyteAPIError": { trace: string; message: string; }; } /** * A button which toggles your screenshare. */ interface HTMLDyteScreenShareToggleElement extends Components.DyteScreenShareToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteScreenShareToggleElement, ev: DyteScreenShareToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteScreenShareToggleElement, ev: DyteScreenShareToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteScreenShareToggleElement: { prototype: HTMLDyteScreenShareToggleElement; new (): HTMLDyteScreenShareToggleElement; }; interface HTMLDyteScreenshareViewElementEventMap { "dyteStateUpdate": States; "screensharePlay": { participant: Peer; screenshareParticipant: Peer; }; } /** * A component which plays a participant's screenshared video. * It also allows for placement of other components similar to `dyte-participant-tile`. * This component will not render anything if the participant hasn't start screensharing. */ interface HTMLDyteScreenshareViewElement extends Components.DyteScreenshareView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteScreenshareViewElement, ev: DyteScreenshareViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteScreenshareViewElement, ev: DyteScreenshareViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteScreenshareViewElement: { prototype: HTMLDyteScreenshareViewElement; new (): HTMLDyteScreenshareViewElement; }; interface HTMLDyteSettingsElementEventMap { "dyteStateUpdate": States; } /** * A settings component to see and change your audio/video devices * as well as see your connection quality. */ interface HTMLDyteSettingsElement extends Components.DyteSettings, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSettingsElement, ev: DyteSettingsCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSettingsElement, ev: DyteSettingsCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSettingsElement: { prototype: HTMLDyteSettingsElement; new (): HTMLDyteSettingsElement; }; interface HTMLDyteSettingsAudioElementEventMap { "dyteStateUpdate": States; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface HTMLDyteSettingsAudioElement extends Components.DyteSettingsAudio, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSettingsAudioElement, ev: DyteSettingsAudioCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSettingsAudioElement, ev: DyteSettingsAudioCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSettingsAudioElement: { prototype: HTMLDyteSettingsAudioElement; new (): HTMLDyteSettingsAudioElement; }; interface HTMLDyteSettingsToggleElementEventMap { "dyteStateUpdate": States; } /** * A button which toggles visibility of settings module. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSettings: boolean; } * ``` */ interface HTMLDyteSettingsToggleElement extends Components.DyteSettingsToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSettingsToggleElement, ev: DyteSettingsToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSettingsToggleElement, ev: DyteSettingsToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSettingsToggleElement: { prototype: HTMLDyteSettingsToggleElement; new (): HTMLDyteSettingsToggleElement; }; interface HTMLDyteSettingsVideoElementEventMap { "dyteStateUpdate": States; } /** * A component which lets to manage your camera devices and your video preferences. * Emits `dyteStateUpdate` event with data for toggling mirroring of self video: * ```ts * { * prefs: { * mirrorVideo: boolean * } * } * ``` */ interface HTMLDyteSettingsVideoElement extends Components.DyteSettingsVideo, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSettingsVideoElement, ev: DyteSettingsVideoCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSettingsVideoElement, ev: DyteSettingsVideoCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSettingsVideoElement: { prototype: HTMLDyteSettingsVideoElement; new (): HTMLDyteSettingsVideoElement; }; interface HTMLDyteSetupScreenElementEventMap { "dyteStateUpdate": States; } /** * A screen shown before joining the meeting, where you can edit your display name, * and media settings. */ interface HTMLDyteSetupScreenElement extends Components.DyteSetupScreen, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSetupScreenElement, ev: DyteSetupScreenCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSetupScreenElement, ev: DyteSetupScreenCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSetupScreenElement: { prototype: HTMLDyteSetupScreenElement; new (): HTMLDyteSetupScreenElement; }; interface HTMLDyteSidebarElementEventMap { "dyteStateUpdate": States; } /** * A component which handles the sidebar and * you can customize which sections you want, and which section you want as the default. */ interface HTMLDyteSidebarElement extends Components.DyteSidebar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSidebarElement, ev: DyteSidebarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSidebarElement, ev: DyteSidebarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSidebarElement: { prototype: HTMLDyteSidebarElement; new (): HTMLDyteSidebarElement; }; interface HTMLDyteSidebarUiElementEventMap { "tabChange": string; "sidebarClose": void; } interface HTMLDyteSidebarUiElement extends Components.DyteSidebarUi, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSidebarUiElement, ev: DyteSidebarUiCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSidebarUiElement, ev: DyteSidebarUiCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSidebarUiElement: { prototype: HTMLDyteSidebarUiElement; new (): HTMLDyteSidebarUiElement; }; /** * A grid component which renders only the participants in a simple grid. */ interface HTMLDyteSimpleGridElement extends Components.DyteSimpleGrid, HTMLStencilElement { } var HTMLDyteSimpleGridElement: { prototype: HTMLDyteSimpleGridElement; new (): HTMLDyteSimpleGridElement; }; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface HTMLDyteSpeakerSelectorElement extends Components.DyteSpeakerSelector, HTMLStencilElement { } var HTMLDyteSpeakerSelectorElement: { prototype: HTMLDyteSpeakerSelectorElement; new (): HTMLDyteSpeakerSelectorElement; }; /** * A component which shows an animating spinner. */ interface HTMLDyteSpinnerElement extends Components.DyteSpinner, HTMLStencilElement { } var HTMLDyteSpinnerElement: { prototype: HTMLDyteSpinnerElement; new (): HTMLDyteSpinnerElement; }; /** * A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. * You can customize the layout to a `column` view, by default is is `row`. * - Participants from `pinnedParticipants[]` are rendered inside a larger grid. * - Participants from `participants[]` array are rendered in a smaller grid. */ interface HTMLDyteSpotlightGridElement extends Components.DyteSpotlightGrid, HTMLStencilElement { } var HTMLDyteSpotlightGridElement: { prototype: HTMLDyteSpotlightGridElement; new (): HTMLDyteSpotlightGridElement; }; interface HTMLDyteSpotlightIndicatorElement extends Components.DyteSpotlightIndicator, HTMLStencilElement { } var HTMLDyteSpotlightIndicatorElement: { prototype: HTMLDyteSpotlightIndicatorElement; new (): HTMLDyteSpotlightIndicatorElement; }; interface HTMLDyteStageElementEventMap { "dyteStateUpdate": States; } /** * A component used as a stage that commonly houses * the `grid` and `sidebar` components. */ interface HTMLDyteStageElement extends Components.DyteStage, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteStageElement, ev: DyteStageCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteStageElement, ev: DyteStageCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteStageElement: { prototype: HTMLDyteStageElement; new (): HTMLDyteStageElement; }; interface HTMLDyteStageToggleElementEventMap { "dyteStateUpdate": States1; } interface HTMLDyteStageToggleElement extends Components.DyteStageToggle, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteStageToggleElement, ev: DyteStageToggleCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteStageToggleElement, ev: DyteStageToggleCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteStageToggleElement: { prototype: HTMLDyteStageToggleElement; new (): HTMLDyteStageToggleElement; }; interface HTMLDyteSwitchElementEventMap { "dyteChange": boolean; } /** * A switch component which follows Dyte's Design System. */ interface HTMLDyteSwitchElement extends Components.DyteSwitch, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteSwitchElement, ev: DyteSwitchCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteSwitchElement, ev: DyteSwitchCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteSwitchElement: { prototype: HTMLDyteSwitchElement; new (): HTMLDyteSwitchElement; }; interface HTMLDyteTabBarElementEventMap { "tabChange": Tab; } interface HTMLDyteTabBarElement extends Components.DyteTabBar, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteTabBarElement, ev: DyteTabBarCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteTabBarElement, ev: DyteTabBarCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteTabBarElement: { prototype: HTMLDyteTabBarElement; new (): HTMLDyteTabBarElement; }; interface HTMLDyteTextComposerViewElementEventMap { "textChange": string; } /** * A component which renders a text composer */ interface HTMLDyteTextComposerViewElement extends Components.DyteTextComposerView, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteTextComposerViewElement, ev: DyteTextComposerViewCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteTextComposerViewElement, ev: DyteTextComposerViewCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteTextComposerViewElement: { prototype: HTMLDyteTextComposerViewElement; new (): HTMLDyteTextComposerViewElement; }; /** * A component which renders a text message from chat. */ interface HTMLDyteTextMessageElement extends Components.DyteTextMessage, HTMLStencilElement { } var HTMLDyteTextMessageElement: { prototype: HTMLDyteTextMessageElement; new (): HTMLDyteTextMessageElement; }; /** * A component which renders a text message from chat. */ interface HTMLDyteTextMessageViewElement extends Components.DyteTextMessageView, HTMLStencilElement { } var HTMLDyteTextMessageViewElement: { prototype: HTMLDyteTextMessageViewElement; new (): HTMLDyteTextMessageViewElement; }; interface HTMLDyteTooltipElementEventMap { "dyteOpenChange": boolean; } /** * Tooltip component which follows Dyte's Design System. */ interface HTMLDyteTooltipElement extends Components.DyteTooltip, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteTooltipElement, ev: DyteTooltipCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteTooltipElement, ev: DyteTooltipCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteTooltipElement: { prototype: HTMLDyteTooltipElement; new (): HTMLDyteTooltipElement; }; interface HTMLDyteTranscriptElementEventMap { "dyteTranscriptDismiss": { id: string; renderedId: string; }; } /** * A component which shows a transcript. * You need to remove the element after you receive the * `dyteTranscriptDismiss` event. */ interface HTMLDyteTranscriptElement extends Components.DyteTranscript, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteTranscriptElement, ev: DyteTranscriptCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteTranscriptElement, ev: DyteTranscriptCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteTranscriptElement: { prototype: HTMLDyteTranscriptElement; new (): HTMLDyteTranscriptElement; }; /** * A component which handles transcripts. * You can configure which transcripts you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface HTMLDyteTranscriptsElement extends Components.DyteTranscripts, HTMLStencilElement { } var HTMLDyteTranscriptsElement: { prototype: HTMLDyteTranscriptsElement; new (): HTMLDyteTranscriptsElement; }; interface HTMLDyteUiProviderElementEventMap { "dyteStatesUpdate": States1; } interface HTMLDyteUiProviderElement extends Components.DyteUiProvider, HTMLStencilElement { addEventListener(type: K, listener: (this: HTMLDyteUiProviderElement, ev: DyteUiProviderCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLDyteUiProviderElement, ev: DyteUiProviderCustomEvent) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLDyteUiProviderElement: { prototype: HTMLDyteUiProviderElement; new (): HTMLDyteUiProviderElement; }; /** * A component which shows count of total joined participants in a meeting. */ interface HTMLDyteViewerCountElement extends Components.DyteViewerCount, HTMLStencilElement { } var HTMLDyteViewerCountElement: { prototype: HTMLDyteViewerCountElement; new (): HTMLDyteViewerCountElement; }; interface HTMLDyteVirtualizedParticipantListElement extends Components.DyteVirtualizedParticipantList, HTMLStencilElement { } var HTMLDyteVirtualizedParticipantListElement: { prototype: HTMLDyteVirtualizedParticipantListElement; new (): HTMLDyteVirtualizedParticipantListElement; }; interface HTMLDyteWaitingScreenElement extends Components.DyteWaitingScreen, HTMLStencilElement { } var HTMLDyteWaitingScreenElement: { prototype: HTMLDyteWaitingScreenElement; new (): HTMLDyteWaitingScreenElement; }; interface HTMLElementTagNameMap { "dyte-ai": HTMLDyteAiElement; "dyte-ai-toggle": HTMLDyteAiToggleElement; "dyte-ai-transcriptions": HTMLDyteAiTranscriptionsElement; "dyte-audio-grid": HTMLDyteAudioGridElement; "dyte-audio-tile": HTMLDyteAudioTileElement; "dyte-audio-visualizer": HTMLDyteAudioVisualizerElement; "dyte-avatar": HTMLDyteAvatarElement; "dyte-breakout-room-manager": HTMLDyteBreakoutRoomManagerElement; "dyte-breakout-room-participants": HTMLDyteBreakoutRoomParticipantsElement; "dyte-breakout-rooms-manager": HTMLDyteBreakoutRoomsManagerElement; "dyte-breakout-rooms-toggle": HTMLDyteBreakoutRoomsToggleElement; "dyte-broadcast-message-modal": HTMLDyteBroadcastMessageModalElement; "dyte-button": HTMLDyteButtonElement; "dyte-camera-selector": HTMLDyteCameraSelectorElement; "dyte-camera-toggle": HTMLDyteCameraToggleElement; "dyte-caption-toggle": HTMLDyteCaptionToggleElement; "dyte-channel-creator": HTMLDyteChannelCreatorElement; "dyte-channel-details": HTMLDyteChannelDetailsElement; "dyte-channel-header": HTMLDyteChannelHeaderElement; "dyte-channel-selector-ui": HTMLDyteChannelSelectorUiElement; "dyte-channel-selector-view": HTMLDyteChannelSelectorViewElement; "dyte-chat": HTMLDyteChatElement; "dyte-chat-composer-ui": HTMLDyteChatComposerUiElement; "dyte-chat-composer-view": HTMLDyteChatComposerViewElement; "dyte-chat-message": HTMLDyteChatMessageElement; "dyte-chat-messages-ui": HTMLDyteChatMessagesUiElement; "dyte-chat-messages-ui-paginated": HTMLDyteChatMessagesUiPaginatedElement; "dyte-chat-search-results": HTMLDyteChatSearchResultsElement; "dyte-chat-selector-ui": HTMLDyteChatSelectorUiElement; "dyte-chat-toggle": HTMLDyteChatToggleElement; "dyte-clock": HTMLDyteClockElement; "dyte-confirmation-modal": HTMLDyteConfirmationModalElement; "dyte-controlbar": HTMLDyteControlbarElement; "dyte-controlbar-button": HTMLDyteControlbarButtonElement; "dyte-counter": HTMLDyteCounterElement; "dyte-debugger": HTMLDyteDebuggerElement; "dyte-debugger-audio": HTMLDyteDebuggerAudioElement; "dyte-debugger-screenshare": HTMLDyteDebuggerScreenshareElement; "dyte-debugger-system": HTMLDyteDebuggerSystemElement; "dyte-debugger-toggle": HTMLDyteDebuggerToggleElement; "dyte-debugger-video": HTMLDyteDebuggerVideoElement; "dyte-dialog": HTMLDyteDialogElement; "dyte-dialog-manager": HTMLDyteDialogManagerElement; "dyte-draft-attachment-view": HTMLDyteDraftAttachmentViewElement; "dyte-emoji-picker": HTMLDyteEmojiPickerElement; "dyte-emoji-picker-button": HTMLDyteEmojiPickerButtonElement; "dyte-ended-screen": HTMLDyteEndedScreenElement; "dyte-file-dropzone": HTMLDyteFileDropzoneElement; "dyte-file-message": HTMLDyteFileMessageElement; "dyte-file-message-view": HTMLDyteFileMessageViewElement; "dyte-file-picker-button": HTMLDyteFilePickerButtonElement; "dyte-fullscreen-toggle": HTMLDyteFullscreenToggleElement; "dyte-grid": HTMLDyteGridElement; "dyte-grid-pagination": HTMLDyteGridPaginationElement; "dyte-header": HTMLDyteHeaderElement; "dyte-icon": HTMLDyteIconElement; "dyte-idle-screen": HTMLDyteIdleScreenElement; "dyte-image-message": HTMLDyteImageMessageElement; "dyte-image-message-view": HTMLDyteImageMessageViewElement; "dyte-image-viewer": HTMLDyteImageViewerElement; "dyte-information-tooltip": HTMLDyteInformationTooltipElement; "dyte-join-stage": HTMLDyteJoinStageElement; "dyte-leave-button": HTMLDyteLeaveButtonElement; "dyte-leave-meeting": HTMLDyteLeaveMeetingElement; "dyte-livestream-indicator": HTMLDyteLivestreamIndicatorElement; "dyte-livestream-player": HTMLDyteLivestreamPlayerElement; "dyte-livestream-toggle": HTMLDyteLivestreamToggleElement; "dyte-logo": HTMLDyteLogoElement; "dyte-markdown-view": HTMLDyteMarkdownViewElement; "dyte-meeting": HTMLDyteMeetingElement; "dyte-meeting-title": HTMLDyteMeetingTitleElement; "dyte-menu": HTMLDyteMenuElement; "dyte-menu-item": HTMLDyteMenuItemElement; "dyte-menu-list": HTMLDyteMenuListElement; "dyte-message-list-view": HTMLDyteMessageListViewElement; "dyte-message-view": HTMLDyteMessageViewElement; "dyte-mic-toggle": HTMLDyteMicToggleElement; "dyte-microphone-selector": HTMLDyteMicrophoneSelectorElement; "dyte-mixed-grid": HTMLDyteMixedGridElement; "dyte-more-toggle": HTMLDyteMoreToggleElement; "dyte-mute-all-button": HTMLDyteMuteAllButtonElement; "dyte-mute-all-confirmation": HTMLDyteMuteAllConfirmationElement; "dyte-name-tag": HTMLDyteNameTagElement; "dyte-network-indicator": HTMLDyteNetworkIndicatorElement; "dyte-notification": HTMLDyteNotificationElement; "dyte-notifications": HTMLDyteNotificationsElement; "dyte-overlay-modal": HTMLDyteOverlayModalElement; "dyte-paginated-list": HTMLDytePaginatedListElement; "dyte-participant": HTMLDyteParticipantElement; "dyte-participant-count": HTMLDyteParticipantCountElement; "dyte-participant-setup": HTMLDyteParticipantSetupElement; "dyte-participant-tile": HTMLDyteParticipantTileElement; "dyte-participants": HTMLDyteParticipantsElement; "dyte-participants-audio": HTMLDyteParticipantsAudioElement; "dyte-participants-stage-list": HTMLDyteParticipantsStageListElement; "dyte-participants-stage-queue": HTMLDyteParticipantsStageQueueElement; "dyte-participants-toggle": HTMLDyteParticipantsToggleElement; "dyte-participants-viewer-list": HTMLDyteParticipantsViewerListElement; "dyte-participants-waiting-list": HTMLDyteParticipantsWaitingListElement; "dyte-permissions-message": HTMLDytePermissionsMessageElement; "dyte-pip-toggle": HTMLDytePipToggleElement; "dyte-plugin-main": HTMLDytePluginMainElement; "dyte-plugins": HTMLDytePluginsElement; "dyte-plugins-toggle": HTMLDytePluginsToggleElement; "dyte-poll": HTMLDytePollElement; "dyte-poll-form": HTMLDytePollFormElement; "dyte-polls": HTMLDytePollsElement; "dyte-polls-toggle": HTMLDytePollsToggleElement; "dyte-recording-indicator": HTMLDyteRecordingIndicatorElement; "dyte-recording-toggle": HTMLDyteRecordingToggleElement; "dyte-screen-share-toggle": HTMLDyteScreenShareToggleElement; "dyte-screenshare-view": HTMLDyteScreenshareViewElement; "dyte-settings": HTMLDyteSettingsElement; "dyte-settings-audio": HTMLDyteSettingsAudioElement; "dyte-settings-toggle": HTMLDyteSettingsToggleElement; "dyte-settings-video": HTMLDyteSettingsVideoElement; "dyte-setup-screen": HTMLDyteSetupScreenElement; "dyte-sidebar": HTMLDyteSidebarElement; "dyte-sidebar-ui": HTMLDyteSidebarUiElement; "dyte-simple-grid": HTMLDyteSimpleGridElement; "dyte-speaker-selector": HTMLDyteSpeakerSelectorElement; "dyte-spinner": HTMLDyteSpinnerElement; "dyte-spotlight-grid": HTMLDyteSpotlightGridElement; "dyte-spotlight-indicator": HTMLDyteSpotlightIndicatorElement; "dyte-stage": HTMLDyteStageElement; "dyte-stage-toggle": HTMLDyteStageToggleElement; "dyte-switch": HTMLDyteSwitchElement; "dyte-tab-bar": HTMLDyteTabBarElement; "dyte-text-composer-view": HTMLDyteTextComposerViewElement; "dyte-text-message": HTMLDyteTextMessageElement; "dyte-text-message-view": HTMLDyteTextMessageViewElement; "dyte-tooltip": HTMLDyteTooltipElement; "dyte-transcript": HTMLDyteTranscriptElement; "dyte-transcripts": HTMLDyteTranscriptsElement; "dyte-ui-provider": HTMLDyteUiProviderElement; "dyte-viewer-count": HTMLDyteViewerCountElement; "dyte-virtualized-participant-list": HTMLDyteVirtualizedParticipantListElement; "dyte-waiting-screen": HTMLDyteWaitingScreenElement; } } declare namespace LocalJSX { interface DyteAi { /** * Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteAiCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * View type */ "view"?: AIView; } interface DyteAiToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteAiToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteAiTranscriptions { /** * Initial transcriptions */ "initialTranscriptions"?: Transcript[]; /** * Meeting object */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; } interface DyteAudioGrid { /** * Config */ "config"?: UIConfig1; /** * Whether to hide self in the grid */ "hideSelf"?: boolean; /** * Icon Pack */ "iconPack"?: IconPack1; /** * Meeting */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * States */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } interface DyteAudioTile { /** * Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting */ "meeting"?: Meeting; /** * Participant object */ "participant"?: Peer; /** * Size */ "size"?: Size; /** * States */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } /** * An audio visualizer component which visualizes a participants audio. * Commonly used inside `dyte-name-tag`. */ interface DyteAudioVisualizer { /** * Hide when there is no audio / audio is muted */ "hideMuted"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Audio visualizer for screensharing, it will use screenShareTracks.audio instead of audioTrack */ "isScreenShare"?: boolean; /** * Participant object */ "participant"?: Peer; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: AudioVisualizerVariant; } /** * Avatar component which renders a participant's image or their initials. */ interface DyteAvatar { /** * Icon pack */ "iconPack"?: IconPack; /** * Participant object */ "participant"?: Peer | WaitlistedParticipant | { name: string; picture: string }; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Avatar type */ "variant"?: AvatarVariant; } interface DyteBreakoutRoomManager { /** * allow room delete */ "allowDelete"?: boolean; /** * Enable updating participants */ "assigningParticipants"?: boolean; /** * display expanded card by default */ "defaultExpanded"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Drag mode */ "isDragMode"?: boolean; /** * Meeting object */ "meeting"?: Meeting; /** * Mode in which selector is used */ "mode"?: 'edit' | 'create'; /** * Event for deleting room */ "onDelete"?: (event: DyteBreakoutRoomManagerCustomEvent) => void; /** * On Delete event emitter */ "onParticipantDelete"?: (event: DyteBreakoutRoomManagerCustomEvent<{ customParticipantId: string; }>) => void; /** * Event for adding a participant */ "onParticipantsAdd"?: (event: DyteBreakoutRoomManagerCustomEvent) => void; /** * Event for joining a room */ "onRoomJoin"?: (event: DyteBreakoutRoomManagerCustomEvent) => void; /** * Event for updating room details */ "onUpdate"?: (event: DyteBreakoutRoomManagerCustomEvent<{ title: string | undefined; id: string; }>) => void; /** * Connected Room Config Object */ "room"?: DraftMeeting; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteBreakoutRoomParticipants { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits an event when all participants are selected or deselected */ "onAllParticipantsToggleUpdate"?: (event: DyteBreakoutRoomParticipantsCustomEvent) => void; /** * Emits an event when participants are dragged */ "onParticipantsDragging"?: (event: DyteBreakoutRoomParticipantsCustomEvent) => void; /** * Emits an event when selected participants are updated */ "onSelectedParticipantsUpdate"?: (event: DyteBreakoutRoomParticipantsCustomEvent) => void; /** * Participant ids */ "participantIds"?: string[]; /** * selected participants */ "selectedParticipantIds"?: string[]; /** * Language */ "t"?: DyteI18n; } interface DyteBreakoutRoomsManager { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteBreakoutRoomsManagerCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visibility of breakout rooms. * You need to pass the `meeting` object to it. */ interface DyteBreakoutRoomsToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteBreakoutRoomsToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteBroadcastMessageModal { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteBroadcastMessageModalCustomEvent) => void; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n; } /** * A button that follows Dyte's Design System. */ interface DyteButton { /** * Where the button is disabled or not */ "disabled"?: boolean; /** * Button type */ "kind"?: ButtonKind; /** * Whether to reverse order of children */ "reverse"?: boolean; /** * Size */ "size"?: Size; /** * Button type */ "type"?: HTMLButtonElement['type']; /** * Button variant */ "variant"?: ButtonVariant; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteCameraSelector { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * variant */ "variant"?: 'full' | 'inline'; } /** * A button which toggles your camera. */ interface DyteCameraToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteCameraToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteCaptionToggle { /** * Config */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteCaptionToggleCustomEvent) => void; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteChannelCreator { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteChannelCreatorCustomEvent) => void; /** * Emits event to switch channel */ "onSwitchChannel"?: (event: DyteChannelCreatorCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; } interface DyteChannelDetails { /** * Channel object */ "channel": ChatChannel; /** * Icon pack */ "iconPack"?: IconPack1; /** * List of channel members */ "members"?: DyteBasicParticipant[]; /** * Language */ "t"?: DyteI18n1; } interface DyteChannelHeader { /** * Channel object */ "channel"?: ChatChannel; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Event emitted when back button is clicked */ "onBack"?: (event: DyteChannelHeaderCustomEvent) => void; /** * event triggered for search */ "onSearch"?: (event: DyteChannelHeaderCustomEvent) => void; /** * event triggered for search */ "onSearchDismissed"?: (event: DyteChannelHeaderCustomEvent) => void; /** * Show back button */ "showBackButton"?: boolean; /** * Language */ "t"?: DyteI18n1; } interface DyteChannelSelectorUi { /** * Channels */ "channels"?: ChatChannel[]; /** * Icon pack */ "iconPack"?: IconPack1; /** * On channel changed */ "onChannelChanged"?: (event: DyteChannelSelectorUiCustomEvent) => void; /** * Selected channel id */ "selectedChannelId"?: string; /** * show recent message in channel */ "showRecentMessage"?: boolean; /** * Language */ "t"?: DyteI18n1; } interface DyteChannelSelectorView { /** * Channels */ "channels": { id: string; name: string; avatarUrl?: string; icon?: keyof IconPack1; latestMessage?: string; latestMessageTime?: Date; unreadCount?: number; }[]; /** * Disables search bar (default = false) */ "disableSearch"?: boolean; /** * Hides avatar (default = false) */ "hideAvatar"?: boolean; /** * Icon Pack */ "iconPack"?: IconPack1; /** * Event emitted when selected channel changes */ "onChannelChange"?: (event: DyteChannelSelectorViewCustomEvent<{ id: string; name: string; avatarUrl?: string; icon?: keyof IconPack1; latestMessage?: string; latestMessageTime?: Date; unreadCount?: number; }>) => void; /** * Selected channel id */ "selectedChannelId"?: string; /** * Language */ "t"?: DyteI18n1; /** * Render as dropdown or list (default = list) */ "viewAs"?: 'dropdown' | 'list'; } /** * Fully featured chat component with image & file upload, emoji picker and auto-scroll. */ interface DyteChat { /** * Config */ "config"?: UIConfig1; /** * disables private chat */ "disablePrivateChat"?: boolean; /** * @deprecated Beta API, will change in future A filter function for messages to be displayed */ "displayFilter"?: ChatFilter; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteChatCustomEvent) => void; /** * @deprecated Beta API, will change in future List of target presets allowed as private chat recipient */ "privatePresetFilter"?: String[]; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } interface DyteChatComposerUi { /** * Whether user can send file messages */ "canSendFiles"?: boolean; /** * Whether user can send text messages */ "canSendTextMessage"?: boolean; /** * channel id */ "channelId"?: string; /** * Whether to show emoji picker */ "disableEmojiPicker"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * list of members that can be mentioned */ "members"?: DyteBasicParticipant[]; /** * Event emitted when message editing is cancelled */ "onDyteEditCancelled"?: (event: DyteChatComposerUiCustomEvent) => void; /** * Event emitted when message is edited */ "onDyteEditMessage"?: (event: DyteChatComposerUiCustomEvent<{ id: string; message: string; channelId?: string; }>) => void; /** * Event emitted when new message is submitted */ "onDyteNewMessage"?: (event: DyteChatComposerUiCustomEvent) => void; /** * prefill the composer */ "prefill"?: { suggestedReplies?: string[]; editMessage?: TextMessage; replyMessage?: TextMessage; }; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; } /** * A component which renders a chat composer */ interface DyteChatComposerView { /** * Whether user can send file messages */ "canSendFiles"?: boolean; /** * Whether user can send text messages */ "canSendTextMessage"?: boolean; /** * Whether to show emoji picker */ "disableEmojiPicker"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * Placeholder for text input */ "inputTextPlaceholder"?: string; /** * Sets composer to edit mode */ "isEditing"?: boolean; /** * Max length for text input */ "maxLength"?: number; /** * Message to be pre-populated */ "message"?: string; /** * Event emitted when message editing is cancelled */ "onEditCancel"?: (event: DyteChatComposerViewCustomEvent) => void; /** * Event emitted when message is edited */ "onEditMessage"?: (event: DyteChatComposerViewCustomEvent) => void; /** * Event emitted when new message is submitted */ "onNewMessage"?: (event: DyteChatComposerViewCustomEvent) => void; /** * Event emitted when quoted message is dismissed */ "onQuotedMessageDismiss"?: (event: DyteChatComposerViewCustomEvent) => void; /** * Quote message to be displayed */ "quotedMessage"?: string; /** * Rate limits */ "rateLimits"?: { period: number; maxInvocations: number; }; /** * Key for storing message in localStorage */ "storageKey"?: string; /** * Language */ "t"?: DyteI18n1; } interface DyteChatMessage { /** * aligns message to right */ "alignRight"?: boolean; /** * can delete message */ "canDelete"?: boolean; /** * can edit message */ "canEdit"?: boolean; /** * can pin this message */ "canPin"?: boolean; /** * can quote reply this message */ "canReply"?: boolean; /** * Child */ "child"?: HTMLElement; /** * disables controls */ "disableControls"?: boolean; /** * hides avatar */ "hideAvatar"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * is continued */ "isContinued"?: boolean; /** * if sender is self */ "isSelf"?: boolean; /** * is unread */ "isUnread"?: boolean; /** * Whether to left align the chat bubbles */ "leftAlign"?: boolean; /** * message item */ "message"?: Message; /** * Event for when edit is clicked on a message */ "onDelete"?: (event: DyteChatMessageCustomEvent) => void; /** * Event for when edit is clicked on a message */ "onEdit"?: (event: DyteChatMessageCustomEvent) => void; /** * Event for when pin is clicked on a message */ "onPin"?: (event: DyteChatMessageCustomEvent) => void; /** * Event for when reply is clicked on a message */ "onReply"?: (event: DyteChatMessageCustomEvent) => void; /** * sender display picture url */ "senderDisplayPicture"?: string; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n1; } interface DyteChatMessagesUi { /** * Can current user pin/unpin messages */ "canPinMessages"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * Chat Messages */ "messages"?: Chat[]; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteChatMessagesUiCustomEvent) => void; /** * Event emitted when a message is pinned or unpinned */ "onPinMessage"?: (event: DyteChatMessagesUiCustomEvent) => void; /** * Selected group key */ "selectedGroup"?: string; /** * User ID of self user */ "selfUserId"?: string; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; } interface DyteChatMessagesUiPaginated { /** * Icon pack */ "iconPack"?: IconPack; /** * Whether to align chat bubbles to the left */ "leftAlign"?: boolean; /** * Meeting object */ "meeting"?: Meeting; /** * Event emitted when a message is deleted */ "onDeleteMessage"?: (event: DyteChatMessagesUiPaginatedCustomEvent) => void; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteChatMessagesUiPaginatedCustomEvent) => void; /** * Event for editing a message */ "onEditMessageInit"?: (event: DyteChatMessagesUiPaginatedCustomEvent<{ payload: TextMessage; flags: { isReply?: boolean; isEdit?: boolean }; }>) => void; /** * Event emitted when a message is pinned or unpinned */ "onPinMessage"?: (event: DyteChatMessagesUiPaginatedCustomEvent) => void; /** * Selected channel */ "selectedChannel"?: ChatChannel; /** * Selected channel id */ "selectedChannelId"?: string; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } interface DyteChatSearchResults { /** * Channel id */ "channelId"?: string; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Search query */ "query"?: string; /** * Language */ "t"?: DyteI18n1; } interface DyteChatSelectorUi { /** * Participants */ "groups"?: ChatGroup[]; /** * Icon pack */ "iconPack"?: IconPack1; /** * Event emitted when chat scope is changed */ "onDyteChatGroupChanged"?: (event: DyteChatSelectorUiCustomEvent) => void; /** * Selected participant */ "selectedGroupId"?: string; /** * Self User ID */ "selfUserId"?: string; /** * Language */ "t"?: DyteI18n; /** * Unread counts */ "unreadCounts"?: Record; } /** * A button which toggles visibility of chat. * You need to pass the `meeting` object to it to see the unread messages count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'chat' } * ``` */ interface DyteChatToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteChatToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * Shows the time elapsed in a meeting. */ interface DyteClock { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; } /** * A confirmation modal. */ interface DyteConfirmationModal { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteConfirmationModalCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * Controlbar component provides you with various designs as variants. */ interface DyteControlbar { /** * Config */ "config"?: UIConfig1; /** * Whether to render the default UI */ "disableRender"?: boolean; /** * Icon Pack */ "iconPack"?: IconPack1; /** * Meeting */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * States */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: 'solid' | 'boxed'; } /** * A skeleton component used for composing custom controlbar buttons. */ interface DyteControlbarButton { /** * Whether icon requires brand color */ "brandIcon"?: boolean; /** * Whether button is disabled */ "disabled"?: boolean; /** * Icon */ "icon"?: string; /** * Icon pack */ "iconPack"?: IconPack; /** * Loading state Ignores current icon and shows a spinner if true */ "isLoading"?: boolean; /** * Label of button */ "label"?: string; /** * Whether to show warning icon */ "showWarning"?: boolean; /** * Size */ "size"?: Size; /** * Variant */ "variant"?: ControlBarVariant1; } /** * A number picker with increment and decrement buttons. */ interface DyteCounter { /** * Icon pack */ "iconPack"?: IconPack1; /** * Minimum value */ "minValue"?: number; /** * On change event emitter */ "onValueChange"?: (event: DyteCounterCustomEvent) => void; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; /** * Initial value */ "value"?: number; } /** * A troubleshooting component to identify and fix any issues in the meeting. */ interface DyteDebugger { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteDebuggerCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteDebuggerAudio { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } interface DyteDebuggerScreenshare { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } interface DyteDebuggerSystem { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } interface DyteDebuggerToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteDebuggerToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteDebuggerVideo { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; } /** * A dialog component. */ interface DyteDialog { /** * UI Config */ "config"?: UIConfig; /** * Whether Escape key can close the modal */ "disableEscapeKey"?: boolean; /** * Whether to show the close button */ "hideCloseButton"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Event emitted when dialog is closed */ "onDyteDialogClose"?: (event: DyteDialogCustomEvent) => void; /** * Whether a dialog is open or not */ "open"?: boolean; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which handles all dialog elements in a component such as: * - dyte-settings * - dyte-leave-meeting * - dyte-permissions-message * - dyte-image-viewer * - dyte-breakout-rooms-manager * This components depends on the values from `states` object. */ interface DyteDialogManager { /** * UI Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteDialogManagerCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which renders the draft attachment to send */ interface DyteDraftAttachmentView { /** * Attachment to display */ "attachment"?: { type: 'image' | 'file'; file: File; }; /** * Icon pack */ "iconPack"?: IconPack1; /** * Event triggered when the attachment is deleted */ "onDeleteAttachment"?: (event: DyteDraftAttachmentViewCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; } /** * A very simple emoji picker component. */ interface DyteEmojiPicker { /** * Controls whether or not to focus on mount */ "focusWhenOpened"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Event which is emitted when an Emoji is clicked */ "onDyteEmojiClicked"?: (event: DyteEmojiPickerCustomEvent) => void; /** * Close event */ "onPickerClose"?: (event: DyteEmojiPickerCustomEvent) => void; /** * Language */ "t"?: DyteI18n; } interface DyteEmojiPickerButton { /** * Icon pack */ "iconPack"?: IconPack1; /** * Active state indicator */ "isActive"?: boolean; /** * Language */ "t"?: DyteI18n1; } /** * A screen which shows a meeting has ended. */ interface DyteEndedScreen { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Global states */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Global states */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteFileDropzone { /** * Host element on which drop events to attach */ "hostEl"?: HTMLElement; /** * Icon pack */ "iconPack"?: IconPack1; /** * drop event callback */ "onDropCallback"?: (event: DyteFileDropzoneCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; } /** * A component which renders a file message from chat. */ interface DyteFileMessage { /** * Icon pack */ "iconPack"?: IconPack; /** * Whether the message is continued by same user */ "isContinued"?: boolean; /** * Text message object */ "message": FileMessage; /** * Date object of now, to calculate distance between dates */ "now"?: Date; /** * show message in bubble */ "showBubble"?: boolean; /** * Language */ "t"?: DyteI18n; } /** * A component which renders a file message. */ interface DyteFileMessageView { /** * Icon pack */ "iconPack"?: IconPack1; /** * Name of the file */ "name": string; /** * Size of the file */ "size": number; /** * Url of the file */ "url": string; } interface DyteFilePickerButton { /** * File type filter to open file picker with */ "filter"?: string; /** * Icon */ "icon"?: keyof IconPack1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Label for tooltip */ "label"?: string; /** * Event when a file is selected for upload */ "onFileChange"?: (event: DyteFilePickerButtonCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; } /** * A button which toggles full screen mode for any * existing `dyte-meeting` component in the DOM. */ interface DyteFullscreenToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteFullscreenToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Target Element to fullscreen */ "targetElement"?: HTMLElement; /** * Variant */ "variant"?: ControlBarVariant; } /** * The main grid component which abstracts all the grid handling logic and renders it for you. */ interface DyteGrid { /** * The aspect ratio of each participant */ "aspectRatio"?: string; /** * Config object */ "config"?: UIConfig; /** * Gap between participants */ "gap"?: number; /** * Grid size */ "gridSize"?: GridSize; /** * Icon pack */ "iconPack"?: IconPack; /** * Grid Layout */ "layout"?: GridLayout; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteGridCustomEvent) => void; /** * @deprecated */ "overrides"?: any; /** * Size */ "size"?: Size; /** * States */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which allows you to change current page and view mode * of active participants list. This is reflected in the `dyte-grid` component. */ interface DyteGridPagination { /** * Icon Pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size Prop */ "size"?: Size; /** * States */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: GridPaginationVariants; } /** * A component that houses all the header components. */ interface DyteHeader { /** * Config */ "config"?: UIConfig1; /** * Whether to render the default UI */ "disableRender"?: boolean; /** * Icon Pack */ "iconPack"?: IconPack1; /** * Meeting */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * States */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: 'solid' | 'boxed'; } /** * An icon component which accepts an svg string and renders it. */ interface DyteIcon { /** * Icon */ "icon"?: string; /** * Size */ "size"?: Size1; /** * Icon variant */ "variant"?: IconVariant; } /** * A screen that handles the idle state, * i.e; when you are waiting for data about the meeting, specifically the `meeting` object. */ interface DyteIdleScreen { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; } /** * A component which renders an image message from chat. */ interface DyteImageMessage { /** * Icon pack */ "iconPack"?: IconPack; /** * Whether the message is continued by same user */ "isContinued"?: boolean; /** * Text message object */ "message": ImageMessage; /** * Date object of now, to calculate distance between dates */ "now"?: Date; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteImageMessageCustomEvent) => void; /** * show message in bubble */ "showBubble"?: boolean; /** * Language */ "t"?: DyteI18n; } /** * A component which renders an image message. */ interface DyteImageMessageView { /** * Icon pack */ "iconPack"?: IconPack1; /** * preview event */ "onPreview"?: (event: DyteImageMessageViewCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; /** * Url of the image */ "url": string; } /** * A component which shows an image sent via chat. */ interface DyteImageViewer { /** * Icon pack */ "iconPack"?: IconPack; /** * Image message */ "image": ImageMessage; /** * Emitted when viewer should be closed */ "onClose"?: (event: DyteImageViewerCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } interface DyteInformationTooltip { /** * Icon pack */ "iconPack"?: IconPack1; } interface DyteJoinStage { /** * UI Config */ "config"?: UIConfig; /** * Content Config */ "dataConfig"?: ModalDataConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Event which is emitted when user confirms joining stage */ "onDyteJoinStage"?: (event: DyteJoinStageCustomEvent) => void; /** * Event which is emitted when user cancel joining stage */ "onDyteLeaveStage"?: (event: DyteJoinStageCustomEvent) => void; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteJoinStageCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visilibility of the leave confirmation dialog. */ interface DyteLeaveButton { /** * Icon pack */ "iconPack"?: IconPack; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteLeaveButtonCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which allows you to leave a meeting or * end meeting for all, if you have the permission. */ interface DyteLeaveMeeting { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteLeaveMeetingCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteLivestreamIndicator { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n1; } interface DyteLivestreamPlayer { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emit API error events */ "onDyteAPIError"?: (event: DyteLivestreamPlayerCustomEvent<{ trace: string; message: string; }>) => void; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n1; } interface DyteLivestreamToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emit API error events */ "onDyteAPIError"?: (event: DyteLivestreamToggleCustomEvent<{ trace: string; message: string; }>) => void; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteLivestreamToggleCustomEvent) => void; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which loads the logo from your config, or via the `logo-url` attribute. */ interface DyteLogo { /** * Config object */ "config"?: UIConfig; /** * Logo URL */ "logoUrl"?: string; /** * Meeting object */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; } interface DyteMarkdownView { /** * max length of text to render as markdown */ "maxLength"?: number; /** * raw text to render as markdown */ "text"?: string; } /** * A single component which renders an entire meeting UI. * It loads your preset and renders the UI based on it. * With this component, you don't have to handle all the states, * dialogs and other smaller bits of managing the application. */ interface DyteMeeting { /** * Whether to apply the design system on the document root from config */ "applyDesignSystem"?: boolean; /** * UI Config */ "config"?: UIConfig; /** * Grid layout */ "gridLayout"?: GridLayout1; /** * Icon pack */ "iconPack"?: IconPack; /** * Whether participant should leave when this component gets unmounted */ "leaveOnUnmount"?: boolean; /** * Whether to load config from preset */ "loadConfigFromPreset"?: boolean; /** * Meeting object */ "meeting"?: Meeting; /** * Fill type */ "mode"?: MeetingMode; /** * States */ "onDyteStatesUpdate"?: (event: DyteMeetingCustomEvent) => void; /** * Whether to show setup screen or not */ "showSetupScreen"?: boolean; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * Displays the title of the meeting. */ interface DyteMeetingTitle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; } /** * A menu component. */ interface DyteMenu { /** * Icon pack */ "iconPack"?: IconPack; /** * Offset in px */ "offset"?: number; /** * Placement of menu */ "placement"?: Placement; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A menu item component. */ interface DyteMenuItem { /** * Icon pack */ "iconPack"?: IconPack; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A menu list component. */ interface DyteMenuList { /** * Icon pack */ "iconPack"?: IconPack; /** * Language */ "t"?: DyteI18n; } /** * A component which renders list of messages. */ interface DyteMessageListView { /** * Estimated height of an item */ "estimateItemSize"?: number; /** * Icon pack */ "iconPack"?: IconPack1; /** * Function to load more messages. Messages returned from this will be preprended */ "loadMore"?: (lastMessage: Message) => Promise; /** * Messages to render */ "messages": Message[]; /** * Render function of the message */ "renderer": (message: Message, index: number) => HTMLElement; /** * Maximum visible messages */ "visibleItemsCount"?: number; } interface DyteMessageView { /** * List of actions to show in menu */ "actions"?: MessageAction[]; /** * Author display label */ "authorName"?: string; /** * Avatar image url */ "avatarUrl"?: string; /** * Hides author display label */ "hideAuthorName"?: boolean; /** * Hides avatar */ "hideAvatar"?: boolean; /** * Hides metadata (time) */ "hideMetadata"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * action event */ "onAction"?: (event: DyteMessageViewCustomEvent) => void; /** * Time when message was sent */ "time"?: Date; /** * Appearance */ "variant"?: 'plain' | 'bubble'; /** * Render */ "viewType"?: 'incoming' | 'outgoing'; } /** * A button which toggles your microphone. */ interface DyteMicToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteMicToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteMicrophoneSelector { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * variant */ "variant"?: 'full' | 'inline'; } /** * A grid component which handles screenshares, plugins and participants. */ interface DyteMixedGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio"?: string; /** * UI Config */ "config"?: UIConfig; /** * Gap between participant tiles */ "gap"?: number; /** * Grid size */ "gridSize"?: GridSize1; /** * Icon Pack */ "iconPack"?: IconPack; /** * Grid Layout */ "layout"?: GridLayout1; /** * Meeting object */ "meeting"?: Meeting; /** * Participants */ "participants"?: Peer[]; /** * Pinned Participants */ "pinnedParticipants"?: Peer[]; /** * Active Plugins */ "plugins"?: DytePlugin[]; /** * Screenshare Participants */ "screenShareParticipants"?: Peer[]; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visibility of a more menu. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeMoreMenu: boolean; } * ``` */ interface DyteMoreToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteMoreToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteMuteAllButton { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteMuteAllButtonCustomEvent) => void; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteMuteAllConfirmation { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteMuteAllConfirmationCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which shows a participant's name. */ interface DyteNameTag { /** * Icon pack */ "iconPack"?: IconPack; /** * Whether it is used in a screen share view */ "isScreenShare"?: boolean; /** * Meeting object */ "meeting"?: Meeting; /** * Participant object */ "participant": Peer; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Name tag variant */ "variant"?: DyteNameTagVariant; } interface DyteNetworkIndicator { /** * Icon pack */ "iconPack"?: IconPack1; /** * Is for screenshare */ "isScreenShare"?: boolean; /** * Meeting */ "meeting"?: Meeting; /** * Participant or Self */ "participant"?: Peer; /** * Language */ "t"?: DyteI18n1; } /** * A component which shows a notification. * You need to remove the element after you receive the * `dyteNotificationDismiss` event. */ interface DyteNotification { /** * Icon pack */ "iconPack"?: IconPack; /** * Message */ "notification": Notification; /** * Dismiss event */ "onDyteNotificationDismiss"?: (event: DyteNotificationCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A component which handles notifications. * You can configure which notifications you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface DyteNotifications { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A confirmation modal. */ interface DyteOverlayModal { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteOverlayModalCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DytePaginatedList { /** * auto scroll list to bottom */ "autoScroll"?: boolean; /** * Create nodes */ "createNodes"?: (data: unknown[]) => VNode[]; /** * label to show when empty */ "emptyListLabel"?: string; /** * Fetch the data */ "fetchData"?: (timestamp: number, size: number, reversed: boolean) => Promise; /** * Icon pack */ "iconPack"?: IconPack; /** * Page Size */ "pageSize"?: number; /** * Number of pages allowed to be shown */ "pagesAllowed"?: number; /** * Item id */ "selectedItemId"?: string; /** * Language */ "t"?: DyteI18n; } /** * A participant entry component used inside `dyte-participants` which shows data like: * name, picture and media device status. * You can perform privileged actions on the participant too. */ interface DyteParticipant { /** * Config object */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emit dyte notifications */ "onDyteSendNotification"?: (event: DyteParticipantCustomEvent<{ trace: string; message: string; }>) => void; /** * Participant object */ "participant"?: Peer; /** * States */ "states"?: States1; /** * Language */ "t"?: DyteI18n; /** * Show participant summary */ "view"?: ParticipantViewMode; } /** * A component which shows count of total joined participants in a meeting. */ interface DyteParticipantCount { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } interface DyteParticipantSetup { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Whether tile is used for preview */ "isPreview"?: boolean; /** * Position of name tag */ "nameTagPosition"?: | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Participant object */ "participant": Peer; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: 'solid' | 'gradient'; } /** * A component which plays a participants video and allows for placement * of components like `dyte-name-tag`, `dyte-audio-visualizer` or any other component. */ interface DyteParticipantTile { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Whether tile is used for preview */ "isPreview"?: boolean; /** * Meeting object */ "meeting"?: Meeting; /** * Position of name tag */ "nameTagPosition"?: | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Event triggered when tile is loaded */ "onTileLoad"?: (event: DyteParticipantTileCustomEvent<{ participant: Peer; videoElement: HTMLVideoElement }>) => void; /** * Event triggered when tile is unloaded */ "onTileUnload"?: (event: DyteParticipantTileCustomEvent) => void; /** * Participant object */ "participant": Peer; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: 'solid' | 'gradient'; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteParticipants { /** * Config */ "config"?: UIConfig; /** * Default section */ "defaultParticipantsTabId"?: ParticipantsTabId; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteParticipantsCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which plays all the audio from participants and screenshares. */ interface DyteParticipantsAudio { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Callback to execute when the dialog is closed */ "onDialogClose"?: (event: DyteParticipantsAudioCustomEvent) => void; /** * Pass existing audio element */ "preloadedAudioElem"?: HTMLAudioElement; /** * Language */ "t"?: DyteI18n; } /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ interface DyteParticipantsStageList { /** * Config */ "config"?: UIConfig; /** * Hide Stage Participants Count Header */ "hideHeader"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Search */ "search"?: string; /** * Size */ "size"?: Size; /** * Meeting object */ "states"?: States1; /** * Language */ "t"?: DyteI18n; /** * View mode for participants list */ "view"?: ParticipantsViewMode; } interface DyteParticipantsStageQueue { /** * Config */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n1; /** * View mode for participants list */ "view"?: ParticipantsViewMode; } /** * A button which toggles visibility of participants. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'participants' } * ``` */ interface DyteParticipantsToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteParticipantsToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } interface DyteParticipantsViewerList { /** * Config */ "config"?: UIConfig1; /** * Hide Viewer Count Header */ "hideHeader"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Search */ "search"?: string; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n1; /** * View mode for participants list */ "view"?: ParticipantsViewMode; } interface DyteParticipantsWaitingList { /** * Config */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n1; /** * View mode for participants list */ "view"?: ParticipantsViewMode; } /** * A component which shows permission related troubleshooting * information. */ interface DytePermissionsMessage { /** * Icon Pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DytePermissionsMessageCustomEvent) => void; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DytePipToggle { /** * Config */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DytePipToggleCustomEvent) => void; /** * Size */ "size"?: Size1; /** * States object */ "states"?: States1; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which loads a plugin. */ interface DytePluginMain { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting */ "meeting"?: Meeting; /** * Plugin */ "plugin": DytePlugin; /** * Language */ "t"?: DyteI18n; } /** * A component which lists all available plugins from their preset, * and ability to enable or disable plugins. */ interface DytePlugins { /** * Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DytePluginsCustomEvent) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visibility of plugins. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'plugins' } * ``` */ interface DytePluginsToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DytePluginsToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A poll component. * Shows a poll where a user can vote. */ interface DytePoll { /** * Icon pack */ "iconPack"?: IconPack; /** * Event which is emitted when a poll is voted on */ "onDyteVotePoll"?: (event: DytePollCustomEvent<{ id: string; index: number; }>) => void; /** * Permissions Object */ "permissions"?: DytePermissionsPreset; /** * Poll */ "poll": Poll; /** * Self ID */ "self"?: string; /** * Language */ "t"?: DyteI18n; } /** * A component that lets you create a poll. */ interface DytePollForm { /** * Icon pack */ "iconPack"?: IconPack; /** * Event which is emitted when a poll is created */ "onDyteCreatePoll"?: (event: DytePollFormCustomEvent) => void; /** * Language */ "t"?: DyteI18n; } /** * A component which lists all available plugins a user can access with * the ability to enable or disable them as per their permissions. */ interface DytePolls { /** * Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visibility of polls. * You need to pass the `meeting` object to it to see the unread polls count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'polls' } * ``` */ interface DytePollsToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DytePollsToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which indicates the recording status of a meeting. * It will not render anything if no recording is taking place. */ interface DyteRecordingIndicator { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles recording state of a meeting. * Only a privileged user can perform this action, * thus the button will not be visible for participants * who don't have the permission to record a meeting. */ interface DyteRecordingToggle { /** * Disable the button */ "disabled"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emit api error events */ "onDyteAPIError"?: (event: DyteRecordingToggleCustomEvent<{ trace: string; message: string; }>) => void; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A button which toggles your screenshare. */ interface DyteScreenShareToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emit api error events */ "onDyteAPIError"?: (event: DyteScreenShareToggleCustomEvent<{ trace: string; message: string; }>) => void; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteScreenShareToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which plays a participant's screenshared video. * It also allows for placement of other components similar to `dyte-participant-tile`. * This component will not render anything if the participant hasn't start screensharing. */ interface DyteScreenshareView { /** * Hide full screen button */ "hideFullScreenButton"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Position of name tag */ "nameTagPosition"?: | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'top-left' | 'top-right' | 'top-center'; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteScreenshareViewCustomEvent) => void; /** * Emits when video playback happens successfully */ "onScreensharePlay"?: (event: DyteScreenshareViewCustomEvent<{ participant: Peer; screenshareParticipant: Peer; }>) => void; /** * Participant object */ "participant": Peer; /** * Size */ "size"?: Size; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: 'solid' | 'gradient'; } /** * A settings component to see and change your audio/video devices * as well as see your connection quality. */ interface DyteSettings { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteSettingsCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteSettingsAudio { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Event updated state */ "onDyteStateUpdate"?: (event: DyteSettingsAudioCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A button which toggles visibility of settings module. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSettings: boolean; } * ``` */ interface DyteSettingsToggle { /** * Icon pack */ "iconPack"?: IconPack; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteSettingsToggleCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Variant */ "variant"?: ControlBarVariant; } /** * A component which lets to manage your camera devices and your video preferences. * Emits `dyteStateUpdate` event with data for toggling mirroring of self video: * ```ts * { * prefs: { * mirrorVideo: boolean * } * } * ``` */ interface DyteSettingsVideo { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state */ "onDyteStateUpdate"?: (event: DyteSettingsVideoCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A screen shown before joining the meeting, where you can edit your display name, * and media settings. */ interface DyteSetupScreen { /** * Config object */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteSetupScreenCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which handles the sidebar and * you can customize which sections you want, and which section you want as the default. */ interface DyteSidebar { /** * Config */ "config"?: UIConfig; /** * Default section */ "defaultSection"?: DyteSidebarSection; /** * Enabled sections in sidebar */ "enabledSections"?: DyteSidebarTab[]; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteSidebarCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * View type */ "view"?: DyteSidebarView; } interface DyteSidebarUi { /** * Default tab to open */ "currentTab"?: string; /** * Hide Close Action */ "hideCloseAction"?: boolean; /** * Hide Main Header */ "hideHeader"?: boolean; /** * Icon Pack */ "iconPack"?: { people: string; people_checked: string; chat: string; poll: string; participants: string; rocket: string; call_end: string; share: string; mic_on: string; mic_off: string; video_on: string; video_off: string; share_screen_start: string; share_screen_stop: string; share_screen_person: string; clock: string; dismiss: string; send: string; search: string; more_vertical: string; chevron_down: string; chevron_up: string; chevron_left: string; chevron_right: string; settings: string; wifi: string; speaker: string; speaker_off: string; download: string; full_screen_maximize: string; full_screen_minimize: string; copy: string; attach: string; image: string; emoji_multiple: string; image_off: string; disconnected: string; wand: string; recording: string; subtract: string; stop_recording: string; warning: string; pin: string; pin_off: string; spinner: string; breakout_rooms: string; add: string; shuffle: string; edit: string; delete: string; back: string; save: string; web: string; checkmark: string; spotlight: string; join_stage: string; leave_stage: string; pip_off: string; pip_on: string; signal_1: string; signal_2: string; signal_3: string; signal_4: string; signal_5: string; start_livestream: string; stop_livestream: string; viewers: string; debug: string; info: string; devices: string; horizontal_dots: string; ai_sparkle: string; meeting_ai: string; create_channel: string; create_channel_illustration: string; captionsOn: string; captionsOff: string; play: string; pause: string; fastForward: string; minimize: string; maximize: string; }; /** * Tab change event */ "onSidebarClose"?: (event: DyteSidebarUiCustomEvent) => void; /** * Tab change event */ "onTabChange"?: (event: DyteSidebarUiCustomEvent) => void; /** * Language */ "t"?: DyteI18n1; /** * Tabs */ "tabs"?: DyteSidebarTab1[]; /** * View */ "view"?: DyteSidebarView1; } /** * A grid component which renders only the participants in a simple grid. */ interface DyteSimpleGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio"?: string; /** * UI Config */ "config"?: UIConfig; /** * Gap between participant tiles */ "gap"?: number; /** * Icon Pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Participants */ "participants"?: Peer[]; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ interface DyteSpeakerSelector { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * variant */ "variant"?: 'full' | 'inline'; } /** * A component which shows an animating spinner. */ interface DyteSpinner { /** * Icon pack */ "iconPack"?: IconPack; /** * Size */ "size"?: Size1; } /** * A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. * You can customize the layout to a `column` view, by default is is `row`. * - Participants from `pinnedParticipants[]` are rendered inside a larger grid. * - Participants from `participants[]` array are rendered in a smaller grid. */ interface DyteSpotlightGrid { /** * Aspect Ratio of participant tile Format: `width:height` */ "aspectRatio"?: string; /** * UI Config */ "config"?: UIConfig; /** * Gap between participant tiles */ "gap"?: number; /** * Grid size */ "gridSize"?: GridSize1; /** * Icon Pack */ "iconPack"?: IconPack; /** * Grid Layout */ "layout"?: GridLayout1; /** * Meeting object */ "meeting"?: Meeting; /** * Participants */ "participants"?: Peer[]; /** * Pinned Participants */ "pinnedParticipants"?: Peer[]; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteSpotlightIndicator { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Size */ "size"?: Size1; /** * Language */ "t"?: DyteI18n; } /** * A component used as a stage that commonly houses * the `grid` and `sidebar` components. */ interface DyteStage { /** * Icon pack */ "iconPack"?: IconPack; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteStageCustomEvent) => void; /** * Language */ "t"?: DyteI18n; } interface DyteStageToggle { /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting object */ "meeting"?: Meeting; /** * Emits updated state data */ "onDyteStateUpdate"?: (event: DyteStageToggleCustomEvent) => void; /** * Size */ "size"?: Size1; /** * States */ "states"?: States1; /** * Language */ "t"?: DyteI18n1; /** * Variant */ "variant"?: ControlBarVariant; } /** * A switch component which follows Dyte's Design System. */ interface DyteSwitch { /** * Whether the switch is enabled/checked */ "checked"?: boolean; /** * Whether switch is readonly */ "disabled"?: boolean; /** * Icon pack */ "iconPack"?: IconPack; /** * Event when switch value is changed */ "onDyteChange"?: (event: DyteSwitchCustomEvent) => void; /** * Whether switch is readonly */ "readonly"?: boolean; /** * Language */ "t"?: DyteI18n; } interface DyteTabBar { /** * Active tab */ "activeTab"?: Tab; /** * UI Config */ "config"?: UIConfig; /** * Icon Pack */ "iconPack"?: IconPack; /** * Grid Layout */ "layout"?: GridLayout1; /** * Meeting object */ "meeting"?: Meeting; /** * Set active tab */ "onTabChange"?: (event: DyteTabBarCustomEvent) => void; /** * Size */ "size"?: Size; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; /** * Tabs */ "tabs"?: Tab[]; } /** * A component which renders a text composer */ interface DyteTextComposerView { /** * Disable the text input (default = false) */ "disabled"?: boolean; /** * Icon pack */ "iconPack"?: IconPack1; /** * Keydown event handler function */ "keyDownHandler"?: (e: KeyboardEvent) => void; /** * Max length for text input */ "maxLength"?: number; /** * Event emitted when text changes */ "onTextChange"?: (event: DyteTextComposerViewCustomEvent) => void; /** * Placeholder text */ "placeholder"?: string; /** * Boolean to indicate if rate limit is breached */ "rateLimitBreached"?: boolean; /** * Language */ "t"?: DyteI18n1; /** * Default value for text input */ "value"?: string; } /** * A component which renders a text message from chat. */ interface DyteTextMessage { /** * Icon pack */ "iconPack"?: IconPack; /** * Whether the message is continued by same user */ "isContinued"?: boolean; /** * Text message object */ "message": TextMessage; /** * Date object of now, to calculate distance between dates */ "now"?: Date; /** * show message in bubble */ "showBubble"?: boolean; /** * Language */ "t"?: DyteI18n; } /** * A component which renders a text message from chat. */ interface DyteTextMessageView { /** * Renders text as markdown (default = true) */ "isMarkdown"?: boolean; /** * Text message */ "text": string; } /** * Tooltip component which follows Dyte's Design System. */ interface DyteTooltip { /** * Delay before showing the tooltip */ "delay"?: number; /** * Disabled */ "disabled"?: boolean; /** * Tooltip kind */ "kind"?: TooltipKind; /** * Tooltip label */ "label"?: string; /** * Event handler called when the open state of the tooltip changes. */ "onDyteOpenChange"?: (event: DyteTooltipCustomEvent) => void; /** * Open */ "open"?: boolean; /** * Placement of menu */ "placement"?: Placement; /** * Size */ "size"?: Size; /** * Tooltip variant */ "variant"?: TooltipVariant; } /** * A component which shows a transcript. * You need to remove the element after you receive the * `dyteTranscriptDismiss` event. */ interface DyteTranscript { /** * Dismiss event */ "onDyteTranscriptDismiss"?: (event: DyteTranscriptCustomEvent<{ id: string; renderedId: string; }>) => void; /** * Language */ "t"?: DyteI18n; /** * Message */ "transcript": Transcript & { renderedId?: string }; } /** * A component which handles transcripts. * You can configure which transcripts you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ interface DyteTranscripts { /** * Config object */ "config"?: UIConfig; /** * Meeting object */ "meeting"?: Meeting; /** * States object */ "states"?: States; /** * Language */ "t"?: DyteI18n; } interface DyteUiProvider { /** * Config */ "config"?: UIConfig1; /** * Icon pack */ "iconPack"?: IconPack1; /** * Meeting */ "meeting"?: Meeting; /** * Do not render children until meeting is initialized * @default false */ "noRenderUntilMeeting"?: boolean; /** * States event */ "onDyteStatesUpdate"?: (event: DyteUiProviderCustomEvent) => void; /** * Whether to show setup screen or not */ "showSetupScreen"?: boolean; /** * Size */ "size"?: Size1; /** * Language utility */ "t"?: DyteI18n1; } /** * A component which shows count of total joined participants in a meeting. */ interface DyteViewerCount { /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; /** * Viewer count variant */ "variant"?: ViewerCountVariant; } interface DyteVirtualizedParticipantList { /** * Buffer items to render before and after the visible area */ "bufferedItemsCount"?: number; /** * Element to render if list is empty */ "emptyListElement"?: HTMLElement; /** * Height of each item in pixels (assumed fixed) */ "itemHeight"?: number; /** * Items to be virtualized */ "items"?: Peer1[]; /** * Function to render each item */ "renderItem"?: (item: Peer1, index: number) => HTMLElement; } interface DyteWaitingScreen { /** * Config */ "config"?: UIConfig; /** * Icon pack */ "iconPack"?: IconPack; /** * Meeting object */ "meeting"?: Meeting; /** * Language */ "t"?: DyteI18n; } interface IntrinsicElements { "dyte-ai": DyteAi; "dyte-ai-toggle": DyteAiToggle; "dyte-ai-transcriptions": DyteAiTranscriptions; "dyte-audio-grid": DyteAudioGrid; "dyte-audio-tile": DyteAudioTile; "dyte-audio-visualizer": DyteAudioVisualizer; "dyte-avatar": DyteAvatar; "dyte-breakout-room-manager": DyteBreakoutRoomManager; "dyte-breakout-room-participants": DyteBreakoutRoomParticipants; "dyte-breakout-rooms-manager": DyteBreakoutRoomsManager; "dyte-breakout-rooms-toggle": DyteBreakoutRoomsToggle; "dyte-broadcast-message-modal": DyteBroadcastMessageModal; "dyte-button": DyteButton; "dyte-camera-selector": DyteCameraSelector; "dyte-camera-toggle": DyteCameraToggle; "dyte-caption-toggle": DyteCaptionToggle; "dyte-channel-creator": DyteChannelCreator; "dyte-channel-details": DyteChannelDetails; "dyte-channel-header": DyteChannelHeader; "dyte-channel-selector-ui": DyteChannelSelectorUi; "dyte-channel-selector-view": DyteChannelSelectorView; "dyte-chat": DyteChat; "dyte-chat-composer-ui": DyteChatComposerUi; "dyte-chat-composer-view": DyteChatComposerView; "dyte-chat-message": DyteChatMessage; "dyte-chat-messages-ui": DyteChatMessagesUi; "dyte-chat-messages-ui-paginated": DyteChatMessagesUiPaginated; "dyte-chat-search-results": DyteChatSearchResults; "dyte-chat-selector-ui": DyteChatSelectorUi; "dyte-chat-toggle": DyteChatToggle; "dyte-clock": DyteClock; "dyte-confirmation-modal": DyteConfirmationModal; "dyte-controlbar": DyteControlbar; "dyte-controlbar-button": DyteControlbarButton; "dyte-counter": DyteCounter; "dyte-debugger": DyteDebugger; "dyte-debugger-audio": DyteDebuggerAudio; "dyte-debugger-screenshare": DyteDebuggerScreenshare; "dyte-debugger-system": DyteDebuggerSystem; "dyte-debugger-toggle": DyteDebuggerToggle; "dyte-debugger-video": DyteDebuggerVideo; "dyte-dialog": DyteDialog; "dyte-dialog-manager": DyteDialogManager; "dyte-draft-attachment-view": DyteDraftAttachmentView; "dyte-emoji-picker": DyteEmojiPicker; "dyte-emoji-picker-button": DyteEmojiPickerButton; "dyte-ended-screen": DyteEndedScreen; "dyte-file-dropzone": DyteFileDropzone; "dyte-file-message": DyteFileMessage; "dyte-file-message-view": DyteFileMessageView; "dyte-file-picker-button": DyteFilePickerButton; "dyte-fullscreen-toggle": DyteFullscreenToggle; "dyte-grid": DyteGrid; "dyte-grid-pagination": DyteGridPagination; "dyte-header": DyteHeader; "dyte-icon": DyteIcon; "dyte-idle-screen": DyteIdleScreen; "dyte-image-message": DyteImageMessage; "dyte-image-message-view": DyteImageMessageView; "dyte-image-viewer": DyteImageViewer; "dyte-information-tooltip": DyteInformationTooltip; "dyte-join-stage": DyteJoinStage; "dyte-leave-button": DyteLeaveButton; "dyte-leave-meeting": DyteLeaveMeeting; "dyte-livestream-indicator": DyteLivestreamIndicator; "dyte-livestream-player": DyteLivestreamPlayer; "dyte-livestream-toggle": DyteLivestreamToggle; "dyte-logo": DyteLogo; "dyte-markdown-view": DyteMarkdownView; "dyte-meeting": DyteMeeting; "dyte-meeting-title": DyteMeetingTitle; "dyte-menu": DyteMenu; "dyte-menu-item": DyteMenuItem; "dyte-menu-list": DyteMenuList; "dyte-message-list-view": DyteMessageListView; "dyte-message-view": DyteMessageView; "dyte-mic-toggle": DyteMicToggle; "dyte-microphone-selector": DyteMicrophoneSelector; "dyte-mixed-grid": DyteMixedGrid; "dyte-more-toggle": DyteMoreToggle; "dyte-mute-all-button": DyteMuteAllButton; "dyte-mute-all-confirmation": DyteMuteAllConfirmation; "dyte-name-tag": DyteNameTag; "dyte-network-indicator": DyteNetworkIndicator; "dyte-notification": DyteNotification; "dyte-notifications": DyteNotifications; "dyte-overlay-modal": DyteOverlayModal; "dyte-paginated-list": DytePaginatedList; "dyte-participant": DyteParticipant; "dyte-participant-count": DyteParticipantCount; "dyte-participant-setup": DyteParticipantSetup; "dyte-participant-tile": DyteParticipantTile; "dyte-participants": DyteParticipants; "dyte-participants-audio": DyteParticipantsAudio; "dyte-participants-stage-list": DyteParticipantsStageList; "dyte-participants-stage-queue": DyteParticipantsStageQueue; "dyte-participants-toggle": DyteParticipantsToggle; "dyte-participants-viewer-list": DyteParticipantsViewerList; "dyte-participants-waiting-list": DyteParticipantsWaitingList; "dyte-permissions-message": DytePermissionsMessage; "dyte-pip-toggle": DytePipToggle; "dyte-plugin-main": DytePluginMain; "dyte-plugins": DytePlugins; "dyte-plugins-toggle": DytePluginsToggle; "dyte-poll": DytePoll; "dyte-poll-form": DytePollForm; "dyte-polls": DytePolls; "dyte-polls-toggle": DytePollsToggle; "dyte-recording-indicator": DyteRecordingIndicator; "dyte-recording-toggle": DyteRecordingToggle; "dyte-screen-share-toggle": DyteScreenShareToggle; "dyte-screenshare-view": DyteScreenshareView; "dyte-settings": DyteSettings; "dyte-settings-audio": DyteSettingsAudio; "dyte-settings-toggle": DyteSettingsToggle; "dyte-settings-video": DyteSettingsVideo; "dyte-setup-screen": DyteSetupScreen; "dyte-sidebar": DyteSidebar; "dyte-sidebar-ui": DyteSidebarUi; "dyte-simple-grid": DyteSimpleGrid; "dyte-speaker-selector": DyteSpeakerSelector; "dyte-spinner": DyteSpinner; "dyte-spotlight-grid": DyteSpotlightGrid; "dyte-spotlight-indicator": DyteSpotlightIndicator; "dyte-stage": DyteStage; "dyte-stage-toggle": DyteStageToggle; "dyte-switch": DyteSwitch; "dyte-tab-bar": DyteTabBar; "dyte-text-composer-view": DyteTextComposerView; "dyte-text-message": DyteTextMessage; "dyte-text-message-view": DyteTextMessageView; "dyte-tooltip": DyteTooltip; "dyte-transcript": DyteTranscript; "dyte-transcripts": DyteTranscripts; "dyte-ui-provider": DyteUiProvider; "dyte-viewer-count": DyteViewerCount; "dyte-virtualized-participant-list": DyteVirtualizedParticipantList; "dyte-waiting-screen": DyteWaitingScreen; } } export { LocalJSX as JSX }; declare module "@stencil/core" { export namespace JSX { interface IntrinsicElements { "dyte-ai": LocalJSX.DyteAi & JSXBase.HTMLAttributes; "dyte-ai-toggle": LocalJSX.DyteAiToggle & JSXBase.HTMLAttributes; "dyte-ai-transcriptions": LocalJSX.DyteAiTranscriptions & JSXBase.HTMLAttributes; "dyte-audio-grid": LocalJSX.DyteAudioGrid & JSXBase.HTMLAttributes; "dyte-audio-tile": LocalJSX.DyteAudioTile & JSXBase.HTMLAttributes; /** * An audio visualizer component which visualizes a participants audio. * Commonly used inside `dyte-name-tag`. */ "dyte-audio-visualizer": LocalJSX.DyteAudioVisualizer & JSXBase.HTMLAttributes; /** * Avatar component which renders a participant's image or their initials. */ "dyte-avatar": LocalJSX.DyteAvatar & JSXBase.HTMLAttributes; "dyte-breakout-room-manager": LocalJSX.DyteBreakoutRoomManager & JSXBase.HTMLAttributes; /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ "dyte-breakout-room-participants": LocalJSX.DyteBreakoutRoomParticipants & JSXBase.HTMLAttributes; "dyte-breakout-rooms-manager": LocalJSX.DyteBreakoutRoomsManager & JSXBase.HTMLAttributes; /** * A button which toggles visibility of breakout rooms. * You need to pass the `meeting` object to it. */ "dyte-breakout-rooms-toggle": LocalJSX.DyteBreakoutRoomsToggle & JSXBase.HTMLAttributes; "dyte-broadcast-message-modal": LocalJSX.DyteBroadcastMessageModal & JSXBase.HTMLAttributes; /** * A button that follows Dyte's Design System. */ "dyte-button": LocalJSX.DyteButton & JSXBase.HTMLAttributes; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ "dyte-camera-selector": LocalJSX.DyteCameraSelector & JSXBase.HTMLAttributes; /** * A button which toggles your camera. */ "dyte-camera-toggle": LocalJSX.DyteCameraToggle & JSXBase.HTMLAttributes; "dyte-caption-toggle": LocalJSX.DyteCaptionToggle & JSXBase.HTMLAttributes; "dyte-channel-creator": LocalJSX.DyteChannelCreator & JSXBase.HTMLAttributes; "dyte-channel-details": LocalJSX.DyteChannelDetails & JSXBase.HTMLAttributes; "dyte-channel-header": LocalJSX.DyteChannelHeader & JSXBase.HTMLAttributes; "dyte-channel-selector-ui": LocalJSX.DyteChannelSelectorUi & JSXBase.HTMLAttributes; "dyte-channel-selector-view": LocalJSX.DyteChannelSelectorView & JSXBase.HTMLAttributes; /** * Fully featured chat component with image & file upload, emoji picker and auto-scroll. */ "dyte-chat": LocalJSX.DyteChat & JSXBase.HTMLAttributes; "dyte-chat-composer-ui": LocalJSX.DyteChatComposerUi & JSXBase.HTMLAttributes; /** * A component which renders a chat composer */ "dyte-chat-composer-view": LocalJSX.DyteChatComposerView & JSXBase.HTMLAttributes; "dyte-chat-message": LocalJSX.DyteChatMessage & JSXBase.HTMLAttributes; "dyte-chat-messages-ui": LocalJSX.DyteChatMessagesUi & JSXBase.HTMLAttributes; "dyte-chat-messages-ui-paginated": LocalJSX.DyteChatMessagesUiPaginated & JSXBase.HTMLAttributes; "dyte-chat-search-results": LocalJSX.DyteChatSearchResults & JSXBase.HTMLAttributes; "dyte-chat-selector-ui": LocalJSX.DyteChatSelectorUi & JSXBase.HTMLAttributes; /** * A button which toggles visibility of chat. * You need to pass the `meeting` object to it to see the unread messages count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'chat' } * ``` */ "dyte-chat-toggle": LocalJSX.DyteChatToggle & JSXBase.HTMLAttributes; /** * Shows the time elapsed in a meeting. */ "dyte-clock": LocalJSX.DyteClock & JSXBase.HTMLAttributes; /** * A confirmation modal. */ "dyte-confirmation-modal": LocalJSX.DyteConfirmationModal & JSXBase.HTMLAttributes; /** * Controlbar component provides you with various designs as variants. */ "dyte-controlbar": LocalJSX.DyteControlbar & JSXBase.HTMLAttributes; /** * A skeleton component used for composing custom controlbar buttons. */ "dyte-controlbar-button": LocalJSX.DyteControlbarButton & JSXBase.HTMLAttributes; /** * A number picker with increment and decrement buttons. */ "dyte-counter": LocalJSX.DyteCounter & JSXBase.HTMLAttributes; /** * A troubleshooting component to identify and fix any issues in the meeting. */ "dyte-debugger": LocalJSX.DyteDebugger & JSXBase.HTMLAttributes; "dyte-debugger-audio": LocalJSX.DyteDebuggerAudio & JSXBase.HTMLAttributes; "dyte-debugger-screenshare": LocalJSX.DyteDebuggerScreenshare & JSXBase.HTMLAttributes; "dyte-debugger-system": LocalJSX.DyteDebuggerSystem & JSXBase.HTMLAttributes; "dyte-debugger-toggle": LocalJSX.DyteDebuggerToggle & JSXBase.HTMLAttributes; "dyte-debugger-video": LocalJSX.DyteDebuggerVideo & JSXBase.HTMLAttributes; /** * A dialog component. */ "dyte-dialog": LocalJSX.DyteDialog & JSXBase.HTMLAttributes; /** * A component which handles all dialog elements in a component such as: * - dyte-settings * - dyte-leave-meeting * - dyte-permissions-message * - dyte-image-viewer * - dyte-breakout-rooms-manager * This components depends on the values from `states` object. */ "dyte-dialog-manager": LocalJSX.DyteDialogManager & JSXBase.HTMLAttributes; /** * A component which renders the draft attachment to send */ "dyte-draft-attachment-view": LocalJSX.DyteDraftAttachmentView & JSXBase.HTMLAttributes; /** * A very simple emoji picker component. */ "dyte-emoji-picker": LocalJSX.DyteEmojiPicker & JSXBase.HTMLAttributes; "dyte-emoji-picker-button": LocalJSX.DyteEmojiPickerButton & JSXBase.HTMLAttributes; /** * A screen which shows a meeting has ended. */ "dyte-ended-screen": LocalJSX.DyteEndedScreen & JSXBase.HTMLAttributes; "dyte-file-dropzone": LocalJSX.DyteFileDropzone & JSXBase.HTMLAttributes; /** * A component which renders a file message from chat. */ "dyte-file-message": LocalJSX.DyteFileMessage & JSXBase.HTMLAttributes; /** * A component which renders a file message. */ "dyte-file-message-view": LocalJSX.DyteFileMessageView & JSXBase.HTMLAttributes; "dyte-file-picker-button": LocalJSX.DyteFilePickerButton & JSXBase.HTMLAttributes; /** * A button which toggles full screen mode for any * existing `dyte-meeting` component in the DOM. */ "dyte-fullscreen-toggle": LocalJSX.DyteFullscreenToggle & JSXBase.HTMLAttributes; /** * The main grid component which abstracts all the grid handling logic and renders it for you. */ "dyte-grid": LocalJSX.DyteGrid & JSXBase.HTMLAttributes; /** * A component which allows you to change current page and view mode * of active participants list. This is reflected in the `dyte-grid` component. */ "dyte-grid-pagination": LocalJSX.DyteGridPagination & JSXBase.HTMLAttributes; /** * A component that houses all the header components. */ "dyte-header": LocalJSX.DyteHeader & JSXBase.HTMLAttributes; /** * An icon component which accepts an svg string and renders it. */ "dyte-icon": LocalJSX.DyteIcon & JSXBase.HTMLAttributes; /** * A screen that handles the idle state, * i.e; when you are waiting for data about the meeting, specifically the `meeting` object. */ "dyte-idle-screen": LocalJSX.DyteIdleScreen & JSXBase.HTMLAttributes; /** * A component which renders an image message from chat. */ "dyte-image-message": LocalJSX.DyteImageMessage & JSXBase.HTMLAttributes; /** * A component which renders an image message. */ "dyte-image-message-view": LocalJSX.DyteImageMessageView & JSXBase.HTMLAttributes; /** * A component which shows an image sent via chat. */ "dyte-image-viewer": LocalJSX.DyteImageViewer & JSXBase.HTMLAttributes; "dyte-information-tooltip": LocalJSX.DyteInformationTooltip & JSXBase.HTMLAttributes; "dyte-join-stage": LocalJSX.DyteJoinStage & JSXBase.HTMLAttributes; /** * A button which toggles visilibility of the leave confirmation dialog. */ "dyte-leave-button": LocalJSX.DyteLeaveButton & JSXBase.HTMLAttributes; /** * A component which allows you to leave a meeting or * end meeting for all, if you have the permission. */ "dyte-leave-meeting": LocalJSX.DyteLeaveMeeting & JSXBase.HTMLAttributes; "dyte-livestream-indicator": LocalJSX.DyteLivestreamIndicator & JSXBase.HTMLAttributes; "dyte-livestream-player": LocalJSX.DyteLivestreamPlayer & JSXBase.HTMLAttributes; "dyte-livestream-toggle": LocalJSX.DyteLivestreamToggle & JSXBase.HTMLAttributes; /** * A component which loads the logo from your config, or via the `logo-url` attribute. */ "dyte-logo": LocalJSX.DyteLogo & JSXBase.HTMLAttributes; "dyte-markdown-view": LocalJSX.DyteMarkdownView & JSXBase.HTMLAttributes; /** * A single component which renders an entire meeting UI. * It loads your preset and renders the UI based on it. * With this component, you don't have to handle all the states, * dialogs and other smaller bits of managing the application. */ "dyte-meeting": LocalJSX.DyteMeeting & JSXBase.HTMLAttributes; /** * Displays the title of the meeting. */ "dyte-meeting-title": LocalJSX.DyteMeetingTitle & JSXBase.HTMLAttributes; /** * A menu component. */ "dyte-menu": LocalJSX.DyteMenu & JSXBase.HTMLAttributes; /** * A menu item component. */ "dyte-menu-item": LocalJSX.DyteMenuItem & JSXBase.HTMLAttributes; /** * A menu list component. */ "dyte-menu-list": LocalJSX.DyteMenuList & JSXBase.HTMLAttributes; /** * A component which renders list of messages. */ "dyte-message-list-view": LocalJSX.DyteMessageListView & JSXBase.HTMLAttributes; "dyte-message-view": LocalJSX.DyteMessageView & JSXBase.HTMLAttributes; /** * A button which toggles your microphone. */ "dyte-mic-toggle": LocalJSX.DyteMicToggle & JSXBase.HTMLAttributes; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ "dyte-microphone-selector": LocalJSX.DyteMicrophoneSelector & JSXBase.HTMLAttributes; /** * A grid component which handles screenshares, plugins and participants. */ "dyte-mixed-grid": LocalJSX.DyteMixedGrid & JSXBase.HTMLAttributes; /** * A button which toggles visibility of a more menu. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeMoreMenu: boolean; } * ``` */ "dyte-more-toggle": LocalJSX.DyteMoreToggle & JSXBase.HTMLAttributes; "dyte-mute-all-button": LocalJSX.DyteMuteAllButton & JSXBase.HTMLAttributes; "dyte-mute-all-confirmation": LocalJSX.DyteMuteAllConfirmation & JSXBase.HTMLAttributes; /** * A component which shows a participant's name. */ "dyte-name-tag": LocalJSX.DyteNameTag & JSXBase.HTMLAttributes; "dyte-network-indicator": LocalJSX.DyteNetworkIndicator & JSXBase.HTMLAttributes; /** * A component which shows a notification. * You need to remove the element after you receive the * `dyteNotificationDismiss` event. */ "dyte-notification": LocalJSX.DyteNotification & JSXBase.HTMLAttributes; /** * A component which handles notifications. * You can configure which notifications you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ "dyte-notifications": LocalJSX.DyteNotifications & JSXBase.HTMLAttributes; /** * A confirmation modal. */ "dyte-overlay-modal": LocalJSX.DyteOverlayModal & JSXBase.HTMLAttributes; "dyte-paginated-list": LocalJSX.DytePaginatedList & JSXBase.HTMLAttributes; /** * A participant entry component used inside `dyte-participants` which shows data like: * name, picture and media device status. * You can perform privileged actions on the participant too. */ "dyte-participant": LocalJSX.DyteParticipant & JSXBase.HTMLAttributes; /** * A component which shows count of total joined participants in a meeting. */ "dyte-participant-count": LocalJSX.DyteParticipantCount & JSXBase.HTMLAttributes; "dyte-participant-setup": LocalJSX.DyteParticipantSetup & JSXBase.HTMLAttributes; /** * A component which plays a participants video and allows for placement * of components like `dyte-name-tag`, `dyte-audio-visualizer` or any other component. */ "dyte-participant-tile": LocalJSX.DyteParticipantTile & JSXBase.HTMLAttributes; /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ "dyte-participants": LocalJSX.DyteParticipants & JSXBase.HTMLAttributes; /** * A component which plays all the audio from participants and screenshares. */ "dyte-participants-audio": LocalJSX.DyteParticipantsAudio & JSXBase.HTMLAttributes; /** * A component which lists all participants, with ability to * run privileged actions on each participant according to your permissions. */ "dyte-participants-stage-list": LocalJSX.DyteParticipantsStageList & JSXBase.HTMLAttributes; "dyte-participants-stage-queue": LocalJSX.DyteParticipantsStageQueue & JSXBase.HTMLAttributes; /** * A button which toggles visibility of participants. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'participants' } * ``` */ "dyte-participants-toggle": LocalJSX.DyteParticipantsToggle & JSXBase.HTMLAttributes; "dyte-participants-viewer-list": LocalJSX.DyteParticipantsViewerList & JSXBase.HTMLAttributes; "dyte-participants-waiting-list": LocalJSX.DyteParticipantsWaitingList & JSXBase.HTMLAttributes; /** * A component which shows permission related troubleshooting * information. */ "dyte-permissions-message": LocalJSX.DytePermissionsMessage & JSXBase.HTMLAttributes; "dyte-pip-toggle": LocalJSX.DytePipToggle & JSXBase.HTMLAttributes; /** * A component which loads a plugin. */ "dyte-plugin-main": LocalJSX.DytePluginMain & JSXBase.HTMLAttributes; /** * A component which lists all available plugins from their preset, * and ability to enable or disable plugins. */ "dyte-plugins": LocalJSX.DytePlugins & JSXBase.HTMLAttributes; /** * A button which toggles visibility of plugins. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'plugins' } * ``` */ "dyte-plugins-toggle": LocalJSX.DytePluginsToggle & JSXBase.HTMLAttributes; /** * A poll component. * Shows a poll where a user can vote. */ "dyte-poll": LocalJSX.DytePoll & JSXBase.HTMLAttributes; /** * A component that lets you create a poll. */ "dyte-poll-form": LocalJSX.DytePollForm & JSXBase.HTMLAttributes; /** * A component which lists all available plugins a user can access with * the ability to enable or disable them as per their permissions. */ "dyte-polls": LocalJSX.DytePolls & JSXBase.HTMLAttributes; /** * A button which toggles visibility of polls. * You need to pass the `meeting` object to it to see the unread polls count badge. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSidebar: boolean; sidebar: 'polls' } * ``` */ "dyte-polls-toggle": LocalJSX.DytePollsToggle & JSXBase.HTMLAttributes; /** * A component which indicates the recording status of a meeting. * It will not render anything if no recording is taking place. */ "dyte-recording-indicator": LocalJSX.DyteRecordingIndicator & JSXBase.HTMLAttributes; /** * A button which toggles recording state of a meeting. * Only a privileged user can perform this action, * thus the button will not be visible for participants * who don't have the permission to record a meeting. */ "dyte-recording-toggle": LocalJSX.DyteRecordingToggle & JSXBase.HTMLAttributes; /** * A button which toggles your screenshare. */ "dyte-screen-share-toggle": LocalJSX.DyteScreenShareToggle & JSXBase.HTMLAttributes; /** * A component which plays a participant's screenshared video. * It also allows for placement of other components similar to `dyte-participant-tile`. * This component will not render anything if the participant hasn't start screensharing. */ "dyte-screenshare-view": LocalJSX.DyteScreenshareView & JSXBase.HTMLAttributes; /** * A settings component to see and change your audio/video devices * as well as see your connection quality. */ "dyte-settings": LocalJSX.DyteSettings & JSXBase.HTMLAttributes; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ "dyte-settings-audio": LocalJSX.DyteSettingsAudio & JSXBase.HTMLAttributes; /** * A button which toggles visibility of settings module. * When clicked it emits a `dyteStateUpdate` event with the data: * ```ts * { activeSettings: boolean; } * ``` */ "dyte-settings-toggle": LocalJSX.DyteSettingsToggle & JSXBase.HTMLAttributes; /** * A component which lets to manage your camera devices and your video preferences. * Emits `dyteStateUpdate` event with data for toggling mirroring of self video: * ```ts * { * prefs: { * mirrorVideo: boolean * } * } * ``` */ "dyte-settings-video": LocalJSX.DyteSettingsVideo & JSXBase.HTMLAttributes; /** * A screen shown before joining the meeting, where you can edit your display name, * and media settings. */ "dyte-setup-screen": LocalJSX.DyteSetupScreen & JSXBase.HTMLAttributes; /** * A component which handles the sidebar and * you can customize which sections you want, and which section you want as the default. */ "dyte-sidebar": LocalJSX.DyteSidebar & JSXBase.HTMLAttributes; "dyte-sidebar-ui": LocalJSX.DyteSidebarUi & JSXBase.HTMLAttributes; /** * A grid component which renders only the participants in a simple grid. */ "dyte-simple-grid": LocalJSX.DyteSimpleGrid & JSXBase.HTMLAttributes; /** * A component which lets to manage your audio devices and audio preferences. * Emits `dyteStateUpdate` event with data for muting notification sounds: * ```ts * { * prefs: { * muteNotificationSounds: boolean * } * } * ``` */ "dyte-speaker-selector": LocalJSX.DyteSpeakerSelector & JSXBase.HTMLAttributes; /** * A component which shows an animating spinner. */ "dyte-spinner": LocalJSX.DyteSpinner & JSXBase.HTMLAttributes; /** * A grid component that renders two lists of participants: `pinnedParticipants` and `participants`. * You can customize the layout to a `column` view, by default is is `row`. * - Participants from `pinnedParticipants[]` are rendered inside a larger grid. * - Participants from `participants[]` array are rendered in a smaller grid. */ "dyte-spotlight-grid": LocalJSX.DyteSpotlightGrid & JSXBase.HTMLAttributes; "dyte-spotlight-indicator": LocalJSX.DyteSpotlightIndicator & JSXBase.HTMLAttributes; /** * A component used as a stage that commonly houses * the `grid` and `sidebar` components. */ "dyte-stage": LocalJSX.DyteStage & JSXBase.HTMLAttributes; "dyte-stage-toggle": LocalJSX.DyteStageToggle & JSXBase.HTMLAttributes; /** * A switch component which follows Dyte's Design System. */ "dyte-switch": LocalJSX.DyteSwitch & JSXBase.HTMLAttributes; "dyte-tab-bar": LocalJSX.DyteTabBar & JSXBase.HTMLAttributes; /** * A component which renders a text composer */ "dyte-text-composer-view": LocalJSX.DyteTextComposerView & JSXBase.HTMLAttributes; /** * A component which renders a text message from chat. */ "dyte-text-message": LocalJSX.DyteTextMessage & JSXBase.HTMLAttributes; /** * A component which renders a text message from chat. */ "dyte-text-message-view": LocalJSX.DyteTextMessageView & JSXBase.HTMLAttributes; /** * Tooltip component which follows Dyte's Design System. */ "dyte-tooltip": LocalJSX.DyteTooltip & JSXBase.HTMLAttributes; /** * A component which shows a transcript. * You need to remove the element after you receive the * `dyteTranscriptDismiss` event. */ "dyte-transcript": LocalJSX.DyteTranscript & JSXBase.HTMLAttributes; /** * A component which handles transcripts. * You can configure which transcripts you want to see and which ones you want to hear. * There are also certain limits which you can set as well. */ "dyte-transcripts": LocalJSX.DyteTranscripts & JSXBase.HTMLAttributes; "dyte-ui-provider": LocalJSX.DyteUiProvider & JSXBase.HTMLAttributes; /** * A component which shows count of total joined participants in a meeting. */ "dyte-viewer-count": LocalJSX.DyteViewerCount & JSXBase.HTMLAttributes; "dyte-virtualized-participant-list": LocalJSX.DyteVirtualizedParticipantList & JSXBase.HTMLAttributes; "dyte-waiting-screen": LocalJSX.DyteWaitingScreen & JSXBase.HTMLAttributes; } } }