import * as _microsoft_fast_element from '@microsoft/fast-element'; import { FASTElement, ElementViewTemplate } from '@microsoft/fast-element'; import { AnchorTarget, StartEndOptions, ValuesOf, CSSDesignToken, StartEnd } from '@microsoft/fast-foundation'; import { PositioningShorthandValues } from '@horizon-msft/web-components'; /** * # CitationReference * * When slotted in to the Citation component it displays on hover of the citation. The citation reference is a more simplified version of the reference that is only meant to appear inside of a citation popover. * * usage: * ```html * * 1 * * 1 * * * * ``` */ declare class CitationReference extends FASTElement { /** * ## index * * corresponds to the index number of the parent citation */ index?: number; /** * ## indexReference * * A reference to the slotted index element */ indexReference: Array; indexReferenceChanged(): void; /** * citationHref * * href endpoint for citation */ citationHref?: string; /** * ## metadataTextOne * * text metadata content for citation. appears above reference quote */ metadataTextOne: Array; /** * ## metadataTextOne * change handler */ metadataTextOneChanged(): void; /** * ## hasMetadataTextOne * true when text is present */ hasMetadataTextOne: boolean; /** * ## metadataTextTwo * * text metadata content for citation. appears above reference quote */ metadataTextTwo: Array; /** * ## metadataTextTwo * change handler */ metadataTextTwoChanged(): void; /** * ## hasMetadataTextTwo * true when text is present */ hasMetadataTextTwo: boolean; /** * ## metadataTextThree * * text metadata content for citation. appears above reference quote */ metadataTextThree: Array; /** * ## metadataTextThree * change handler */ metadataTextThreeChanged(): void; /** * ## hasMetadataTextThree * true when text is present */ hasMetadataTextThree: boolean; target: AnchorTarget; /** * # handleKeyboardNavigation * * Because Fast Tooltip seems to block interactive elements embedded inside, when this citation is embedded in the popover-polyfill regular keyboard events on the anchor element do not work - probably because WCAG guidelines maintain that tooltips do not recieve focus. It is recommended to use an html dialog for interactive modal situations. * * [WCAG tooltip reference](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/) * [html dialog reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog) */ handleKeyboardNavigation(event: KeyboardEvent): void; connectedCallback(): void; disconnectedCallback(): void; } /** * Placeholder prop name from workspace generator, replace with actual props. */ declare const CitationReferenceAttributeNames: { readonly citationHref: "citation-href"; readonly citationIndex: "citation-index"; readonly metadataText: "metadata-text"; }; /** * Placeholder prop options from workspace generator, replace or remove as needed. */ type CitationReferenceOptions = StartEndOptions & {}; declare const template$7: ElementViewTemplate; declare const styles$7: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const CitationReferenceDefinition: _microsoft_fast_element.FASTElementDefinition; /** * # Citation * * Citation gives context to references. It's an actionable (clickable) element that can reveal a popover with information pertaining to the reference. * * ```html * * ${x => x.index} * * ``` */ declare class Citation extends FASTElement { constructor(); /** * ## index * * Index to display in ui for citation number */ index?: number; /** * ## indexReference * * a reference to the slotted index element */ indexReference?: Array; indexReferenceChanged(): void; /** * ## size * * Controls the size of the popover, popover padding, and size of beak. */ size?: "small" | "medium" | "large"; /** * ## href * * For the link to the citation reference */ href?: string; /** * ## popoverPlacement * * Sets the location of the popover when user hovers over citation */ popoverPosition: PositioningShorthandValues; /** * # popoverContent * * The content which is rendered inside of the popover */ popoverContent: HTMLElement[]; /** * # popoverContentChanged * * Sets hasPopover to true when there is content. When there is no popover content the citation should not allow popover to open. */ popoverContentChanged(): void; /** * # hasPopover * * Controls whether the popover is openable/showable */ hasPopover: boolean; /** * # show * * shows popover when set to true */ show?: boolean; target: AnchorTarget; popoverReference: any | undefined; popoverReferenceChanged(): void; private mouseInPopover; /** * # handleHoverEnter * * handler for popover showing * @param event */ handleHoverEnter(): void; /** * # handleHoverLeave * * handler for popover hiding * @param event */ handleHoverLeave: () => void; /** * # handleKeyboardEvents */ handleKeyEvents(event: KeyboardEvent): void; /** * # handlePopoverEnter */ handlePopoverEnter: () => void; /** * # handlePopoverLeave */ handlePopoverLeave: () => void; /** * # addMouseOverEventListeners */ addMouseOverEventListeners: () => void; /** * # removeMouseOverEventListeners */ removeMouseOverEventListeners(): void; addKeyboardEventListeners(): void; removeKeyboardEventListeners(): void; connectedCallback(): void; disconnectedCallback(): void; } /** * * @public * @remarks * HTML Element: \ */ declare const definition$3: _microsoft_fast_element.FASTElementDefinition; declare const styles$6: _microsoft_fast_element.ElementStyles; declare const template$6: ElementViewTemplate; /** * # Reference * * Fluent Reference. A collapsable frame designed to compose information related to content source and citation. * * * ```html * * 1 * Title * Word * Private * Last Edited Yesterday by Monica Kane * "...Summary of reference" * * * ``` */ declare class Reference extends FASTElement { /** * ## actions * * the elements slotted into the actions slot * * @type HTMLElement[] */ actions: HTMLElement[]; /** * ## actionsChanged * * when elements are slotted into the actions section they are looped through and queried for fluent-menus and fluent-buttons. These elements are added to the actionsButtons array which is then merged into the _focusableElements array. * @type () => void */ actionsChanged(): void; /** * # actionsButtons * Actionable elements pulled from the actions slot. * * @type HTMLElement[] */ actionsButtons: Array; /** * ## index * The index of the citation. Supplied as a slotted dom element and renders to the screen as the citation. * * @type number | undefined */ index?: number; /** * ## indexReference * * A reference to the slotted index element */ indexReference: Array; indexReferenceChanged(): void; /** * ## metadataTextOne * * text metadata content for citation. appears above reference quote */ metadataTextOne: Array; /** * ## metadataTextOne * change handler */ metadataTextOneChanged(): void; /** * ## hasMetadataTextOne * true when text is present */ hasMetadataTextOne: boolean; /** * ## metadataTextTwo * * text metadata content for citation. appears above reference quote */ metadataTextTwo: Array; /** * ## metadataTextTwo * change handler */ metadataTextTwoChanged(): void; /** * ## hasMetadataTextTwo * true when text is present */ hasMetadataTextTwo: boolean; /** * ## metadataTextThree * * text metadata content for citation. appears above reference quote */ metadataTextThree: Array; /** * ## metadataTextThree * change handler */ metadataTextThreeChanged(): void; /** * ## hasMetadataTextThree * true when text is present */ hasMetadataTextThree: boolean; /** * ## citationHref * href endpoint for citation * * @type string | undefined */ citationHref?: string; /** * ## loading * Used to set loading state of the reference * * @type boolean */ loading: boolean; /** * ## expanded * true when expanded * * @type boolean | undefined */ expanded?: boolean; /** * ## emitDismissEvent * Called when the reference is dismissed. * * @type () => void */ emitDismissEvent(): void; /** * ## _focusableELements * Elements where focus becomes trapped for keyboard navigation. * * @type HTMLElement[] */ private _focusableElements; /** * ##_activeIndex * * the active index of the focused element * * @type number | undefined */ private _activeIndex; _activeIndexChanged(): void; /** * ## activeIndex * * getter for _activeIndex */ get activeIndex(): number | undefined; /** * ## activeIndex * * setter for _activeIndex. Sets value to undefined when null or undefined. Index value is capped to the length of focusable elements. */ set activeIndex(newIndex: number | undefined); /** * ## handleIndexUp * * Handles index up for keyboard navigation. Increases with right arrow press. */ handleIndexUp(): void; /** * ## handleIndexDown * * Handles index down for keyboard navigation. Decreases with left arrow press. */ handleIndexDown(): void; /** * ## handleKeyEvents * * Handles key events for control * @param event */ handleKeyEvents(event: KeyboardEvent): void; /** * ## trapFocus * * A keyboard event handler that sets the focusable elements to the _focusableElements array and routes keys to the corresponding action. * * @param event */ trapFocus(event: KeyboardEvent): void; handleBlur(event: Event): void; /** * ## gatherFocusableElements * * Queries the shadowRoot for 'fluent-button', 'fabric-citation' and 'fluent-menu-button'. These are the expected controls to be slotted into the reference. */ gatherFocusableElements(): void; connectedCallback(): void; disconnectedCallback(): void; } declare const ReferenceAttributeNames: { readonly citationHref: "citation-href"; readonly citationIndex: "citation-index"; readonly metadataText: "metadata-text"; }; type ReferenceAttributeNames = ValuesOf; type ReferenceOptions = StartEndOptions & {}; interface ReferenceDismissEvent { target: Reference; } declare const template$5: ElementViewTemplate; declare const styles$5: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const ReferenceDefinition: _microsoft_fast_element.FASTElementDefinition; /** * # ReferenceList * * Composes a list of fluent references into a styled list with keyboard navigation. Meant to be composed inside of a ReferenceGroup component. * * ```html * * * * * * * ``` */ declare class ReferenceList extends FASTElement { /** * ## references * Encapsulated list of references * @type Array */ references: Array; /** * ## _activeIndex * The index of the selected element in the list * @type number */ private _activeIndex?; /** * ## _activeIndexChanged * * Checks for an active index and focuses the reference at that index. */ _activeIndexChanged(): void; /** * ## activeIndex * * getter for the active index of the focused reference element in the list */ get activeIndex(): number | undefined; /** * ## activeIndex * * setter for the active index of the focused reference element in the list */ set activeIndex(newIndex: number | undefined); /** * ## handleIndexUp * * Indexes up and shifts focus to the next element. Called when the keyboard up arrows is presed. */ handleIndexUp(): void; /** * ## handleIndexDown * * Indexes down and shifts focus to the previous element. Called when the keyboard down arrow is presed. */ handleIndexDown(): void; /** * ## trapFocus * * A keyboard event handler that sets the focusable elements to the references array and routes keys to the corresponding action. * * @param event */ trapFocus(event: KeyboardEvent): void; connectedCallback(): void; disconnectedCallback(): void; } declare const template$4: ElementViewTemplate; declare const styles$4: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const ReferenceListDefinition: _microsoft_fast_element.FASTElementDefinition; /** * # ReferenceGroup * * A collapsable element that composes a Reference List of Fluent References. It adds keyboard navigation and also removes tab focusing from the child references. * * ```html * * * * * * * ``` */ declare class ReferenceGroup extends FASTElement { /** * ## referenceList * Encapsulated list of references. * * @type Array */ referenceList: Array; /** * # expanded * Set to true to expand the group * * @type boolean */ expanded: boolean; connectedCallback(): void; } declare const template$3: ElementViewTemplate; declare const styles$3: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const definition$2: _microsoft_fast_element.FASTElementDefinition; declare class SidecarShellHeader extends FASTElement { /** * public dismissSidecar * emits the "dismissSidecarShell" event when called */ dismissSidecar(): void; /** * public detachSidecar * emits the "detachSidecarShell" event when called */ detachSidecar(): void; connectedCallback(): void; } declare const template$2: ElementViewTemplate; declare const styles$2: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const definition$1: _microsoft_fast_element.FASTElementDefinition; declare class SidecarShell extends FASTElement { /** * The open attribute. Opens the sidecar from the right side of the viewport. */ open: boolean; /** * openChanged * * Emits events for open and dismiss on changes */ openChanged(): void; /** * The detach attribute. Detaches the sidecar from the page. Behavior and styling currently undefined. */ detach: boolean; /** * internal */ header: HTMLElement[]; /** * internal */ content: HTMLElement[]; /** * internal */ footer: HTMLElement[]; /** * internal */ footerOptional: HTMLElement[]; /** * toggleSidecar * a public method to open and close the sidecar */ toggleSidecar(): void; /** * dismissSidecar * a public method to close the sidecar */ dismisSidecar(): void; /** * openSidecar * a public method to open the sidecar */ openSidecar(): void; /** * detachSidecar * a public method to detach the sidecar from the side of the screen. Behavior for detached mode is currently undefined. */ detachSidecar(): void; /** * attachSidecar * a public method to re-attach the sidecar to the side of the screen. Behavior for detached mode is currently undefined. */ attachSidecar(): void; connectedCallback(): void; } declare const template$1: ElementViewTemplate; declare const styles$1: _microsoft_fast_element.ElementStyles; /** * * @public * @remarks * HTML Element: \ */ declare const SidecarshellDefinition: _microsoft_fast_element.FASTElementDefinition; /** * # Textarea * * The Prompt Text Area control is designed for AI chat features and allows the user to enter and edit multiple lines of text. * */ declare class Textarea extends FASTElement { svgColor: CSSDesignToken; svgColorDisabled: CSSDesignToken; /** * ## errorMessage * * For overriding the default error message. */ errorMessage: string; /** * ## disabled * * Puts the send button into a disabled state, where user input can still be inputed, but cannot be sent. */ disabled: boolean; /** * ## maxLength * * sets the max allowed character count of the text area */ maxLength: number; /** * ## placeholder * * sets a placeholder text to queue the user for typing */ placeholder?: string; /** * 33 showCharacterCount * * @public boolean */ hideCharacterCount: boolean; /** * ## name * * DOM name attribute */ name?: string; /** * ## hasMaxCharLimit * * When set to true when the max character limit has been reached */ hasMaxCharLimit?: boolean; /** * ## _characterCount * * @private * * the number of characters currently inputed into the text input */ private _characterCount; get characterCount(): number; /** * ## hasButtons * * True when buttons are slotted into the buttons slot */ hasButtons?: boolean; /** * ## buttons * * An array of html button elements slotted into the buttons slot * */ buttons: HTMLElement[]; buttonsChanged: () => void; /** * ## hasMessages * * true when messages are slotted in to the messages slot */ hasMessages?: boolean; /** * ## messages * * An array of html elements that have been slotted into the messges area. * * When messages are slotted in, the hasMessages boolean is set to true and class names are added in the html template. */ messages: HTMLElement[]; messagesChanged(): void; /** * ## hasAttachments * * True when attachments have been slotted into the attachments slot */ hasAttachments?: boolean; /** * ## attachments * * An array of html elements slotted into the attachments area */ attachments: HTMLElement[]; attachmentsChanged(): void; /** * ## inputRef * * A reference to the fluent text input. */ inputRef: HTMLTextAreaElement | null | undefined; /** * ## value * * The value of the current user input. */ _value: string | undefined; get value(): string | undefined; set value(newValue: string | undefined); /** * ## updateControlUiValues * * Sets the values for characterCount and value. Sets the data-value attribute to the textarea dom element. Resizes the textarea height to match the scroll height of the text area. * * @param value - string * @private */ private updateControlUiValues; /** * ## handleTextareaKeydown * * @param inputRef to FluentTextField which is actually FASTTextField * */ private handleTextareaInput; /** * ## handleTextareaPaste * * handles paste events for the textarea control that's nested inside the fabric-textarea */ private handleTextareaPaste; /** * ## handleTextareaKeydown * * Handles keydown events for the textarea control that's nested inside the fabric-textarea * * @param event - KeyboardEvent */ private handleTextareaKeydown; /** * ## isTextareaKeyPressed * * True when a key is pressed in the textarea control that's nested inside the fabric-textarea */ private isTextareaKeyPressed?; /** * ## handleTextareaEvents * * adds event handlers for the DOM textarea in the shadowRoot */ private handleTextareaEvents; /** * ## removeTextareaEvents */ private removeTextareaEvents; /** * ## handleTextareaHeight * * Resizes the textarea to accomodate more rows of text. Sets the height to the scroll height * * Textarea has limitations with fitting content through css, so it's required to calculate the size with javascript */ private handleTextareaHeight; /** * ## emitSubmitEvent * * Emits a TextareaSubmitEvent */ private emitSubmitEvent; /** * * ## handleSubmitButton * * called wben the submit button is pressed * * @param event */ private handleSubmitButton; /** * ## handleSubmitButtonEvent * * Adds an event listener to the submit / send button. Responds to click events. */ private handleSubmitButtonEvent; /** * ## removeSubmitButtonEvents * * removes event listeners for button events on submit button */ private removeSubmitButtonEvents; /** * ## handleKeydown * * handles keydown events for the root textarea element */ private handleKeydown; /** * ## handleKeyEvents * * A keydown event handler for the root fabric-textarea control. * * @private */ private handleKeyEvents; /** * ## removeKeyEvents * * Removes keydown events for the root fluent textarea element */ private removeKeyEvents; /** * ## andHasMaxCharLimit * * if hasMaxCharLimit is true set it to false */ private andHasMaxCharLimit; /** * ## handleClickEvents * * A click event handler for the root fabric-textarea control. * * @private */ private handleClickEvents; /** * ## removeClickEvents * * removes click events for the root fluent textarea element. */ private removeClickEvents; connectedCallback(): void; disconnectedCallback(): void; } declare const TextareaAttributeNames: { readonly hideCharacterCount: "hide-character-count"; readonly maxLength: "max-length"; readonly errorMessage: "error-message"; }; /** * DefaultMaxCharacters * * the default for maximum number of characters allowed inside of the text area. */ declare const DefaultMaxCharacters = 500; /** DefaultErrorMessage */ declare const DefaultErrorMessage = "You\u2019ve exceed the maximum number of words we can process. Try reducing your text."; type TextareaOptions = StartEndOptions & {}; /** * TextareaSubmitEventName * * The event name emitted when submit events occur */ declare const TextareaSubmitEventName = "textareaSubmit"; /** * TextareaSubmitEvent * * The data associated with a textarea submit event */ interface TextareaSubmitEventData { value: string; target: Textarea; } declare const template: ElementViewTemplate