@proximus/lavender-button-icon 2.0.0-alpha.227 → 2.0.0-alpha.229
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/dist/ButtonIcon.d.ts +67 -0
- package/dist/custom-elements.json +305 -8
- package/dist/index.es.js +26 -17
- package/dist/vscode.html-custom-data.json +62 -2
- package/dist/web-types.json +96 -4
- package/package.json +1 -1
package/dist/ButtonIcon.d.ts
CHANGED
|
@@ -9,10 +9,41 @@ export type ButtonIconVariant = (typeof buttonIconVariantValues)[number];
|
|
|
9
9
|
* @attr {string} value - The value associated with the button's name when it's submitted with a form.
|
|
10
10
|
* @attr {string} type - The default behavior of the button. Possible values are 'submit', 'reset', and 'button'.
|
|
11
11
|
* @attr {boolean} disabled - Whether the button is disabled.
|
|
12
|
+
* @attr {string} commandfor - The ID of the command target.
|
|
13
|
+
* @attr {string} popovertarget - The ID of the target popover.
|
|
14
|
+
* @attr {string} form - The ID of the associated form; the form property is the native form reference.
|
|
12
15
|
*/
|
|
13
16
|
export declare class ButtonIcon extends PxElement<HTMLButtonElement> {
|
|
14
17
|
protected static readonly template: HTMLTemplateElement;
|
|
15
18
|
static nativeName: string;
|
|
19
|
+
static nativeProperties: {
|
|
20
|
+
form: "readonly";
|
|
21
|
+
labels: "readonly";
|
|
22
|
+
popoverTargetElement: "writable";
|
|
23
|
+
commandForElement: "writable";
|
|
24
|
+
validity: "readonly";
|
|
25
|
+
validationMessage: "readonly";
|
|
26
|
+
willValidate: "readonly";
|
|
27
|
+
};
|
|
28
|
+
static nativeMethods: ("checkValidity" | "reportValidity" | "setCustomValidity")[];
|
|
29
|
+
static nativeAttributes: {
|
|
30
|
+
disabled: "disabled"[];
|
|
31
|
+
name: "name"[];
|
|
32
|
+
value: "value"[];
|
|
33
|
+
type: "type"[];
|
|
34
|
+
formaction: "formAction"[];
|
|
35
|
+
formenctype: "formEnctype"[];
|
|
36
|
+
formmethod: "formMethod"[];
|
|
37
|
+
formnovalidate: "formNoValidate"[];
|
|
38
|
+
formtarget: "formTarget"[];
|
|
39
|
+
form: never[];
|
|
40
|
+
autofocus: "autofocus"[];
|
|
41
|
+
title: "title"[];
|
|
42
|
+
popovertarget: never[];
|
|
43
|
+
popovertargetaction: "popoverTargetAction"[];
|
|
44
|
+
command: "command"[];
|
|
45
|
+
commandfor: never[];
|
|
46
|
+
};
|
|
16
47
|
constructor();
|
|
17
48
|
static get observedAttributes(): string[];
|
|
18
49
|
connectedCallback(): void;
|
|
@@ -31,4 +62,40 @@ export declare class ButtonIcon extends PxElement<HTMLButtonElement> {
|
|
|
31
62
|
set variant(value: string | null);
|
|
32
63
|
get ariaExpanded(): string | null;
|
|
33
64
|
set ariaExpanded(value: string | null);
|
|
65
|
+
/** @attr {boolean} disabled - Whether the native control is disabled. */
|
|
66
|
+
disabled: boolean;
|
|
67
|
+
/** @attr {string} name - The native element name. */
|
|
68
|
+
name: string;
|
|
69
|
+
/** @attr {string} value - The initial native value; use value for live state. */
|
|
70
|
+
value: string;
|
|
71
|
+
/** @attr {"submit" | "reset" | "button"} type - The native element type. */
|
|
72
|
+
type: 'submit' | 'reset' | 'button';
|
|
73
|
+
/** @attr {string} formaction - The submission URL override. */
|
|
74
|
+
formAction: string;
|
|
75
|
+
/** @attr {string} formenctype - The submission encoding override. */
|
|
76
|
+
formEnctype: string;
|
|
77
|
+
/** @attr {string} formmethod - The submission method override. */
|
|
78
|
+
formMethod: string;
|
|
79
|
+
/** @attr {boolean} formnovalidate - Whether submission bypasses validation. */
|
|
80
|
+
formNoValidate: boolean;
|
|
81
|
+
/** @attr {string} formtarget - The submission target override. */
|
|
82
|
+
formTarget: string;
|
|
83
|
+
/** @attr {boolean} autofocus - Whether the native element requests autofocus. */
|
|
84
|
+
autofocus: boolean;
|
|
85
|
+
/** @attr {string} title - The native element tooltip. */
|
|
86
|
+
title: string;
|
|
87
|
+
/** @attr {string} popovertargetaction - The action for the target popover. */
|
|
88
|
+
popoverTargetAction: string;
|
|
89
|
+
/** @attr {string} command - The command for the target element, where supported. */
|
|
90
|
+
command: string;
|
|
91
|
+
readonly form: HTMLFormElement | null;
|
|
92
|
+
readonly labels: NodeListOf<HTMLLabelElement>;
|
|
93
|
+
popoverTargetElement: Element | null;
|
|
94
|
+
commandForElement: Element | null;
|
|
95
|
+
readonly validity: ValidityState;
|
|
96
|
+
readonly validationMessage: string;
|
|
97
|
+
readonly willValidate: boolean;
|
|
98
|
+
readonly checkValidity: HTMLButtonElement['checkValidity'];
|
|
99
|
+
readonly reportValidity: HTMLButtonElement['reportValidity'];
|
|
100
|
+
readonly setCustomValidity: HTMLButtonElement['setCustomValidity'];
|
|
34
101
|
}
|
|
@@ -43,6 +43,24 @@
|
|
|
43
43
|
"static": true,
|
|
44
44
|
"default": "'button'"
|
|
45
45
|
},
|
|
46
|
+
{
|
|
47
|
+
"kind": "field",
|
|
48
|
+
"name": "nativeProperties",
|
|
49
|
+
"static": true,
|
|
50
|
+
"default": "nativeButtonProperties"
|
|
51
|
+
},
|
|
52
|
+
{
|
|
53
|
+
"kind": "field",
|
|
54
|
+
"name": "nativeMethods",
|
|
55
|
+
"static": true,
|
|
56
|
+
"default": "nativeButtonMethods"
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"kind": "field",
|
|
60
|
+
"name": "nativeAttributes",
|
|
61
|
+
"static": true,
|
|
62
|
+
"default": "nativeButtonAttributes"
|
|
63
|
+
},
|
|
46
64
|
{
|
|
47
65
|
"kind": "method",
|
|
48
66
|
"name": "_toggleClass",
|
|
@@ -120,6 +138,188 @@
|
|
|
120
138
|
{
|
|
121
139
|
"kind": "field",
|
|
122
140
|
"name": "ariaExpanded"
|
|
141
|
+
},
|
|
142
|
+
{
|
|
143
|
+
"kind": "field",
|
|
144
|
+
"name": "disabled",
|
|
145
|
+
"type": {
|
|
146
|
+
"text": "boolean"
|
|
147
|
+
},
|
|
148
|
+
"attribute": "disabled"
|
|
149
|
+
},
|
|
150
|
+
{
|
|
151
|
+
"kind": "field",
|
|
152
|
+
"name": "name",
|
|
153
|
+
"type": {
|
|
154
|
+
"text": "string"
|
|
155
|
+
},
|
|
156
|
+
"attribute": "name"
|
|
157
|
+
},
|
|
158
|
+
{
|
|
159
|
+
"kind": "field",
|
|
160
|
+
"name": "value",
|
|
161
|
+
"type": {
|
|
162
|
+
"text": "string"
|
|
163
|
+
},
|
|
164
|
+
"attribute": "value"
|
|
165
|
+
},
|
|
166
|
+
{
|
|
167
|
+
"kind": "field",
|
|
168
|
+
"name": "type",
|
|
169
|
+
"type": {
|
|
170
|
+
"text": "'submit' | 'reset' | 'button'"
|
|
171
|
+
},
|
|
172
|
+
"attribute": "type"
|
|
173
|
+
},
|
|
174
|
+
{
|
|
175
|
+
"kind": "field",
|
|
176
|
+
"name": "formAction",
|
|
177
|
+
"type": {
|
|
178
|
+
"text": "string"
|
|
179
|
+
},
|
|
180
|
+
"attribute": "formaction"
|
|
181
|
+
},
|
|
182
|
+
{
|
|
183
|
+
"kind": "field",
|
|
184
|
+
"name": "formEnctype",
|
|
185
|
+
"type": {
|
|
186
|
+
"text": "string"
|
|
187
|
+
},
|
|
188
|
+
"attribute": "formenctype"
|
|
189
|
+
},
|
|
190
|
+
{
|
|
191
|
+
"kind": "field",
|
|
192
|
+
"name": "formMethod",
|
|
193
|
+
"type": {
|
|
194
|
+
"text": "string"
|
|
195
|
+
},
|
|
196
|
+
"attribute": "formmethod"
|
|
197
|
+
},
|
|
198
|
+
{
|
|
199
|
+
"kind": "field",
|
|
200
|
+
"name": "formNoValidate",
|
|
201
|
+
"type": {
|
|
202
|
+
"text": "boolean"
|
|
203
|
+
},
|
|
204
|
+
"attribute": "formnovalidate"
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
"kind": "field",
|
|
208
|
+
"name": "formTarget",
|
|
209
|
+
"type": {
|
|
210
|
+
"text": "string"
|
|
211
|
+
},
|
|
212
|
+
"attribute": "formtarget"
|
|
213
|
+
},
|
|
214
|
+
{
|
|
215
|
+
"kind": "field",
|
|
216
|
+
"name": "autofocus",
|
|
217
|
+
"type": {
|
|
218
|
+
"text": "boolean"
|
|
219
|
+
},
|
|
220
|
+
"attribute": "autofocus"
|
|
221
|
+
},
|
|
222
|
+
{
|
|
223
|
+
"kind": "field",
|
|
224
|
+
"name": "title",
|
|
225
|
+
"type": {
|
|
226
|
+
"text": "string"
|
|
227
|
+
},
|
|
228
|
+
"attribute": "title"
|
|
229
|
+
},
|
|
230
|
+
{
|
|
231
|
+
"kind": "field",
|
|
232
|
+
"name": "popoverTargetAction",
|
|
233
|
+
"type": {
|
|
234
|
+
"text": "string"
|
|
235
|
+
},
|
|
236
|
+
"attribute": "popovertargetaction"
|
|
237
|
+
},
|
|
238
|
+
{
|
|
239
|
+
"kind": "field",
|
|
240
|
+
"name": "command",
|
|
241
|
+
"type": {
|
|
242
|
+
"text": "string"
|
|
243
|
+
},
|
|
244
|
+
"attribute": "command"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
"kind": "field",
|
|
248
|
+
"name": "form",
|
|
249
|
+
"type": {
|
|
250
|
+
"text": "HTMLFormElement | null"
|
|
251
|
+
},
|
|
252
|
+
"readonly": true
|
|
253
|
+
},
|
|
254
|
+
{
|
|
255
|
+
"kind": "field",
|
|
256
|
+
"name": "labels",
|
|
257
|
+
"type": {
|
|
258
|
+
"text": "NodeListOf<HTMLLabelElement>"
|
|
259
|
+
},
|
|
260
|
+
"readonly": true
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
"kind": "field",
|
|
264
|
+
"name": "popoverTargetElement",
|
|
265
|
+
"type": {
|
|
266
|
+
"text": "Element | null"
|
|
267
|
+
}
|
|
268
|
+
},
|
|
269
|
+
{
|
|
270
|
+
"kind": "field",
|
|
271
|
+
"name": "commandForElement",
|
|
272
|
+
"type": {
|
|
273
|
+
"text": "Element | null"
|
|
274
|
+
}
|
|
275
|
+
},
|
|
276
|
+
{
|
|
277
|
+
"kind": "field",
|
|
278
|
+
"name": "validity",
|
|
279
|
+
"type": {
|
|
280
|
+
"text": "ValidityState"
|
|
281
|
+
},
|
|
282
|
+
"readonly": true
|
|
283
|
+
},
|
|
284
|
+
{
|
|
285
|
+
"kind": "field",
|
|
286
|
+
"name": "validationMessage",
|
|
287
|
+
"type": {
|
|
288
|
+
"text": "string"
|
|
289
|
+
},
|
|
290
|
+
"readonly": true
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
"kind": "field",
|
|
294
|
+
"name": "willValidate",
|
|
295
|
+
"type": {
|
|
296
|
+
"text": "boolean"
|
|
297
|
+
},
|
|
298
|
+
"readonly": true
|
|
299
|
+
},
|
|
300
|
+
{
|
|
301
|
+
"kind": "field",
|
|
302
|
+
"name": "checkValidity",
|
|
303
|
+
"type": {
|
|
304
|
+
"text": "HTMLButtonElement['checkValidity']"
|
|
305
|
+
},
|
|
306
|
+
"readonly": true
|
|
307
|
+
},
|
|
308
|
+
{
|
|
309
|
+
"kind": "field",
|
|
310
|
+
"name": "reportValidity",
|
|
311
|
+
"type": {
|
|
312
|
+
"text": "HTMLButtonElement['reportValidity']"
|
|
313
|
+
},
|
|
314
|
+
"readonly": true
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
"kind": "field",
|
|
318
|
+
"name": "setCustomValidity",
|
|
319
|
+
"type": {
|
|
320
|
+
"text": "HTMLButtonElement['setCustomValidity']"
|
|
321
|
+
},
|
|
322
|
+
"readonly": true
|
|
123
323
|
}
|
|
124
324
|
],
|
|
125
325
|
"attributes": [
|
|
@@ -139,32 +339,129 @@
|
|
|
139
339
|
"name": "aria-expanded"
|
|
140
340
|
},
|
|
141
341
|
{
|
|
342
|
+
"name": "disabled",
|
|
343
|
+
"type": {
|
|
344
|
+
"text": "boolean"
|
|
345
|
+
},
|
|
346
|
+
"fieldName": "disabled",
|
|
347
|
+
"description": "Whether the button is disabled."
|
|
348
|
+
},
|
|
349
|
+
{
|
|
350
|
+
"name": "name",
|
|
142
351
|
"type": {
|
|
143
352
|
"text": "string"
|
|
144
353
|
},
|
|
145
|
-
"
|
|
146
|
-
"
|
|
354
|
+
"fieldName": "name",
|
|
355
|
+
"description": "The name of the button, submitted as a pair with the button's value as part of the form data."
|
|
147
356
|
},
|
|
148
357
|
{
|
|
358
|
+
"name": "value",
|
|
149
359
|
"type": {
|
|
150
360
|
"text": "string"
|
|
151
361
|
},
|
|
152
|
-
"
|
|
153
|
-
"
|
|
362
|
+
"fieldName": "value",
|
|
363
|
+
"description": "The value associated with the button's name when it's submitted with a form."
|
|
154
364
|
},
|
|
155
365
|
{
|
|
366
|
+
"name": "type",
|
|
156
367
|
"type": {
|
|
157
368
|
"text": "string"
|
|
158
369
|
},
|
|
159
|
-
"
|
|
160
|
-
"
|
|
370
|
+
"fieldName": "type",
|
|
371
|
+
"description": "The default behavior of the button. Possible values are 'submit', 'reset', and 'button'."
|
|
161
372
|
},
|
|
162
373
|
{
|
|
374
|
+
"name": "formaction",
|
|
375
|
+
"type": {
|
|
376
|
+
"text": "string"
|
|
377
|
+
},
|
|
378
|
+
"fieldName": "formAction",
|
|
379
|
+
"description": "The submission URL override."
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"name": "formenctype",
|
|
383
|
+
"type": {
|
|
384
|
+
"text": "string"
|
|
385
|
+
},
|
|
386
|
+
"fieldName": "formEnctype",
|
|
387
|
+
"description": "The submission encoding override."
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"name": "formmethod",
|
|
391
|
+
"type": {
|
|
392
|
+
"text": "string"
|
|
393
|
+
},
|
|
394
|
+
"fieldName": "formMethod",
|
|
395
|
+
"description": "The submission method override."
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"name": "formnovalidate",
|
|
399
|
+
"type": {
|
|
400
|
+
"text": "boolean"
|
|
401
|
+
},
|
|
402
|
+
"fieldName": "formNoValidate",
|
|
403
|
+
"description": "Whether submission bypasses validation."
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"name": "formtarget",
|
|
407
|
+
"type": {
|
|
408
|
+
"text": "string"
|
|
409
|
+
},
|
|
410
|
+
"fieldName": "formTarget",
|
|
411
|
+
"description": "The submission target override."
|
|
412
|
+
},
|
|
413
|
+
{
|
|
414
|
+
"name": "autofocus",
|
|
163
415
|
"type": {
|
|
164
416
|
"text": "boolean"
|
|
165
417
|
},
|
|
166
|
-
"
|
|
167
|
-
"
|
|
418
|
+
"fieldName": "autofocus",
|
|
419
|
+
"description": "Whether the native element requests autofocus."
|
|
420
|
+
},
|
|
421
|
+
{
|
|
422
|
+
"name": "title",
|
|
423
|
+
"type": {
|
|
424
|
+
"text": "string"
|
|
425
|
+
},
|
|
426
|
+
"fieldName": "title",
|
|
427
|
+
"description": "The native element tooltip."
|
|
428
|
+
},
|
|
429
|
+
{
|
|
430
|
+
"name": "popovertargetaction",
|
|
431
|
+
"type": {
|
|
432
|
+
"text": "string"
|
|
433
|
+
},
|
|
434
|
+
"fieldName": "popoverTargetAction",
|
|
435
|
+
"description": "The action for the target popover."
|
|
436
|
+
},
|
|
437
|
+
{
|
|
438
|
+
"name": "command",
|
|
439
|
+
"type": {
|
|
440
|
+
"text": "string"
|
|
441
|
+
},
|
|
442
|
+
"fieldName": "command",
|
|
443
|
+
"description": "The command for the target element, where supported."
|
|
444
|
+
},
|
|
445
|
+
{
|
|
446
|
+
"type": {
|
|
447
|
+
"text": "string"
|
|
448
|
+
},
|
|
449
|
+
"description": "The ID of the command target.",
|
|
450
|
+
"name": "commandfor"
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
"type": {
|
|
454
|
+
"text": "string"
|
|
455
|
+
},
|
|
456
|
+
"description": "The ID of the target popover.",
|
|
457
|
+
"name": "popovertarget"
|
|
458
|
+
},
|
|
459
|
+
{
|
|
460
|
+
"type": {
|
|
461
|
+
"text": "string"
|
|
462
|
+
},
|
|
463
|
+
"description": "The ID of the associated form; the form property is the native form reference.",
|
|
464
|
+
"name": "form"
|
|
168
465
|
}
|
|
169
466
|
],
|
|
170
467
|
"superclass": {
|
package/dist/index.es.js
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
|
-
import { PxElement as e, accessibilityAttributes as t, createTemplate as n, log as r,
|
|
1
|
+
import { PxElement as e, accessibilityAttributes as t, createTemplate as n, log as r, nativeButtonAttributes as i, nativeButtonMethods as a, nativeButtonProperties as o, renderTemplate as s } from "@proximus/lavender-common";
|
|
2
2
|
//#region src/buttonicon.css?inline
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
3
|
+
var c = ":host{display:inline-block}.btn-icon,.btn-icon *{box-sizing:border-box}.btn-icon{font-size:var(--px-font-size-base);width:var(--px-size-l);height:var(--px-size-l);vertical-align:middle;cursor:pointer;--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);background:var(--px-color-background-container-primary-default);color:var(--px-color-icon-brand-inverted);border-radius:var(--px-radius-pill);padding:var(--px-padding-xs-mobile);border:var(--px-size-border-m) solid transparent;justify-content:center;align-items:center;display:inline-flex}.btn-icon ::slotted(px-icon){line-height:0}.btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-default);color:var(--px-color-icon-brand-default);border-color:var(--px-color-border-state-hover-default)}.btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-active-inverted);color:var(--px-color-icon-state-active-default);border-color:var(--px-color-border-state-active-default)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-mobile);outline:var(--px-focus-outline-mobile) solid var(--px-color-border-focus-outline-default)}.btn-icon[disabled],.btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-state-disabled-default);cursor:default;pointer-events:none}.btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-default);color:var(--px-color-icon-brand-default);cursor:inherit}.btn-icon--size-small{padding:var(--px-padding-2xs-mobile);width:var(--px-size-m);height:var(--px-size-m)}.btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-default);color:var(--px-color-icon-brand-default)}.btn-icon--variant-naked{color:var(--px-color-icon-brand-default);background-color:#0000;width:auto;height:auto}:host([inverted]) .btn-icon{background:var(--px-color-background-container-primary-inverted);color:var(--px-color-icon-brand-default)}:host([inverted]) .btn-icon:hover:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-bordered-inverted);color:var(--px-color-icon-brand-inverted);border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .btn-icon:active:not([disabled],[aria-disabled=true],.btn-icon--state-loading){background:var(--px-color-background-state-hover-default);color:var(--px-color-icon-state-active-inverted);border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .btn-icon[disabled],:host([inverted]) .btn-icon[aria-disabled=true]{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-state-disabled-inverted)}:host([inverted]) .btn-icon.btn-icon--state-loading{background:var(--px-color-background-state-disabled-inverted);color:var(--px-color-icon-brand-inverted);border-color:#0000}:host([inverted]) .btn-icon.btn-icon--variant-naked{color:var(--px-color-icon-brand-inverted);background-color:#0000}:host([inverted]) .btn-icon--variant-secondary{background-color:var(--px-color-background-container-secondary-inverted);color:var(--px-color-icon-brand-inverted)}@media screen and (width>=48rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}@media screen and (width>=64.0625rem){.btn-icon{padding:var(--px-padding-xs-desktop)}.btn-icon:focus-visible:not([disabled],[aria-disabled=true]){outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}.btn-icon--size-small{padding:var(--px-padding-2xs-desktop)}}", l = new CSSStyleSheet();
|
|
4
|
+
l.replaceSync(c);
|
|
5
|
+
var u = [
|
|
6
6
|
"",
|
|
7
7
|
"default",
|
|
8
8
|
"small"
|
|
9
|
-
],
|
|
9
|
+
], d = [
|
|
10
10
|
"",
|
|
11
11
|
"default",
|
|
12
12
|
"secondary",
|
|
13
13
|
"naked"
|
|
14
|
-
],
|
|
14
|
+
], f = class c extends e {
|
|
15
15
|
static {
|
|
16
16
|
this.template = n("<button class=\"btn-icon\"><slot></slot></button>");
|
|
17
17
|
}
|
|
18
18
|
static {
|
|
19
19
|
this.nativeName = "button";
|
|
20
20
|
}
|
|
21
|
+
static {
|
|
22
|
+
this.nativeProperties = o;
|
|
23
|
+
}
|
|
24
|
+
static {
|
|
25
|
+
this.nativeMethods = a;
|
|
26
|
+
}
|
|
27
|
+
static {
|
|
28
|
+
this.nativeAttributes = i;
|
|
29
|
+
}
|
|
21
30
|
constructor() {
|
|
22
|
-
super(
|
|
31
|
+
super(l), s(this.shadowRoot, c.template);
|
|
23
32
|
}
|
|
24
33
|
static get observedAttributes() {
|
|
25
34
|
return [
|
|
@@ -41,21 +50,21 @@ var s = [
|
|
|
41
50
|
}), t || e.setAttribute("size", "s"), this.size === "small" && e.setAttribute("size", "xs"), n || e.setAttribute("color", "inherit");
|
|
42
51
|
}
|
|
43
52
|
}
|
|
44
|
-
attributeChangedCallback(e,
|
|
45
|
-
if (
|
|
53
|
+
attributeChangedCallback(e, n, r) {
|
|
54
|
+
if (n !== r) switch (e) {
|
|
46
55
|
case "loading":
|
|
47
56
|
this.updateLoading();
|
|
48
57
|
break;
|
|
49
58
|
case "size":
|
|
50
|
-
this.updateSize(
|
|
59
|
+
this.updateSize(n, r);
|
|
51
60
|
break;
|
|
52
61
|
case "variant":
|
|
53
|
-
this.updateVariant(
|
|
62
|
+
this.updateVariant(n, r);
|
|
54
63
|
break;
|
|
55
64
|
case "aria-expanded":
|
|
56
|
-
|
|
65
|
+
r && (this.$el.setAttribute("aria-expanded", r), this.removeAttribute("aria-expanded"));
|
|
57
66
|
break;
|
|
58
|
-
default: super.attributeChangedCallback(e,
|
|
67
|
+
default: t.includes(e) ? this._forwardNativeAttribute(e, r) : super.attributeChangedCallback(e, n, r);
|
|
59
68
|
}
|
|
60
69
|
}
|
|
61
70
|
_toggleClass(e, t) {
|
|
@@ -65,10 +74,10 @@ var s = [
|
|
|
65
74
|
this.$el.classList.toggle("btn-icon--state-loading");
|
|
66
75
|
}
|
|
67
76
|
updateSize(e, t) {
|
|
68
|
-
this.checkName(
|
|
77
|
+
this.checkName(u, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--size-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--size-${t}`)) : r(`"${t}" is not a valid size value for ${this.tagName.toLowerCase()}. Allowed values are: "${u.join("\", \"")}".`);
|
|
69
78
|
}
|
|
70
79
|
updateVariant(e, t) {
|
|
71
|
-
this.checkName(
|
|
80
|
+
this.checkName(d, t) ? (e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`btn-icon--variant-${e}`), t !== null && t !== "" && t !== "default" && this.$el.classList.toggle(`btn-icon--variant-${t}`)) : r(`"${t}" is not a valid variant value for ${this.tagName.toLowerCase()}. Allowed values are: "${d.join("\", \"")}".`);
|
|
72
81
|
}
|
|
73
82
|
get inverted() {
|
|
74
83
|
return this.hasAttribute("inverted");
|
|
@@ -101,6 +110,6 @@ var s = [
|
|
|
101
110
|
this._updateAttribute("aria-expanded", e);
|
|
102
111
|
}
|
|
103
112
|
};
|
|
104
|
-
customElements.get("px-button-icon") || customElements.define("px-button-icon",
|
|
113
|
+
customElements.get("px-button-icon") || customElements.define("px-button-icon", f);
|
|
105
114
|
//#endregion
|
|
106
|
-
export {
|
|
115
|
+
export { f as ButtonIcon, u as buttonIconSizeValues, d as buttonIconVariantValues };
|
|
@@ -11,6 +11,11 @@
|
|
|
11
11
|
{ "name": "size", "values": [] },
|
|
12
12
|
{ "name": "variant", "values": [] },
|
|
13
13
|
{ "name": "aria-expanded", "values": [] },
|
|
14
|
+
{
|
|
15
|
+
"name": "disabled",
|
|
16
|
+
"description": "Whether the button is disabled.",
|
|
17
|
+
"values": []
|
|
18
|
+
},
|
|
14
19
|
{
|
|
15
20
|
"name": "name",
|
|
16
21
|
"description": "The name of the button, submitted as a pair with the button's value as part of the form data.",
|
|
@@ -27,8 +32,63 @@
|
|
|
27
32
|
"values": []
|
|
28
33
|
},
|
|
29
34
|
{
|
|
30
|
-
"name": "
|
|
31
|
-
"description": "
|
|
35
|
+
"name": "formaction",
|
|
36
|
+
"description": "The submission URL override.",
|
|
37
|
+
"values": []
|
|
38
|
+
},
|
|
39
|
+
{
|
|
40
|
+
"name": "formenctype",
|
|
41
|
+
"description": "The submission encoding override.",
|
|
42
|
+
"values": []
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "formmethod",
|
|
46
|
+
"description": "The submission method override.",
|
|
47
|
+
"values": []
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "formnovalidate",
|
|
51
|
+
"description": "Whether submission bypasses validation.",
|
|
52
|
+
"values": []
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "formtarget",
|
|
56
|
+
"description": "The submission target override.",
|
|
57
|
+
"values": []
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "autofocus",
|
|
61
|
+
"description": "Whether the native element requests autofocus.",
|
|
62
|
+
"values": []
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "title",
|
|
66
|
+
"description": "The native element tooltip.",
|
|
67
|
+
"values": []
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "popovertargetaction",
|
|
71
|
+
"description": "The action for the target popover.",
|
|
72
|
+
"values": []
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "command",
|
|
76
|
+
"description": "The command for the target element, where supported.",
|
|
77
|
+
"values": []
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "commandfor",
|
|
81
|
+
"description": "The ID of the command target.",
|
|
82
|
+
"values": []
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "popovertarget",
|
|
86
|
+
"description": "The ID of the target popover.",
|
|
87
|
+
"values": []
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "form",
|
|
91
|
+
"description": "The ID of the associated form; the form property is the native form reference.",
|
|
32
92
|
"values": []
|
|
33
93
|
}
|
|
34
94
|
],
|
package/dist/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
|
|
3
3
|
"name": "@proximus/lavender-button-icon",
|
|
4
|
-
"version": "2.0.0-alpha.
|
|
4
|
+
"version": "2.0.0-alpha.229",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -16,6 +16,11 @@
|
|
|
16
16
|
{ "name": "size", "value": { "type": "string" } },
|
|
17
17
|
{ "name": "variant", "value": { "type": "string" } },
|
|
18
18
|
{ "name": "aria-expanded", "value": { "type": "string" } },
|
|
19
|
+
{
|
|
20
|
+
"name": "disabled",
|
|
21
|
+
"description": "Whether the button is disabled.",
|
|
22
|
+
"value": { "type": "boolean" }
|
|
23
|
+
},
|
|
19
24
|
{
|
|
20
25
|
"name": "name",
|
|
21
26
|
"description": "The name of the button, submitted as a pair with the button's value as part of the form data.",
|
|
@@ -32,9 +37,64 @@
|
|
|
32
37
|
"value": { "type": "string" }
|
|
33
38
|
},
|
|
34
39
|
{
|
|
35
|
-
"name": "
|
|
36
|
-
"description": "
|
|
40
|
+
"name": "formaction",
|
|
41
|
+
"description": "The submission URL override.",
|
|
42
|
+
"value": { "type": "string" }
|
|
43
|
+
},
|
|
44
|
+
{
|
|
45
|
+
"name": "formenctype",
|
|
46
|
+
"description": "The submission encoding override.",
|
|
47
|
+
"value": { "type": "string" }
|
|
48
|
+
},
|
|
49
|
+
{
|
|
50
|
+
"name": "formmethod",
|
|
51
|
+
"description": "The submission method override.",
|
|
52
|
+
"value": { "type": "string" }
|
|
53
|
+
},
|
|
54
|
+
{
|
|
55
|
+
"name": "formnovalidate",
|
|
56
|
+
"description": "Whether submission bypasses validation.",
|
|
57
|
+
"value": { "type": "boolean" }
|
|
58
|
+
},
|
|
59
|
+
{
|
|
60
|
+
"name": "formtarget",
|
|
61
|
+
"description": "The submission target override.",
|
|
62
|
+
"value": { "type": "string" }
|
|
63
|
+
},
|
|
64
|
+
{
|
|
65
|
+
"name": "autofocus",
|
|
66
|
+
"description": "Whether the native element requests autofocus.",
|
|
37
67
|
"value": { "type": "boolean" }
|
|
68
|
+
},
|
|
69
|
+
{
|
|
70
|
+
"name": "title",
|
|
71
|
+
"description": "The native element tooltip.",
|
|
72
|
+
"value": { "type": "string" }
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
"name": "popovertargetaction",
|
|
76
|
+
"description": "The action for the target popover.",
|
|
77
|
+
"value": { "type": "string" }
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
"name": "command",
|
|
81
|
+
"description": "The command for the target element, where supported.",
|
|
82
|
+
"value": { "type": "string" }
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"name": "commandfor",
|
|
86
|
+
"description": "The ID of the command target.",
|
|
87
|
+
"value": { "type": "string" }
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
"name": "popovertarget",
|
|
91
|
+
"description": "The ID of the target popover.",
|
|
92
|
+
"value": { "type": "string" }
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
"name": "form",
|
|
96
|
+
"description": "The ID of the associated form; the form property is the native form reference.",
|
|
97
|
+
"value": { "type": "string" }
|
|
38
98
|
}
|
|
39
99
|
],
|
|
40
100
|
"events": [],
|
|
@@ -44,7 +104,39 @@
|
|
|
44
104
|
{ "name": "loading" },
|
|
45
105
|
{ "name": "size" },
|
|
46
106
|
{ "name": "variant" },
|
|
47
|
-
{ "name": "ariaExpanded" }
|
|
107
|
+
{ "name": "ariaExpanded" },
|
|
108
|
+
{ "name": "disabled", "type": "boolean" },
|
|
109
|
+
{ "name": "name", "type": "string" },
|
|
110
|
+
{ "name": "value", "type": "string" },
|
|
111
|
+
{ "name": "type", "type": "'submit' | 'reset' | 'button'" },
|
|
112
|
+
{ "name": "formAction", "type": "string" },
|
|
113
|
+
{ "name": "formEnctype", "type": "string" },
|
|
114
|
+
{ "name": "formMethod", "type": "string" },
|
|
115
|
+
{ "name": "formNoValidate", "type": "boolean" },
|
|
116
|
+
{ "name": "formTarget", "type": "string" },
|
|
117
|
+
{ "name": "autofocus", "type": "boolean" },
|
|
118
|
+
{ "name": "title", "type": "string" },
|
|
119
|
+
{ "name": "popoverTargetAction", "type": "string" },
|
|
120
|
+
{ "name": "command", "type": "string" },
|
|
121
|
+
{ "name": "form", "type": "HTMLFormElement | null" },
|
|
122
|
+
{ "name": "labels", "type": "NodeListOf<HTMLLabelElement>" },
|
|
123
|
+
{ "name": "popoverTargetElement", "type": "Element | null" },
|
|
124
|
+
{ "name": "commandForElement", "type": "Element | null" },
|
|
125
|
+
{ "name": "validity", "type": "ValidityState" },
|
|
126
|
+
{ "name": "validationMessage", "type": "string" },
|
|
127
|
+
{ "name": "willValidate", "type": "boolean" },
|
|
128
|
+
{
|
|
129
|
+
"name": "checkValidity",
|
|
130
|
+
"type": "HTMLButtonElement['checkValidity']"
|
|
131
|
+
},
|
|
132
|
+
{
|
|
133
|
+
"name": "reportValidity",
|
|
134
|
+
"type": "HTMLButtonElement['reportValidity']"
|
|
135
|
+
},
|
|
136
|
+
{
|
|
137
|
+
"name": "setCustomValidity",
|
|
138
|
+
"type": "HTMLButtonElement['setCustomValidity']"
|
|
139
|
+
}
|
|
48
140
|
],
|
|
49
141
|
"events": []
|
|
50
142
|
}
|