@eui/eds-wc 22.0.0-alpha.44 → 22.0.0-alpha.46
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-avatar/eds-wc-avatar.d.ts.map +1 -1
- package/eds-avatar/eds-wc-avatar.js +19 -18
- package/eds-avatar/eds-wc-avatar.js.map +1 -1
- package/eds-badge/eds-wc-badge.d.ts +4 -4
- package/eds-badge/eds-wc-badge.d.ts.map +1 -1
- package/eds-badge/eds-wc-badge.js +54 -29
- package/eds-badge/eds-wc-badge.js.map +1 -1
- package/eds-button/eds-wc-button.d.ts.map +1 -1
- package/eds-button/eds-wc-button.js +7 -1
- package/eds-button/eds-wc-button.js.map +1 -1
- package/{eds-input-checkbox/eds-wc-input-checkbox.d.ts → eds-checkbox/eds-wc-checkbox.d.ts} +8 -8
- package/eds-checkbox/eds-wc-checkbox.d.ts.map +1 -0
- package/{eds-input-checkbox/eds-wc-input-checkbox.js → eds-checkbox/eds-wc-checkbox.js} +16 -16
- package/eds-checkbox/eds-wc-checkbox.js.map +1 -0
- package/eds-checkbox/index.d.ts +2 -0
- package/eds-checkbox/index.d.ts.map +1 -0
- package/eds-checkbox/index.js +2 -0
- package/eds-checkbox/index.js.map +1 -0
- package/eds-chip/eds-wc-chip.d.ts.map +1 -1
- package/eds-chip/eds-wc-chip.js +12 -4
- package/eds-chip/eds-wc-chip.js.map +1 -1
- package/eds-fab-button/eds-wc-fab-button.js +2 -2
- package/eds-icon/eds-wc-icon.d.ts.map +1 -1
- package/eds-icon/eds-wc-icon.js +58 -26
- package/eds-icon/eds-wc-icon.js.map +1 -1
- package/eds-icon-button/eds-wc-icon-button.js +2 -2
- package/eds-input-button/eds-wc-input-button.d.ts +86 -8
- package/eds-input-button/eds-wc-input-button.d.ts.map +1 -1
- package/eds-input-button/eds-wc-input-button.js +275 -13
- package/eds-input-button/eds-wc-input-button.js.map +1 -1
- package/eds-input-button/index.d.ts +2 -1
- package/eds-input-button/index.d.ts.map +1 -1
- package/eds-input-button/index.js +1 -1
- package/eds-input-button/index.js.map +1 -1
- package/{eds-input-prompt/eds-wc-input-prompt.d.ts → eds-input-chat/eds-wc-input-chat.d.ts} +12 -12
- package/eds-input-chat/eds-wc-input-chat.d.ts.map +1 -0
- package/{eds-input-prompt/eds-wc-input-prompt.js → eds-input-chat/eds-wc-input-chat.js} +59 -59
- package/eds-input-chat/eds-wc-input-chat.js.map +1 -0
- package/eds-input-chat/index.d.ts +3 -0
- package/eds-input-chat/index.d.ts.map +1 -0
- package/eds-input-chat/index.js +2 -0
- package/eds-input-chat/index.js.map +1 -0
- package/eds-input-password/eds-wc-input-password.d.ts +21 -20
- package/eds-input-password/eds-wc-input-password.d.ts.map +1 -1
- package/eds-input-password/eds-wc-input-password.js +48 -27
- package/eds-input-password/eds-wc-input-password.js.map +1 -1
- package/{eds-input-radio/eds-wc-input-radio.d.ts → eds-radio/eds-wc-radio.d.ts} +6 -6
- package/eds-radio/eds-wc-radio.d.ts.map +1 -0
- package/{eds-input-radio/eds-wc-input-radio.js → eds-radio/eds-wc-radio.js} +16 -16
- package/eds-radio/eds-wc-radio.js.map +1 -0
- package/eds-radio/index.d.ts +2 -0
- package/eds-radio/index.d.ts.map +1 -0
- package/eds-radio/index.js +2 -0
- package/eds-radio/index.js.map +1 -0
- package/index.d.ts +4 -4
- package/index.d.ts.map +1 -1
- package/index.js +3 -3
- package/index.js.map +1 -1
- package/package.json +10 -10
- package/eds-input-checkbox/eds-wc-input-checkbox.d.ts.map +0 -1
- package/eds-input-checkbox/eds-wc-input-checkbox.js.map +0 -1
- package/eds-input-checkbox/index.d.ts +0 -2
- package/eds-input-checkbox/index.d.ts.map +0 -1
- package/eds-input-checkbox/index.js +0 -2
- package/eds-input-checkbox/index.js.map +0 -1
- package/eds-input-prompt/eds-wc-input-prompt.d.ts.map +0 -1
- package/eds-input-prompt/eds-wc-input-prompt.js.map +0 -1
- package/eds-input-prompt/index.d.ts +0 -3
- package/eds-input-prompt/index.d.ts.map +0 -1
- package/eds-input-prompt/index.js +0 -2
- package/eds-input-prompt/index.js.map +0 -1
- package/eds-input-radio/eds-wc-input-radio.d.ts.map +0 -1
- package/eds-input-radio/eds-wc-input-radio.js.map +0 -1
- package/eds-input-radio/index.d.ts +0 -2
- package/eds-input-radio/index.d.ts.map +0 -1
- package/eds-input-radio/index.js +0 -2
- package/eds-input-radio/index.js.map +0 -1
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
import { EdsBaseElement } from '../shared/eds-base.js';
|
|
2
2
|
import '../eds-icon-button/eds-wc-icon-button.js';
|
|
3
|
-
/** Sizes the composer (ported 1:1 from the Angular `
|
|
4
|
-
export type
|
|
3
|
+
/** Sizes the composer (ported 1:1 from the Angular `EdsInputChatSize`). */
|
|
4
|
+
export type EdsWcInputChatSize = 's' | 'm' | 'l';
|
|
5
5
|
/** Placement options for the built-in send button. */
|
|
6
|
-
export type
|
|
6
|
+
export type EdsWcInputChatSendPosition = 'toolbar' | 'top';
|
|
7
7
|
/**
|
|
8
|
-
* `<eds-wc-input-
|
|
8
|
+
* `<eds-wc-input-chat>` — EDS Input Prompt Web Component.
|
|
9
9
|
*
|
|
10
10
|
* A generic, AI-style rich-text composer (comparable to assistant prompt fields): an auto-growing
|
|
11
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-
|
|
12
|
+
* icon button. Mirrors the Angular `eds-input-chat` 1:1: reflected `size` / `disabled` /
|
|
13
13
|
* `readonly` / `invalid` / `loading` / `send-position`, `submit-on-enter`, and the projected
|
|
14
14
|
* `leading` / `trailing` slots.
|
|
15
15
|
*
|
|
@@ -17,10 +17,10 @@ export type EdsWcInputPromptSendPosition = 'toolbar' | 'top';
|
|
|
17
17
|
*
|
|
18
18
|
* @example
|
|
19
19
|
* ```html
|
|
20
|
-
* <eds-wc-input-
|
|
20
|
+
* <eds-wc-input-chat placeholder="Ask anything…">
|
|
21
21
|
* <eds-wc-icon-button slot="leading" icon="paperclip" aria-label="Attach"></eds-wc-icon-button>
|
|
22
22
|
* <eds-wc-icon-button slot="trailing" icon="microphone" aria-label="Voice input"></eds-wc-icon-button>
|
|
23
|
-
* </eds-wc-input-
|
|
23
|
+
* </eds-wc-input-chat>
|
|
24
24
|
* ```
|
|
25
25
|
*
|
|
26
26
|
* @fires value-change - Fired whenever the composed value changes. `detail: string`
|
|
@@ -30,12 +30,12 @@ export type EdsWcInputPromptSendPosition = 'toolbar' | 'top';
|
|
|
30
30
|
* @slot leading - Leading (start-aligned) toolbar actions.
|
|
31
31
|
* @slot trailing - Trailing (end-aligned) toolbar actions, before the built-in send button.
|
|
32
32
|
*/
|
|
33
|
-
export declare class
|
|
33
|
+
export declare class EdsWcInputChat extends EdsBaseElement {
|
|
34
34
|
static formAssociated: boolean;
|
|
35
35
|
/** Placeholder text shown when the composer is empty. @default 'Type your prompt…' */
|
|
36
36
|
placeholder: string;
|
|
37
37
|
/** Size of the composer. @default 'm' */
|
|
38
|
-
size:
|
|
38
|
+
size: EdsWcInputChatSize;
|
|
39
39
|
/** The current composed value. */
|
|
40
40
|
value: string;
|
|
41
41
|
/** Whether the composer is disabled. */
|
|
@@ -55,7 +55,7 @@ export declare class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
55
55
|
/** When true, hides the built-in send button. @default false */
|
|
56
56
|
hideSendButton: boolean;
|
|
57
57
|
/** Placement of the built-in send button. @default 'toolbar' */
|
|
58
|
-
sendPosition:
|
|
58
|
+
sendPosition: EdsWcInputChatSendPosition;
|
|
59
59
|
/** Busy/streaming state: the send button becomes a stop button. @default false */
|
|
60
60
|
loading: boolean;
|
|
61
61
|
/** Icon name for the built-in send button. @default 'arrow-up' */
|
|
@@ -91,7 +91,7 @@ export declare class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
91
91
|
}
|
|
92
92
|
declare global {
|
|
93
93
|
interface HTMLElementTagNameMap {
|
|
94
|
-
'eds-wc-input-
|
|
94
|
+
'eds-wc-input-chat': EdsWcInputChat;
|
|
95
95
|
}
|
|
96
96
|
}
|
|
97
|
-
//# sourceMappingURL=eds-wc-input-
|
|
97
|
+
//# sourceMappingURL=eds-wc-input-chat.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eds-wc-input-chat.d.ts","sourceRoot":"","sources":["../../src/eds-input-chat/eds-wc-input-chat.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,0CAA0C,CAAC;AAElD,2EAA2E;AAC3E,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAC;AAEjD,sDAAsD;AACtD,MAAM,MAAM,0BAA0B,GAAG,SAAS,GAAG,KAAK,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,cAAe,SAAQ,cAAc;IAC9C,MAAM,CAAC,cAAc,UAAQ;IAE7B,sFAAsF;IAC1D,WAAW,SAAuB;IAE9D,yCAAyC;IACE,IAAI,EAAE,kBAAkB,CAAO;IAE1E,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,0BAA0B,CAAa;IAErD,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,mBAAmB,EAAE,cAAc,CAAC;KACvC;CACJ"}
|
|
@@ -9,11 +9,11 @@ import { customElement, property, query } from 'lit/decorators.js';
|
|
|
9
9
|
import { EdsBaseElement } from '../shared/eds-base.js';
|
|
10
10
|
import '../eds-icon-button/eds-wc-icon-button.js';
|
|
11
11
|
/**
|
|
12
|
-
* `<eds-wc-input-
|
|
12
|
+
* `<eds-wc-input-chat>` — EDS Input Prompt Web Component.
|
|
13
13
|
*
|
|
14
14
|
* A generic, AI-style rich-text composer (comparable to assistant prompt fields): an auto-growing
|
|
15
15
|
* multi-line `<textarea>`, a toolbar row for leading/trailing actions, and a built-in send/stop
|
|
16
|
-
* icon button. Mirrors the Angular `eds-input-
|
|
16
|
+
* icon button. Mirrors the Angular `eds-input-chat` 1:1: reflected `size` / `disabled` /
|
|
17
17
|
* `readonly` / `invalid` / `loading` / `send-position`, `submit-on-enter`, and the projected
|
|
18
18
|
* `leading` / `trailing` slots.
|
|
19
19
|
*
|
|
@@ -21,10 +21,10 @@ import '../eds-icon-button/eds-wc-icon-button.js';
|
|
|
21
21
|
*
|
|
22
22
|
* @example
|
|
23
23
|
* ```html
|
|
24
|
-
* <eds-wc-input-
|
|
24
|
+
* <eds-wc-input-chat placeholder="Ask anything…">
|
|
25
25
|
* <eds-wc-icon-button slot="leading" icon="paperclip" aria-label="Attach"></eds-wc-icon-button>
|
|
26
26
|
* <eds-wc-icon-button slot="trailing" icon="microphone" aria-label="Voice input"></eds-wc-icon-button>
|
|
27
|
-
* </eds-wc-input-
|
|
27
|
+
* </eds-wc-input-chat>
|
|
28
28
|
* ```
|
|
29
29
|
*
|
|
30
30
|
* @fires value-change - Fired whenever the composed value changes. `detail: string`
|
|
@@ -34,7 +34,7 @@ import '../eds-icon-button/eds-wc-icon-button.js';
|
|
|
34
34
|
* @slot leading - Leading (start-aligned) toolbar actions.
|
|
35
35
|
* @slot trailing - Trailing (end-aligned) toolbar actions, before the built-in send button.
|
|
36
36
|
*/
|
|
37
|
-
let
|
|
37
|
+
let EdsWcInputChat = class EdsWcInputChat extends EdsBaseElement {
|
|
38
38
|
constructor() {
|
|
39
39
|
super(...arguments);
|
|
40
40
|
/** Placeholder text shown when the composer is empty. @default 'Type your prompt…' */
|
|
@@ -78,19 +78,19 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
78
78
|
static { this.formAssociated = true; }
|
|
79
79
|
static { this.styles = css `
|
|
80
80
|
:host {
|
|
81
|
-
--_eds-input-
|
|
82
|
-
--_eds-input-
|
|
83
|
-
--_eds-input-
|
|
84
|
-
--_eds-input-
|
|
81
|
+
--_eds-input-chat-gap: var(--eds-sp-2xs);
|
|
82
|
+
--_eds-input-chat-padding: var(--eds-sp-xs) var(--eds-sp-s);
|
|
83
|
+
--_eds-input-chat-font: var(--eds-f-paragraph-m);
|
|
84
|
+
--_eds-input-chat-radius: var(--eds-br-l);
|
|
85
85
|
|
|
86
86
|
display: flex;
|
|
87
87
|
flex-direction: column;
|
|
88
|
-
gap: var(--_eds-input-
|
|
88
|
+
gap: var(--_eds-input-chat-gap);
|
|
89
89
|
width: 100%;
|
|
90
|
-
padding: var(--_eds-input-
|
|
90
|
+
padding: var(--_eds-input-chat-padding);
|
|
91
91
|
background-color: var(--eds-c-surface-elevation);
|
|
92
92
|
border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
|
|
93
|
-
border-radius: var(--_eds-input-
|
|
93
|
+
border-radius: var(--_eds-input-chat-radius);
|
|
94
94
|
box-sizing: border-box;
|
|
95
95
|
}
|
|
96
96
|
|
|
@@ -100,16 +100,16 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
100
100
|
outline-offset: -1px;
|
|
101
101
|
}
|
|
102
102
|
|
|
103
|
-
.eds-input-
|
|
103
|
+
.eds-input-chat__field {
|
|
104
104
|
display: flex;
|
|
105
105
|
align-items: flex-start;
|
|
106
106
|
gap: var(--eds-sp-xs);
|
|
107
107
|
width: 100%;
|
|
108
108
|
}
|
|
109
109
|
|
|
110
|
-
.eds-input-
|
|
110
|
+
.eds-input-chat__textarea {
|
|
111
111
|
flex: 1 1 auto;
|
|
112
|
-
font: var(--_eds-input-
|
|
112
|
+
font: var(--_eds-input-chat-font);
|
|
113
113
|
appearance: none;
|
|
114
114
|
width: 100%;
|
|
115
115
|
margin: 0;
|
|
@@ -122,50 +122,50 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
122
122
|
box-sizing: border-box;
|
|
123
123
|
font-family: inherit;
|
|
124
124
|
}
|
|
125
|
-
.eds-input-
|
|
126
|
-
.eds-input-
|
|
125
|
+
.eds-input-chat__textarea:focus,
|
|
126
|
+
.eds-input-chat__textarea:focus-visible {
|
|
127
127
|
outline: none;
|
|
128
128
|
}
|
|
129
|
-
.eds-input-
|
|
129
|
+
.eds-input-chat__textarea::placeholder {
|
|
130
130
|
color: var(--eds-c-foreground-subtler);
|
|
131
131
|
opacity: 1;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
|
-
.eds-input-
|
|
134
|
+
.eds-input-chat__toolbar {
|
|
135
135
|
display: flex;
|
|
136
136
|
align-items: center;
|
|
137
137
|
justify-content: space-between;
|
|
138
138
|
gap: var(--eds-sp-xs);
|
|
139
139
|
}
|
|
140
140
|
|
|
141
|
-
.eds-input-
|
|
141
|
+
.eds-input-chat__actions {
|
|
142
142
|
display: flex;
|
|
143
143
|
align-items: center;
|
|
144
144
|
gap: var(--eds-sp-2xs);
|
|
145
145
|
min-width: 0;
|
|
146
146
|
}
|
|
147
|
-
.eds-input-
|
|
147
|
+
.eds-input-chat__actions--leading {
|
|
148
148
|
flex-wrap: nowrap;
|
|
149
149
|
overflow: hidden;
|
|
150
150
|
}
|
|
151
|
-
.eds-input-
|
|
151
|
+
.eds-input-chat__actions--trailing {
|
|
152
152
|
margin-inline-start: auto;
|
|
153
153
|
flex-shrink: 0;
|
|
154
154
|
}
|
|
155
155
|
|
|
156
|
-
eds-wc-icon-button.eds-input-
|
|
156
|
+
eds-wc-icon-button.eds-input-chat__send {
|
|
157
157
|
--_eds-icon-button-surface: var(--eds-c-surface-brand);
|
|
158
158
|
}
|
|
159
159
|
|
|
160
160
|
/* Size variants */
|
|
161
161
|
:host([size="s"]) {
|
|
162
|
-
--_eds-input-
|
|
163
|
-
--_eds-input-
|
|
164
|
-
--_eds-input-
|
|
162
|
+
--_eds-input-chat-font: var(--eds-f-paragraph-s);
|
|
163
|
+
--_eds-input-chat-padding: var(--eds-sp-2xs) var(--eds-sp-xs);
|
|
164
|
+
--_eds-input-chat-radius: var(--eds-br-m);
|
|
165
165
|
}
|
|
166
166
|
:host([size="l"]) {
|
|
167
|
-
--_eds-input-
|
|
168
|
-
--_eds-input-
|
|
167
|
+
--_eds-input-chat-font: var(--eds-f-paragraph-l);
|
|
168
|
+
--_eds-input-chat-padding: var(--eds-sp-s) var(--eds-sp-m);
|
|
169
169
|
}
|
|
170
170
|
|
|
171
171
|
/* States */
|
|
@@ -175,7 +175,7 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
175
175
|
border-color: var(--eds-c-border-disabled);
|
|
176
176
|
pointer-events: none;
|
|
177
177
|
}
|
|
178
|
-
:host([disabled]) .eds-input-
|
|
178
|
+
:host([disabled]) .eds-input-chat__textarea { color: var(--eds-c-foreground-subtler); }
|
|
179
179
|
:host([readonly]) {
|
|
180
180
|
background-color: transparent;
|
|
181
181
|
border-color: var(--eds-c-border-divider);
|
|
@@ -257,7 +257,7 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
257
257
|
return nothing;
|
|
258
258
|
return html `
|
|
259
259
|
<eds-wc-icon-button
|
|
260
|
-
class="eds-input-
|
|
260
|
+
class="eds-input-chat__send"
|
|
261
261
|
color="brand"
|
|
262
262
|
rounded
|
|
263
263
|
.icon="${this.loading ? this.stopIcon : this.sendIcon}"
|
|
@@ -270,9 +270,9 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
270
270
|
}
|
|
271
271
|
render() {
|
|
272
272
|
return html `
|
|
273
|
-
<div class="eds-input-
|
|
273
|
+
<div class="eds-input-chat__field">
|
|
274
274
|
<textarea
|
|
275
|
-
class="eds-input-
|
|
275
|
+
class="eds-input-chat__textarea"
|
|
276
276
|
rows="${this.minRows}"
|
|
277
277
|
placeholder="${this.placeholder}"
|
|
278
278
|
aria-label="${this.fieldAriaLabel}"
|
|
@@ -287,11 +287,11 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
287
287
|
${this.sendPosition === 'top' ? this._renderSendButton() : nothing}
|
|
288
288
|
</div>
|
|
289
289
|
|
|
290
|
-
<div class="eds-input-
|
|
291
|
-
<div class="eds-input-
|
|
290
|
+
<div class="eds-input-chat__toolbar">
|
|
291
|
+
<div class="eds-input-chat__actions eds-input-chat__actions--leading">
|
|
292
292
|
<slot name="leading"></slot>
|
|
293
293
|
</div>
|
|
294
|
-
<div class="eds-input-
|
|
294
|
+
<div class="eds-input-chat__actions eds-input-chat__actions--trailing">
|
|
295
295
|
<slot name="trailing"></slot>
|
|
296
296
|
${this.sendPosition === 'toolbar' ? this._renderSendButton() : nothing}
|
|
297
297
|
</div>
|
|
@@ -301,63 +301,63 @@ let EdsWcInputPrompt = class EdsWcInputPrompt extends EdsBaseElement {
|
|
|
301
301
|
};
|
|
302
302
|
__decorate([
|
|
303
303
|
property({ type: String })
|
|
304
|
-
],
|
|
304
|
+
], EdsWcInputChat.prototype, "placeholder", void 0);
|
|
305
305
|
__decorate([
|
|
306
306
|
property({ type: String, reflect: true })
|
|
307
|
-
],
|
|
307
|
+
], EdsWcInputChat.prototype, "size", void 0);
|
|
308
308
|
__decorate([
|
|
309
309
|
property({ type: String })
|
|
310
|
-
],
|
|
310
|
+
], EdsWcInputChat.prototype, "value", void 0);
|
|
311
311
|
__decorate([
|
|
312
312
|
property({ type: Boolean, reflect: true })
|
|
313
|
-
],
|
|
313
|
+
], EdsWcInputChat.prototype, "disabled", void 0);
|
|
314
314
|
__decorate([
|
|
315
315
|
property({ type: Boolean, reflect: true })
|
|
316
|
-
],
|
|
316
|
+
], EdsWcInputChat.prototype, "readonly", void 0);
|
|
317
317
|
__decorate([
|
|
318
318
|
property({ type: Boolean, reflect: true })
|
|
319
|
-
],
|
|
319
|
+
], EdsWcInputChat.prototype, "invalid", void 0);
|
|
320
320
|
__decorate([
|
|
321
321
|
property({ type: Number, attribute: 'min-rows' })
|
|
322
|
-
],
|
|
322
|
+
], EdsWcInputChat.prototype, "minRows", void 0);
|
|
323
323
|
__decorate([
|
|
324
324
|
property({ type: Number, attribute: 'max-rows' })
|
|
325
|
-
],
|
|
325
|
+
], EdsWcInputChat.prototype, "maxRows", void 0);
|
|
326
326
|
__decorate([
|
|
327
327
|
property({ type: Number, attribute: 'max-length' })
|
|
328
|
-
],
|
|
328
|
+
], EdsWcInputChat.prototype, "maxLength", void 0);
|
|
329
329
|
__decorate([
|
|
330
330
|
property({ type: Boolean, attribute: 'submit-on-enter' })
|
|
331
|
-
],
|
|
331
|
+
], EdsWcInputChat.prototype, "submitOnEnter", void 0);
|
|
332
332
|
__decorate([
|
|
333
333
|
property({ type: Boolean, attribute: 'hide-send-button' })
|
|
334
|
-
],
|
|
334
|
+
], EdsWcInputChat.prototype, "hideSendButton", void 0);
|
|
335
335
|
__decorate([
|
|
336
336
|
property({ type: String, reflect: true, attribute: 'send-position' })
|
|
337
|
-
],
|
|
337
|
+
], EdsWcInputChat.prototype, "sendPosition", void 0);
|
|
338
338
|
__decorate([
|
|
339
339
|
property({ type: Boolean, reflect: true })
|
|
340
|
-
],
|
|
340
|
+
], EdsWcInputChat.prototype, "loading", void 0);
|
|
341
341
|
__decorate([
|
|
342
342
|
property({ type: String, attribute: 'send-icon' })
|
|
343
|
-
],
|
|
343
|
+
], EdsWcInputChat.prototype, "sendIcon", void 0);
|
|
344
344
|
__decorate([
|
|
345
345
|
property({ type: String, attribute: 'stop-icon' })
|
|
346
|
-
],
|
|
346
|
+
], EdsWcInputChat.prototype, "stopIcon", void 0);
|
|
347
347
|
__decorate([
|
|
348
348
|
property({ type: String, attribute: 'send-aria-label' })
|
|
349
|
-
],
|
|
349
|
+
], EdsWcInputChat.prototype, "sendAriaLabel", void 0);
|
|
350
350
|
__decorate([
|
|
351
351
|
property({ type: String, attribute: 'stop-aria-label' })
|
|
352
|
-
],
|
|
352
|
+
], EdsWcInputChat.prototype, "stopAriaLabel", void 0);
|
|
353
353
|
__decorate([
|
|
354
354
|
property({ type: String, attribute: 'field-aria-label' })
|
|
355
|
-
],
|
|
355
|
+
], EdsWcInputChat.prototype, "fieldAriaLabel", void 0);
|
|
356
356
|
__decorate([
|
|
357
357
|
query('textarea')
|
|
358
|
-
],
|
|
359
|
-
|
|
360
|
-
customElement('eds-wc-input-
|
|
361
|
-
],
|
|
362
|
-
export {
|
|
363
|
-
//# sourceMappingURL=eds-wc-input-
|
|
358
|
+
], EdsWcInputChat.prototype, "_textarea", void 0);
|
|
359
|
+
EdsWcInputChat = __decorate([
|
|
360
|
+
customElement('eds-wc-input-chat')
|
|
361
|
+
], EdsWcInputChat);
|
|
362
|
+
export { EdsWcInputChat };
|
|
363
|
+
//# sourceMappingURL=eds-wc-input-chat.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"eds-wc-input-chat.js","sourceRoot":"","sources":["../../src/eds-input-chat/eds-wc-input-chat.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,OAAO,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,0CAA0C,CAAC;AAQlD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,cAAc;IAA3C;;QAGH,sFAAsF;QAC1D,gBAAW,GAAG,mBAAmB,CAAC;QAE9D,yCAAyC;QACE,SAAI,GAAuB,GAAG,CAAC;QAE1E,kCAAkC;QACN,UAAK,GAAG,EAAE,CAAC;QAEvC,wCAAwC;QACI,aAAQ,GAAG,KAAK,CAAC;QAE7D,wCAAwC;QACI,aAAQ,GAAG,KAAK,CAAC;QAE7D,yDAAyD;QACb,YAAO,GAAG,KAAK,CAAC;QAE5D,+DAA+D;QACZ,YAAO,GAAG,CAAC,CAAC;QAE/D,sFAAsF;QACnC,YAAO,GAAG,CAAC,CAAC;QAE/D,qEAAqE;QAChB,cAAS,GAAkB,IAAI,CAAC;QAErF,gFAAgF;QACrB,kBAAa,GAAG,IAAI,CAAC;QAEhF,gEAAgE;QACJ,mBAAc,GAAG,KAAK,CAAC;QAEnF,gEAAgE;QAEhE,iBAAY,GAA+B,SAAS,CAAC;QAErD,kFAAkF;QACtC,YAAO,GAAG,KAAK,CAAC;QAE5D,kEAAkE;QACd,aAAQ,GAAG,UAAU,CAAC;QAE1E,sFAAsF;QAClC,aAAQ,GAAG,MAAM,CAAC;QAEtE,mEAAmE;QACT,kBAAa,GAAG,aAAa,CAAC;QAExF,uEAAuE;QACb,kBAAa,GAAG,iBAAiB,CAAC;QAE5F,2DAA2D;QACA,mBAAc,GAAG,QAAQ,CAAC;QAI7E,eAAU,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;IA8OhD,CAAC;aAzSU,mBAAc,GAAG,IAAI,AAAP,CAAQ;aA6Db,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyG3B,AAzGqB,CAyGpB;IAEF,+DAA+D;IAC/D,IAAY,UAAU;QAClB,OAAO,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC,MAAM,GAAG,CAAC,CAAC;IAC7F,CAAC;IAED,IAAY,qBAAqB;QAC7B,OAAO,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,UAAU,CAAC;IAC3C,CAAC;IAEQ,iBAAiB;QACtB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAEQ,OAAO,CAAC,OAA6B;QAC1C,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACvB,IAAI,CAAC,SAAS,EAAE,CAAC;YACjB,IAAI,CAAC,WAAW,EAAE,CAAC;QACvB,CAAC;IACL,CAAC;IAEQ,YAAY;QACjB,IAAI,CAAC,WAAW,EAAE,CAAC;IACvB,CAAC;IAEO,SAAS;QACb,IAAI,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;QAC/C,IAAI,CAAC,UAAU,CAAC,WAAW,CACvB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,EACzC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,SAAS,CAC7C,CAAC;IACN,CAAC;IAEO,WAAW;QACf,MAAM,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC;QAC1B,IAAI,CAAC,EAAE;YAAE,OAAO;QAChB,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;QACzB,MAAM,UAAU,GAAG,UAAU,CAAC,gBAAgB,CAAC,EAAE,CAAC,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACrE,MAAM,SAAS,GAAG,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC;QAC1E,MAAM,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QAClD,EAAE,CAAC,KAAK,CAAC,MAAM,GAAG,GAAG,IAAI,IAAI,CAAC;QAC9B,EAAE,CAAC,KAAK,CAAC,SAAS,GAAG,EAAE,CAAC,YAAY,GAAG,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC;IACzE,CAAC;IAED,4DAA4D;IAC5D,iBAAiB;QACb,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;QAChB,IAAI,CAAC,SAAS,EAAE,CAAC;IACrB,CAAC;IAED,oBAAoB,CAAC,QAAiB;QAClC,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC7B,CAAC;IAED,MAAM;QACF,IAAI,CAAC,IAAI,CAAC,UAAU;YAAE,OAAO;QAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,eAAe,EAAE;YAChD,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE;SAC3D,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,QAAQ,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA8B,CAAC,KAAK,CAAC;QACrD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE;YAC/C,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK;SACpD,CAAC,CAAC,CAAC;IACR,CAAC;IAEO,UAAU,CAAC,CAAgB;QAC/B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,CAAC,WAAW;YAAE,OAAO;QACpF,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,CAAC,MAAM,EAAE,CAAC;IAClB,CAAC;IAEO,YAAY;QAChB,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;YACf,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,aAAa,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACtF,OAAO;QACX,CAAC;QACD,IAAI,CAAC,MAAM,EAAE,CAAC;QACd,IAAI,CAAC,SAAS,EAAE,KAAK,EAAE,CAAC;IAC5B,CAAC;IAEO,iBAAiB;QACrB,IAAI,IAAI,CAAC,cAAc;YAAE,OAAO,OAAO,CAAC;QACxC,OAAO,IAAI,CAAA;;;;;yBAKM,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ;wBAC7C,IAAI,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG;8BACxB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;6BACvD,CAAC,IAAI,CAAC,qBAAqB;iCACvB,IAAI,CAAC,YAAY;;SAEzC,CAAC;IACN,CAAC;IAEkB,MAAM;QACrB,OAAO,IAAI,CAAA;;;;4BAIS,IAAI,CAAC,OAAO;mCACL,IAAI,CAAC,WAAW;kCACjB,IAAI,CAAC,cAAc;iCACpB,IAAI,CAAC,SAAS,IAAI,OAAO;oCACtB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;8BACrC,IAAI,CAAC,KAAK;iCACP,IAAI,CAAC,QAAQ;iCACb,IAAI,CAAC,QAAQ;8BAChB,IAAI,CAAC,QAAQ;gCACX,IAAI,CAAC,UAAU;;kBAE7B,IAAI,CAAC,YAAY,KAAK,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,OAAO;;;;;;;;;sBAS5D,IAAI,CAAC,YAAY,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,EAAE,CAAC,CAAC,CAAC,OAAO;;;SAGjF,CAAC;IACN,CAAC;;AArS2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAAmC;AAGnB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CAAgC;AAG9C;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAY;AAGK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAiB;AAGT;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CAAa;AAGZ;IAAlD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,EAAE,CAAC;+CAAa;AAGV;IAApD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;iDAAiC;AAG1B;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDAAsB;AAGpB;IAA3D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sDAAwB;AAInF;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;oDACjB;AAGT;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAiB;AAGR;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;gDAAuB;AAGtB;IAAnD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;gDAAmB;AAGZ;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDAA+B;AAG9B;IAAzD,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,iBAAiB,EAAE,CAAC;qDAAmC;AAGjC;IAA1D,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,kBAAkB,EAAE,CAAC;sDAA2B;AAE1D;IAA1B,KAAK,CAAC,UAAU,CAAC;iDAAyC;AA1DlD,cAAc;IAD1B,aAAa,CAAC,mBAAmB,CAAC;GACtB,cAAc,CA0S1B"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/eds-input-chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AACrD,YAAY,EAAE,kBAAkB,EAAE,0BAA0B,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/eds-input-chat/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC"}
|
|
@@ -5,17 +5,18 @@ import '../eds-icon-button/eds-wc-icon-button.js';
|
|
|
5
5
|
/**
|
|
6
6
|
* `<eds-wc-input-password>` — EDS Password Input Web Component.
|
|
7
7
|
*
|
|
8
|
-
* A composite password field: an `<eds-wc-input-button>` wrapping an
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
8
|
+
* A composite password field: an `<eds-wc-input-button>` wrapping an `<eds-wc-input-text>` (default
|
|
9
|
+
* slot) and a trailing `<eds-wc-icon-button>` toggle (`slot="button"`) that switches the field
|
|
10
|
+
* between `type="password"` (masked) and `type="text"` (plain). The toggle flips its icon between
|
|
11
|
+
* `eye` (currently hidden) and `eye-slash` (currently shown), carries `aria-pressed` (`true` when
|
|
12
|
+
* the value is visible), and swaps its `aria-label` between `showLabel` and `hideLabel`. Because the
|
|
13
|
+
* toggle is an `eds-wc-icon-button` living in the input-button's `button` slot, it participates in
|
|
14
|
+
* the input-button's roving-tabindex focus model and receives the inset, critical-aware focus ring.
|
|
14
15
|
*
|
|
15
|
-
* 1:1 projection of the Angular `eds-input-password` component. Like the Angular
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
16
|
+
* 1:1 projection of the Angular `eds-input-password` component. Like the Angular source it is a form
|
|
17
|
+
* control: it participates in the surrounding `<form>` via `ElementInternals` (form-associated
|
|
18
|
+
* custom element) and also dispatches `input` / `change` events. The visibility toggle state is
|
|
19
|
+
* internal.
|
|
19
20
|
*
|
|
20
21
|
* @example
|
|
21
22
|
* ```html
|
|
@@ -50,36 +51,36 @@ export declare class EdsWcInputPassword extends EdsBaseElement {
|
|
|
50
51
|
*/
|
|
51
52
|
placeholder: string;
|
|
52
53
|
/**
|
|
53
|
-
* Controls whether the input is disabled.
|
|
54
|
+
* Controls whether the input is disabled. Reflected as the `disabled` host attribute.
|
|
54
55
|
* @default false
|
|
55
56
|
*/
|
|
56
57
|
disabled: boolean;
|
|
57
58
|
/**
|
|
58
|
-
* Controls whether the input is readonly.
|
|
59
|
+
* Controls whether the input is readonly. Reflected as the `readonly` host attribute.
|
|
59
60
|
* @default false
|
|
60
61
|
*/
|
|
61
62
|
readonly: boolean;
|
|
62
63
|
/**
|
|
63
|
-
* Controls whether the input shows an invalid/error state. Reflected as the
|
|
64
|
-
*
|
|
64
|
+
* Controls whether the input shows an invalid/error state. Reflected as the `invalid` host
|
|
65
|
+
* attribute (String-Props model).
|
|
65
66
|
* @default false
|
|
66
67
|
*/
|
|
67
68
|
invalid: boolean;
|
|
68
69
|
/**
|
|
69
|
-
* Accessible label for the visibility toggle button when the password is
|
|
70
|
-
*
|
|
70
|
+
* Accessible label for the visibility toggle button when the password is hidden (pressing it
|
|
71
|
+
* will show the password).
|
|
71
72
|
* @default 'Show password'
|
|
72
73
|
*/
|
|
73
74
|
showLabel: string;
|
|
74
75
|
/**
|
|
75
|
-
* Accessible label for the visibility toggle button when the password is
|
|
76
|
-
*
|
|
76
|
+
* Accessible label for the visibility toggle button when the password is shown (pressing it
|
|
77
|
+
* will hide the password).
|
|
77
78
|
* @default 'Hide password'
|
|
78
79
|
*/
|
|
79
80
|
hideLabel: string;
|
|
80
81
|
/**
|
|
81
|
-
* Whether the password value is currently visible (`true` → `text`,
|
|
82
|
-
*
|
|
82
|
+
* Whether the password value is currently visible (`true` → `text`, `false` → `password`).
|
|
83
|
+
* Internal toggle state.
|
|
83
84
|
*/
|
|
84
85
|
private _visible;
|
|
85
86
|
private _inputText;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eds-wc-input-password.d.ts","sourceRoot":"","sources":["../../src/eds-input-password/eds-wc-input-password.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAElD
|
|
1
|
+
{"version":3,"file":"eds-wc-input-password.d.ts","sourceRoot":"","sources":["../../src/eds-input-password/eds-wc-input-password.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,qBACa,kBAAmB,SAAQ,cAAc;IAClD,iFAAiF;IACjF,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,UAAU,CAA0B;IAE5C;;;OAGG;IAEH,OAAO,SAAwB;IAE/B;;;OAGG;IAEH,KAAK,SAAM;IAEX;;;OAGG;IAEH,WAAW,SAAM;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;OAGG;IAEH,QAAQ,UAAS;IAEjB;;;;OAIG;IAEH,OAAO,UAAS;IAEhB;;;;OAIG;IAEH,SAAS,SAAmB;IAE5B;;;;OAIG;IAEH,SAAS,SAAmB;IAE5B;;;OAGG;IAEH,OAAO,CAAC,QAAQ,CAAS;IAGzB,OAAO,CAAC,UAAU,CAAmC;IAErD,+DAA+D;IAC/D,OAAO,KAAK,UAAU,GAErB;IAED,0EAA0E;IAC1E,OAAO,KAAK,WAAW,GAEtB;IAED,iFAAiF;IACjF,OAAO,KAAK,YAAY,GAEvB;IAED,OAAgB,MAAM,0BAyEpB;cAEiB,MAAM;IA4BhB,iBAAiB,IAAI,IAAI;IAKlC,wEAAwE;IACxE,OAAO,CAAC,iBAAiB;IAOzB,kDAAkD;IAClD,OAAO,CAAC,QAAQ;IAWhB,yDAAyD;IACzD,OAAO,CAAC,SAAS;IAQjB,uEAAuE;IACvE,OAAO,CAAC,cAAc;IAStB,0DAA0D;IAC1D,iBAAiB,IAAI,IAAI;IAMzB,mEAAmE;IACnE,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;cAI1B,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI;CAKlE;AAED,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,uBAAuB,EAAE,kBAAkB,CAAC;KAC/C;CACJ"}
|
|
@@ -13,17 +13,18 @@ import '../eds-icon-button/eds-wc-icon-button.js';
|
|
|
13
13
|
/**
|
|
14
14
|
* `<eds-wc-input-password>` — EDS Password Input Web Component.
|
|
15
15
|
*
|
|
16
|
-
* A composite password field: an `<eds-wc-input-button>` wrapping an
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
*
|
|
21
|
-
*
|
|
16
|
+
* A composite password field: an `<eds-wc-input-button>` wrapping an `<eds-wc-input-text>` (default
|
|
17
|
+
* slot) and a trailing `<eds-wc-icon-button>` toggle (`slot="button"`) that switches the field
|
|
18
|
+
* between `type="password"` (masked) and `type="text"` (plain). The toggle flips its icon between
|
|
19
|
+
* `eye` (currently hidden) and `eye-slash` (currently shown), carries `aria-pressed` (`true` when
|
|
20
|
+
* the value is visible), and swaps its `aria-label` between `showLabel` and `hideLabel`. Because the
|
|
21
|
+
* toggle is an `eds-wc-icon-button` living in the input-button's `button` slot, it participates in
|
|
22
|
+
* the input-button's roving-tabindex focus model and receives the inset, critical-aware focus ring.
|
|
22
23
|
*
|
|
23
|
-
* 1:1 projection of the Angular `eds-input-password` component. Like the Angular
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
24
|
+
* 1:1 projection of the Angular `eds-input-password` component. Like the Angular source it is a form
|
|
25
|
+
* control: it participates in the surrounding `<form>` via `ElementInternals` (form-associated
|
|
26
|
+
* custom element) and also dispatches `input` / `change` events. The visibility toggle state is
|
|
27
|
+
* internal.
|
|
27
28
|
*
|
|
28
29
|
* @example
|
|
29
30
|
* ```html
|
|
@@ -58,36 +59,36 @@ let EdsWcInputPassword = class EdsWcInputPassword extends EdsBaseElement {
|
|
|
58
59
|
*/
|
|
59
60
|
this.placeholder = '';
|
|
60
61
|
/**
|
|
61
|
-
* Controls whether the input is disabled.
|
|
62
|
+
* Controls whether the input is disabled. Reflected as the `disabled` host attribute.
|
|
62
63
|
* @default false
|
|
63
64
|
*/
|
|
64
65
|
this.disabled = false;
|
|
65
66
|
/**
|
|
66
|
-
* Controls whether the input is readonly.
|
|
67
|
+
* Controls whether the input is readonly. Reflected as the `readonly` host attribute.
|
|
67
68
|
* @default false
|
|
68
69
|
*/
|
|
69
70
|
this.readonly = false;
|
|
70
71
|
/**
|
|
71
|
-
* Controls whether the input shows an invalid/error state. Reflected as the
|
|
72
|
-
*
|
|
72
|
+
* Controls whether the input shows an invalid/error state. Reflected as the `invalid` host
|
|
73
|
+
* attribute (String-Props model).
|
|
73
74
|
* @default false
|
|
74
75
|
*/
|
|
75
76
|
this.invalid = false;
|
|
76
77
|
/**
|
|
77
|
-
* Accessible label for the visibility toggle button when the password is
|
|
78
|
-
*
|
|
78
|
+
* Accessible label for the visibility toggle button when the password is hidden (pressing it
|
|
79
|
+
* will show the password).
|
|
79
80
|
* @default 'Show password'
|
|
80
81
|
*/
|
|
81
82
|
this.showLabel = 'Show password';
|
|
82
83
|
/**
|
|
83
|
-
* Accessible label for the visibility toggle button when the password is
|
|
84
|
-
*
|
|
84
|
+
* Accessible label for the visibility toggle button when the password is shown (pressing it
|
|
85
|
+
* will hide the password).
|
|
85
86
|
* @default 'Hide password'
|
|
86
87
|
*/
|
|
87
88
|
this.hideLabel = 'Hide password';
|
|
88
89
|
/**
|
|
89
|
-
* Whether the password value is currently visible (`true` → `text`,
|
|
90
|
-
*
|
|
90
|
+
* Whether the password value is currently visible (`true` → `text`, `false` → `password`).
|
|
91
|
+
* Internal toggle state.
|
|
91
92
|
*/
|
|
92
93
|
this._visible = false;
|
|
93
94
|
}
|
|
@@ -120,8 +121,9 @@ let EdsWcInputPassword = class EdsWcInputPassword extends EdsBaseElement {
|
|
|
120
121
|
width: 100%;
|
|
121
122
|
}
|
|
122
123
|
|
|
123
|
-
/* The trailing toggle is an eds-wc-icon-button
|
|
124
|
-
|
|
124
|
+
/* The trailing toggle is an eds-wc-icon-button, which eds-wc-input-button does NOT style
|
|
125
|
+
(it only joins borders on the generic button slot). Give it the same bordered, divided
|
|
126
|
+
treatment as a text button sitting at the end of the field. */
|
|
125
127
|
eds-wc-icon-button {
|
|
126
128
|
border: var(--eds-bw-xs) solid var(--eds-c-border-neutral);
|
|
127
129
|
border-left: none;
|
|
@@ -144,14 +146,25 @@ let EdsWcInputPassword = class EdsWcInputPassword extends EdsBaseElement {
|
|
|
144
146
|
width: 1px;
|
|
145
147
|
}
|
|
146
148
|
|
|
147
|
-
/*
|
|
149
|
+
/* The masked "dot" glyph renders at 1rem — mirrors the Angular SCSS
|
|
150
|
+
\`::ng-deep input[type="password"] { font-size: var(--eds-f-s-m); }\`. Scoped to the
|
|
151
|
+
masked input only (type="password"); the composed input lives in eds-wc-input-text's
|
|
152
|
+
shadow root, so expose it as a CSS custom property the sibling consumes.
|
|
153
|
+
LIMITATION: Shadow-DOM encapsulation prevents reaching the slotted input's internal
|
|
154
|
+
\`input\` element directly; eds-wc-input-text's own styles apply this when masked. */
|
|
155
|
+
eds-wc-input-text {
|
|
156
|
+
--_eds-input-password-masked-font-size: var(--eds-f-s-m);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* Disabled — mirror the eds-input mixin's disabled visuals on the toggle so both halves of
|
|
160
|
+
the field match. */
|
|
148
161
|
:host([disabled]) eds-wc-icon-button {
|
|
149
162
|
background-color: var(--eds-c-surface-disabled);
|
|
150
163
|
border-color: var(--eds-c-border-disabled);
|
|
151
164
|
}
|
|
152
165
|
|
|
153
|
-
/* Readonly — the input becomes borderless/transparent; match the toggle and
|
|
154
|
-
|
|
166
|
+
/* Readonly — the input becomes borderless/transparent; match the toggle and drop its
|
|
167
|
+
divider so the field reads as static text. */
|
|
155
168
|
:host([readonly]) eds-wc-icon-button {
|
|
156
169
|
background-color: transparent;
|
|
157
170
|
border-color: transparent;
|
|
@@ -159,12 +172,20 @@ let EdsWcInputPassword = class EdsWcInputPassword extends EdsBaseElement {
|
|
|
159
172
|
:host([readonly]) eds-wc-icon-button::before {
|
|
160
173
|
display: none;
|
|
161
174
|
}
|
|
175
|
+
|
|
176
|
+
/* Invalid state — reflected as the \`invalid\` host attribute. The composed input-text and
|
|
177
|
+
the toggle both carry the critical border. */
|
|
178
|
+
:host([invalid]) eds-wc-input-text,
|
|
179
|
+
:host([invalid]) eds-wc-icon-button {
|
|
180
|
+
border-color: var(--eds-c-border-critical);
|
|
181
|
+
}
|
|
162
182
|
`; }
|
|
163
183
|
render() {
|
|
164
184
|
return html `
|
|
165
|
-
<eds-wc-input-button
|
|
185
|
+
<eds-wc-input-button
|
|
186
|
+
?invalid="${this.invalid}"
|
|
187
|
+
position="end">
|
|
166
188
|
<eds-wc-input-text
|
|
167
|
-
slot="input"
|
|
168
189
|
part="input"
|
|
169
190
|
type="${this._inputType}"
|
|
170
191
|
.value="${this.value}"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"eds-wc-input-password.js","sourceRoot":"","sources":["../../src/eds-input-password/eds-wc-input-password.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,4CAA4C,CAAC;AACpD,OAAO,wCAAwC,CAAC;AAChD,OAAO,0CAA0C,CAAC;AAElD
|
|
1
|
+
{"version":3,"file":"eds-wc-input-password.js","sourceRoot":"","sources":["../../src/eds-input-password/eds-wc-input-password.ts"],"names":[],"mappings":"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"}
|