@m3e/stepper 1.1.2 → 1.1.4
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/custom-elements.json +101 -182
- package/dist/index.js +14 -30
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +10 -9
- package/dist/index.min.js.map +1 -1
- package/dist/src/StepperButtonElementBase.d.ts +3 -11
- package/dist/src/StepperButtonElementBase.d.ts.map +1 -1
- package/dist/src/StepperElement.d.ts.map +1 -1
- package/package.json +2 -2
|
@@ -424,6 +424,29 @@
|
|
|
424
424
|
"module": "../core/src/shared/mixins/Selected.ts"
|
|
425
425
|
}
|
|
426
426
|
},
|
|
427
|
+
{
|
|
428
|
+
"kind": "field",
|
|
429
|
+
"name": "#keyPressed",
|
|
430
|
+
"privacy": "private",
|
|
431
|
+
"type": {
|
|
432
|
+
"text": "boolean"
|
|
433
|
+
},
|
|
434
|
+
"default": "false",
|
|
435
|
+
"inheritedFrom": {
|
|
436
|
+
"name": "KeyboardClick",
|
|
437
|
+
"module": "../core/src/shared/mixins/KeyboardClick.ts"
|
|
438
|
+
}
|
|
439
|
+
},
|
|
440
|
+
{
|
|
441
|
+
"kind": "field",
|
|
442
|
+
"name": "#keyDownHandler",
|
|
443
|
+
"privacy": "private",
|
|
444
|
+
"readonly": true,
|
|
445
|
+
"inheritedFrom": {
|
|
446
|
+
"name": "KeyboardClick",
|
|
447
|
+
"module": "../core/src/shared/mixins/KeyboardClick.ts"
|
|
448
|
+
}
|
|
449
|
+
},
|
|
427
450
|
{
|
|
428
451
|
"kind": "field",
|
|
429
452
|
"name": "#keyUpHandler",
|
|
@@ -434,6 +457,38 @@
|
|
|
434
457
|
"module": "../core/src/shared/mixins/KeyboardClick.ts"
|
|
435
458
|
}
|
|
436
459
|
},
|
|
460
|
+
{
|
|
461
|
+
"kind": "field",
|
|
462
|
+
"name": "#focusOutHandler",
|
|
463
|
+
"privacy": "private",
|
|
464
|
+
"readonly": true,
|
|
465
|
+
"inheritedFrom": {
|
|
466
|
+
"name": "KeyboardClick",
|
|
467
|
+
"module": "../core/src/shared/mixins/KeyboardClick.ts"
|
|
468
|
+
}
|
|
469
|
+
},
|
|
470
|
+
{
|
|
471
|
+
"kind": "method",
|
|
472
|
+
"name": "#handleKeyDown",
|
|
473
|
+
"privacy": "private",
|
|
474
|
+
"return": {
|
|
475
|
+
"type": {
|
|
476
|
+
"text": "void"
|
|
477
|
+
}
|
|
478
|
+
},
|
|
479
|
+
"parameters": [
|
|
480
|
+
{
|
|
481
|
+
"name": "e",
|
|
482
|
+
"type": {
|
|
483
|
+
"text": "KeyboardEvent"
|
|
484
|
+
}
|
|
485
|
+
}
|
|
486
|
+
],
|
|
487
|
+
"inheritedFrom": {
|
|
488
|
+
"name": "KeyboardClick",
|
|
489
|
+
"module": "../core/src/shared/mixins/KeyboardClick.ts"
|
|
490
|
+
}
|
|
491
|
+
},
|
|
437
492
|
{
|
|
438
493
|
"kind": "method",
|
|
439
494
|
"name": "#handleKeyUp",
|
|
@@ -806,12 +861,6 @@
|
|
|
806
861
|
"description": "A base implementation for a button used to move to a step in a stepper. This class must be inherited.",
|
|
807
862
|
"name": "StepperButtonElementBase",
|
|
808
863
|
"members": [
|
|
809
|
-
{
|
|
810
|
-
"kind": "field",
|
|
811
|
-
"name": "#clickHandler",
|
|
812
|
-
"privacy": "private",
|
|
813
|
-
"readonly": true
|
|
814
|
-
},
|
|
815
864
|
{
|
|
816
865
|
"kind": "field",
|
|
817
866
|
"name": "#action",
|
|
@@ -824,58 +873,18 @@
|
|
|
824
873
|
},
|
|
825
874
|
{
|
|
826
875
|
"kind": "method",
|
|
827
|
-
"name": "
|
|
828
|
-
"privacy": "private",
|
|
876
|
+
"name": "_onClick",
|
|
829
877
|
"return": {
|
|
830
878
|
"type": {
|
|
831
879
|
"text": "void"
|
|
832
880
|
}
|
|
833
|
-
},
|
|
834
|
-
"parameters": [
|
|
835
|
-
{
|
|
836
|
-
"name": "e",
|
|
837
|
-
"type": {
|
|
838
|
-
"text": "Event"
|
|
839
|
-
}
|
|
840
|
-
}
|
|
841
|
-
]
|
|
842
|
-
},
|
|
843
|
-
{
|
|
844
|
-
"kind": "field",
|
|
845
|
-
"name": "formAssociated",
|
|
846
|
-
"static": true,
|
|
847
|
-
"readonly": true,
|
|
848
|
-
"default": "formAssociated",
|
|
849
|
-
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
|
|
850
|
-
"inheritedFrom": {
|
|
851
|
-
"name": "AttachInternals",
|
|
852
|
-
"module": "../core/src/shared/mixins/AttachInternals.ts"
|
|
853
|
-
}
|
|
854
|
-
},
|
|
855
|
-
{
|
|
856
|
-
"kind": "field",
|
|
857
|
-
"name": "[_internals]",
|
|
858
|
-
"type": {
|
|
859
|
-
"text": "ElementInternals | undefined"
|
|
860
|
-
},
|
|
861
|
-
"privacy": "private",
|
|
862
|
-
"inheritedFrom": {
|
|
863
|
-
"name": "AttachInternals",
|
|
864
|
-
"module": "../core/src/shared/mixins/AttachInternals.ts"
|
|
865
881
|
}
|
|
866
882
|
}
|
|
867
883
|
],
|
|
868
|
-
"mixins": [
|
|
869
|
-
{
|
|
870
|
-
"name": "AttachInternals",
|
|
871
|
-
"package": "@m3e/core"
|
|
872
|
-
}
|
|
873
|
-
],
|
|
874
884
|
"superclass": {
|
|
875
|
-
"name": "
|
|
876
|
-
"package": "
|
|
877
|
-
}
|
|
878
|
-
"customElement": true
|
|
885
|
+
"name": "ActionElementBase",
|
|
886
|
+
"package": "@m3e/core"
|
|
887
|
+
}
|
|
879
888
|
}
|
|
880
889
|
],
|
|
881
890
|
"exports": [
|
|
@@ -1279,40 +1288,6 @@
|
|
|
1279
1288
|
"tagName": "m3e-stepper-previous",
|
|
1280
1289
|
"customElement": true,
|
|
1281
1290
|
"members": [
|
|
1282
|
-
{
|
|
1283
|
-
"kind": "field",
|
|
1284
|
-
"name": "formAssociated",
|
|
1285
|
-
"static": true,
|
|
1286
|
-
"readonly": true,
|
|
1287
|
-
"default": "formAssociated",
|
|
1288
|
-
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
|
|
1289
|
-
"inheritedFrom": {
|
|
1290
|
-
"name": "StepperButtonElementBase",
|
|
1291
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1292
|
-
}
|
|
1293
|
-
},
|
|
1294
|
-
{
|
|
1295
|
-
"kind": "field",
|
|
1296
|
-
"name": "[_internals]",
|
|
1297
|
-
"type": {
|
|
1298
|
-
"text": "ElementInternals | undefined"
|
|
1299
|
-
},
|
|
1300
|
-
"privacy": "private",
|
|
1301
|
-
"inheritedFrom": {
|
|
1302
|
-
"name": "StepperButtonElementBase",
|
|
1303
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1304
|
-
}
|
|
1305
|
-
},
|
|
1306
|
-
{
|
|
1307
|
-
"kind": "field",
|
|
1308
|
-
"name": "#clickHandler",
|
|
1309
|
-
"privacy": "private",
|
|
1310
|
-
"readonly": true,
|
|
1311
|
-
"inheritedFrom": {
|
|
1312
|
-
"name": "StepperButtonElementBase",
|
|
1313
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1314
|
-
}
|
|
1315
|
-
},
|
|
1316
1291
|
{
|
|
1317
1292
|
"kind": "field",
|
|
1318
1293
|
"name": "#action",
|
|
@@ -1329,21 +1304,12 @@
|
|
|
1329
1304
|
},
|
|
1330
1305
|
{
|
|
1331
1306
|
"kind": "method",
|
|
1332
|
-
"name": "
|
|
1333
|
-
"privacy": "private",
|
|
1307
|
+
"name": "_onClick",
|
|
1334
1308
|
"return": {
|
|
1335
1309
|
"type": {
|
|
1336
1310
|
"text": "void"
|
|
1337
1311
|
}
|
|
1338
1312
|
},
|
|
1339
|
-
"parameters": [
|
|
1340
|
-
{
|
|
1341
|
-
"name": "e",
|
|
1342
|
-
"type": {
|
|
1343
|
-
"text": "Event"
|
|
1344
|
-
}
|
|
1345
|
-
}
|
|
1346
|
-
],
|
|
1347
1313
|
"inheritedFrom": {
|
|
1348
1314
|
"name": "StepperButtonElementBase",
|
|
1349
1315
|
"module": "src/StepperButtonElementBase.ts"
|
|
@@ -1398,40 +1364,6 @@
|
|
|
1398
1364
|
"tagName": "m3e-stepper-previous",
|
|
1399
1365
|
"customElement": true,
|
|
1400
1366
|
"members": [
|
|
1401
|
-
{
|
|
1402
|
-
"kind": "field",
|
|
1403
|
-
"name": "formAssociated",
|
|
1404
|
-
"static": true,
|
|
1405
|
-
"readonly": true,
|
|
1406
|
-
"default": "formAssociated",
|
|
1407
|
-
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
|
|
1408
|
-
"inheritedFrom": {
|
|
1409
|
-
"name": "StepperButtonElementBase",
|
|
1410
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1411
|
-
}
|
|
1412
|
-
},
|
|
1413
|
-
{
|
|
1414
|
-
"kind": "field",
|
|
1415
|
-
"name": "[_internals]",
|
|
1416
|
-
"type": {
|
|
1417
|
-
"text": "ElementInternals | undefined"
|
|
1418
|
-
},
|
|
1419
|
-
"privacy": "private",
|
|
1420
|
-
"inheritedFrom": {
|
|
1421
|
-
"name": "StepperButtonElementBase",
|
|
1422
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1423
|
-
}
|
|
1424
|
-
},
|
|
1425
|
-
{
|
|
1426
|
-
"kind": "field",
|
|
1427
|
-
"name": "#clickHandler",
|
|
1428
|
-
"privacy": "private",
|
|
1429
|
-
"readonly": true,
|
|
1430
|
-
"inheritedFrom": {
|
|
1431
|
-
"name": "StepperButtonElementBase",
|
|
1432
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1433
|
-
}
|
|
1434
|
-
},
|
|
1435
1367
|
{
|
|
1436
1368
|
"kind": "field",
|
|
1437
1369
|
"name": "#action",
|
|
@@ -1448,21 +1380,12 @@
|
|
|
1448
1380
|
},
|
|
1449
1381
|
{
|
|
1450
1382
|
"kind": "method",
|
|
1451
|
-
"name": "
|
|
1452
|
-
"privacy": "private",
|
|
1383
|
+
"name": "_onClick",
|
|
1453
1384
|
"return": {
|
|
1454
1385
|
"type": {
|
|
1455
1386
|
"text": "void"
|
|
1456
1387
|
}
|
|
1457
1388
|
},
|
|
1458
|
-
"parameters": [
|
|
1459
|
-
{
|
|
1460
|
-
"name": "e",
|
|
1461
|
-
"type": {
|
|
1462
|
-
"text": "Event"
|
|
1463
|
-
}
|
|
1464
|
-
}
|
|
1465
|
-
],
|
|
1466
1389
|
"inheritedFrom": {
|
|
1467
1390
|
"name": "StepperButtonElementBase",
|
|
1468
1391
|
"module": "src/StepperButtonElementBase.ts"
|
|
@@ -1511,40 +1434,6 @@
|
|
|
1511
1434
|
"tagName": "m3e-stepper-reset",
|
|
1512
1435
|
"customElement": true,
|
|
1513
1436
|
"members": [
|
|
1514
|
-
{
|
|
1515
|
-
"kind": "field",
|
|
1516
|
-
"name": "formAssociated",
|
|
1517
|
-
"static": true,
|
|
1518
|
-
"readonly": true,
|
|
1519
|
-
"default": "formAssociated",
|
|
1520
|
-
"description": "Indicates that this custom element participates in form submission, validation, and form state restoration.",
|
|
1521
|
-
"inheritedFrom": {
|
|
1522
|
-
"name": "StepperButtonElementBase",
|
|
1523
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1524
|
-
}
|
|
1525
|
-
},
|
|
1526
|
-
{
|
|
1527
|
-
"kind": "field",
|
|
1528
|
-
"name": "[_internals]",
|
|
1529
|
-
"type": {
|
|
1530
|
-
"text": "ElementInternals | undefined"
|
|
1531
|
-
},
|
|
1532
|
-
"privacy": "private",
|
|
1533
|
-
"inheritedFrom": {
|
|
1534
|
-
"name": "StepperButtonElementBase",
|
|
1535
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1536
|
-
}
|
|
1537
|
-
},
|
|
1538
|
-
{
|
|
1539
|
-
"kind": "field",
|
|
1540
|
-
"name": "#clickHandler",
|
|
1541
|
-
"privacy": "private",
|
|
1542
|
-
"readonly": true,
|
|
1543
|
-
"inheritedFrom": {
|
|
1544
|
-
"name": "StepperButtonElementBase",
|
|
1545
|
-
"module": "src/StepperButtonElementBase.ts"
|
|
1546
|
-
}
|
|
1547
|
-
},
|
|
1548
1437
|
{
|
|
1549
1438
|
"kind": "field",
|
|
1550
1439
|
"name": "#action",
|
|
@@ -1561,21 +1450,12 @@
|
|
|
1561
1450
|
},
|
|
1562
1451
|
{
|
|
1563
1452
|
"kind": "method",
|
|
1564
|
-
"name": "
|
|
1565
|
-
"privacy": "private",
|
|
1453
|
+
"name": "_onClick",
|
|
1566
1454
|
"return": {
|
|
1567
1455
|
"type": {
|
|
1568
1456
|
"text": "void"
|
|
1569
1457
|
}
|
|
1570
1458
|
},
|
|
1571
|
-
"parameters": [
|
|
1572
|
-
{
|
|
1573
|
-
"name": "e",
|
|
1574
|
-
"type": {
|
|
1575
|
-
"text": "Event"
|
|
1576
|
-
}
|
|
1577
|
-
}
|
|
1578
|
-
],
|
|
1579
1459
|
"inheritedFrom": {
|
|
1580
1460
|
"name": "StepperButtonElementBase",
|
|
1581
1461
|
"module": "src/StepperButtonElementBase.ts"
|
|
@@ -3233,12 +3113,51 @@
|
|
|
3233
3113
|
"description": "Mixin to augment an element with behavior emits a click event on keyboard events.",
|
|
3234
3114
|
"name": "KeyboardClick",
|
|
3235
3115
|
"members": [
|
|
3116
|
+
{
|
|
3117
|
+
"kind": "field",
|
|
3118
|
+
"name": "#keyPressed",
|
|
3119
|
+
"privacy": "private",
|
|
3120
|
+
"type": {
|
|
3121
|
+
"text": "boolean"
|
|
3122
|
+
},
|
|
3123
|
+
"default": "false"
|
|
3124
|
+
},
|
|
3125
|
+
{
|
|
3126
|
+
"kind": "field",
|
|
3127
|
+
"name": "#keyDownHandler",
|
|
3128
|
+
"privacy": "private",
|
|
3129
|
+
"readonly": true
|
|
3130
|
+
},
|
|
3236
3131
|
{
|
|
3237
3132
|
"kind": "field",
|
|
3238
3133
|
"name": "#keyUpHandler",
|
|
3239
3134
|
"privacy": "private",
|
|
3240
3135
|
"readonly": true
|
|
3241
3136
|
},
|
|
3137
|
+
{
|
|
3138
|
+
"kind": "field",
|
|
3139
|
+
"name": "#focusOutHandler",
|
|
3140
|
+
"privacy": "private",
|
|
3141
|
+
"readonly": true
|
|
3142
|
+
},
|
|
3143
|
+
{
|
|
3144
|
+
"kind": "method",
|
|
3145
|
+
"name": "#handleKeyDown",
|
|
3146
|
+
"privacy": "private",
|
|
3147
|
+
"return": {
|
|
3148
|
+
"type": {
|
|
3149
|
+
"text": "void"
|
|
3150
|
+
}
|
|
3151
|
+
},
|
|
3152
|
+
"parameters": [
|
|
3153
|
+
{
|
|
3154
|
+
"name": "e",
|
|
3155
|
+
"type": {
|
|
3156
|
+
"text": "KeyboardEvent"
|
|
3157
|
+
}
|
|
3158
|
+
}
|
|
3159
|
+
]
|
|
3160
|
+
},
|
|
3242
3161
|
{
|
|
3243
3162
|
"kind": "method",
|
|
3244
3163
|
"name": "#handleKeyUp",
|
package/dist/index.js
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
* See LICENSE file in the project root for full license text.
|
|
5
5
|
*/
|
|
6
6
|
import { LitElement, html, css, nothing } from 'lit';
|
|
7
|
-
import { Role, Selected, KeyboardClick, Focusable, HtmlFor, Disabled, AttachInternals, DesignToken } from '@m3e/core';
|
|
7
|
+
import { Role, Selected, KeyboardClick, Focusable, HtmlFor, Disabled, AttachInternals, DesignToken, ActionElementBase } from '@m3e/core';
|
|
8
8
|
import { addAriaReferencedId, removeAriaReferencedId, selectionManager, SelectionManager } from '@m3e/core/a11y';
|
|
9
9
|
import { M3eBreakpointObserver, Breakpoint } from '@m3e/core/layout';
|
|
10
10
|
|
|
@@ -783,35 +783,17 @@ __decorate([n$1({
|
|
|
783
783
|
__decorate([r$1()], M3eStepElement.prototype, "index", void 0);
|
|
784
784
|
M3eStepElement = M3eStepElement_1 = __decorate([t$2("m3e-step")], M3eStepElement);
|
|
785
785
|
|
|
786
|
-
var
|
|
786
|
+
var _StepperButtonElementBase_action;
|
|
787
787
|
/** A base implementation for a button used to move to a step in a stepper. This class must be inherited. */
|
|
788
|
-
class StepperButtonElementBase extends
|
|
788
|
+
class StepperButtonElementBase extends ActionElementBase {
|
|
789
789
|
constructor(action) {
|
|
790
790
|
super();
|
|
791
|
-
_StepperButtonElementBase_instances.add(this);
|
|
792
|
-
/** @private */
|
|
793
|
-
_StepperButtonElementBase_clickHandler.set(this, e => __classPrivateFieldGet(this, _StepperButtonElementBase_instances, "m", _StepperButtonElementBase_handleClick).call(this, e));
|
|
794
791
|
/** @private */
|
|
795
792
|
_StepperButtonElementBase_action.set(this, void 0);
|
|
796
793
|
__classPrivateFieldSet(this, _StepperButtonElementBase_action, action, "f");
|
|
797
794
|
}
|
|
798
795
|
/** @inheritdoc */
|
|
799
|
-
|
|
800
|
-
super.connectedCallback();
|
|
801
|
-
this.parentElement?.addEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
|
|
802
|
-
}
|
|
803
|
-
/** @inheritdoc */
|
|
804
|
-
disconnectedCallback() {
|
|
805
|
-
super.disconnectedCallback();
|
|
806
|
-
this.parentElement?.removeEventListener("click", __classPrivateFieldGet(this, _StepperButtonElementBase_clickHandler, "f"));
|
|
807
|
-
}
|
|
808
|
-
/** @inheritdoc */
|
|
809
|
-
render() {
|
|
810
|
-
return html`<slot></slot>`;
|
|
811
|
-
}
|
|
812
|
-
}
|
|
813
|
-
_StepperButtonElementBase_clickHandler = new WeakMap(), _StepperButtonElementBase_action = new WeakMap(), _StepperButtonElementBase_instances = new WeakSet(), _StepperButtonElementBase_handleClick = function _StepperButtonElementBase_handleClick(e) {
|
|
814
|
-
if (!e.defaultPrevented) {
|
|
796
|
+
_onClick() {
|
|
815
797
|
switch (__classPrivateFieldGet(this, _StepperButtonElementBase_action, "f")) {
|
|
816
798
|
case "next":
|
|
817
799
|
this.closest("m3e-stepper")?.moveNext();
|
|
@@ -824,9 +806,8 @@ _StepperButtonElementBase_clickHandler = new WeakMap(), _StepperButtonElementBas
|
|
|
824
806
|
break;
|
|
825
807
|
}
|
|
826
808
|
}
|
|
827
|
-
}
|
|
828
|
-
|
|
829
|
-
StepperButtonElementBase.styles = css`:host { display: contents; } ::slotted(.material-icons) { font-size: inherit !important; }`;
|
|
809
|
+
}
|
|
810
|
+
_StepperButtonElementBase_action = new WeakMap();
|
|
830
811
|
|
|
831
812
|
/**
|
|
832
813
|
* @license
|
|
@@ -1302,11 +1283,13 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals(LitEleme
|
|
|
1302
1283
|
/** Resets the stepper to its initial state, clearing any form data. */
|
|
1303
1284
|
reset() {
|
|
1304
1285
|
this.steps.forEach(x => x.reset());
|
|
1305
|
-
const
|
|
1306
|
-
if (
|
|
1307
|
-
this.
|
|
1308
|
-
|
|
1309
|
-
this.
|
|
1286
|
+
const index = this.steps.findIndex(x => !x.disabled);
|
|
1287
|
+
if (index !== this._selectedIndex) {
|
|
1288
|
+
this._selectedIndex = index;
|
|
1289
|
+
this[selectionManager].select(this.selectedStep);
|
|
1290
|
+
this.dispatchEvent(new Event("change", {
|
|
1291
|
+
bubbles: true
|
|
1292
|
+
}));
|
|
1310
1293
|
}
|
|
1311
1294
|
}
|
|
1312
1295
|
/** @inheritdoc */
|
|
@@ -1331,6 +1314,7 @@ let M3eStepperElement = class M3eStepperElement extends AttachInternals(LitEleme
|
|
|
1331
1314
|
__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
|
|
1332
1315
|
}), "f");
|
|
1333
1316
|
} else {
|
|
1317
|
+
this._orientation = undefined;
|
|
1334
1318
|
__classPrivateFieldGet(this, _M3eStepperElement_instances, "m", _M3eStepperElement_updateDisplayOrder).call(this);
|
|
1335
1319
|
}
|
|
1336
1320
|
}
|