@eui/eds 22.0.0-alpha.51 → 22.0.0-alpha.53
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/docs/changelog.html +29 -0
- package/docs/components/EdsCheckbox.html +2 -2
- package/docs/components/EdsRadio.html +15 -2
- package/docs/js/search/search_index.js +2 -2
- package/docs/json/documentation.json +139 -98
- package/docs/llms.txt +3 -3
- package/docs/properties.html +1 -1
- package/fesm2022/eui-eds-eds-button.mjs +2 -2
- package/fesm2022/eui-eds-eds-button.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-checkbox.mjs +21 -7
- package/fesm2022/eui-eds-eds-checkbox.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-datepicker.mjs +2 -2
- package/fesm2022/eui-eds-eds-datepicker.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-feedback-message.mjs +2 -2
- package/fesm2022/eui-eds-eds-feedback-message.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-button.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-button.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-number.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-number.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-input-text.mjs +2 -2
- package/fesm2022/eui-eds-eds-input-text.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-radio.mjs +27 -9
- package/fesm2022/eui-eds-eds-radio.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-select.mjs +2 -2
- package/fesm2022/eui-eds-eds-select.mjs.map +1 -1
- package/fesm2022/eui-eds-eds-textarea.mjs +2 -2
- package/fesm2022/eui-eds-eds-textarea.mjs.map +1 -1
- package/package.json +3 -3
- package/types/eui-eds-eds-checkbox.d.ts +7 -1
- package/types/eui-eds-eds-checkbox.d.ts.map +1 -1
- package/types/eui-eds-eds-radio.d.ts +8 -1
- package/types/eui-eds-eds-radio.d.ts.map +1 -1
|
@@ -35449,7 +35449,7 @@
|
|
|
35449
35449
|
},
|
|
35450
35450
|
{
|
|
35451
35451
|
"name": "EdsCheckbox",
|
|
35452
|
-
"id": "component-EdsCheckbox-
|
|
35452
|
+
"id": "component-EdsCheckbox-485847e0121dc3282dc4fdd39177ac7fad97d39c0041c59a538b2cae1c13edc0d747efecbf1cecb042c9c28b6d45b098c80b85dfc3883508a437ae6d0cd3a3e5",
|
|
35453
35453
|
"file": "packages/eds/eds-checkbox/eds-checkbox.ts",
|
|
35454
35454
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
35455
35455
|
"encapsulation": [],
|
|
@@ -35483,20 +35483,20 @@
|
|
|
35483
35483
|
"indexKey": "",
|
|
35484
35484
|
"optional": false,
|
|
35485
35485
|
"description": "<p>Controls the checked state of the checkbox.\nTwo-way bindable model.\nfalse</p>\n",
|
|
35486
|
-
"line":
|
|
35486
|
+
"line": 69,
|
|
35487
35487
|
"rawdescription": "\n\nControls the checked state of the checkbox.\nTwo-way bindable model.\nfalse\n",
|
|
35488
35488
|
"jsdoctags": [
|
|
35489
35489
|
{
|
|
35490
|
-
"pos":
|
|
35491
|
-
"end":
|
|
35490
|
+
"pos": 2052,
|
|
35491
|
+
"end": 2072,
|
|
35492
35492
|
"kind": 328,
|
|
35493
35493
|
"id": 0,
|
|
35494
35494
|
"flags": 16842752,
|
|
35495
35495
|
"modifierFlagsCache": 0,
|
|
35496
35496
|
"transformFlags": 0,
|
|
35497
35497
|
"tagName": {
|
|
35498
|
-
"pos":
|
|
35499
|
-
"end":
|
|
35498
|
+
"pos": 2053,
|
|
35499
|
+
"end": 2060,
|
|
35500
35500
|
"kind": 80,
|
|
35501
35501
|
"id": 0,
|
|
35502
35502
|
"flags": 16842752,
|
|
@@ -35518,20 +35518,20 @@
|
|
|
35518
35518
|
"indexKey": "",
|
|
35519
35519
|
"optional": false,
|
|
35520
35520
|
"description": "<p>Controls whether the checkbox is disabled.\nfalse</p>\n",
|
|
35521
|
-
"line":
|
|
35521
|
+
"line": 81,
|
|
35522
35522
|
"rawdescription": "\n\nControls whether the checkbox is disabled.\nfalse\n",
|
|
35523
35523
|
"jsdoctags": [
|
|
35524
35524
|
{
|
|
35525
|
-
"pos":
|
|
35526
|
-
"end":
|
|
35525
|
+
"pos": 2307,
|
|
35526
|
+
"end": 2327,
|
|
35527
35527
|
"kind": 328,
|
|
35528
35528
|
"id": 0,
|
|
35529
35529
|
"flags": 16842752,
|
|
35530
35530
|
"modifierFlagsCache": 0,
|
|
35531
35531
|
"transformFlags": 0,
|
|
35532
35532
|
"tagName": {
|
|
35533
|
-
"pos":
|
|
35534
|
-
"end":
|
|
35533
|
+
"pos": 2308,
|
|
35534
|
+
"end": 2315,
|
|
35535
35535
|
"kind": 80,
|
|
35536
35536
|
"id": 0,
|
|
35537
35537
|
"flags": 16842752,
|
|
@@ -35553,20 +35553,20 @@
|
|
|
35553
35553
|
"indexKey": "",
|
|
35554
35554
|
"optional": false,
|
|
35555
35555
|
"description": "<p>Data attribute value for end-to-end testing identification.\n'eds-checkbox'</p>\n",
|
|
35556
|
-
"line":
|
|
35556
|
+
"line": 55,
|
|
35557
35557
|
"rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-checkbox'\n",
|
|
35558
35558
|
"jsdoctags": [
|
|
35559
35559
|
{
|
|
35560
|
-
"pos":
|
|
35561
|
-
"end":
|
|
35560
|
+
"pos": 1705,
|
|
35561
|
+
"end": 1734,
|
|
35562
35562
|
"kind": 328,
|
|
35563
35563
|
"id": 0,
|
|
35564
35564
|
"flags": 16842752,
|
|
35565
35565
|
"modifierFlagsCache": 0,
|
|
35566
35566
|
"transformFlags": 0,
|
|
35567
35567
|
"tagName": {
|
|
35568
|
-
"pos":
|
|
35569
|
-
"end":
|
|
35568
|
+
"pos": 1706,
|
|
35569
|
+
"end": 1713,
|
|
35570
35570
|
"kind": 80,
|
|
35571
35571
|
"id": 0,
|
|
35572
35572
|
"flags": 16842752,
|
|
@@ -35588,20 +35588,20 @@
|
|
|
35588
35588
|
"indexKey": "",
|
|
35589
35589
|
"optional": false,
|
|
35590
35590
|
"description": "<p>Controls the indeterminate (mixed) state of the checkbox.\nfalse</p>\n",
|
|
35591
|
-
"line":
|
|
35591
|
+
"line": 75,
|
|
35592
35592
|
"rawdescription": "\n\nControls the indeterminate (mixed) state of the checkbox.\nfalse\n",
|
|
35593
35593
|
"jsdoctags": [
|
|
35594
35594
|
{
|
|
35595
|
-
"pos":
|
|
35596
|
-
"end":
|
|
35595
|
+
"pos": 2184,
|
|
35596
|
+
"end": 2204,
|
|
35597
35597
|
"kind": 328,
|
|
35598
35598
|
"id": 0,
|
|
35599
35599
|
"flags": 16842752,
|
|
35600
35600
|
"modifierFlagsCache": 0,
|
|
35601
35601
|
"transformFlags": 0,
|
|
35602
35602
|
"tagName": {
|
|
35603
|
-
"pos":
|
|
35604
|
-
"end":
|
|
35603
|
+
"pos": 2185,
|
|
35604
|
+
"end": 2192,
|
|
35605
35605
|
"kind": 80,
|
|
35606
35606
|
"id": 0,
|
|
35607
35607
|
"flags": 16842752,
|
|
@@ -35623,20 +35623,20 @@
|
|
|
35623
35623
|
"indexKey": "",
|
|
35624
35624
|
"optional": false,
|
|
35625
35625
|
"description": "<p>Controls whether the checkbox shows an invalid/error state.\nfalse</p>\n",
|
|
35626
|
-
"line":
|
|
35626
|
+
"line": 93,
|
|
35627
35627
|
"rawdescription": "\n\nControls whether the checkbox shows an invalid/error state.\nfalse\n",
|
|
35628
35628
|
"jsdoctags": [
|
|
35629
35629
|
{
|
|
35630
|
-
"pos":
|
|
35631
|
-
"end":
|
|
35630
|
+
"pos": 2626,
|
|
35631
|
+
"end": 2646,
|
|
35632
35632
|
"kind": 328,
|
|
35633
35633
|
"id": 0,
|
|
35634
35634
|
"flags": 16842752,
|
|
35635
35635
|
"modifierFlagsCache": 0,
|
|
35636
35636
|
"transformFlags": 0,
|
|
35637
35637
|
"tagName": {
|
|
35638
|
-
"pos":
|
|
35639
|
-
"end":
|
|
35638
|
+
"pos": 2627,
|
|
35639
|
+
"end": 2634,
|
|
35640
35640
|
"kind": 80,
|
|
35641
35641
|
"id": 0,
|
|
35642
35642
|
"flags": 16842752,
|
|
@@ -35658,20 +35658,20 @@
|
|
|
35658
35658
|
"indexKey": "",
|
|
35659
35659
|
"optional": false,
|
|
35660
35660
|
"description": "<p>Controls whether the checkbox is readonly.\nfalse</p>\n",
|
|
35661
|
-
"line":
|
|
35661
|
+
"line": 87,
|
|
35662
35662
|
"rawdescription": "\n\nControls whether the checkbox is readonly.\nfalse\n",
|
|
35663
35663
|
"jsdoctags": [
|
|
35664
35664
|
{
|
|
35665
|
-
"pos":
|
|
35666
|
-
"end":
|
|
35665
|
+
"pos": 2458,
|
|
35666
|
+
"end": 2478,
|
|
35667
35667
|
"kind": 328,
|
|
35668
35668
|
"id": 0,
|
|
35669
35669
|
"flags": 16842752,
|
|
35670
35670
|
"modifierFlagsCache": 0,
|
|
35671
35671
|
"transformFlags": 0,
|
|
35672
35672
|
"tagName": {
|
|
35673
|
-
"pos":
|
|
35674
|
-
"end":
|
|
35673
|
+
"pos": 2459,
|
|
35674
|
+
"end": 2466,
|
|
35675
35675
|
"kind": 80,
|
|
35676
35676
|
"id": 0,
|
|
35677
35677
|
"flags": 16842752,
|
|
@@ -35693,20 +35693,20 @@
|
|
|
35693
35693
|
"indexKey": "",
|
|
35694
35694
|
"optional": false,
|
|
35695
35695
|
"description": "<p>Size variant, reflected as the <code>size</code> host attribute.\n<code>m</code> (24px, default) or <code>l</code> (28px).\n'm'</p>\n",
|
|
35696
|
-
"line":
|
|
35696
|
+
"line": 62,
|
|
35697
35697
|
"rawdescription": "\n\nSize variant, reflected as the `size` host attribute.\n`m` (24px, default) or `l` (28px).\n'm'\n",
|
|
35698
35698
|
"jsdoctags": [
|
|
35699
35699
|
{
|
|
35700
|
-
"pos":
|
|
35701
|
-
"end":
|
|
35700
|
+
"pos": 1893,
|
|
35701
|
+
"end": 1911,
|
|
35702
35702
|
"kind": 328,
|
|
35703
35703
|
"id": 0,
|
|
35704
35704
|
"flags": 16842752,
|
|
35705
35705
|
"modifierFlagsCache": 0,
|
|
35706
35706
|
"transformFlags": 0,
|
|
35707
35707
|
"tagName": {
|
|
35708
|
-
"pos":
|
|
35709
|
-
"end":
|
|
35708
|
+
"pos": 1894,
|
|
35709
|
+
"end": 1901,
|
|
35710
35710
|
"kind": 80,
|
|
35711
35711
|
"id": 0,
|
|
35712
35712
|
"flags": 16842752,
|
|
@@ -35730,20 +35730,20 @@
|
|
|
35730
35730
|
"indexKey": "",
|
|
35731
35731
|
"optional": false,
|
|
35732
35732
|
"description": "<p>Controls the checked state of the checkbox.\nTwo-way bindable model.\nfalse</p>\n",
|
|
35733
|
-
"line":
|
|
35733
|
+
"line": 69,
|
|
35734
35734
|
"rawdescription": "\n\nControls the checked state of the checkbox.\nTwo-way bindable model.\nfalse\n",
|
|
35735
35735
|
"jsdoctags": [
|
|
35736
35736
|
{
|
|
35737
|
-
"pos":
|
|
35738
|
-
"end":
|
|
35737
|
+
"pos": 2052,
|
|
35738
|
+
"end": 2072,
|
|
35739
35739
|
"kind": 328,
|
|
35740
35740
|
"id": 0,
|
|
35741
35741
|
"flags": 16842752,
|
|
35742
35742
|
"modifierFlagsCache": 0,
|
|
35743
35743
|
"transformFlags": 0,
|
|
35744
35744
|
"tagName": {
|
|
35745
|
-
"pos":
|
|
35746
|
-
"end":
|
|
35745
|
+
"pos": 2053,
|
|
35746
|
+
"end": 2060,
|
|
35747
35747
|
"kind": 80,
|
|
35748
35748
|
"id": 0,
|
|
35749
35749
|
"flags": 16842752,
|
|
@@ -35765,20 +35765,20 @@
|
|
|
35765
35765
|
"indexKey": "",
|
|
35766
35766
|
"optional": false,
|
|
35767
35767
|
"description": "<p>Controls the indeterminate (mixed) state of the checkbox.\nfalse</p>\n",
|
|
35768
|
-
"line":
|
|
35768
|
+
"line": 75,
|
|
35769
35769
|
"rawdescription": "\n\nControls the indeterminate (mixed) state of the checkbox.\nfalse\n",
|
|
35770
35770
|
"jsdoctags": [
|
|
35771
35771
|
{
|
|
35772
|
-
"pos":
|
|
35773
|
-
"end":
|
|
35772
|
+
"pos": 2184,
|
|
35773
|
+
"end": 2204,
|
|
35774
35774
|
"kind": 328,
|
|
35775
35775
|
"id": 0,
|
|
35776
35776
|
"flags": 16842752,
|
|
35777
35777
|
"modifierFlagsCache": 0,
|
|
35778
35778
|
"transformFlags": 0,
|
|
35779
35779
|
"tagName": {
|
|
35780
|
-
"pos":
|
|
35781
|
-
"end":
|
|
35780
|
+
"pos": 2185,
|
|
35781
|
+
"end": 2192,
|
|
35782
35782
|
"kind": 80,
|
|
35783
35783
|
"id": 0,
|
|
35784
35784
|
"flags": 16842752,
|
|
@@ -35792,6 +35792,22 @@
|
|
|
35792
35792
|
}
|
|
35793
35793
|
],
|
|
35794
35794
|
"propertiesClass": [
|
|
35795
|
+
{
|
|
35796
|
+
"name": "internalDisabled",
|
|
35797
|
+
"coverageIgnore": false,
|
|
35798
|
+
"defaultValue": "signal(false)",
|
|
35799
|
+
"deprecated": false,
|
|
35800
|
+
"deprecationMessage": "",
|
|
35801
|
+
"type": "unknown",
|
|
35802
|
+
"indexKey": "",
|
|
35803
|
+
"optional": false,
|
|
35804
|
+
"description": "<p>Internal disabled state, written by both the <code>disabled</code> input (via effect)\nand the reactive-forms <code>setDisabledState</code> callback. The host <code>[disabled]</code>\nbinding reads this so <code>form.disable()</code> visually disables the checkbox.</p>\n",
|
|
35805
|
+
"line": 102,
|
|
35806
|
+
"rawdescription": "\n\nInternal disabled state, written by both the `disabled` input (via effect)\nand the reactive-forms `setDisabledState` callback. The host `[disabled]`\nbinding reads this so `form.disable()` visually disables the checkbox.\n",
|
|
35807
|
+
"modifierKind": [
|
|
35808
|
+
124
|
|
35809
|
+
]
|
|
35810
|
+
},
|
|
35795
35811
|
{
|
|
35796
35812
|
"name": "onTouched",
|
|
35797
35813
|
"coverageIgnore": false,
|
|
@@ -35802,7 +35818,7 @@
|
|
|
35802
35818
|
"indexKey": "",
|
|
35803
35819
|
"optional": false,
|
|
35804
35820
|
"description": "",
|
|
35805
|
-
"line":
|
|
35821
|
+
"line": 140,
|
|
35806
35822
|
"rawdescription": "\n",
|
|
35807
35823
|
"modifierKind": [
|
|
35808
35824
|
124
|
|
@@ -35826,7 +35842,7 @@
|
|
|
35826
35842
|
"optional": false,
|
|
35827
35843
|
"returnType": "void",
|
|
35828
35844
|
"typeParameters": [],
|
|
35829
|
-
"line":
|
|
35845
|
+
"line": 148,
|
|
35830
35846
|
"deprecated": false,
|
|
35831
35847
|
"deprecationMessage": "",
|
|
35832
35848
|
"rawdescription": "\n",
|
|
@@ -35864,7 +35880,7 @@
|
|
|
35864
35880
|
"optional": false,
|
|
35865
35881
|
"returnType": "void",
|
|
35866
35882
|
"typeParameters": [],
|
|
35867
|
-
"line":
|
|
35883
|
+
"line": 142,
|
|
35868
35884
|
"deprecated": false,
|
|
35869
35885
|
"deprecationMessage": "",
|
|
35870
35886
|
"rawdescription": "\n",
|
|
@@ -35902,7 +35918,7 @@
|
|
|
35902
35918
|
"optional": false,
|
|
35903
35919
|
"returnType": "void",
|
|
35904
35920
|
"typeParameters": [],
|
|
35905
|
-
"line":
|
|
35921
|
+
"line": 161,
|
|
35906
35922
|
"deprecated": false,
|
|
35907
35923
|
"deprecationMessage": "",
|
|
35908
35924
|
"rawdescription": "\n",
|
|
@@ -35950,7 +35966,7 @@
|
|
|
35950
35966
|
"optional": false,
|
|
35951
35967
|
"returnType": "void",
|
|
35952
35968
|
"typeParameters": [],
|
|
35953
|
-
"line":
|
|
35969
|
+
"line": 123,
|
|
35954
35970
|
"deprecated": false,
|
|
35955
35971
|
"deprecationMessage": "",
|
|
35956
35972
|
"rawdescription": "\n",
|
|
@@ -35996,7 +36012,7 @@
|
|
|
35996
36012
|
"optional": false,
|
|
35997
36013
|
"returnType": "void",
|
|
35998
36014
|
"typeParameters": [],
|
|
35999
|
-
"line":
|
|
36015
|
+
"line": 127,
|
|
36000
36016
|
"deprecated": false,
|
|
36001
36017
|
"deprecationMessage": "",
|
|
36002
36018
|
"rawdescription": "\n",
|
|
@@ -36021,7 +36037,7 @@
|
|
|
36021
36037
|
"coverageIgnore": false,
|
|
36022
36038
|
"args": [
|
|
36023
36039
|
{
|
|
36024
|
-
"name": "
|
|
36040
|
+
"name": "isDisabled",
|
|
36025
36041
|
"type": "boolean",
|
|
36026
36042
|
"optional": false,
|
|
36027
36043
|
"dotDotDotToken": false,
|
|
@@ -36032,14 +36048,14 @@
|
|
|
36032
36048
|
"optional": false,
|
|
36033
36049
|
"returnType": "void",
|
|
36034
36050
|
"typeParameters": [],
|
|
36035
|
-
"line":
|
|
36051
|
+
"line": 131,
|
|
36036
36052
|
"deprecated": false,
|
|
36037
36053
|
"deprecationMessage": "",
|
|
36038
36054
|
"rawdescription": "\n",
|
|
36039
36055
|
"description": "",
|
|
36040
36056
|
"jsdoctags": [
|
|
36041
36057
|
{
|
|
36042
|
-
"name": "
|
|
36058
|
+
"name": "isDisabled",
|
|
36043
36059
|
"type": "boolean",
|
|
36044
36060
|
"optional": false,
|
|
36045
36061
|
"dotDotDotToken": false,
|
|
@@ -36067,7 +36083,7 @@
|
|
|
36067
36083
|
"optional": false,
|
|
36068
36084
|
"returnType": "void",
|
|
36069
36085
|
"typeParameters": [],
|
|
36070
|
-
"line":
|
|
36086
|
+
"line": 119,
|
|
36071
36087
|
"deprecated": false,
|
|
36072
36088
|
"deprecationMessage": "",
|
|
36073
36089
|
"rawdescription": "\n",
|
|
@@ -36097,12 +36113,12 @@
|
|
|
36097
36113
|
"description": "",
|
|
36098
36114
|
"rawdescription": "\n",
|
|
36099
36115
|
"type": "component",
|
|
36100
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n model,\n booleanAttribute,\n effect,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the checkbox's size contract (String-Props model). */\nexport type EdsCheckboxSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsCheckbox]',\n template: '',\n styleUrl: './eds-checkbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsCheckbox),\n multi: true,\n },\n ],\n host: {\n type: 'checkbox',\n class: 'eds-checkbox',\n '[attr.size]': 'size()',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[checked]': 'checked()',\n '[attr.checked]': 'checked() || null',\n '[disabled]': '
|
|
36116
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n model,\n signal,\n booleanAttribute,\n effect,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the checkbox's size contract (String-Props model). */\nexport type EdsCheckboxSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsCheckbox]',\n template: '',\n styleUrl: './eds-checkbox.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsCheckbox),\n multi: true,\n },\n ],\n host: {\n type: 'checkbox',\n class: 'eds-checkbox',\n '[attr.size]': 'size()',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.data-e2e]': 'e2eAttr()',\n '[checked]': 'checked()',\n '[attr.checked]': 'checked() || null',\n // Reflect the *internal* disabled state so it reacts to both the `[disabled]`\n // input and a reactive form disabling the control via `setDisabledState`.\n '[disabled]': 'internalDisabled()',\n '[attr.readonly]': 'readonly() || null',\n '[attr.indeterminate]': 'indeterminate() || null',\n '(click)': 'onHostClick($event)',\n '(change)': 'onHostChange($event)',\n '(blur)': 'onTouched()',\n '(keydown.space)': 'onSpacePressed($any($event))',\n },\n})\nexport class EdsCheckbox implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-checkbox'\n */\n e2eAttr = input('eds-checkbox');\n\n /**\n * Size variant, reflected as the `size` host attribute.\n * `m` (24px, default) or `l` (28px).\n * @default 'm'\n */\n size = input<EdsCheckboxSize>('m');\n\n /**\n * Controls the checked state of the checkbox.\n * Two-way bindable model.\n * @default false\n */\n checked = model(false);\n\n /**\n * Controls the indeterminate (mixed) state of the checkbox.\n * @default false\n */\n indeterminate = model(false);\n\n /**\n * Controls whether the checkbox is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the checkbox shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n private _elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n\n /**\n * Internal disabled state, written by both the `disabled` input (via effect)\n * and the reactive-forms `setDisabledState` callback. The host `[disabled]`\n * binding reads this so `form.disable()` visually disables the checkbox.\n */\n protected internalDisabled = signal(false);\n\n constructor() {\n // Sync indeterminate property to the native element\n effect(() => {\n const indet = this.indeterminate();\n this._elementRef.nativeElement.indeterminate = indet;\n });\n\n // Sync the public `disabled` input → internal state.\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: boolean): void {\n this.checked.set(!!value);\n }\n\n registerOnChange(fn: (value: boolean) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n // Reactive forms (e.g. form.disable()) disable the control through here.\n this.internalDisabled.set(isDisabled);\n }\n\n // --- Event handlers ---\n\n // ControlValueAccessor callbacks\n\n protected onTouched: () => void = () => { /* noop */ };\n\n protected onHostClick(event: MouseEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n }\n }\n\n protected onHostChange(event: Event): void {\n const target = event.target as HTMLInputElement;\n const isChecked = target.checked;\n this.checked.set(isChecked);\n\n // Clear indeterminate on user interaction\n if (this.indeterminate()) {\n this.indeterminate.set(false);\n }\n\n this._onChange(isChecked);\n }\n\n protected onSpacePressed(event: KeyboardEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n private _onChange: (value: boolean) => void = () => { /* noop */ };\n}\n",
|
|
36101
36117
|
"styleUrl": "./eds-checkbox.scss",
|
|
36102
36118
|
"assetsDirs": [],
|
|
36103
36119
|
"styleUrlsData": [
|
|
36104
36120
|
{
|
|
36105
|
-
"data": "@use '../base' as base;\n\n// Inline SVG data URIs
|
|
36121
|
+
"data": "@use '../base' as base;\n\n// Inline SVG data URIs built from the EDS `regular` sprite glyphs — `check:regular`\n// and `minus:regular` (same viewBox + path data as `assets/eds/icons/sprites/regular.svg`),\n// so the checkbox marks match the eds-icon `check` / `minus` icons exactly.\n$svg-check-white: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");\n$svg-minus-white: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\");\n$svg-minus-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='M224 128a8 8 0 0 1-8 8H40a8 8 0 0 1 0-16h176a8 8 0 0 1 8 8'/%3E%3C/svg%3E\");\n$svg-check-dark: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23333' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");\n$svg-check-disabled: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%2384849b' d='m229.7 77.7-128 128a8 8 0 0 1-11.4 0l-56-56a8 8 0 0 1 11.4-11.4L96 188.7 218.3 66.3a8 8 0 0 1 11.4 11.4'/%3E%3C/svg%3E\");\n\n.eui-21 {\n :host.eds-checkbox {\n // Size (box dimension) — defaults to size \"m\" (24px); \"l\" overrides below.\n --_eds-checkbox-size: var(--eds-si-xl);\n @include base.eds-input-hover();\n\n // Reset & base layout\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n\n // Dimensions\n width: var(--_eds-checkbox-size);\n height: var(--_eds-checkbox-size);\n border-radius: var(--eds-br-xs);\n\n // Large size (28px)\n &[size=\"l\"] {\n --_eds-checkbox-size: var(--eds-si-2xl);\n }\n\n // Unchecked default\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border);\n\n // Pseudo-element for icon.\n // The sprite glyphs (check/minus) fill their 256×256 viewBox edge-to-edge,\n // so inset the painted area to give the mark optical padding inside the box.\n &::before {\n content: '';\n display: block;\n width: var(--_eds-checkbox-size);\n height: var(--_eds-checkbox-size);\n background-size: 75%;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n // Checked\n &:checked {\n background-color: var(--eds-c-surface-primary);\n border-color: var(--eds-c-border-primary);\n\n &::before {\n background-image: #{$svg-check-white};\n }\n }\n\n // Indeterminate (mixed) — only when not fully checked.\n // A checked box always wins and shows the checkmark.\n &:indeterminate:not(:checked) {\n background-color: var(--eds-c-surface-primary);\n border-color: var(--eds-c-border-primary);\n\n &::before {\n background-image: #{$svg-minus-white};\n }\n }\n\n // Disabled\n &:disabled {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-disabled);\n pointer-events: none;\n cursor: default;\n\n &:checked {\n background-color: var(--eds-c-surface-disabled);\n\n // Paint the check glyph with the disabled foreground token via a mask\n // (a data-URI `fill` is static and can't follow the theme). This makes\n // the disabled mark track `--eds-c-foreground-disabled` automatically:\n // #84849b in light, #48484f in dark.\n &::before {\n background-image: none;\n background-color: var(--eds-c-foreground-disabled);\n mask-image: #{$svg-check-disabled};\n mask-size: 75%;\n mask-repeat: no-repeat;\n mask-position: center;\n -webkit-mask-image: #{$svg-check-disabled};\n -webkit-mask-size: 75%;\n -webkit-mask-repeat: no-repeat;\n -webkit-mask-position: center;\n }\n }\n }\n\n // Readonly\n &[readonly] {\n pointer-events: none;\n cursor: default;\n\n &:checked {\n background-color: var(--eds-c-surface-neutral-subtler);\n border-color: var(--eds-c-border);\n\n &::before {\n background-image: #{$svg-check-dark};\n }\n }\n\n // Indeterminate + readonly — match the readonly-checked neutral\n // treatment so the mixed-state checkbox no longer stays primary\n &:indeterminate:not(:checked) {\n background-color: var(--eds-c-surface-neutral-subtler);\n border-color: var(--eds-c-border);\n\n &::before {\n background-image: #{$svg-minus-dark};\n }\n }\n }\n\n // Invalid\n // Invalid — reflected as the `invalid` host attribute (String-Props model).\n &[invalid]:not(:disabled):not([readonly]) {\n border-color: var(--eds-c-border-critical);\n\n &:checked {\n background-color: var(--eds-c-surface-critical);\n border-color: var(--eds-c-border-critical);\n\n &::before {\n background-image: #{$svg-check-white};\n }\n }\n }\n\n // Focus\n @include base.eds-focus-visible-ring();\n\n // Invalid focus\n &[invalid] {\n @include base.eds-focus-visible-ring-critical();\n }\n\n // Label placed directly after the checkbox uses the regular (400) weight.\n // The sibling label lives in the consumer's view (plain `<label>` or the\n // `eds-label` component), so ::ng-deep is required to cross the checkbox's\n // encapsulation boundary; it also overrides eds-label's default medium (500).\n // The label also shares the control's interactive cursor — pointer (hand).\n & + ::ng-deep label {\n font-weight: var(--eds-f-w-regular);\n cursor: pointer;\n }\n\n // A disabled checkbox dims the adjacent label to the disabled foreground\n // token (#84849b) to signal the control is not interactive.\n &:disabled + ::ng-deep label {\n color: var(--eds-c-foreground-disabled);\n }\n\n // Non-interactive states reset the label cursor to default.\n &:disabled + ::ng-deep label,\n &[readonly] + ::ng-deep label {\n cursor: default;\n }\n }\n}\n",
|
|
36106
36122
|
"styleUrl": "./eds-checkbox.scss"
|
|
36107
36123
|
}
|
|
36108
36124
|
],
|
|
@@ -36113,7 +36129,7 @@
|
|
|
36113
36129
|
"deprecated": false,
|
|
36114
36130
|
"deprecationMessage": "",
|
|
36115
36131
|
"args": [],
|
|
36116
|
-
"line":
|
|
36132
|
+
"line": 102,
|
|
36117
36133
|
"rawdescription": "\n"
|
|
36118
36134
|
},
|
|
36119
36135
|
"extends": [],
|
|
@@ -51205,7 +51221,7 @@
|
|
|
51205
51221
|
"assetsDirs": [],
|
|
51206
51222
|
"styleUrlsData": [
|
|
51207
51223
|
{
|
|
51208
|
-
"data": "@use '../base' as base;\n\n:host {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n align-items: center;\n display: flex;\n gap: var(--eds-sp-3xs);\n position: relative;\n\n .content {\n color: var(--_eds-feedback-message-color);\n display: block;\n position: relative;\n font: var(--eds-f-microcopy-m); //EDS aligned\n font-weight: var(--eds-f-w-regular);\n }\n}\n\n:host([color=\"primary\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground);\n}\n\n:host([color=\"info\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n\n:host([color=\"disabled\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-disabled);\n}\n",
|
|
51224
|
+
"data": "@use '../base' as base;\n\n:host {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n\n align-items: center;\n display: flex;\n gap: var(--eds-sp-3xs);\n position: relative;\n\n .content {\n color: var(--_eds-feedback-message-color);\n display: block;\n position: relative;\n font: var(--eds-f-microcopy-m); //EDS aligned\n font-weight: var(--eds-f-w-regular);\n }\n}\n\n:host([color=\"primary\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-primary);\n}\n\n:host([color=\"neutral\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-subtle);\n}\n\n:host([color=\"info\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-info);\n}\n\n:host([color=\"success\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-success);\n}\n\n:host([color=\"warning\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-warning);\n}\n\n:host([color=\"critical\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-critical);\n}\n\n:host([color=\"disabled\"]) {\n --_eds-feedback-message-color: var(--eds-c-foreground-disabled);\n}\n",
|
|
51209
51225
|
"styleUrl": "./eds-feedback-message.scss"
|
|
51210
51226
|
}
|
|
51211
51227
|
],
|
|
@@ -74455,7 +74471,7 @@
|
|
|
74455
74471
|
},
|
|
74456
74472
|
{
|
|
74457
74473
|
"name": "EdsRadio",
|
|
74458
|
-
"id": "component-EdsRadio-
|
|
74474
|
+
"id": "component-EdsRadio-70a6c3e504d97fe8e98f49ed234313363c55fa2e3ef1b019fb98b3dbaefa5f3ad1ae267ea1d7c851c1fa746511e56276830c10b88abeda504854fdda45606d60",
|
|
74459
74475
|
"file": "packages/eds/eds-radio/eds-radio.ts",
|
|
74460
74476
|
"changeDetection": "ChangeDetectionStrategy.OnPush",
|
|
74461
74477
|
"encapsulation": [],
|
|
@@ -74489,20 +74505,20 @@
|
|
|
74489
74505
|
"indexKey": "",
|
|
74490
74506
|
"optional": false,
|
|
74491
74507
|
"description": "<p>Controls whether the radio is disabled.\nfalse</p>\n",
|
|
74492
|
-
"line":
|
|
74508
|
+
"line": 62,
|
|
74493
74509
|
"rawdescription": "\n\nControls whether the radio is disabled.\nfalse\n",
|
|
74494
74510
|
"jsdoctags": [
|
|
74495
74511
|
{
|
|
74496
|
-
"pos":
|
|
74497
|
-
"end":
|
|
74512
|
+
"pos": 2044,
|
|
74513
|
+
"end": 2064,
|
|
74498
74514
|
"kind": 328,
|
|
74499
74515
|
"id": 0,
|
|
74500
74516
|
"flags": 16842752,
|
|
74501
74517
|
"modifierFlagsCache": 0,
|
|
74502
74518
|
"transformFlags": 0,
|
|
74503
74519
|
"tagName": {
|
|
74504
|
-
"pos":
|
|
74505
|
-
"end":
|
|
74520
|
+
"pos": 2045,
|
|
74521
|
+
"end": 2052,
|
|
74506
74522
|
"kind": 80,
|
|
74507
74523
|
"id": 0,
|
|
74508
74524
|
"flags": 16842752,
|
|
@@ -74524,20 +74540,20 @@
|
|
|
74524
74540
|
"indexKey": "",
|
|
74525
74541
|
"optional": false,
|
|
74526
74542
|
"description": "<p>Data attribute value for end-to-end testing identification.\n'eds-radio'</p>\n",
|
|
74527
|
-
"line":
|
|
74543
|
+
"line": 56,
|
|
74528
74544
|
"rawdescription": "\n\nData attribute value for end-to-end testing identification.\n'eds-radio'\n",
|
|
74529
74545
|
"jsdoctags": [
|
|
74530
74546
|
{
|
|
74531
|
-
"pos":
|
|
74532
|
-
"end":
|
|
74547
|
+
"pos": 1918,
|
|
74548
|
+
"end": 1944,
|
|
74533
74549
|
"kind": 328,
|
|
74534
74550
|
"id": 0,
|
|
74535
74551
|
"flags": 16842752,
|
|
74536
74552
|
"modifierFlagsCache": 0,
|
|
74537
74553
|
"transformFlags": 0,
|
|
74538
74554
|
"tagName": {
|
|
74539
|
-
"pos":
|
|
74540
|
-
"end":
|
|
74555
|
+
"pos": 1919,
|
|
74556
|
+
"end": 1926,
|
|
74541
74557
|
"kind": 80,
|
|
74542
74558
|
"id": 0,
|
|
74543
74559
|
"flags": 16842752,
|
|
@@ -74559,20 +74575,20 @@
|
|
|
74559
74575
|
"indexKey": "",
|
|
74560
74576
|
"optional": false,
|
|
74561
74577
|
"description": "<p>Controls whether the radio shows an invalid/error state.\nfalse</p>\n",
|
|
74562
|
-
"line":
|
|
74578
|
+
"line": 74,
|
|
74563
74579
|
"rawdescription": "\n\nControls whether the radio shows an invalid/error state.\nfalse\n",
|
|
74564
74580
|
"jsdoctags": [
|
|
74565
74581
|
{
|
|
74566
|
-
"pos":
|
|
74567
|
-
"end":
|
|
74582
|
+
"pos": 2357,
|
|
74583
|
+
"end": 2377,
|
|
74568
74584
|
"kind": 328,
|
|
74569
74585
|
"id": 0,
|
|
74570
74586
|
"flags": 16842752,
|
|
74571
74587
|
"modifierFlagsCache": 0,
|
|
74572
74588
|
"transformFlags": 0,
|
|
74573
74589
|
"tagName": {
|
|
74574
|
-
"pos":
|
|
74575
|
-
"end":
|
|
74590
|
+
"pos": 2358,
|
|
74591
|
+
"end": 2365,
|
|
74576
74592
|
"kind": 80,
|
|
74577
74593
|
"id": 0,
|
|
74578
74594
|
"flags": 16842752,
|
|
@@ -74594,20 +74610,20 @@
|
|
|
74594
74610
|
"indexKey": "",
|
|
74595
74611
|
"optional": false,
|
|
74596
74612
|
"description": "<p>Controls whether the radio is readonly.\nfalse</p>\n",
|
|
74597
|
-
"line":
|
|
74613
|
+
"line": 68,
|
|
74598
74614
|
"rawdescription": "\n\nControls whether the radio is readonly.\nfalse\n",
|
|
74599
74615
|
"jsdoctags": [
|
|
74600
74616
|
{
|
|
74601
|
-
"pos":
|
|
74602
|
-
"end":
|
|
74617
|
+
"pos": 2192,
|
|
74618
|
+
"end": 2212,
|
|
74603
74619
|
"kind": 328,
|
|
74604
74620
|
"id": 0,
|
|
74605
74621
|
"flags": 16842752,
|
|
74606
74622
|
"modifierFlagsCache": 0,
|
|
74607
74623
|
"transformFlags": 0,
|
|
74608
74624
|
"tagName": {
|
|
74609
|
-
"pos":
|
|
74610
|
-
"end":
|
|
74625
|
+
"pos": 2193,
|
|
74626
|
+
"end": 2200,
|
|
74611
74627
|
"kind": 80,
|
|
74612
74628
|
"id": 0,
|
|
74613
74629
|
"flags": 16842752,
|
|
@@ -74629,20 +74645,20 @@
|
|
|
74629
74645
|
"indexKey": "",
|
|
74630
74646
|
"optional": false,
|
|
74631
74647
|
"description": "<p>Controls the radio size.\n'm'</p>\n",
|
|
74632
|
-
"line":
|
|
74648
|
+
"line": 80,
|
|
74633
74649
|
"rawdescription": "\n\nControls the radio size.\n'm'\n",
|
|
74634
74650
|
"jsdoctags": [
|
|
74635
74651
|
{
|
|
74636
|
-
"pos":
|
|
74637
|
-
"end":
|
|
74652
|
+
"pos": 2491,
|
|
74653
|
+
"end": 2509,
|
|
74638
74654
|
"kind": 328,
|
|
74639
74655
|
"id": 0,
|
|
74640
74656
|
"flags": 16842752,
|
|
74641
74657
|
"modifierFlagsCache": 0,
|
|
74642
74658
|
"transformFlags": 0,
|
|
74643
74659
|
"tagName": {
|
|
74644
|
-
"pos":
|
|
74645
|
-
"end":
|
|
74660
|
+
"pos": 2492,
|
|
74661
|
+
"end": 2499,
|
|
74646
74662
|
"kind": 80,
|
|
74647
74663
|
"id": 0,
|
|
74648
74664
|
"flags": 16842752,
|
|
@@ -74657,6 +74673,22 @@
|
|
|
74657
74673
|
],
|
|
74658
74674
|
"outputsClass": [],
|
|
74659
74675
|
"propertiesClass": [
|
|
74676
|
+
{
|
|
74677
|
+
"name": "internalDisabled",
|
|
74678
|
+
"coverageIgnore": false,
|
|
74679
|
+
"defaultValue": "signal(false)",
|
|
74680
|
+
"deprecated": false,
|
|
74681
|
+
"deprecationMessage": "",
|
|
74682
|
+
"type": "unknown",
|
|
74683
|
+
"indexKey": "",
|
|
74684
|
+
"optional": false,
|
|
74685
|
+
"description": "<p>Internal disabled state, written by both the <code>disabled</code> input (via effect)\nand the reactive-forms <code>setDisabledState</code> callback. The host <code>[disabled]</code>\nbinding reads this so <code>form.disable()</code> visually disables the radio.</p>\n",
|
|
74686
|
+
"line": 89,
|
|
74687
|
+
"rawdescription": "\n\nInternal disabled state, written by both the `disabled` input (via effect)\nand the reactive-forms `setDisabledState` callback. The host `[disabled]`\nbinding reads this so `form.disable()` visually disables the radio.\n",
|
|
74688
|
+
"modifierKind": [
|
|
74689
|
+
124
|
|
74690
|
+
]
|
|
74691
|
+
},
|
|
74660
74692
|
{
|
|
74661
74693
|
"name": "onTouched",
|
|
74662
74694
|
"coverageIgnore": false,
|
|
@@ -74667,7 +74699,7 @@
|
|
|
74667
74699
|
"indexKey": "",
|
|
74668
74700
|
"optional": false,
|
|
74669
74701
|
"description": "",
|
|
74670
|
-
"line":
|
|
74702
|
+
"line": 122,
|
|
74671
74703
|
"rawdescription": "\n",
|
|
74672
74704
|
"modifierKind": [
|
|
74673
74705
|
124
|
|
@@ -74691,7 +74723,7 @@
|
|
|
74691
74723
|
"optional": false,
|
|
74692
74724
|
"returnType": "void",
|
|
74693
74725
|
"typeParameters": [],
|
|
74694
|
-
"line":
|
|
74726
|
+
"line": 130,
|
|
74695
74727
|
"deprecated": false,
|
|
74696
74728
|
"deprecationMessage": "",
|
|
74697
74729
|
"rawdescription": "\n",
|
|
@@ -74729,7 +74761,7 @@
|
|
|
74729
74761
|
"optional": false,
|
|
74730
74762
|
"returnType": "void",
|
|
74731
74763
|
"typeParameters": [],
|
|
74732
|
-
"line":
|
|
74764
|
+
"line": 124,
|
|
74733
74765
|
"deprecated": false,
|
|
74734
74766
|
"deprecationMessage": "",
|
|
74735
74767
|
"rawdescription": "\n",
|
|
@@ -74767,7 +74799,7 @@
|
|
|
74767
74799
|
"optional": false,
|
|
74768
74800
|
"returnType": "void",
|
|
74769
74801
|
"typeParameters": [],
|
|
74770
|
-
"line":
|
|
74802
|
+
"line": 136,
|
|
74771
74803
|
"deprecated": false,
|
|
74772
74804
|
"deprecationMessage": "",
|
|
74773
74805
|
"rawdescription": "\n",
|
|
@@ -74815,7 +74847,7 @@
|
|
|
74815
74847
|
"optional": false,
|
|
74816
74848
|
"returnType": "void",
|
|
74817
74849
|
"typeParameters": [],
|
|
74818
|
-
"line":
|
|
74850
|
+
"line": 105,
|
|
74819
74851
|
"deprecated": false,
|
|
74820
74852
|
"deprecationMessage": "",
|
|
74821
74853
|
"rawdescription": "\n",
|
|
@@ -74861,7 +74893,7 @@
|
|
|
74861
74893
|
"optional": false,
|
|
74862
74894
|
"returnType": "void",
|
|
74863
74895
|
"typeParameters": [],
|
|
74864
|
-
"line":
|
|
74896
|
+
"line": 109,
|
|
74865
74897
|
"deprecated": false,
|
|
74866
74898
|
"deprecationMessage": "",
|
|
74867
74899
|
"rawdescription": "\n",
|
|
@@ -74886,7 +74918,7 @@
|
|
|
74886
74918
|
"coverageIgnore": false,
|
|
74887
74919
|
"args": [
|
|
74888
74920
|
{
|
|
74889
|
-
"name": "
|
|
74921
|
+
"name": "isDisabled",
|
|
74890
74922
|
"type": "boolean",
|
|
74891
74923
|
"optional": false,
|
|
74892
74924
|
"dotDotDotToken": false,
|
|
@@ -74897,14 +74929,14 @@
|
|
|
74897
74929
|
"optional": false,
|
|
74898
74930
|
"returnType": "void",
|
|
74899
74931
|
"typeParameters": [],
|
|
74900
|
-
"line":
|
|
74932
|
+
"line": 113,
|
|
74901
74933
|
"deprecated": false,
|
|
74902
74934
|
"deprecationMessage": "",
|
|
74903
74935
|
"rawdescription": "\n",
|
|
74904
74936
|
"description": "",
|
|
74905
74937
|
"jsdoctags": [
|
|
74906
74938
|
{
|
|
74907
|
-
"name": "
|
|
74939
|
+
"name": "isDisabled",
|
|
74908
74940
|
"type": "boolean",
|
|
74909
74941
|
"optional": false,
|
|
74910
74942
|
"dotDotDotToken": false,
|
|
@@ -74932,7 +74964,7 @@
|
|
|
74932
74964
|
"optional": false,
|
|
74933
74965
|
"returnType": "void",
|
|
74934
74966
|
"typeParameters": [],
|
|
74935
|
-
"line":
|
|
74967
|
+
"line": 100,
|
|
74936
74968
|
"deprecated": false,
|
|
74937
74969
|
"deprecationMessage": "",
|
|
74938
74970
|
"rawdescription": "\n",
|
|
@@ -74962,16 +74994,25 @@
|
|
|
74962
74994
|
"description": "",
|
|
74963
74995
|
"rawdescription": "\n",
|
|
74964
74996
|
"type": "component",
|
|
74965
|
-
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n booleanAttribute,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the radio's size variant contract. */\nexport type EdsRadioSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsRadio]',\n template: '',\n styleUrl: './eds-radio.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsRadio),\n multi: true,\n },\n ],\n host: {\n type: 'radio',\n class: 'eds-radio',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.aria-invalid]': 'isInvalid() || null',\n '[attr.size]': 'size()',\n '[attr.data-e2e]': 'e2eAttr()',\n '[disabled]': '
|
|
74997
|
+
"sourceCode": "import {\n Component,\n ChangeDetectionStrategy,\n ElementRef,\n inject,\n input,\n signal,\n effect,\n booleanAttribute,\n forwardRef,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\n\n/** Local narrowed size union — the radio's size variant contract. */\nexport type EdsRadioSize = 'm' | 'l';\n\n@Component({\n // eslint-disable-next-line @angular-eslint/component-selector\n selector: 'input[edsRadio]',\n template: '',\n styleUrl: './eds-radio.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n providers: [\n {\n provide: NG_VALUE_ACCESSOR,\n useExisting: forwardRef(() => EdsRadio),\n multi: true,\n },\n ],\n host: {\n type: 'radio',\n class: 'eds-radio',\n '[attr.invalid]': 'isInvalid() || null',\n '[attr.aria-invalid]': 'isInvalid() || null',\n '[attr.size]': 'size()',\n '[attr.data-e2e]': 'e2eAttr()',\n // Reflect the *internal* disabled state so it reacts to both the `[disabled]`\n // input and a reactive form disabling the control via `setDisabledState`.\n '[disabled]': 'internalDisabled()',\n // NOTE: do NOT reflect the native `readonly` attribute — it is invalid on\n // `<input type=\"radio\">` and makes Chromium force `appearance: auto`, which\n // collapses the custom control (only the label shows). Reflect a non-native\n // `data-readonly` attribute instead; readonly behaviour is handled in JS below.\n '[attr.data-readonly]': 'readonly() || null',\n '(click)': 'onHostClick($event)',\n '(change)': 'onHostChange($event)',\n '(blur)': 'onTouched()',\n '(keydown.space)': 'onSpacePressed($any($event))',\n },\n})\nexport class EdsRadio implements ControlValueAccessor {\n /**\n * Data attribute value for end-to-end testing identification.\n * @default 'eds-radio'\n */\n e2eAttr = input('eds-radio');\n\n /**\n * Controls whether the radio is disabled.\n * @default false\n */\n disabled = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the radio is readonly.\n * @default false\n */\n readonly = input(false, { transform: booleanAttribute });\n\n /**\n * Controls whether the radio shows an invalid/error state.\n * @default false\n */\n isInvalid = input(false, { transform: booleanAttribute });\n\n /**\n * Controls the radio size.\n * @default 'm'\n */\n size = input<EdsRadioSize>('m');\n\n private _elementRef: ElementRef<HTMLInputElement> = inject(ElementRef);\n\n /**\n * Internal disabled state, written by both the `disabled` input (via effect)\n * and the reactive-forms `setDisabledState` callback. The host `[disabled]`\n * binding reads this so `form.disable()` visually disables the radio.\n */\n protected internalDisabled = signal(false);\n\n constructor() {\n // Sync the public `disabled` input → internal state.\n effect(() => {\n this.internalDisabled.set(this.disabled());\n });\n }\n\n // --- ControlValueAccessor ---\n\n writeValue(value: string): void {\n // Radio is checked when its value matches the form control value\n this._elementRef.nativeElement.checked = this._elementRef.nativeElement.value === value;\n }\n\n registerOnChange(fn: (value: string) => void): void {\n this._onChange = fn;\n }\n\n registerOnTouched(fn: () => void): void {\n this.onTouched = fn;\n }\n\n setDisabledState(isDisabled: boolean): void {\n // Reactive forms (e.g. form.disable()) disable the control through here.\n this.internalDisabled.set(isDisabled);\n }\n\n // --- Event handlers ---\n\n // ControlValueAccessor callbacks\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n protected onTouched: () => void = () => { /* noop */ };\n\n protected onHostClick(event: MouseEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n }\n }\n\n protected onHostChange(event: Event): void {\n const target = event.target as HTMLInputElement;\n this._onChange(target.value);\n this.onTouched();\n }\n\n protected onSpacePressed(event: KeyboardEvent): void {\n if (this.readonly()) {\n event.preventDefault();\n event.stopPropagation();\n }\n }\n\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n private _onChange: (value: string) => void = () => { /* noop */ };\n}\n",
|
|
74966
74998
|
"styleUrl": "./eds-radio.scss",
|
|
74967
74999
|
"assetsDirs": [],
|
|
74968
75000
|
"styleUrlsData": [
|
|
74969
75001
|
{
|
|
74970
|
-
"data": "@use '../base' as base;\n\n
|
|
75002
|
+
"data": "@use '../base' as base;\n\n.eui-21 {\n :host.eds-radio {\n // Reset & base layout\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n vertical-align: middle;\n cursor: pointer;\n @include base.eds-input-hover();\n\n // Dimensions — default (size \"m\"). Per Figma: control 24px, inner dot 16px.\n --_eds-radio-size: var(--eds-si-xl);\n --_eds-radio-dot-size: var(--eds-si-m);\n width: var(--_eds-radio-size);\n height: var(--_eds-radio-size);\n border-radius: var(--eds-br-full);\n\n // Unchecked default\n background-color: var(--eds-c-surface-elevation);\n border: var(--eds-bw-xs) solid var(--eds-c-border);\n\n // Inner dot — concentric circle sized to the Figma spec (16px at M, 20px at L).\n // Hidden until checked; the fill color is set per state below.\n &::before {\n content: '';\n display: block;\n width: var(--_eds-radio-dot-size);\n height: var(--_eds-radio-dot-size);\n border-radius: var(--eds-br-full);\n background-color: transparent;\n }\n\n // Large size — control 28px, inner dot 20px.\n &[size='l'] {\n --_eds-radio-size: var(--eds-si-2xl);\n --_eds-radio-dot-size: var(--eds-si-l);\n }\n\n // Checked\n &:checked {\n border-color: var(--eds-c-border-primary);\n\n &::before {\n background-color: var(--eds-c-surface-primary);\n }\n // NOTE: the checked-hover treatment (dot + border darken to #0035bf) is\n // provided by `base.eds-input-hover()` included above.\n }\n\n // Disabled — per Figma the control keeps the white elevation surface with a\n // disabled border; only the checked dot uses the disabled surface token.\n &:disabled {\n background-color: var(--eds-c-surface-elevation);\n border-color: var(--eds-c-border-disabled);\n pointer-events: none;\n cursor: default;\n\n &:checked::before {\n background-color: var(--eds-c-surface-disabled);\n }\n }\n\n // Readonly — keyed off the non-native `data-readonly` attribute (the native\n // `readonly` attr is invalid on radio inputs and breaks custom appearance).\n // Readonly is a value-display mode: only the *checked* option is shown, as\n // its label alone (no circle). Unchecked options are hidden entirely.\n &[data-readonly] {\n pointer-events: none;\n cursor: default;\n user-select: none;\n\n // Checked readonly: hide the circle/dot, keep only the adjacent label\n // (the selected value is shown as plain text).\n &:checked {\n display: none;\n\n & + ::ng-deep label {\n display: inline;\n }\n }\n\n // Unchecked readonly: hide the control AND its adjacent label (the whole\n // row), so only the selected value remains visible.\n &:not(:checked) {\n display: none;\n\n & + ::ng-deep label {\n display: none;\n }\n }\n }\n\n // Invalid — reflected as the `invalid` host attribute (String-Props model).\n &[invalid]:not(:disabled):not([data-readonly]) {\n border-color: var(--eds-c-border-critical);\n\n &:checked {\n border-color: var(--eds-c-border-critical);\n\n &::before {\n background-color: var(--eds-c-surface-critical);\n }\n }\n }\n\n // Focus\n @include base.eds-focus-visible-ring();\n\n // Invalid focus\n &[invalid] {\n @include base.eds-focus-visible-ring-critical();\n }\n\n // A disabled radio dims the adjacent label to the disabled foreground\n // token (#84849b) to signal the control is not interactive. The label is a\n // projected sibling (e.g. the `eds-label` component), so ::ng-deep is required\n // to cross the radio's encapsulation boundary.\n &:disabled + ::ng-deep label {\n color: var(--eds-c-foreground-disabled);\n }\n\n // Adjacent label shares the control's interactive cursor — pointer (hand)\n // when the radio is interactive, default when disabled/readonly. The label\n // is a projected sibling, hence ::ng-deep.\n & + ::ng-deep label {\n cursor: pointer;\n }\n\n &:disabled + ::ng-deep label,\n &[data-readonly] + ::ng-deep label {\n cursor: default;\n }\n }\n}\n",
|
|
74971
75003
|
"styleUrl": "./eds-radio.scss"
|
|
74972
75004
|
}
|
|
74973
75005
|
],
|
|
74974
75006
|
"stylesData": "",
|
|
75007
|
+
"constructorObj": {
|
|
75008
|
+
"name": "constructor",
|
|
75009
|
+
"description": "",
|
|
75010
|
+
"deprecated": false,
|
|
75011
|
+
"deprecationMessage": "",
|
|
75012
|
+
"args": [],
|
|
75013
|
+
"line": 89,
|
|
75014
|
+
"rawdescription": "\n"
|
|
75015
|
+
},
|
|
74975
75016
|
"extends": [],
|
|
74976
75017
|
"implements": [
|
|
74977
75018
|
"ControlValueAccessor"
|