@ni/nimble-components 20.1.10 → 20.1.12

package/dist/esm/all-components.d.ts

@@ -39,6 +39,7 @@ import './tab';
 import './tab-panel';
 import './table';
 import './table-column/anchor';
+import './table-column/date-text';
 import './table-column/enum-text';
 import './table-column/text';
 import './tabs';

package/dist/esm/all-components.js

@@ -39,6 +39,7 @@ import './tab';
 import './tab-panel';
 import './table';
 import './table-column/anchor';
+import './table-column/date-text';
 import './table-column/enum-text';
 import './table-column/text';
 import './tabs';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,wBAAwB,CAAC;AAChC,OAAO,eAAe,CAAC;AACvB,OAAO,gBAAgB,CAAC;AACxB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,uBAAuB,CAAC;AAC/B,OAAO,0BAA0B,CAAC;AAClC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/rich-text-editor/index.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { ToggleButton } from '../toggle-button';
 declare global {
     interface HTMLElementTagNameMap {
         'nimble-rich-text-editor': RichTextEditor;
@@ -8,5 +9,88 @@ declare global {
  * A nimble styled rich text editor
  */
 export declare class RichTextEditor extends FoundationElement {
+    /**
+     * @internal
+     */
+    boldButton: ToggleButton;
+    /**
+     * @internal
+     */
+    italicsButton: ToggleButton;
+    /**
+     * @internal
+     */
+    bulletListButton: ToggleButton;
+    /**
+     * @internal
+     */
+    numberedListButton: ToggleButton;
+    /**
+     * @internal
+     */
+    editor: HTMLDivElement;
+    private tiptapEditor;
+    /**
+     * @internal
+     */
+    connectedCallback(): void;
+    /**
+     * @internal
+     */
+    disconnectedCallback(): void;
+    /**
+     * Toggle the bold mark and focus back to the editor
+     * @internal
+     */
+    boldButtonClick(): void;
+    /**
+     * Toggle the bold mark and focus back to the editor
+     * @internal
+     */
+    boldButtonKeyDown(event: KeyboardEvent): boolean;
+    /**
+     * Toggle the italics mark and focus back to the editor
+     * @internal
+     */
+    italicsButtonClick(): void;
+    /**
+     * Toggle the italics mark and focus back to the editor
+     * @internal
+     */
+    italicsButtonKeyDown(event: KeyboardEvent): boolean;
+    /**
+     * Toggle the unordered list node and focus back to the editor
+     * @internal
+     */
+    bulletListButtonClick(): void;
+    /**
+     * Toggle the unordered list node and focus back to the editor
+     * @internal
+     */
+    bulletListButtonKeyDown(event: KeyboardEvent): boolean;
+    /**
+     * Toggle the ordered list node and focus back to the editor
+     * @internal
+     */
+    numberedListButtonClick(): void;
+    /**
+     * Toggle the ordered list node and focus back to the editor
+     * @internal
+     */
+    numberedListButtonKeyDown(event: KeyboardEvent): boolean;
+    /**
+     * @internal
+     */
+    stopEventPropagation(event: Event): boolean;
+    private initializeEditor;
+    /**
+     * Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to
+     * various actions such as mouse events, keyboard events, changes in the editor content etc,.
+     * https://tiptap.dev/api/events#transaction
+     */
+    private bindEditorTransactionEvent;
+    private unbindEditorTransactionEvent;
+    private updateEditorButtonsState;
+    private keyActivatesButton;
 }
 export declare const richTextEditorTag: string;

package/dist/esm/rich-text-editor/index.js

@@ -1,11 +1,181 @@
+import { __decorate } from "tslib";
+import { observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { keyEnter, keySpace } from '@microsoft/fast-web-utilities';
+import { Editor } from '@tiptap/core';
+import Bold from '@tiptap/extension-bold';
+import BulletList from '@tiptap/extension-bullet-list';
+import Document from '@tiptap/extension-document';
+import History from '@tiptap/extension-history';
+import Italic from '@tiptap/extension-italic';
+import ListItem from '@tiptap/extension-list-item';
+import OrderedList from '@tiptap/extension-ordered-list';
+import Paragraph from '@tiptap/extension-paragraph';
+import Text from '@tiptap/extension-text';
 import { template } from './template';
 import { styles } from './styles';
 /**
  * A nimble styled rich text editor
  */
 export class RichTextEditor extends FoundationElement {
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.initializeEditor();
+        this.bindEditorTransactionEvent();
+    }
+    /**
+     * @internal
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.unbindEditorTransactionEvent();
+    }
+    /**
+     * Toggle the bold mark and focus back to the editor
+     * @internal
+     */
+    boldButtonClick() {
+        this.tiptapEditor.chain().focus().toggleBold().run();
+    }
+    /**
+     * Toggle the bold mark and focus back to the editor
+     * @internal
+     */
+    boldButtonKeyDown(event) {
+        if (this.keyActivatesButton(event)) {
+            this.tiptapEditor.chain().focus().toggleBold().run();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Toggle the italics mark and focus back to the editor
+     * @internal
+     */
+    italicsButtonClick() {
+        this.tiptapEditor.chain().focus().toggleItalic().run();
+    }
+    /**
+     * Toggle the italics mark and focus back to the editor
+     * @internal
+     */
+    italicsButtonKeyDown(event) {
+        if (this.keyActivatesButton(event)) {
+            this.tiptapEditor.chain().focus().toggleItalic().run();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Toggle the unordered list node and focus back to the editor
+     * @internal
+     */
+    bulletListButtonClick() {
+        this.tiptapEditor.chain().focus().toggleBulletList().run();
+    }
+    /**
+     * Toggle the unordered list node and focus back to the editor
+     * @internal
+     */
+    bulletListButtonKeyDown(event) {
+        if (this.keyActivatesButton(event)) {
+            this.tiptapEditor.chain().focus().toggleBulletList().run();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * Toggle the ordered list node and focus back to the editor
+     * @internal
+     */
+    numberedListButtonClick() {
+        this.tiptapEditor.chain().focus().toggleOrderedList().run();
+    }
+    /**
+     * Toggle the ordered list node and focus back to the editor
+     * @internal
+     */
+    numberedListButtonKeyDown(event) {
+        if (this.keyActivatesButton(event)) {
+            this.tiptapEditor.chain().focus().toggleOrderedList().run();
+            return false;
+        }
+        return true;
+    }
+    /**
+     * @internal
+     */
+    stopEventPropagation(event) {
+        // Don't bubble the 'change' event from the toggle button because
+        // all the formatting button has its own 'toggle' event through 'click' and 'keydown'.
+        event.stopPropagation();
+        return false;
+    }
+    initializeEditor() {
+        /**
+         * For more information on the extensions for the supported formatting options, refer to the links below.
+         * Tiptap marks: https://tiptap.dev/api/marks
+         * Tiptap nodes: https://tiptap.dev/api/nodes
+         */
+        this.tiptapEditor = new Editor({
+            element: this.editor,
+            extensions: [
+                Document,
+                Paragraph,
+                Text,
+                BulletList,
+                OrderedList,
+                ListItem,
+                Bold,
+                Italic,
+                History
+            ]
+        });
+    }
+    /**
+     * Binding the "transaction" event to the editor allows continuous monitoring the events and updating the button state in response to
+     * various actions such as mouse events, keyboard events, changes in the editor content etc,.
+     * https://tiptap.dev/api/events#transaction
+     */
+    bindEditorTransactionEvent() {
+        this.tiptapEditor.on('transaction', () => {
+            this.updateEditorButtonsState();
+        });
+    }
+    unbindEditorTransactionEvent() {
+        this.tiptapEditor.off('transaction');
+    }
+    updateEditorButtonsState() {
+        this.boldButton.checked = this.tiptapEditor.isActive('bold');
+        this.italicsButton.checked = this.tiptapEditor.isActive('italic');
+        this.bulletListButton.checked = this.tiptapEditor.isActive('bulletList');
+        this.numberedListButton.checked = this.tiptapEditor.isActive('orderedList');
+    }
+    keyActivatesButton(event) {
+        switch (event.key) {
+            case keySpace:
+            case keyEnter:
+                return true;
+            default:
+                return false;
+        }
+    }
 }
+__decorate([
+    observable
+], RichTextEditor.prototype, "boldButton", void 0);
+__decorate([
+    observable
+], RichTextEditor.prototype, "italicsButton", void 0);
+__decorate([
+    observable
+], RichTextEditor.prototype, "bulletListButton", void 0);
+__decorate([
+    observable
+], RichTextEditor.prototype, "numberedListButton", void 0);
 const nimbleRichTextEditor = RichTextEditor.compose({
     baseName: 'rich-text-editor',
     template,

package/dist/esm/rich-text-editor/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rich-text-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAQlC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,iBAAiB;CAAG;AAExD,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC;IAChD,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/rich-text-editor/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/rich-text-editor/styles.js

@@ -1,12 +1,152 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { bodyFont, bodyFontColor } from '../theme-provider/design-tokens';
+import { bodyFont, bodyFontColor, borderHoverColor, borderRgbPartialColor, borderWidth, smallDelay, standardPadding } from '../theme-provider/design-tokens';
 export const styles = css `
-    ${display('flex')}
+    ${display('inline-flex')}
 
     :host {
         font: ${bodyFont};
+        outline: none;
         color: ${bodyFontColor};
+        flex-direction: column;
+        --ni-private-rich-text-editor-hover-indicator-width: calc(
+            ${borderWidth} + 1px
+        );
+        --ni-private-rich-text-editor-footer-section-height: 40px;
+        ${
+/** Minimum width is added to accommodate all the possible buttons in the toolbar and to support the mobile width. */ ''}
+        min-width: 360px;
+    }
+
+    .container {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        height: 100%;
+        border: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
+    }
+
+    .container::after {
+        display: block;
+        content: ' ';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        left: 50%;
+        transform: translate(-50%, 50%);
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-rich-text-editor-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
+    }
+
+    .container:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    @media (prefers-reduced-motion) {
+        .container::after {
+            transition-duration: 0s;
+        }
+    }
+
+    :host(:hover) .container::after {
+        width: 100%;
+    }
+
+    .editor {
+        border: ${borderWidth} solid transparent;
+        border-radius: 0px;
+        height: calc(
+            100% - var(--ni-private-rich-text-editor-footer-section-height)
+        );
+        overflow: auto;
+    }
+
+    .ProseMirror {
+        ${
+/**
+ * Min height represents the one line space for the initial view and max height is referred from the visual design.
+ * However, max height will be `fit-content` when the `fit-to-content` attribute for the editor component is implemented.
+ */ ''}
+        min-height: 32px;
+        max-height: 132px;
+        height: 100%;
+        border: ${borderWidth} solid transparent;
+        border-radius: 0px;
+        background-color: transparent;
+        font: inherit;
+        padding: 8px;
+        box-sizing: border-box;
+        position: relative;
+        color: inherit;
+    }
+
+    ${
+/**
+ * Below are the styles from prosemirror-view as the Prose mirror expects the "white-space" to be set. The recommendation is to load the style from the below package.
+ * However, the other classes used in the below file like ".ProseMirror-selectednode", ".ProseMirror-hideselection" were not used anywhere in the ".Prosemirror" content editable div in the DOM. So added only the necessary styles below.
+ *
+ * https://github.com/ProseMirror/prosemirror-view/blob/db2223a88b540a8f381fc2720198342e29a60566/style/prosemirror.css#L5C1-L12C2
+ */ ''}
+    .ProseMirror {
+        word-wrap: break-word;
+        white-space: pre-wrap;
+        -webkit-font-variant-ligatures: none;
+        font-variant-ligatures: none;
+        font-feature-settings: 'liga' 0;
+    }
+
+    .ProseMirror pre {
+        white-space: pre-wrap;
+    }
+
+    .ProseMirror li {
+        position: relative;
+    }
+
+    ${ /** End of Prose Mirror defined styles from prosemirror-view */''}
+
+    .ProseMirror-focused {
+        outline: none;
+    }
+
+    .ProseMirror > :first-child {
+        margin-block-start: 0;
+    }
+
+    .ProseMirror > :last-child {
+        margin-block-end: 0;
+    }
+
+    li > p {
+        margin-block: 0;
+    }
+
+    .footer-section {
+        display: flex;
+        justify-content: space-between;
+        border: ${borderWidth} solid transparent;
+        border-top-color: rgba(${borderRgbPartialColor}, 0.1);
+        height: var(--ni-private-rich-text-editor-footer-section-height);
+        overflow: hidden;
+    }
+
+    nimble-toolbar::part(positioning-region) {
+        background: transparent;
+        padding-right: 8px;
+    }
+
+    nimble-toolbar::part(start) {
+        gap: 8px;
+    }
+
+    .footer-actions {
+        display: flex;
+        justify-content: flex-end;
+        margin-inline-end: ${standardPadding};
+        gap: ${standardPadding};
+        place-items: center;
     }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/rich-text-editor/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,iCAAiC,CAAC;AAE1E,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,MAAM,CAAC;;;gBAGL,QAAQ;iBACP,aAAa;;CAE7B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/rich-text-editor/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,eAAe,EAClB,MAAM,iCAAiC,CAAC;AAEzC,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,aAAa,CAAC;;;gBAGZ,QAAQ;;iBAEP,aAAa;;;cAGhB,WAAW;;;UAGf;AACE,qHAAqH,CAAC,EAC1H;;;;;;;;;kBASU,WAAW,eAAe,qBAAqB;;;;;;;4BAOrC,WAAW;;;;;yBAKd,gBAAgB;;4BAEb,UAAU;;;;+BAIP,gBAAgB;;;;;;;;;;;;;;kBAc7B,WAAW;;;;;;;;;UASnB;AACE;;;GAGG,CAAC,EACR;;;;kBAIU,WAAW;;;;;;;;;;MAUvB;AACE;;;;;GAKG,CAAC,EACR;;;;;;;;;;;;;;;;;MAiBE,CAAA,+DAAgE,EAAE;;;;;;;;;;;;;;;;;;;;;kBAqBtD,WAAW;iCACI,qBAAqB;;;;;;;;;;;;;;;;;6BAiBzB,eAAe;eAC7B,eAAe;;;CAG7B,CAAC"}

package/dist/esm/rich-text-editor/template.js

@@ -1,5 +1,80 @@
-import { html } from '@microsoft/fast-element';
+import { html, ref } from '@microsoft/fast-element';
+import { toolbarTag } from '../toolbar';
+import { toggleButtonTag } from '../toggle-button';
+import { iconBoldBTag } from '../icons/bold-b';
+import { iconItalicITag } from '../icons/italic-i';
+import { iconListTag } from '../icons/list';
+import { iconNumberListTag } from '../icons/number-list';
+// prettier-ignore
 export const template = html `
-    <template> Rich Text Editor here. </template>
+    <template>
+        <div class="container">
+            <section
+                ${ref('editor')}
+                class="editor"
+                role="textbox"
+                aria-multiline="true">
+            </section>
+            <section class="footer-section" part="footer-section">
+                <${toolbarTag}>
+                    <${toggleButtonTag}
+                        ${ref('boldButton')}
+                        appearance="ghost"
+                        content-hidden
+                        slot="start"
+                        title="Bold"
+                        @click=${x => x.boldButtonClick()}
+                        @change=${(x, c) => x.stopEventPropagation(c.event)}
+                        @keydown=${(x, c) => x.boldButtonKeyDown(c.event)}
+                    >
+                        Bold
+                        <${iconBoldBTag} slot="start"></${iconBoldBTag}>
+                    </${toggleButtonTag}>
+                    <${toggleButtonTag}
+                        ${ref('italicsButton')}
+                        appearance="ghost"
+                        content-hidden
+                        slot="start"
+                        title="Italics"
+                        @click=${x => x.italicsButtonClick()}
+                        @change=${(x, c) => x.stopEventPropagation(c.event)}
+                        @keydown=${(x, c) => x.italicsButtonKeyDown(c.event)}
+                    >
+                        Italics
+                        <${iconItalicITag} slot="start"></${iconItalicITag}>
+                    </${toggleButtonTag}>
+                    <${toggleButtonTag}
+                        ${ref('bulletListButton')}
+                        appearance="ghost"
+                        content-hidden
+                        slot="start"
+                        title="Bullet List"
+                        @click=${x => x.bulletListButtonClick()}
+                        @change=${(x, c) => x.stopEventPropagation(c.event)}
+                        @keydown=${(x, c) => x.bulletListButtonKeyDown(c.event)}
+                    >
+                        Bullet List
+                        <${iconListTag} slot="start"></${iconListTag}>
+                    </${toggleButtonTag}>
+                    <${toggleButtonTag}
+                        ${ref('numberedListButton')}
+                        appearance="ghost"
+                        content-hidden
+                        slot="start"
+                        title="Numbered List"
+                        @click=${x => x.numberedListButtonClick()}
+                        @change=${(x, c) => x.stopEventPropagation(c.event)}
+                        @keydown=${(x, c) => x.numberedListButtonKeyDown(c.event)}
+                    >
+                        Numbered List
+                        <${iconNumberListTag} slot="start"></${iconNumberListTag}>
+                    </${toggleButtonTag}>
+                </${toolbarTag}>
+                <span class="footer-actions" part="footer-actions">
+                    <slot name="footer-actions"></slot>
+                </span>
+            </section>
+        </div>
+    </template>
 `;
 //# sourceMappingURL=template.js.map

package/dist/esm/rich-text-editor/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-editor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAG/C,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;CAE3C,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/rich-text-editor/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAEpD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEzD,kBAAkB;AAClB,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAgB;;;;kBAI1B,GAAG,CAAC,QAAQ,CAAC;;;;;;mBAMZ,UAAU;uBACN,eAAe;0BACZ,GAAG,CAAC,YAAY,CAAC;;;;;iCAKV,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE;kCACvB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAG/D,YAAY,mBAAmB,YAAY;wBAC9C,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,eAAe,CAAC;;;;;iCAKb,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,kBAAkB,EAAE;kCAC1B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGlE,cAAc,mBAAmB,cAAc;wBAClD,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,kBAAkB,CAAC;;;;;iCAKhB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,qBAAqB,EAAE;kCAC7B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGrE,WAAW,mBAAmB,WAAW;wBAC5C,eAAe;uBAChB,eAAe;0BACZ,GAAG,CAAC,oBAAoB,CAAC;;;;;iCAKlB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,uBAAuB,EAAE;kCAC/B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,KAAK,CAAC;mCACxC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,yBAAyB,CAAC,CAAC,CAAC,KAAsB,CAAC;;;2BAGvE,iBAAiB,mBAAmB,iBAAiB;wBACxD,eAAe;oBACnB,UAAU;;;;;;;CAO7B,CAAC"}

package/dist/esm/rich-text-editor/testing/rich-text-editor.pageobject.d.ts

@@ -0,0 +1,47 @@
+import type { RichTextEditor } from '..';
+/**
+ * Page object for the `nimble-rich-text-editor` component.
+ */
+export declare class RichTextEditorPageObject {
+    private readonly richTextEditorElement;
+    constructor(richTextEditorElement: RichTextEditor);
+    editorSectionHasChildNodes(): boolean;
+    getEditorSectionFirstElementChildClassName(): string;
+    clickEditorShortcutKeys(shortcutKey: string, isShiftKey: boolean): Promise<void>;
+    pressEnterKeyInEditor(): Promise<void>;
+    pressTabKeyInEditor(): Promise<void>;
+    pressShiftTabKeysInEditor(): Promise<void>;
+    /**
+     * To click a formatting button in the footer section, pass its position value as an index (starting from '0')
+     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     */
+    clickFooterButton(buttonIndex: number): Promise<void>;
+    /**
+     * To retrieve the checked state of the button, provide its position value as an index (starting from '0')
+     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     */
+    getButtonCheckedState(buttonIndex: number): boolean;
+    /**
+     * To retrieve the tab index of the button, provide its position value as an index (starting from '0')
+     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     */
+    getButtonTabIndex(buttonIndex: number): number;
+    /**
+     * To trigger a space key press for the button, provide its position value as an index (starting from '0')
+     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     */
+    spaceKeyActivatesButton(buttonIndex: number): void;
+    /**
+     * To trigger a enter key press for the button, provide its position value as an index (starting from '0')
+     * @param buttonIndex can be imported from an enum for each button using the `ButtonIndex`.
+     */
+    enterKeyActivatesButton(buttonIndex: number): void;
+    setEditorTextContent(value: string): Promise<void>;
+    getEditorFirstChildTagName(): string;
+    getEditorFirstChildTextContent(): string;
+    getEditorTagNames(): string[];
+    getEditorLeafContents(): string[];
+    private getEditorSection;
+    private getTiptapEditor;
+    private getFormattingButton;
+}