@api-client/ui 0.5.7 → 0.5.9

package/src/elements/mention-textarea/ui-mention-textarea.ts

@@ -0,0 +1,18 @@
+import type { CSSResultOrNative } from 'lit'
+import { customElement } from 'lit/decorators.js'
+import Element from './internals/MentionTextArea.js'
+import styles from './internals/MentionTextArea.styles.js'
+
+@customElement('mention-textarea')
+export class MentionTextAreaElement extends Element {
+  static override styles: CSSResultOrNative[] = [styles]
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'mention-textarea': MentionTextAreaElement
+  }
+}
+
+export default MentionTextAreaElement
+export type { MentionSuggestion, MentionInsertEvent, MentionRemoveEvent } from './internals/MentionTextArea.js'

package/src/md/chip/internals/Chip.styles.ts

@@ -14,6 +14,8 @@ export default css`
     letter-spacing: var(--md-sys-typescale-label-large-tracking);
     line-height: var(--md-sys-typescale-label-large-height);
 
+    white-space: normal;
+
     --md-ripple-hover-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-focus-state-layer-color: var(--md-sys-color-on-surface);
     --md-ripple-pressed-state-layer-color: var(--md-sys-color-primary);

package/test/elements/http/CertificateAdd.test.ts

@@ -202,7 +202,6 @@ describe.skip('elements', () => {
             const event = e as CustomEvent<{
               path: string
               options: FileReadOptions
-              // eslint-disable-next-line no-restricted-globals
               result: Promise<string | ArrayBuffer | Buffer>
             }>
             readOptions = event.detail.options
@@ -252,7 +251,6 @@ describe.skip('elements', () => {
             const event = e as CustomEvent<{
               path: string
               options: FileReadOptions
-              // eslint-disable-next-line no-restricted-globals
               result: Promise<string | ArrayBuffer | Buffer>
             }>
             readOptions = event.detail.options
@@ -314,7 +312,6 @@ describe.skip('elements', () => {
             const event = e as CustomEvent<{
               path: string
               options: FileReadOptions
-              // eslint-disable-next-line no-restricted-globals
               result: Promise<string | ArrayBuffer | Buffer>
             }>
             readOptions = event.detail.options

package/test/elements/mention-textarea/MentionTextArea.basic.test.ts

@@ -0,0 +1,114 @@
+import { assert, fixture, html, nextFrame } from '@open-wc/testing'
+import '../../../src/elements/mention-textarea/ui-mention-textarea.js'
+
+type MentionTextAreaElement =
+  import('../../../src/elements/mention-textarea/ui-mention-textarea.js').MentionTextAreaElement
+
+describe('MentionTextArea - Basic Tests', () => {
+  async function basicFixture(): Promise<MentionTextAreaElement> {
+    return fixture(html`<mention-textarea></mention-textarea>`)
+  }
+
+  function getEditor(element: MentionTextAreaElement): HTMLElement {
+    return element.shadowRoot!.querySelector('.editor')!
+  }
+
+  describe('basic functionality', () => {
+    it('should render with default properties', async () => {
+      const element = await basicFixture()
+
+      assert.isNotNull(element)
+      assert.equal(element.label, '')
+      assert.equal(element.value, '')
+      assert.equal(element.mentionTrigger, '@')
+      assert.equal(element.minQueryLength, 0)
+      assert.isFalse(element.disabled)
+      assert.isFalse(element.required)
+    })
+
+    it('should have proper shadow DOM structure', async () => {
+      const element = await basicFixture()
+
+      const container = element.shadowRoot!.querySelector('.container')
+      const editor = getEditor(element)
+
+      assert.isNotNull(container)
+      assert.isNotNull(editor)
+      assert.equal(editor.getAttribute('contenteditable'), 'true')
+      assert.equal(editor.getAttribute('role'), 'textbox')
+    })
+
+    it('should update value when set programmatically', async () => {
+      const element = await basicFixture()
+
+      element.value = 'Test value'
+      await nextFrame()
+
+      assert.equal(element.value, 'Test value')
+
+      const editor = getEditor(element)
+      assert.equal(editor.textContent, 'Test value')
+    })
+
+    it('should handle disabled state', async () => {
+      const element = await basicFixture()
+      element.disabled = true
+      await nextFrame()
+
+      const editor = getEditor(element)
+      assert.equal(editor.getAttribute('contenteditable'), 'false')
+      assert.equal(editor.getAttribute('tabindex'), '-1')
+    })
+  })
+
+  describe('mentions getter - basic tests', () => {
+    it('should return empty array for empty value', async () => {
+      const element = await basicFixture()
+
+      assert.deepEqual(element.mentions, [])
+    })
+
+    it('should return empty array for text without mentions', async () => {
+      const element = await basicFixture()
+      element.value = 'Hello world'
+      await nextFrame()
+
+      assert.deepEqual(element.mentions, [])
+    })
+
+    it('should extract mention IDs from value', async () => {
+      const element = await basicFixture()
+      element.value = 'Hello @{user1} and @{user2}'
+      await nextFrame()
+
+      const mentions = element.mentions.sort()
+      assert.deepEqual(mentions, ['user1', 'user2'])
+    })
+  })
+
+  describe('getPlainText method - basic tests', () => {
+    it('should return same text when no mentions', async () => {
+      const element = await basicFixture()
+      element.value = 'Hello world'
+      await nextFrame()
+
+      assert.equal(element.getPlainText(), 'Hello world')
+    })
+
+    it('should replace mentions with IDs when no suggestions', async () => {
+      const element = await basicFixture()
+      element.value = 'Hello @{user1} world'
+      await nextFrame()
+
+      assert.equal(element.getPlainText(), 'Hello user1 world')
+    })
+
+    it('should handle empty value', async () => {
+      const element = await basicFixture()
+      element.value = ''
+      await nextFrame()
+
+      assert.equal(element.getPlainText(), '')
+    })
+  })
+})