@eui/components 17.0.3-snapshot-1703318234448 → 17.0.3-snapshot-1704421850692

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.
Files changed (12) hide show
  1. package/docs/components/EuiTimepickerComponent.html +125 -203
  2. package/docs/dependencies.html +2 -2
  3. package/docs/js/search/search_index.js +2 -2
  4. package/esm2022/eui-icon-toggle/eui-icon-toggle.component.mjs +2 -2
  5. package/esm2022/eui-timepicker/eui-timepicker.component.mjs +94 -44
  6. package/eui-timepicker/eui-timepicker.component.d.ts +71 -16
  7. package/eui-timepicker/eui-timepicker.component.d.ts.map +1 -1
  8. package/fesm2022/eui-components-eui-icon-toggle.mjs +1 -1
  9. package/fesm2022/eui-components-eui-icon-toggle.mjs.map +1 -1
  10. package/fesm2022/eui-components-eui-timepicker.mjs +93 -43
  11. package/fesm2022/eui-components-eui-timepicker.mjs.map +1 -1
  12. package/package.json +7 -7
package/docs/components/EuiTimepickerComponent.html CHANGED
@@ -124,6 +124,7 @@
124
124
  <p class="comment">
125
125
  <code>ControlValueAccessor</code>
126
126
  <code>OnInit</code>
127
+ <code>OnChanges</code>
127
128
  <code>DoCheck</code>
128
129
  <code>OnDestroy</code>
129
130
  </p>
@@ -329,6 +330,9 @@
329
330
  <li>
330
331
  <a href="#isreadOnly" >isreadOnly</a>
331
332
  </li>
333
+ <li>
334
+ <a href="#placeholder" >placeholder</a>
335
+ </li>
332
336
  <li>
333
337
  <a href="#stepHours" >stepHours</a>
334
338
  </li>
@@ -348,26 +352,6 @@
348
352
 
349
353
 
350
354
 
351
- <tr>
352
- <td class="col-md-4">
353
- <h6><b>Accessors</b></h6>
354
- </td>
355
- </tr>
356
- <tr>
357
- <td class="col-md-4">
358
- <ul class="index-list">
359
- <li>
360
- <a href="#isreadOnly" >isreadOnly</a>
361
- </li>
362
- <li>
363
- <a href="#isOneInputField" >isOneInputField</a>
364
- </li>
365
- <li>
366
- <a href="#hasSeconds" >hasSeconds</a>
367
- </li>
368
- </ul>
369
- </td>
370
- </tr>
371
355
  </tbody>
372
356
  </table>
373
357
  </section>
@@ -465,6 +449,11 @@
465
449
 
466
450
  </td>
467
451
  </tr>
452
+ <tr>
453
+ <td class="col-md-4">
454
+ <i>Default value : </i><code>false</code>
455
+ </td>
456
+ </tr>
468
457
  </tbody>
469
458
  </table>
470
459
  <table class="table table-sm table-bordered">
@@ -481,6 +470,11 @@
481
470
 
482
471
  </td>
483
472
  </tr>
473
+ <tr>
474
+ <td class="col-md-4">
475
+ <i>Default value : </i><code>false</code>
476
+ </td>
477
+ </tr>
484
478
  </tbody>
485
479
  </table>
486
480
  <table class="table table-sm table-bordered">
@@ -497,6 +491,32 @@
497
491
 
498
492
  </td>
499
493
  </tr>
494
+ <tr>
495
+ <td class="col-md-4">
496
+ <i>Default value : </i><code>false</code>
497
+ </td>
498
+ </tr>
499
+ </tbody>
500
+ </table>
501
+ <table class="table table-sm table-bordered">
502
+ <tbody>
503
+ <tr>
504
+ <td class="col-md-4">
505
+ <a name="placeholder"></a>
506
+ <b>placeholder</b>
507
+ </td>
508
+ </tr>
509
+ <tr>
510
+ <td class="col-md-4">
511
+ <i>Type : </i> <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/string" target="_blank" >string</a></code>
512
+
513
+ </td>
514
+ </tr>
515
+ <tr>
516
+ <td class="col-md-4">
517
+ <i>Default value : </i><code>this.timeMask</code>
518
+ </td>
519
+ </tr>
500
520
  </tbody>
501
521
  </table>
502
522
  <table class="table table-sm table-bordered">
@@ -614,6 +634,8 @@
614
634
 
615
635
  <tr>
616
636
  <td class="col-md-4">
637
+ <div class="io-description"><p>Increments or decrements hours according to the step param being passed</p>
638
+ </div>
617
639
 
618
640
  <div class="io-description">
619
641
  <b>Parameters :</b>
@@ -624,6 +646,7 @@
624
646
  <td>Name</td>
625
647
  <td>Type</td>
626
648
  <td>Optional</td>
649
+ <td>Description</td>
627
650
  </tr>
628
651
  </thead>
629
652
  <tbody>
@@ -638,6 +661,10 @@
638
661
  </td>
639
662
 
640
663
 
664
+ <td>
665
+ <p>The step number that hours will increase or decrease</p>
666
+
667
+ </td>
641
668
  </tr>
642
669
  </tbody>
643
670
  </table>
@@ -675,6 +702,8 @@
675
702
 
676
703
  <tr>
677
704
  <td class="col-md-4">
705
+ <div class="io-description"><p>Increments or decrements minutes according to the step param being passed</p>
706
+ </div>
678
707
 
679
708
  <div class="io-description">
680
709
  <b>Parameters :</b>
@@ -685,6 +714,7 @@
685
714
  <td>Name</td>
686
715
  <td>Type</td>
687
716
  <td>Optional</td>
717
+ <td>Description</td>
688
718
  </tr>
689
719
  </thead>
690
720
  <tbody>
@@ -699,6 +729,10 @@
699
729
  </td>
700
730
 
701
731
 
732
+ <td>
733
+ <p>The step number that minutes will increase or decrease</p>
734
+
735
+ </td>
702
736
  </tr>
703
737
  </tbody>
704
738
  </table>
@@ -736,6 +770,8 @@
736
770
 
737
771
  <tr>
738
772
  <td class="col-md-4">
773
+ <div class="io-description"><p>Increments or decrements seconds according to the step param being passed</p>
774
+ </div>
739
775
 
740
776
  <div class="io-description">
741
777
  <b>Parameters :</b>
@@ -746,6 +782,7 @@
746
782
  <td>Name</td>
747
783
  <td>Type</td>
748
784
  <td>Optional</td>
785
+ <td>Description</td>
749
786
  </tr>
750
787
  </thead>
751
788
  <tbody>
@@ -760,6 +797,10 @@
760
797
  </td>
761
798
 
762
799
 
800
+ <td>
801
+ <p>The step number that seconds will increase or decrease</p>
802
+
803
+ </td>
763
804
  </tr>
764
805
  </tbody>
765
806
  </table>
@@ -799,6 +840,8 @@
799
840
 
800
841
  <tr>
801
842
  <td class="col-md-4">
843
+ <div class="io-description"><p>Disables the hour down decremental when min time range is reached</p>
844
+ </div>
802
845
 
803
846
  <div class="io-description">
804
847
  <b>Parameters :</b>
@@ -809,6 +852,7 @@
809
852
  <td>Name</td>
810
853
  <td>Type</td>
811
854
  <td>Optional</td>
855
+ <td>Description</td>
812
856
  </tr>
813
857
  </thead>
814
858
  <tbody>
@@ -823,6 +867,10 @@
823
867
  </td>
824
868
 
825
869
 
870
+ <td>
871
+ <p>The boolean value that enables the feature</p>
872
+
873
+ </td>
826
874
  </tr>
827
875
  </tbody>
828
876
  </table>
@@ -862,6 +910,8 @@
862
910
 
863
911
  <tr>
864
912
  <td class="col-md-4">
913
+ <div class="io-description"><p>Disables the hour up incremental when max time range is reached</p>
914
+ </div>
865
915
 
866
916
  <div class="io-description">
867
917
  <b>Parameters :</b>
@@ -872,6 +922,7 @@
872
922
  <td>Name</td>
873
923
  <td>Type</td>
874
924
  <td>Optional</td>
925
+ <td>Description</td>
875
926
  </tr>
876
927
  </thead>
877
928
  <tbody>
@@ -886,6 +937,10 @@
886
937
  </td>
887
938
 
888
939
 
940
+ <td>
941
+ <p>The boolean value that enables the feature</p>
942
+
943
+ </td>
889
944
  </tr>
890
945
  </tbody>
891
946
  </table>
@@ -925,6 +980,8 @@
925
980
 
926
981
  <tr>
927
982
  <td class="col-md-4">
983
+ <div class="io-description"><p>Disables the minutes down decremental when min time range is reached</p>
984
+ </div>
928
985
 
929
986
  <div class="io-description">
930
987
  <b>Parameters :</b>
@@ -935,6 +992,7 @@
935
992
  <td>Name</td>
936
993
  <td>Type</td>
937
994
  <td>Optional</td>
995
+ <td>Description</td>
938
996
  </tr>
939
997
  </thead>
940
998
  <tbody>
@@ -949,6 +1007,10 @@
949
1007
  </td>
950
1008
 
951
1009
 
1010
+ <td>
1011
+ <p>The boolean value that enables the feature</p>
1012
+
1013
+ </td>
952
1014
  </tr>
953
1015
  </tbody>
954
1016
  </table>
@@ -988,6 +1050,8 @@
988
1050
 
989
1051
  <tr>
990
1052
  <td class="col-md-4">
1053
+ <div class="io-description"><p>Disables the minutes up incremental when max time range is reached</p>
1054
+ </div>
991
1055
 
992
1056
  <div class="io-description">
993
1057
  <b>Parameters :</b>
@@ -998,6 +1062,7 @@
998
1062
  <td>Name</td>
999
1063
  <td>Type</td>
1000
1064
  <td>Optional</td>
1065
+ <td>Description</td>
1001
1066
  </tr>
1002
1067
  </thead>
1003
1068
  <tbody>
@@ -1012,6 +1077,10 @@
1012
1077
  </td>
1013
1078
 
1014
1079
 
1080
+ <td>
1081
+ <p>The boolean value that enables the feature</p>
1082
+
1083
+ </td>
1015
1084
  </tr>
1016
1085
  </tbody>
1017
1086
  </table>
@@ -1206,6 +1275,8 @@
1206
1275
 
1207
1276
  <tr>
1208
1277
  <td class="col-md-4">
1278
+ <div class="io-description"><p>Disables the seconds down decremental when min time range is reached</p>
1279
+ </div>
1209
1280
 
1210
1281
  <div class="io-description">
1211
1282
  <b>Parameters :</b>
@@ -1216,6 +1287,7 @@
1216
1287
  <td>Name</td>
1217
1288
  <td>Type</td>
1218
1289
  <td>Optional</td>
1290
+ <td>Description</td>
1219
1291
  </tr>
1220
1292
  </thead>
1221
1293
  <tbody>
@@ -1230,6 +1302,10 @@
1230
1302
  </td>
1231
1303
 
1232
1304
 
1305
+ <td>
1306
+ <p>The boolean value that enables the feature</p>
1307
+
1308
+ </td>
1233
1309
  </tr>
1234
1310
  </tbody>
1235
1311
  </table>
@@ -1269,6 +1345,8 @@
1269
1345
 
1270
1346
  <tr>
1271
1347
  <td class="col-md-4">
1348
+ <div class="io-description"><p>Disables the seconds up incremental when max time range is reached</p>
1349
+ </div>
1272
1350
 
1273
1351
  <div class="io-description">
1274
1352
  <b>Parameters :</b>
@@ -1279,6 +1357,7 @@
1279
1357
  <td>Name</td>
1280
1358
  <td>Type</td>
1281
1359
  <td>Optional</td>
1360
+ <td>Description</td>
1282
1361
  </tr>
1283
1362
  </thead>
1284
1363
  <tbody>
@@ -1293,6 +1372,10 @@
1293
1372
  </td>
1294
1373
 
1295
1374
 
1375
+ <td>
1376
+ <p>The boolean value that enables the feature</p>
1377
+
1378
+ </td>
1296
1379
  </tr>
1297
1380
  </tbody>
1298
1381
  </table>
@@ -1330,6 +1413,8 @@
1330
1413
 
1331
1414
  <tr>
1332
1415
  <td class="col-md-4">
1416
+ <div class="io-description"><p>Updates the input field when hours change and adds 24hour validation + propagates the value back to the form</p>
1417
+ </div>
1333
1418
 
1334
1419
  <div class="io-description">
1335
1420
  <b>Parameters :</b>
@@ -1340,6 +1425,7 @@
1340
1425
  <td>Name</td>
1341
1426
  <td>Type</td>
1342
1427
  <td>Optional</td>
1428
+ <td>Description</td>
1343
1429
  </tr>
1344
1430
  </thead>
1345
1431
  <tbody>
@@ -1354,6 +1440,10 @@
1354
1440
  </td>
1355
1441
 
1356
1442
 
1443
+ <td>
1444
+ <p>The new value that hours will have</p>
1445
+
1446
+ </td>
1357
1447
  </tr>
1358
1448
  </tbody>
1359
1449
  </table>
@@ -1391,6 +1481,8 @@
1391
1481
 
1392
1482
  <tr>
1393
1483
  <td class="col-md-4">
1484
+ <div class="io-description"><p>Updates the input field when minutes change and adds 60mins validation + propagates the value back to the form</p>
1485
+ </div>
1394
1486
 
1395
1487
  <div class="io-description">
1396
1488
  <b>Parameters :</b>
@@ -1401,6 +1493,7 @@
1401
1493
  <td>Name</td>
1402
1494
  <td>Type</td>
1403
1495
  <td>Optional</td>
1496
+ <td>Description</td>
1404
1497
  </tr>
1405
1498
  </thead>
1406
1499
  <tbody>
@@ -1415,6 +1508,10 @@
1415
1508
  </td>
1416
1509
 
1417
1510
 
1511
+ <td>
1512
+ <p>The new value that minutes will have</p>
1513
+
1514
+ </td>
1418
1515
  </tr>
1419
1516
  </tbody>
1420
1517
  </table>
@@ -1452,6 +1549,8 @@
1452
1549
 
1453
1550
  <tr>
1454
1551
  <td class="col-md-4">
1552
+ <div class="io-description"><p>Updates the input field when seconds change and adds 60secs validation + propagates the value back to the form</p>
1553
+ </div>
1455
1554
 
1456
1555
  <div class="io-description">
1457
1556
  <b>Parameters :</b>
@@ -1462,6 +1561,7 @@
1462
1561
  <td>Name</td>
1463
1562
  <td>Type</td>
1464
1563
  <td>Optional</td>
1564
+ <td>Description</td>
1465
1565
  </tr>
1466
1566
  </thead>
1467
1567
  <tbody>
@@ -1476,6 +1576,10 @@
1476
1576
  </td>
1477
1577
 
1478
1578
 
1579
+ <td>
1580
+ <p>The new value that seconds will have</p>
1581
+
1582
+ </td>
1479
1583
  </tr>
1480
1584
  </tbody>
1481
1585
  </table>
@@ -1853,188 +1957,6 @@
1853
1957
  </table>
1854
1958
  </section>
1855
1959
 
1856
- <section data-compodoc="block-accessors">
1857
- <h3 id="accessors">
1858
- Accessors
1859
- </h3>
1860
- <table class="table table-sm table-bordered">
1861
- <tbody>
1862
- <tr>
1863
- <td class="col-md-4">
1864
- <a name="isreadOnly"></a>
1865
- <span class="name"><b>isreadOnly</b><a href="#isreadOnly"><span class="icon ion-ios-link"></span></a></span>
1866
- </td>
1867
- </tr>
1868
-
1869
- <tr>
1870
- <td class="col-md-4">
1871
- <span class="accessor"><b>get</b><code>isreadOnly()</code></span>
1872
- </td>
1873
- </tr>
1874
-
1875
- <tr>
1876
- <td class="col-md-4">
1877
- <span class="accessor"><b>set</b><code>isreadOnly(value: BooleanInput)</code></span>
1878
- </td>
1879
- </tr>
1880
- <tr>
1881
- <td class="col-md-4">
1882
-
1883
- <div class="io-description">
1884
- <b>Parameters :</b>
1885
- <table class="params">
1886
- <thead>
1887
- <tr>
1888
- <td>Name</td>
1889
- <td>Type</td>
1890
- <td>Optional</td>
1891
- </tr>
1892
- </thead>
1893
- <tbody>
1894
- <tr>
1895
- <td>value</td>
1896
-
1897
- <td>
1898
- <code>BooleanInput</code>
1899
- </td>
1900
-
1901
- <td>
1902
- No
1903
- </td>
1904
-
1905
- </tr>
1906
- </tbody>
1907
- </table>
1908
- </div>
1909
- <div>
1910
- </div>
1911
- <div class="io-description">
1912
- <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1913
-
1914
- </div>
1915
- </td>
1916
- </tr>
1917
- </tbody>
1918
- </table>
1919
- <table class="table table-sm table-bordered">
1920
- <tbody>
1921
- <tr>
1922
- <td class="col-md-4">
1923
- <a name="isOneInputField"></a>
1924
- <span class="name"><b>isOneInputField</b><a href="#isOneInputField"><span class="icon ion-ios-link"></span></a></span>
1925
- </td>
1926
- </tr>
1927
-
1928
- <tr>
1929
- <td class="col-md-4">
1930
- <span class="accessor"><b>get</b><code>isOneInputField()</code></span>
1931
- </td>
1932
- </tr>
1933
-
1934
- <tr>
1935
- <td class="col-md-4">
1936
- <span class="accessor"><b>set</b><code>isOneInputField(value: BooleanInput)</code></span>
1937
- </td>
1938
- </tr>
1939
- <tr>
1940
- <td class="col-md-4">
1941
-
1942
- <div class="io-description">
1943
- <b>Parameters :</b>
1944
- <table class="params">
1945
- <thead>
1946
- <tr>
1947
- <td>Name</td>
1948
- <td>Type</td>
1949
- <td>Optional</td>
1950
- </tr>
1951
- </thead>
1952
- <tbody>
1953
- <tr>
1954
- <td>value</td>
1955
-
1956
- <td>
1957
- <code>BooleanInput</code>
1958
- </td>
1959
-
1960
- <td>
1961
- No
1962
- </td>
1963
-
1964
- </tr>
1965
- </tbody>
1966
- </table>
1967
- </div>
1968
- <div>
1969
- </div>
1970
- <div class="io-description">
1971
- <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
1972
-
1973
- </div>
1974
- </td>
1975
- </tr>
1976
- </tbody>
1977
- </table>
1978
- <table class="table table-sm table-bordered">
1979
- <tbody>
1980
- <tr>
1981
- <td class="col-md-4">
1982
- <a name="hasSeconds"></a>
1983
- <span class="name"><b>hasSeconds</b><a href="#hasSeconds"><span class="icon ion-ios-link"></span></a></span>
1984
- </td>
1985
- </tr>
1986
-
1987
- <tr>
1988
- <td class="col-md-4">
1989
- <span class="accessor"><b>get</b><code>hasSeconds()</code></span>
1990
- </td>
1991
- </tr>
1992
-
1993
- <tr>
1994
- <td class="col-md-4">
1995
- <span class="accessor"><b>set</b><code>hasSeconds(value: BooleanInput)</code></span>
1996
- </td>
1997
- </tr>
1998
- <tr>
1999
- <td class="col-md-4">
2000
-
2001
- <div class="io-description">
2002
- <b>Parameters :</b>
2003
- <table class="params">
2004
- <thead>
2005
- <tr>
2006
- <td>Name</td>
2007
- <td>Type</td>
2008
- <td>Optional</td>
2009
- </tr>
2010
- </thead>
2011
- <tbody>
2012
- <tr>
2013
- <td>value</td>
2014
-
2015
- <td>
2016
- <code>BooleanInput</code>
2017
- </td>
2018
-
2019
- <td>
2020
- No
2021
- </td>
2022
-
2023
- </tr>
2024
- </tbody>
2025
- </table>
2026
- </div>
2027
- <div>
2028
- </div>
2029
- <div class="io-description">
2030
- <b>Returns : </b> <code><a href="https://www.typescriptlang.org/docs/handbook/basic-types.html" target="_blank" >void</a></code>
2031
-
2032
- </div>
2033
- </td>
2034
- </tr>
2035
- </tbody>
2036
- </table>
2037
- </section>
2038
1960
  </div>
2039
1961
 
2040
1962
 
@@ -2049,7 +1971,7 @@
2049
1971
  <script src="../js/libs/htmlparser.js"></script>
2050
1972
  <script src="../js/libs/deep-iterator.js"></script>
2051
1973
  <script>
2052
- var COMPONENT_TEMPLATE = '<div><div class="eui-timepicker" [class.eui-timepicker--centered]="isDatetimepicker" attr.data-e2e="{{ e2eAttr }}"> <ng-container *ngIf="isOneInputField; else multipleInputs"> <input [class.eui-timepicker__input--one-field]="isDatetimepicker" euiInputText mask="{{ timeMask }}" [leadZeroDateTime]="true" placeholder="{{ timeMask }}" aria-label="Time Input Field" [formControl]="oneInputFormControl" (focusout)="onFocusOut()" [dropSpecialCharacters]="false" [readonly]="isreadOnly" /> </ng-container> <ng-template #multipleInputs> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__hours-up"> <eui-icon-svg (click)="changeHours(stepHours)" [class.time-control--disabled]="hoursUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase Hours"> </eui-icon-svg> </div> <input #inputrefhours euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="HH" [ngModel]="hours" (ngModelChange)="updateHours($event)" [readonly]="isreadOnly" aria-label="Hours" (keydown.ArrowUp)="changeHours(stepHours); $event.preventDefault()" (keydown.ArrowDown)="changeHours(-stepHours); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__hours-down"> <eui-icon-svg (click)="changeHours(-stepHours)" [class.time-control--disabled]="hoursDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease Hours"> </eui-icon-svg> </div> </div> <div class="eui-timepicker__spacer">:</div> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__minutes-up"> <eui-icon-svg (click)="changeMinutes(stepMinutes)" [class.time-control--disabled]="minutesUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase Minutes"> </eui-icon-svg> </div> <input #inputrefmins euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="MM" [ngModel]="mins" (ngModelChange)="updateMinutes($event)" [readonly]="isreadOnly" aria-label="Minutes" (keydown.ArrowUp)="changeMinutes(stepMinutes); $event.preventDefault()" (keydown.ArrowDown)="changeMinutes(-stepMinutes); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__minutes-down"> <eui-icon-svg (click)="changeMinutes(-stepMinutes)" [class.time-control--disabled]="minutesDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease Minutes"> </eui-icon-svg> </div> </div> <ng-container *ngIf="hasSeconds"> <div class="eui-timepicker__spacer">:</div> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__seconds-up"> <eui-icon-svg (click)="changeSeconds(stepSeconds)" [class.time-control--disabled]="secondsUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase seconds"> </eui-icon-svg> </div> <input #inputrefsecs euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="SS" [ngModel]="secs" (ngModelChange)="updateSeconds($event)" [readonly]="isreadOnly" aria-label="Seconds" (keydown.ArrowUp)="changeSeconds(stepSeconds); $event.preventDefault()" (keydown.ArrowDown)="changeSeconds(-stepSeconds); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__seconds-down"> <eui-icon-svg (click)="changeSeconds(-stepSeconds)" [class.time-control--disabled]="secondsDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease seconds"> </eui-icon-svg> </div> </div> </ng-container> </ng-template></div></div>'
1974
+ var COMPONENT_TEMPLATE = '<div><div class="eui-timepicker" [class.eui-timepicker--centered]="isDatetimepicker" attr.data-e2e="{{ e2eAttr }}"> <ng-container *ngIf="isOneInputField; else multipleInputs"> <input [class.eui-timepicker__input--one-field]="isDatetimepicker" euiInputText mask="{{ timeMask }}" [leadZeroDateTime]="true" [placeholder]="placeholder" [attr.aria-label]="oneInputFormControl.value?oneInputFormControl.value:\'No time value\'" [formControl]="oneInputFormControl" (focusout)="onFocusOut()" [dropSpecialCharacters]="false" [readonly]="isreadOnly" /> </ng-container> <ng-template #multipleInputs> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__hours-up"> <eui-icon-svg (click)="changeHours(stepHours)" [class.time-control--disabled]="hoursUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase Hours"> </eui-icon-svg> </div> <input #inputrefhours euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="HH" [ngModel]="hours" (ngModelChange)="updateHours($event)" [readonly]="isreadOnly" aria-label="Hours" (keydown.ArrowUp)="changeHours(stepHours); $event.preventDefault()" (keydown.ArrowDown)="changeHours(-stepHours); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__hours-down"> <eui-icon-svg (click)="changeHours(-stepHours)" [class.time-control--disabled]="hoursDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease Hours"> </eui-icon-svg> </div> </div> <div class="eui-timepicker__spacer">:</div> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__minutes-up"> <eui-icon-svg (click)="changeMinutes(stepMinutes)" [class.time-control--disabled]="minutesUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase Minutes"> </eui-icon-svg> </div> <input #inputrefmins euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="MM" [ngModel]="mins" (ngModelChange)="updateMinutes($event)" [readonly]="isreadOnly" aria-label="Minutes" (keydown.ArrowUp)="changeMinutes(stepMinutes); $event.preventDefault()" (keydown.ArrowDown)="changeMinutes(-stepMinutes); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__minutes-down"> <eui-icon-svg (click)="changeMinutes(-stepMinutes)" [class.time-control--disabled]="minutesDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease Minutes"> </eui-icon-svg> </div> </div> <ng-container *ngIf="hasSeconds"> <div class="eui-timepicker__spacer">:</div> <div class="eui-timepicker__input-container"> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__seconds-up"> <eui-icon-svg (click)="changeSeconds(stepSeconds)" [class.time-control--disabled]="secondsUpDisabled" icon="eui-chevron-up" fillColor="grey-75" size="l" role="button" aria-label="Increase seconds"> </eui-icon-svg> </div> <input #inputrefsecs euiInputNumber [leadingZero]="2" [digits]="2" [fractionDigits]="0" class="eui-timepicker__input" placeholder="SS" [ngModel]="secs" (ngModelChange)="updateSeconds($event)" [readonly]="isreadOnly" aria-label="Seconds" (keydown.ArrowUp)="changeSeconds(stepSeconds); $event.preventDefault()" (keydown.ArrowDown)="changeSeconds(-stepSeconds); $event.preventDefault()" /> <div *ngIf="!isreadOnly" class="eui-timepicker__chevron eui-timepicker__seconds-down"> <eui-icon-svg (click)="changeSeconds(-stepSeconds)" [class.time-control--disabled]="secondsDownDisabled" icon="eui-chevron-down" fillColor="grey-75" size="l" role="button" aria-label="Decrease seconds"> </eui-icon-svg> </div> </div> </ng-container> </ng-template></div></div>'
2053
1975
  var COMPONENTS = [{'name': 'ChartComponent', 'selector': 'eui-apex-chart'},{'name': 'CollapsedBreadcrumbComponent', 'selector': 'eui-collapsed-breadcrumb'},{'name': 'EuiAlertComponent', 'selector': 'div[euiAlert], eui-alert'},{'name': 'EuiAppBreadcrumbComponent', 'selector': 'eui-app-breadcrumb'},{'name': 'EuiAppComponent', 'selector': 'eui-app'},{'name': 'EuiAppFooterComponent', 'selector': 'eui-app-footer'},{'name': 'EuiAppHeaderComponent', 'selector': 'eui-app-header'},{'name': 'EuiAppSidebarBodyComponent', 'selector': 'eui-app-sidebar-body'},{'name': 'EuiAppSidebarComponent', 'selector': 'eui-app-sidebar'},{'name': 'EuiAppSidebarDrawerComponent', 'selector': 'eui-app-sidebar-drawer'},{'name': 'EuiAppSidebarFooterComponent', 'selector': 'eui-app-sidebar-footer'},{'name': 'EuiAppSidebarHeaderComponent', 'selector': 'eui-app-sidebar-header'},{'name': 'EuiAppSidebarHeaderUserProfileComponent', 'selector': 'eui-app-sidebar-header-user-profile'},{'name': 'EuiAppSidebarMenuComponent', 'selector': 'eui-app-sidebar-menu'},{'name': 'EuiAppToolbarComponent', 'selector': 'eui-app-toolbar'},{'name': 'EuiAppTopMessageComponent', 'selector': 'eui-app-top-message'},{'name': 'EuiAutocompleteAsyncTestComponent', 'selector': 'eui-autocomplete-test-component'},{'name': 'EuiAutocompleteChipsAsyncTestComponent', 'selector': 'eui-autocomplete-test-component'},{'name': 'EuiAutocompleteChipsTestComponent', 'selector': 'eui-autocomplete-test-component'},{'name': 'EuiAutocompleteComponent', 'selector': 'eui-autocomplete, input[euiAutocomplete]'},{'name': 'EuiAutocompleteOptionComponent', 'selector': 'eui-autocomplete-option'},{'name': 'EuiAutocompleteOptionGroupComponent', 'selector': 'eui-autocomplete-option-group'},{'name': 'EuiAutocompleteTestComponent', 'selector': 'eui-autocomplete-test-component'},{'name': 'EuiAvatarBadgeComponent', 'selector': 'eui-avatar-badge'},{'name': 'EuiAvatarComponent', 'selector': 'div[euiAvatar], span[euiAvatar], eui-avatar'},{'name': 'EuiAvatarIconComponent', 'selector': 'eui-avatar-icon'},{'name': 'EuiAvatarImageComponent', 'selector': 'eui-avatar-image'},{'name': 'EuiAvatarListComponent', 'selector': 'eui-avatar-list'},{'name': 'EuiAvatarTextComponent', 'selector': 'eui-avatar-text'},{'name': 'EuiBadgeComponent', 'selector': 'div[euiBadge], span[euiBadge], eui-badge'},{'name': 'EuiBlockContentComponent', 'selector': 'eui-block-content'},{'name': 'EuiBlockDocumentComponent', 'selector': 'eui-block-document'},{'name': 'EuiBreadcrumbComponent', 'selector': 'eui-breadcrumb'},{'name': 'EuiBreadcrumbItemComponent', 'selector': 'eui-breadcrumb-item'},{'name': 'EuiButtonComponent', 'selector': 'button[euiButton], a[euiButton]'},{'name': 'EuiButtonGroupComponent', 'selector': 'eui-button-group'},{'name': 'EuiButtonsComponent', 'selector': 'eui-buttons'},{'name': 'EuiCardComponent', 'selector': 'eui-card'},{'name': 'EuiCardContentComponent', 'selector': 'eui-card-content'},{'name': 'EuiCardFooterActionButtonsComponent', 'selector': 'eui-card-footer-action-buttons'},{'name': 'EuiCardFooterActionIconsComponent', 'selector': 'eui-card-footer-action-icons'},{'name': 'EuiCardFooterComponent', 'selector': 'eui-card-footer'},{'name': 'EuiCardFooterMenuContentComponent', 'selector': 'eui-card-footer-menu-content'},{'name': 'EuiCardHeaderBodyComponent', 'selector': 'eui-card-header-body'},{'name': 'EuiCardHeaderComponent', 'selector': 'eui-card-header'},{'name': 'EuiCardHeaderLeftContentComponent', 'selector': 'eui-card-header-left-content'},{'name': 'EuiCardHeaderRightContentComponent', 'selector': 'eui-card-header-right-content'},{'name': 'EuiCardHeaderSubtitleComponent', 'selector': 'eui-card-header-subtitle'},{'name': 'EuiCardHeaderTitleComponent', 'selector': 'eui-card-header-title'},{'name': 'EuiCardMediaComponent', 'selector': 'eui-card-media'},{'name': 'EuiChipComponent', 'selector': 'eui-chip, span[euiChip], li[euiChip]'},{'name': 'EuiChipListComponent', 'selector': 'eui-chip-list, div[euiChipList], ul[euiChipList]'},{'name': 'EuiCommonHeaderComponent', 'selector': 'eui-common-header'},{'name': 'EuiDashboardButtonComponent', 'selector': 'eui-dashboard-button'},{'name': 'EuiDashboardCardComponent', 'selector': 'eui-dashboard-card'},{'name': 'EuiDatepickerComponent', 'selector': 'eui-datepicker'},{'name': 'EuiDateRangeSelectorComponent', 'selector': 'eui-date-range-selector'},{'name': 'EuiDialogComponent', 'selector': 'eui-dialog'},{'name': 'EuiDialogContainerComponent', 'selector': 'eui-dialog-container'},{'name': 'EuiDimmerComponent', 'selector': 'eui-dimmer'},{'name': 'EuiDisableContentComponent', 'selector': 'eui-disable-content'},{'name': 'EuiDiscussionThreadComponent', 'selector': 'eui-discussion-thread'},{'name': 'EuiDiscussionThreadItemComponent', 'selector': 'eui-discussion-thread-item'},{'name': 'EuiDropdownComponent', 'selector': 'eui-dropdown'},{'name': 'EuiDropdownItemComponent', 'selector': 'eui-dropdown-item, [euiDropdownItem]'},{'name': 'EuiEditorComponent', 'selector': 'eui-editor'},{'name': 'EuiEditorCountersComponent', 'selector': 'eui-editor-counters'},{'name': 'EuiEditorHtmlViewComponent', 'selector': 'eui-editor-html-view'},{'name': 'EuiEditorImageDialogComponent', 'selector': ''},{'name': 'EuiEditorJsonViewComponent', 'selector': 'eui-editor-json-view'},{'name': 'EuiExpandContentComponent', 'selector': 'eui-expand-content'},{'name': 'EuiFeedbackMessageComponent', 'selector': 'eui-feedback-message'},{'name': 'EuiFieldsetComponent', 'selector': 'eui-fieldset'},{'name': 'EuiFilePreviewComponent', 'selector': 'eui-file-preview'},{'name': 'EuiFileUploadComponent', 'selector': 'eui-file-upload'},{'name': 'EuiFileUploadProgressComponent', 'selector': 'eui-file-upload-progress'},{'name': 'EuiFooterComponent', 'selector': 'eui-footer'},{'name': 'EuiGrowlComponent', 'selector': 'eui-growl'},{'name': 'EuiHeaderAppComponent', 'selector': 'eui-header-app'},{'name': 'EuiHeaderAppNameComponent', 'selector': 'eui-header-app-name'},{'name': 'EuiHeaderAppNameLogoComponent', 'selector': 'eui-header-app-name-logo'},{'name': 'EuiHeaderAppSubtitleComponent', 'selector': 'eui-header-app-subtitle'},{'name': 'EuiHeaderComponent', 'selector': 'eui-header'},{'name': 'EuiHeaderEnvironmentComponent', 'selector': 'eui-header-environment'},{'name': 'EuiHeaderLogoComponent', 'selector': 'eui-header-logo'},{'name': 'EuiHeaderRightContentComponent', 'selector': 'eui-header-right-content'},{'name': 'EuiHeaderUserProfileComponent', 'selector': 'eui-header-user-profile'},{'name': 'EuiIconColorComponent', 'selector': 'eui-icon-colored, span[euiIconColored], [euiIconColored]'},{'name': 'EuiIconComponent', 'selector': 'div[euiIcon], span[euiIcon], i[euiIcon], eui-icon'},{'name': 'EuiIconSvgButtonComponent', 'selector': 'eui-icon-svg-button'},{'name': 'EuiIconSvgComponent', 'selector': 'eui-icon-svg, span[euiIconSvg], i[euiIconSvg]'},{'name': 'EuiIconToggleComponent', 'selector': 'eui-icon-toggle'},{'name': 'EuiInputCheckboxComponent', 'selector': 'input[euiInputCheckBox]'},{'name': 'EuiInputGroupComponent', 'selector': 'div[euiInputGroup]'},{'name': 'EuiInputNumberComponent', 'selector': 'input[euiInputNumber]'},{'name': 'EuiInputRadioComponent', 'selector': 'input[euiInputRadio]'},{'name': 'EuiInputTextComponent', 'selector': 'input[euiInputText]'},{'name': 'EuiLabelComponent', 'selector': 'label[euiLabel], span[euiLabel], div[euiLabel], a[euiLabel], eui-label,
2054
1976
  label[euiSublabel], span[euiSublabel], div[euiSublabel], a[euiSublabel], eui-sublabel'},{'name': 'EuiLanguageSelectorComponent', 'selector': 'eui-language-selector'},{'name': 'EuiListComponent', 'selector': '[euiList], eui-list'},{'name': 'EuiListItemComponent', 'selector': '[euiListItem], eui-list-item'},{'name': 'EuiMenuComponent', 'selector': 'eui-menu'},{'name': 'EuiMenuItemComponent', 'selector': 'eui-menu-item'},{'name': 'EuiMessageBoxComponent', 'selector': 'eui-message-box'},{'name': 'EuiModalSelectorComponent', 'selector': 'eui-modal-selector'},{'name': 'EuiNotificationItemComponent', 'selector': 'eui-notification-item'},{'name': 'EuiNotificationItemV2Component', 'selector': 'eui-notification-item-v2'},{'name': 'EuiNotificationsComponent', 'selector': 'eui-notifications'},{'name': 'EuiNotificationsV2Component', 'selector': 'eui-notifications-v2'},{'name': 'EuiOverlayBodyComponent', 'selector': 'eui-overlay-body'},{'name': 'EuiOverlayComponent', 'selector': 'eui-overlay'},{'name': 'EuiOverlayFooterComponent', 'selector': 'eui-overlay-footer'},{'name': 'EuiOverlayHeaderComponent', 'selector': 'eui-overlay-header'},{'name': 'EuiOverlayHeaderTitleComponent', 'selector': 'eui-overlay-header-title'},{'name': 'EuiPageBreadcrumbComponent', 'selector': 'eui-page-breadcrumb'},{'name': 'EuiPageColumnComponent', 'selector': 'eui-page-column'},{'name': 'EuiPageColumnsComponent', 'selector': 'eui-page-columns'},{'name': 'EuiPageComponent', 'selector': 'eui-page'},{'name': 'EuiPageContentComponent', 'selector': 'eui-page-content'},{'name': 'EuiPageFooterComponent', 'selector': 'eui-page-footer'},{'name': 'EuiPageHeaderComponent', 'selector': 'eui-page-header'},{'name': 'EuiPageHeroHeaderComponent', 'selector': 'eui-page-hero-header'},{'name': 'EuiPageTopContentComponent', 'selector': 'eui-page-top-content'},{'name': 'EuiPaginatorComponent', 'selector': 'eui-paginator'},{'name': 'EuiPopoverComponent', 'selector': 'eui-popover'},{'name': 'EuiProgressBarComponent', 'selector': 'eui-progress-bar'},{'name': 'EuiProgressCircleComponent', 'selector': 'eui-progress-circle'},{'name': 'EuiResizableComponent', 'selector': 'eui-resizable'},{'name': 'EuiSearchComponent', 'selector': 'eui-search'},{'name': 'EuiSelectComponent', 'selector': 'select[euiSelect]'},{'name': 'EuiSidebarMenuComponent', 'selector': 'eui-sidebar-menu'},{'name': 'EuiSidebarToggleComponent', 'selector': 'eui-sidebar-toggle'},{'name': 'EuiSkeletonComponent', 'selector': 'eui-skeleton'},{'name': 'EuiSlideToggleComponent', 'selector': 'eui-slide-toggle'},{'name': 'EuiSlideToggleTestComponent', 'selector': 'eui-slide-toggle-test-component'},{'name': 'EuiTabComponent', 'selector': 'eui-tab'},{'name': 'EuiTabContentComponent', 'selector': 'eui-tab-content, euiTabContent'},{'name': 'EuiTabLabelComponent', 'selector': 'eui-tab-label, euiTabLabel'},{'name': 'EuiTableComponent', 'selector': 'eui-table, table[euiTable]'},{'name': 'EuiTableExpandableRowComponent', 'selector': 'tr[euiTableExpandableRow]'},{'name': 'EuiTableFilterComponent', 'selector': 'eui-table-filter'},{'name': 'EuiTableSelectableHeaderComponent', 'selector': 'tr[isSelectableHeader]'},{'name': 'EuiTableSelectableRowComponent', 'selector': 'tr[isSelectable]'},{'name': 'EuiTableSortableColComponent', 'selector': 'th[sortable]'},{'name': 'EuiTabsComponent', 'selector': 'eui-tabs'},{'name': 'EuiTextareaComponent', 'selector': 'textarea[euiTextArea]'},{'name': 'EuiTimebarComponent', 'selector': 'eui-timebar'},{'name': 'EuiTimelineComponent', 'selector': 'eui-timeline'},{'name': 'EuiTimelineItemComponent', 'selector': 'eui-timeline-item'},{'name': 'EuiTimepickerComponent', 'selector': 'eui-timepicker'},{'name': 'EuiToolbarAppComponent', 'selector': 'eui-toolbar-app'},{'name': 'EuiToolbarCenterComponent', 'selector': 'eui-toolbar-center'},{'name': 'EuiToolbarComponent', 'selector': 'eui-toolbar'},{'name': 'EuiToolbarEnvironmentComponent', 'selector': 'eui-toolbar-environment'},{'name': 'EuiToolbarItemComponent', 'selector': 'eui-toolbar-item'},{'name': 'EuiToolbarItemsComponent', 'selector': 'eui-toolbar-items'},{'name': 'EuiToolbarLogoComponent', 'selector': 'eui-toolbar-logo'},{'name': 'EuiToolbarMenuComponent', 'selector': 'eui-toolbar-menu'},{'name': 'EuiTooltipContainerComponent', 'selector': 'eui-tooltip-container.component'},{'name': 'EuiTreeComponent', 'selector': 'eui-tree'},{'name': 'EuiTreeListComponent', 'selector': 'eui-tree-list'},{'name': 'EuiTreeListItemComponent', 'selector': 'eui-tree-list-item'},{'name': 'EuiTreeListItemContentComponent', 'selector': 'eui-tree-list-item-content'},{'name': 'EuiTreeListToolbarComponent', 'selector': 'eui-tree-list-toolbar'},{'name': 'EuiUserProfileCardComponent', 'selector': 'eui-user-profile-card'},{'name': 'EuiUserProfileComponent', 'selector': 'eui-user-profile'},{'name': 'EuiUserProfileMenuComponent', 'selector': 'eui-user-profile-menu'},{'name': 'EuiUserProfileMenuItemComponent', 'selector': 'eui-user-profile-menu-item'},{'name': 'EuiWizardComponent', 'selector': 'eui-wizard'},{'name': 'EuiWizardStepComponent', 'selector': 'eui-wizard-step'},{'name': 'QuillEditorComponent', 'selector': 'quill-editor'}];
2055
1977
  var DIRECTIVES = [{'name': 'AutoResizeDirective', 'selector': 'textarea[autoResize]'},{'name': 'BaseDirective', 'selector': '[euiBase]'},{'name': 'BaseStatesDirective', 'selector': '[euiBase]'},{'name': 'CollapsedButtonDirective', 'selector': 'collapsed-button'},{'name': 'EuiActionButtonsDirective', 'selector': 'eui-action-buttons'},{'name': 'EuiAlertTitleDirective', 'selector': 'eui-alert-title'},{'name': 'EuiAppPageWrapperDirective', 'selector': 'eui-app-page-wrapper'},{'name': 'EuiButtonsActionsContentTagDirective', 'selector': 'euiButtonsActionsContent'},{'name': 'EuiButtonsLocalMenuContentTagDirective', 'selector': 'euiButtonsLocalMenuContent'},{'name': 'EuiChipListAppendContentDirective', 'selector': 'euiChipListAppendContent'},{'name': 'EuiClearableDirective', 'selector': 'input[euiClearable]'},{'name': 'EuiDashboardButtonIconDirective', 'selector': 'eui-dashboard-button-icon'},{'name': 'EuiDashboardButtonLabelDirective', 'selector': 'eui-dashboard-button-label'},{'name': 'EuiDialogFooterDirective', 'selector': 'eui-dialog-footer'},{'name': 'EuiDialogHeaderDirective', 'selector': 'eui-dialog-header'},{'name': 'EuiDropdownContentDirective', 'selector': 'eui-dropdown-content'},{'name': 'EuiDropdownTreeDirective', 'selector': 'eui-dropdown[euiDropdownTree]'},{'name': 'EuiEditorCustomToolbarTagDirective', 'selector': 'euiEditorCustomToolbar'},{'name': 'EuiEditorMaxlengthDirective', 'selector': '[formControlName][euiEditorMaxlength]'},{'name': 'EuiFieldsetLabelExtraContentTagDirective', 'selector': 'euiFieldsetLabelExtraContent'},{'name': 'EuiFieldsetLabelRightContentTagDirective', 'selector': 'euiFieldsetLabelRightContent'},{'name': 'EuiHasPermissionDirective', 'selector': '[euiHasPermission]'},{'name': 'EuiHeaderAppNameDirective', 'selector': 'eui-header-app-name'},{'name': 'EuiHeaderAppNameLogoDirective', 'selector': 'eui-header-app-name-logo'},{'name': 'EuiHeaderAppSubtitleDirective', 'selector': 'eui-header-app-subtitle'},{'name': 'EuiInputNumberDirective', 'selector': 'input[euiInputNumber][formControl],input[euiInputNumber][formControlName],input[euiInputNumber][ngModel]'},{'name': 'EuiLetterFormatDirective', 'selector': '[euiLetterFormat]'},{'name': 'EuiLoadingDirective', 'selector': '[euiLoading]'},{'name': 'EuiMaxLengthDirective', 'selector': '