@eui/eds-wc 22.0.0-alpha.29 → 22.0.0-alpha.30
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/eds-breadcrumb/eds-wc-breadcrumb.d.ts +7 -1
- package/eds-breadcrumb/eds-wc-breadcrumb.d.ts.map +1 -1
- package/eds-breadcrumb/eds-wc-breadcrumb.js +21 -7
- package/eds-breadcrumb/eds-wc-breadcrumb.js.map +1 -1
- package/eds-button/eds-wc-button.d.ts +41 -17
- package/eds-button/eds-wc-button.d.ts.map +1 -1
- package/eds-button/eds-wc-button.js +172 -150
- package/eds-button/eds-wc-button.js.map +1 -1
- package/eds-button/index.d.ts +2 -2
- package/eds-button/index.d.ts.map +1 -1
- package/eds-button/index.js +1 -1
- package/eds-button/index.js.map +1 -1
- package/eds-chat-bubble/eds-wc-chat-bubble.d.ts +83 -0
- package/eds-chat-bubble/eds-wc-chat-bubble.d.ts.map +1 -0
- package/eds-chat-bubble/eds-wc-chat-bubble.js +238 -0
- package/eds-chat-bubble/eds-wc-chat-bubble.js.map +1 -0
- package/eds-chat-bubble/index.d.ts +3 -0
- package/eds-chat-bubble/index.d.ts.map +1 -0
- package/eds-chat-bubble/index.js +2 -0
- package/eds-chat-bubble/index.js.map +1 -0
- package/eds-input-prompt/eds-wc-input-prompt.d.ts +97 -0
- package/eds-input-prompt/eds-wc-input-prompt.d.ts.map +1 -0
- package/eds-input-prompt/eds-wc-input-prompt.js +363 -0
- package/eds-input-prompt/eds-wc-input-prompt.js.map +1 -0
- package/eds-input-prompt/index.d.ts +3 -0
- package/eds-input-prompt/index.d.ts.map +1 -0
- package/eds-input-prompt/index.js +2 -0
- package/eds-input-prompt/index.js.map +1 -0
- package/eds-segmented-control/eds-wc-segmented-control.d.ts +67 -0
- package/eds-segmented-control/eds-wc-segmented-control.d.ts.map +1 -0
- package/{eds-button-group/eds-wc-button-group.js → eds-segmented-control/eds-wc-segmented-control.js} +40 -35
- package/eds-segmented-control/eds-wc-segmented-control.js.map +1 -0
- package/eds-segmented-control/index.d.ts +3 -0
- package/eds-segmented-control/index.d.ts.map +1 -0
- package/eds-segmented-control/index.js +2 -0
- package/eds-segmented-control/index.js.map +1 -0
- package/index.d.ts +7 -2
- package/index.d.ts.map +1 -1
- package/index.js +3 -1
- package/index.js.map +1 -1
- package/package.json +12 -4
- package/eds-button-group/eds-wc-button-group.d.ts +0 -62
- package/eds-button-group/eds-wc-button-group.d.ts.map +0 -1
- package/eds-button-group/eds-wc-button-group.js.map +0 -1
- package/eds-button-group/index.d.ts +0 -2
- package/eds-button-group/index.d.ts.map +0 -1
- package/eds-button-group/index.js +0 -2
- package/eds-button-group/index.js.map +0 -1
|
@@ -0,0 +1,238 @@
|
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
+
};
|
|
7
|
+
import { html, css, LitElement } from 'lit';
|
|
8
|
+
import { customElement, property } from 'lit/decorators.js';
|
|
9
|
+
import { EdsBaseElement } from '../shared/eds-base.js';
|
|
10
|
+
/**
|
|
11
|
+
* `<eds-wc-chat-bubble>` — EDS Chat Bubble Web Component.
|
|
12
|
+
*
|
|
13
|
+
* A framed conversational message surface. Sizes to its content up to 80% of the container width
|
|
14
|
+
* (the `ghost` variant removes the max-width). Mirrors the Angular `eds-chat-bubble` 1:1:
|
|
15
|
+
* reflected `variant` / `align`, and the frame/color `--_eds-chat-bubble-*` privates that the
|
|
16
|
+
* projected `<eds-wc-chat-bubble-content>` consumes (custom properties inherit through the shadow
|
|
17
|
+
* boundary).
|
|
18
|
+
*
|
|
19
|
+
* @example
|
|
20
|
+
* ```html
|
|
21
|
+
* <eds-wc-chat-bubble variant="primary" align="end">
|
|
22
|
+
* <eds-wc-chat-bubble-content>Sounds good!</eds-wc-chat-bubble-content>
|
|
23
|
+
* <eds-wc-chat-bubble-reactions role="img" aria-label="Reactions: thumbs up">
|
|
24
|
+
* <span>👍</span>
|
|
25
|
+
* </eds-wc-chat-bubble-reactions>
|
|
26
|
+
* </eds-wc-chat-bubble>
|
|
27
|
+
* ```
|
|
28
|
+
*
|
|
29
|
+
* @slot - `<eds-wc-chat-bubble-content>` and/or `<eds-wc-chat-bubble-reactions>`
|
|
30
|
+
*/
|
|
31
|
+
let EdsWcChatBubble = class EdsWcChatBubble extends EdsBaseElement {
|
|
32
|
+
constructor() {
|
|
33
|
+
super(...arguments);
|
|
34
|
+
this.variant = 'secondary';
|
|
35
|
+
this.align = 'start';
|
|
36
|
+
}
|
|
37
|
+
static { this.styles = css `
|
|
38
|
+
:host {
|
|
39
|
+
display: flex;
|
|
40
|
+
flex-direction: column;
|
|
41
|
+
gap: var(--eds-sp-2xs);
|
|
42
|
+
width: fit-content;
|
|
43
|
+
max-width: 80%;
|
|
44
|
+
box-sizing: border-box;
|
|
45
|
+
|
|
46
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-neutral-subtle);
|
|
47
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-on-surface-neutral-subtle);
|
|
48
|
+
--_eds-chat-bubble-border-width: var(--eds-bw-none);
|
|
49
|
+
--_eds-chat-bubble-border-color: transparent;
|
|
50
|
+
--_eds-chat-bubble-padding: var(--eds-sp-xs) var(--eds-sp-s);
|
|
51
|
+
--_eds-chat-bubble-radius: var(--eds-br-l);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
:host([align="start"]) { align-self: flex-start; align-items: flex-start; }
|
|
55
|
+
:host([align="end"]) { align-self: flex-end; align-items: flex-end; }
|
|
56
|
+
|
|
57
|
+
:host([variant="primary"]) {
|
|
58
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-primary);
|
|
59
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-on-surface-primary);
|
|
60
|
+
}
|
|
61
|
+
:host([variant="secondary"]) {
|
|
62
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-neutral-subtle);
|
|
63
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-on-surface-neutral-subtle);
|
|
64
|
+
}
|
|
65
|
+
:host([variant="muted"]) {
|
|
66
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-elevation-sunken);
|
|
67
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-foreground-subtle);
|
|
68
|
+
}
|
|
69
|
+
:host([variant="tinted"]) {
|
|
70
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-primary-subtler);
|
|
71
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-on-surface-primary-subtler);
|
|
72
|
+
}
|
|
73
|
+
:host([variant="outline"]) {
|
|
74
|
+
--_eds-chat-bubble-surface: transparent;
|
|
75
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-foreground);
|
|
76
|
+
--_eds-chat-bubble-border-width: var(--eds-bw-xs);
|
|
77
|
+
--_eds-chat-bubble-border-color: var(--eds-c-border-neutral-subtle);
|
|
78
|
+
}
|
|
79
|
+
:host([variant="ghost"]) {
|
|
80
|
+
--_eds-chat-bubble-surface: transparent;
|
|
81
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-foreground);
|
|
82
|
+
--_eds-chat-bubble-padding: 0;
|
|
83
|
+
--_eds-chat-bubble-radius: 0;
|
|
84
|
+
max-width: none;
|
|
85
|
+
width: 100%;
|
|
86
|
+
}
|
|
87
|
+
:host([variant="critical"]) {
|
|
88
|
+
--_eds-chat-bubble-surface: var(--eds-c-surface-critical-subtler);
|
|
89
|
+
--_eds-chat-bubble-on-surface: var(--eds-c-on-surface-critical-subtler);
|
|
90
|
+
}
|
|
91
|
+
`; }
|
|
92
|
+
render() {
|
|
93
|
+
return html `<slot></slot>`;
|
|
94
|
+
}
|
|
95
|
+
};
|
|
96
|
+
__decorate([
|
|
97
|
+
property({ type: String, reflect: true })
|
|
98
|
+
], EdsWcChatBubble.prototype, "variant", void 0);
|
|
99
|
+
__decorate([
|
|
100
|
+
property({ type: String, reflect: true })
|
|
101
|
+
], EdsWcChatBubble.prototype, "align", void 0);
|
|
102
|
+
EdsWcChatBubble = __decorate([
|
|
103
|
+
customElement('eds-wc-chat-bubble')
|
|
104
|
+
], EdsWcChatBubble);
|
|
105
|
+
export { EdsWcChatBubble };
|
|
106
|
+
/**
|
|
107
|
+
* `<eds-wc-chat-bubble-content>` — the framed content surface of a chat bubble.
|
|
108
|
+
*
|
|
109
|
+
* Reads the frame/color `--_eds-chat-bubble-*` privates set by the parent `<eds-wc-chat-bubble>`
|
|
110
|
+
* (custom properties inherit through the shadow boundary). Set `interactive` (or project an
|
|
111
|
+
* `<a>` / `<button>`) for a clickable bubble — the host shows a visible focus ring.
|
|
112
|
+
*
|
|
113
|
+
* @slot - Content text or rich content
|
|
114
|
+
*/
|
|
115
|
+
let EdsWcChatBubbleContent = class EdsWcChatBubbleContent extends LitElement {
|
|
116
|
+
constructor() {
|
|
117
|
+
super(...arguments);
|
|
118
|
+
/** Styles the content as an interactive surface (pointer + focus ring). */
|
|
119
|
+
this.interactive = false;
|
|
120
|
+
}
|
|
121
|
+
static { this.styles = css `
|
|
122
|
+
:host {
|
|
123
|
+
display: block;
|
|
124
|
+
box-sizing: border-box;
|
|
125
|
+
padding: var(--_eds-chat-bubble-padding, var(--eds-sp-xs) var(--eds-sp-s));
|
|
126
|
+
border-radius: var(--_eds-chat-bubble-radius, var(--eds-br-l));
|
|
127
|
+
background-color: var(--_eds-chat-bubble-surface, var(--eds-c-surface-neutral-subtle));
|
|
128
|
+
color: var(--_eds-chat-bubble-on-surface, var(--eds-c-on-surface-neutral-subtle));
|
|
129
|
+
border: var(--_eds-chat-bubble-border-width, var(--eds-bw-none)) solid var(--_eds-chat-bubble-border-color, transparent);
|
|
130
|
+
font: var(--eds-f-paragraph-m);
|
|
131
|
+
overflow-wrap: anywhere;
|
|
132
|
+
max-width: 100%;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
:host([interactive]) {
|
|
136
|
+
cursor: pointer;
|
|
137
|
+
transition: filter 150ms ease-in-out;
|
|
138
|
+
}
|
|
139
|
+
:host([interactive]:hover) { filter: brightness(0.97); }
|
|
140
|
+
:host([interactive]:focus-visible) {
|
|
141
|
+
outline: var(--eds-bw-s) solid var(--eds-c-border-primary);
|
|
142
|
+
outline-offset: 1px;
|
|
143
|
+
border-radius: var(--eds-br-xs);
|
|
144
|
+
}
|
|
145
|
+
`; }
|
|
146
|
+
connectedCallback() {
|
|
147
|
+
super.connectedCallback();
|
|
148
|
+
if (this.interactive && !this.hasAttribute('tabindex')) {
|
|
149
|
+
this.setAttribute('tabindex', '0');
|
|
150
|
+
}
|
|
151
|
+
}
|
|
152
|
+
render() {
|
|
153
|
+
return html `<slot></slot>`;
|
|
154
|
+
}
|
|
155
|
+
};
|
|
156
|
+
__decorate([
|
|
157
|
+
property({ type: Boolean, reflect: true })
|
|
158
|
+
], EdsWcChatBubbleContent.prototype, "interactive", void 0);
|
|
159
|
+
EdsWcChatBubbleContent = __decorate([
|
|
160
|
+
customElement('eds-wc-chat-bubble-content')
|
|
161
|
+
], EdsWcChatBubbleContent);
|
|
162
|
+
export { EdsWcChatBubbleContent };
|
|
163
|
+
/**
|
|
164
|
+
* `<eds-wc-chat-bubble-reactions>` — an overlapping reactions row anchored to a bubble edge.
|
|
165
|
+
*
|
|
166
|
+
* @slot - Reaction glyphs or quick-action buttons
|
|
167
|
+
*/
|
|
168
|
+
let EdsWcChatBubbleReactions = class EdsWcChatBubbleReactions extends LitElement {
|
|
169
|
+
constructor() {
|
|
170
|
+
super(...arguments);
|
|
171
|
+
/** The bubble edge the reactions anchor to. @default 'bottom' */
|
|
172
|
+
this.side = 'bottom';
|
|
173
|
+
/** Inline alignment of the reactions row. @default 'end' */
|
|
174
|
+
this.align = 'end';
|
|
175
|
+
}
|
|
176
|
+
static { this.styles = css `
|
|
177
|
+
:host {
|
|
178
|
+
display: inline-flex;
|
|
179
|
+
align-items: center;
|
|
180
|
+
gap: var(--eds-sp-3xs);
|
|
181
|
+
padding: var(--eds-sp-4xs) var(--eds-sp-2xs);
|
|
182
|
+
border-radius: var(--eds-br-full);
|
|
183
|
+
background-color: var(--eds-c-surface-elevation);
|
|
184
|
+
border: var(--eds-bw-xs) solid var(--eds-c-border-divider);
|
|
185
|
+
box-shadow: var(--eds-sh-1);
|
|
186
|
+
font: var(--eds-f-paragraph-s);
|
|
187
|
+
width: fit-content;
|
|
188
|
+
position: relative;
|
|
189
|
+
z-index: 1;
|
|
190
|
+
}
|
|
191
|
+
:host([side="top"]) { margin-bottom: calc(-1 * var(--eds-sp-s)); }
|
|
192
|
+
:host([side="bottom"]) { margin-top: calc(-1 * var(--eds-sp-s)); }
|
|
193
|
+
:host([align="start"]) { align-self: flex-start; }
|
|
194
|
+
:host([align="end"]) { align-self: flex-end; }
|
|
195
|
+
`; }
|
|
196
|
+
render() {
|
|
197
|
+
return html `<slot></slot>`;
|
|
198
|
+
}
|
|
199
|
+
};
|
|
200
|
+
__decorate([
|
|
201
|
+
property({ type: String, reflect: true })
|
|
202
|
+
], EdsWcChatBubbleReactions.prototype, "side", void 0);
|
|
203
|
+
__decorate([
|
|
204
|
+
property({ type: String, reflect: true })
|
|
205
|
+
], EdsWcChatBubbleReactions.prototype, "align", void 0);
|
|
206
|
+
EdsWcChatBubbleReactions = __decorate([
|
|
207
|
+
customElement('eds-wc-chat-bubble-reactions')
|
|
208
|
+
], EdsWcChatBubbleReactions);
|
|
209
|
+
export { EdsWcChatBubbleReactions };
|
|
210
|
+
/**
|
|
211
|
+
* `<eds-wc-chat-bubble-group>` — groups consecutive chat bubbles from the same sender.
|
|
212
|
+
*
|
|
213
|
+
* @slot - `<eds-wc-chat-bubble>` elements
|
|
214
|
+
*/
|
|
215
|
+
let EdsWcChatBubbleGroup = class EdsWcChatBubbleGroup extends LitElement {
|
|
216
|
+
static { this.styles = css `
|
|
217
|
+
:host {
|
|
218
|
+
display: flex;
|
|
219
|
+
flex-direction: column;
|
|
220
|
+
gap: var(--eds-sp-3xs);
|
|
221
|
+
width: 100%;
|
|
222
|
+
}
|
|
223
|
+
`; }
|
|
224
|
+
connectedCallback() {
|
|
225
|
+
super.connectedCallback();
|
|
226
|
+
if (!this.hasAttribute('role')) {
|
|
227
|
+
this.setAttribute('role', 'group');
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
render() {
|
|
231
|
+
return html `<slot></slot>`;
|
|
232
|
+
}
|
|
233
|
+
};
|
|
234
|
+
EdsWcChatBubbleGroup = __decorate([
|
|
235
|
+
customElement('eds-wc-chat-bubble-group')
|
|
236
|
+
], EdsWcChatBubbleGroup);
|
|
237
|
+
export { EdsWcChatBubbleGroup };
|
|
238
|
+
//# sourceMappingURL=eds-wc-chat-bubble.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eds-wc-chat-bubble.js","sourceRoot":"","sources":["../../src/eds-chat-bubble/eds-wc-chat-bubble.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-chat-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,GACvB,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,sBAAsB,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-chat-bubble/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,eAAe,EACf,sBAAsB,EACtB,wBAAwB,EACxB,oBAAoB,GACvB,MAAM,sBAAsB,CAAC"}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { EdsBaseElement } from '../shared/eds-base.js';
|
|
2
|
+
import '../eds-icon-button/eds-wc-icon-button.js';
|
|
3
|
+
/** Sizes the composer (ported 1:1 from the Angular `EdsInputPromptSize`). */
|
|
4
|
+
export type EdsWcInputPromptSize = 's' | 'm' | 'l';
|
|
5
|
+
/** Placement options for the built-in send button. */
|
|
6
|
+
export type EdsWcInputPromptSendPosition = 'toolbar' | 'top';
|
|
7
|
+
/**
|
|
8
|
+
* `<eds-wc-input-prompt>` — EDS Input Prompt Web Component.
|
|
9
|
+
*
|
|
10
|
+
* A generic, AI-style rich-text composer (comparable to assistant prompt fields): an auto-growing
|
|
11
|
+
* multi-line `<textarea>`, a toolbar row for leading/trailing actions, and a built-in send/stop
|
|
12
|
+
* icon button. Mirrors the Angular `eds-input-prompt` 1:1: reflected `size` / `disabled` /
|
|
13
|
+
* `readonly` / `invalid` / `loading` / `send-position`, `submit-on-enter`, and the projected
|
|
14
|
+
* `leading` / `trailing` slots.
|
|
15
|
+
*
|
|
16
|
+
* Form-associated (`ElementInternals`): the current value participates in a surrounding `<form>`.
|
|
17
|
+
*
|
|
18
|
+
* @example
|
|
19
|
+
* ```html
|
|
20
|
+
* <eds-wc-input-prompt placeholder="Ask anything…">
|
|
21
|
+
* <eds-wc-icon-button slot="leading" icon="paperclip" aria-label="Attach"></eds-wc-icon-button>
|
|
22
|
+
* <eds-wc-icon-button slot="trailing" icon="microphone" aria-label="Voice input"></eds-wc-icon-button>
|
|
23
|
+
* </eds-wc-input-prompt>
|
|
24
|
+
* ```
|
|
25
|
+
*
|
|
26
|
+
* @fires value-change - Fired whenever the composed value changes. `detail: string`
|
|
27
|
+
* @fires prompt-submit - Fired when the prompt is submitted (Enter or send button). `detail: string` (trimmed)
|
|
28
|
+
* @fires prompt-stop - Fired when the stop button is clicked while `loading`. `detail: void`
|
|
29
|
+
*
|
|
30
|
+
* @slot leading - Leading (start-aligned) toolbar actions.
|
|
31
|
+
* @slot trailing - Trailing (end-aligned) toolbar actions, before the built-in send button.
|
|
32
|
+
*/
|
|
33
|
+
export declare class EdsWcInputPrompt extends EdsBaseElement {
|
|
34
|
+
static formAssociated: boolean;
|
|
35
|
+
/** Placeholder text shown when the composer is empty. @default 'Type your prompt…' */
|
|
36
|
+
placeholder: string;
|
|
37
|
+
/** Size of the composer. @default 'm' */
|
|
38
|
+
size: EdsWcInputPromptSize;
|
|
39
|
+
/** The current composed value. */
|
|
40
|
+
value: string;
|
|
41
|
+
/** Whether the composer is disabled. */
|
|
42
|
+
disabled: boolean;
|
|
43
|
+
/** Whether the composer is readonly. */
|
|
44
|
+
readonly: boolean;
|
|
45
|
+
/** Whether the composer shows an invalid/error state. */
|
|
46
|
+
invalid: boolean;
|
|
47
|
+
/** Minimum number of rows the textarea occupies. @default 1 */
|
|
48
|
+
minRows: number;
|
|
49
|
+
/** Maximum rows the textarea grows to before scrolling (0 = unlimited). @default 8 */
|
|
50
|
+
maxRows: number;
|
|
51
|
+
/** Optional native `maxlength` cap on the textarea. @default null */
|
|
52
|
+
maxLength: number | null;
|
|
53
|
+
/** When true, Enter submits and Shift+Enter inserts a newline. @default true */
|
|
54
|
+
submitOnEnter: boolean;
|
|
55
|
+
/** When true, hides the built-in send button. @default false */
|
|
56
|
+
hideSendButton: boolean;
|
|
57
|
+
/** Placement of the built-in send button. @default 'toolbar' */
|
|
58
|
+
sendPosition: EdsWcInputPromptSendPosition;
|
|
59
|
+
/** Busy/streaming state: the send button becomes a stop button. @default false */
|
|
60
|
+
loading: boolean;
|
|
61
|
+
/** Icon name for the built-in send button. @default 'arrow-up' */
|
|
62
|
+
sendIcon: string;
|
|
63
|
+
/** Icon name for the built-in stop button (shown while `loading`). @default 'stop' */
|
|
64
|
+
stopIcon: string;
|
|
65
|
+
/** Accessible label for the send button. @default 'Send prompt' */
|
|
66
|
+
sendAriaLabel: string;
|
|
67
|
+
/** Accessible label for the stop button. @default 'Stop generating' */
|
|
68
|
+
stopAriaLabel: string;
|
|
69
|
+
/** Accessible label for the textarea. @default 'Prompt' */
|
|
70
|
+
fieldAriaLabel: string;
|
|
71
|
+
private _textarea;
|
|
72
|
+
private _internals;
|
|
73
|
+
static styles: import("lit").CSSResult;
|
|
74
|
+
/** True when the send button can submit the current prompt. */
|
|
75
|
+
private get _canSubmit();
|
|
76
|
+
private get _primaryActionEnabled();
|
|
77
|
+
connectedCallback(): void;
|
|
78
|
+
updated(changed: Map<string, unknown>): void;
|
|
79
|
+
firstUpdated(): void;
|
|
80
|
+
private _syncForm;
|
|
81
|
+
private _autoResize;
|
|
82
|
+
/** Reset participation when the surrounding form resets. */
|
|
83
|
+
formResetCallback(): void;
|
|
84
|
+
formDisabledCallback(disabled: boolean): void;
|
|
85
|
+
submit(): void;
|
|
86
|
+
private _onInput;
|
|
87
|
+
private _onKeydown;
|
|
88
|
+
private _onSendClick;
|
|
89
|
+
private _renderSendButton;
|
|
90
|
+
protected render(): import("lit-html").TemplateResult<1>;
|
|
91
|
+
}
|
|
92
|
+
declare global {
|
|
93
|
+
interface HTMLElementTagNameMap {
|
|
94
|
+
'eds-wc-input-prompt': EdsWcInputPrompt;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
//# sourceMappingURL=eds-wc-input-prompt.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eds-wc-input-prompt.d.ts","sourceRoot":"","sources":["../../src/eds-input-prompt/eds-wc-input-prompt.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,0CAA0C,CAAC;AAElD,6EAA6E;AAC7E,MAAM,MAAM,oBAAoB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEnD,sDAAsD;AACtD,MAAM,MAAM,4BAA4B,GAAG,SAAS,GAAG,KAAK,CAAC;AAE7D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,gBAAiB,SAAQ,cAAc;IAChD,MAAM,CAAC,cAAc,UAAQ;IAE7B,sFAAsF;IAC1D,WAAW,SAAuB;IAE9D,yCAAyC;IACE,IAAI,EAAE,oBAAoB,CAAO;IAE5E,kCAAkC;IACN,KAAK,SAAM;IAEvC,wCAAwC;IACI,QAAQ,UAAS;IAE7D,wCAAwC;IACI,QAAQ,UAAS;IAE7D,yDAAyD;IACb,OAAO,UAAS;IAE5D,+DAA+D;IACZ,OAAO,SAAK;IAE/D,sFAAsF;IACnC,OAAO,SAAK;IAE/D,qEAAqE;IAChB,SAAS,EAAE,MAAM,GAAG,IAAI,CAAQ;IAErF,gFAAgF;IACrB,aAAa,UAAQ;IAEhF,gEAAgE;IACJ,cAAc,UAAS;IAEnF,gEAAgE;IAEhE,YAAY,EAAE,4BAA4B,CAAa;IAEvD,kFAAkF;IACtC,OAAO,UAAS;IAE5D,kEAAkE;IACd,QAAQ,SAAc;IAE1E,sFAAsF;IAClC,QAAQ,SAAU;IAEtE,mEAAmE;IACT,aAAa,SAAiB;IAExF,uEAAuE;IACb,aAAa,SAAqB;IAE5F,2DAA2D;IACA,cAAc,SAAY;IAElE,OAAO,CAAC,SAAS,CAAuB;IAE3D,OAAO,CAAC,UAAU,CAA0B;IAE5C,OAAgB,MAAM,0BAyGpB;IAEF,+DAA+D;IAC/D,OAAO,KAAK,UAAU,GAErB;IAED,OAAO,KAAK,qBAAqB,GAEhC;IAEQ,iBAAiB,IAAI,IAAI;IAKzB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;IAO5C,YAAY,IAAI,IAAI;IAI7B,OAAO,CAAC,SAAS;IAQjB,OAAO,CAAC,WAAW;IAWnB,4DAA4D;IAC5D,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C,MAAM,IAAI,IAAI;IAOd,OAAO,CAAC,QAAQ;IAOhB,OAAO,CAAC,UAAU;IAMlB,OAAO,CAAC,YAAY;IASpB,OAAO,CAAC,iBAAiB;cAgBN,MAAM;CA8B5B;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,qBAAqB,EAAE,gBAAgB,CAAC;KAC3C;CACJ"}
|