@spectrum-web-components/textfield 0.34.1-rc.0 → 0.35.0
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/custom-elements.json +56 -38
- package/package.json +9 -9
- package/src/Textfield.d.ts +1 -0
- package/src/Textfield.dev.js +12 -5
- package/src/Textfield.dev.js.map +2 -2
- package/src/Textfield.js +13 -9
- package/src/Textfield.js.map +2 -2
- package/src/textfield.css.dev.js +2 -22
- package/src/textfield.css.dev.js.map +2 -2
- package/src/textfield.css.js +2 -22
- package/src/textfield.css.js.map +2 -2
- package/stories/textarea.stories.js +33 -1
- package/stories/textarea.stories.js.map +2 -2
- package/test/textfield.test.js +71 -1
- package/test/textfield.test.js.map +2 -2
package/custom-elements.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"modules": [
|
|
5
5
|
{
|
|
6
6
|
"kind": "javascript-module",
|
|
7
|
-
"path": "sp-textfield.
|
|
7
|
+
"path": "sp-textfield.js",
|
|
8
8
|
"declarations": [],
|
|
9
9
|
"exports": [
|
|
10
10
|
{
|
|
@@ -19,13 +19,20 @@
|
|
|
19
19
|
},
|
|
20
20
|
{
|
|
21
21
|
"kind": "javascript-module",
|
|
22
|
-
"path": "src/Textfield.
|
|
22
|
+
"path": "src/Textfield.js",
|
|
23
23
|
"declarations": [
|
|
24
24
|
{
|
|
25
25
|
"kind": "class",
|
|
26
26
|
"description": "",
|
|
27
27
|
"name": "TextfieldBase",
|
|
28
28
|
"members": [
|
|
29
|
+
{
|
|
30
|
+
"kind": "field",
|
|
31
|
+
"name": "appliedLabel",
|
|
32
|
+
"type": {
|
|
33
|
+
"text": "string | undefined"
|
|
34
|
+
}
|
|
35
|
+
},
|
|
29
36
|
{
|
|
30
37
|
"kind": "field",
|
|
31
38
|
"name": "allowedKeys",
|
|
@@ -586,7 +593,7 @@
|
|
|
586
593
|
"attribute": "value",
|
|
587
594
|
"inheritedFrom": {
|
|
588
595
|
"name": "TextfieldBase",
|
|
589
|
-
"module": "src/Textfield.
|
|
596
|
+
"module": "src/Textfield.js"
|
|
590
597
|
}
|
|
591
598
|
},
|
|
592
599
|
{
|
|
@@ -599,7 +606,18 @@
|
|
|
599
606
|
"default": "''",
|
|
600
607
|
"inheritedFrom": {
|
|
601
608
|
"name": "TextfieldBase",
|
|
602
|
-
"module": "src/Textfield.
|
|
609
|
+
"module": "src/Textfield.js"
|
|
610
|
+
}
|
|
611
|
+
},
|
|
612
|
+
{
|
|
613
|
+
"kind": "field",
|
|
614
|
+
"name": "appliedLabel",
|
|
615
|
+
"type": {
|
|
616
|
+
"text": "string | undefined"
|
|
617
|
+
},
|
|
618
|
+
"inheritedFrom": {
|
|
619
|
+
"name": "TextfieldBase",
|
|
620
|
+
"module": "src/Textfield.js"
|
|
603
621
|
}
|
|
604
622
|
},
|
|
605
623
|
{
|
|
@@ -612,7 +630,7 @@
|
|
|
612
630
|
"attribute": "allowed-keys",
|
|
613
631
|
"inheritedFrom": {
|
|
614
632
|
"name": "TextfieldBase",
|
|
615
|
-
"module": "src/Textfield.
|
|
633
|
+
"module": "src/Textfield.js"
|
|
616
634
|
}
|
|
617
635
|
},
|
|
618
636
|
{
|
|
@@ -627,7 +645,7 @@
|
|
|
627
645
|
"reflects": true,
|
|
628
646
|
"inheritedFrom": {
|
|
629
647
|
"name": "TextfieldBase",
|
|
630
|
-
"module": "src/Textfield.
|
|
648
|
+
"module": "src/Textfield.js"
|
|
631
649
|
}
|
|
632
650
|
},
|
|
633
651
|
{
|
|
@@ -639,7 +657,7 @@
|
|
|
639
657
|
"privacy": "protected",
|
|
640
658
|
"inheritedFrom": {
|
|
641
659
|
"name": "TextfieldBase",
|
|
642
|
-
"module": "src/Textfield.
|
|
660
|
+
"module": "src/Textfield.js"
|
|
643
661
|
}
|
|
644
662
|
},
|
|
645
663
|
{
|
|
@@ -654,7 +672,7 @@
|
|
|
654
672
|
"reflects": true,
|
|
655
673
|
"inheritedFrom": {
|
|
656
674
|
"name": "TextfieldBase",
|
|
657
|
-
"module": "src/Textfield.
|
|
675
|
+
"module": "src/Textfield.js"
|
|
658
676
|
}
|
|
659
677
|
},
|
|
660
678
|
{
|
|
@@ -668,7 +686,7 @@
|
|
|
668
686
|
"attribute": "label",
|
|
669
687
|
"inheritedFrom": {
|
|
670
688
|
"name": "TextfieldBase",
|
|
671
|
-
"module": "src/Textfield.
|
|
689
|
+
"module": "src/Textfield.js"
|
|
672
690
|
}
|
|
673
691
|
},
|
|
674
692
|
{
|
|
@@ -682,7 +700,7 @@
|
|
|
682
700
|
"attribute": "placeholder",
|
|
683
701
|
"inheritedFrom": {
|
|
684
702
|
"name": "TextfieldBase",
|
|
685
|
-
"module": "src/Textfield.
|
|
703
|
+
"module": "src/Textfield.js"
|
|
686
704
|
}
|
|
687
705
|
},
|
|
688
706
|
{
|
|
@@ -697,7 +715,7 @@
|
|
|
697
715
|
"reflects": true,
|
|
698
716
|
"inheritedFrom": {
|
|
699
717
|
"name": "TextfieldBase",
|
|
700
|
-
"module": "src/Textfield.
|
|
718
|
+
"module": "src/Textfield.js"
|
|
701
719
|
}
|
|
702
720
|
},
|
|
703
721
|
{
|
|
@@ -708,7 +726,7 @@
|
|
|
708
726
|
},
|
|
709
727
|
"inheritedFrom": {
|
|
710
728
|
"name": "TextfieldBase",
|
|
711
|
-
"module": "src/Textfield.
|
|
729
|
+
"module": "src/Textfield.js"
|
|
712
730
|
}
|
|
713
731
|
},
|
|
714
732
|
{
|
|
@@ -721,7 +739,7 @@
|
|
|
721
739
|
"attribute": "pattern",
|
|
722
740
|
"inheritedFrom": {
|
|
723
741
|
"name": "TextfieldBase",
|
|
724
|
-
"module": "src/Textfield.
|
|
742
|
+
"module": "src/Textfield.js"
|
|
725
743
|
}
|
|
726
744
|
},
|
|
727
745
|
{
|
|
@@ -736,7 +754,7 @@
|
|
|
736
754
|
"reflects": true,
|
|
737
755
|
"inheritedFrom": {
|
|
738
756
|
"name": "TextfieldBase",
|
|
739
|
-
"module": "src/Textfield.
|
|
757
|
+
"module": "src/Textfield.js"
|
|
740
758
|
}
|
|
741
759
|
},
|
|
742
760
|
{
|
|
@@ -750,7 +768,7 @@
|
|
|
750
768
|
"attribute": "maxlength",
|
|
751
769
|
"inheritedFrom": {
|
|
752
770
|
"name": "TextfieldBase",
|
|
753
|
-
"module": "src/Textfield.
|
|
771
|
+
"module": "src/Textfield.js"
|
|
754
772
|
}
|
|
755
773
|
},
|
|
756
774
|
{
|
|
@@ -764,7 +782,7 @@
|
|
|
764
782
|
"attribute": "minlength",
|
|
765
783
|
"inheritedFrom": {
|
|
766
784
|
"name": "TextfieldBase",
|
|
767
|
-
"module": "src/Textfield.
|
|
785
|
+
"module": "src/Textfield.js"
|
|
768
786
|
}
|
|
769
787
|
},
|
|
770
788
|
{
|
|
@@ -779,7 +797,7 @@
|
|
|
779
797
|
"reflects": true,
|
|
780
798
|
"inheritedFrom": {
|
|
781
799
|
"name": "TextfieldBase",
|
|
782
|
-
"module": "src/Textfield.
|
|
800
|
+
"module": "src/Textfield.js"
|
|
783
801
|
}
|
|
784
802
|
},
|
|
785
803
|
{
|
|
@@ -794,7 +812,7 @@
|
|
|
794
812
|
"reflects": true,
|
|
795
813
|
"inheritedFrom": {
|
|
796
814
|
"name": "TextfieldBase",
|
|
797
|
-
"module": "src/Textfield.
|
|
815
|
+
"module": "src/Textfield.js"
|
|
798
816
|
}
|
|
799
817
|
},
|
|
800
818
|
{
|
|
@@ -808,7 +826,7 @@
|
|
|
808
826
|
"attribute": "rows",
|
|
809
827
|
"inheritedFrom": {
|
|
810
828
|
"name": "TextfieldBase",
|
|
811
|
-
"module": "src/Textfield.
|
|
829
|
+
"module": "src/Textfield.js"
|
|
812
830
|
}
|
|
813
831
|
},
|
|
814
832
|
{
|
|
@@ -823,7 +841,7 @@
|
|
|
823
841
|
"reflects": true,
|
|
824
842
|
"inheritedFrom": {
|
|
825
843
|
"name": "TextfieldBase",
|
|
826
|
-
"module": "src/Textfield.
|
|
844
|
+
"module": "src/Textfield.js"
|
|
827
845
|
}
|
|
828
846
|
},
|
|
829
847
|
{
|
|
@@ -838,7 +856,7 @@
|
|
|
838
856
|
"reflects": true,
|
|
839
857
|
"inheritedFrom": {
|
|
840
858
|
"name": "TextfieldBase",
|
|
841
|
-
"module": "src/Textfield.
|
|
859
|
+
"module": "src/Textfield.js"
|
|
842
860
|
}
|
|
843
861
|
},
|
|
844
862
|
{
|
|
@@ -853,7 +871,7 @@
|
|
|
853
871
|
"reflects": true,
|
|
854
872
|
"inheritedFrom": {
|
|
855
873
|
"name": "TextfieldBase",
|
|
856
|
-
"module": "src/Textfield.
|
|
874
|
+
"module": "src/Textfield.js"
|
|
857
875
|
}
|
|
858
876
|
},
|
|
859
877
|
{
|
|
@@ -867,7 +885,7 @@
|
|
|
867
885
|
"reflects": true,
|
|
868
886
|
"inheritedFrom": {
|
|
869
887
|
"name": "TextfieldBase",
|
|
870
|
-
"module": "src/Textfield.
|
|
888
|
+
"module": "src/Textfield.js"
|
|
871
889
|
}
|
|
872
890
|
},
|
|
873
891
|
{
|
|
@@ -880,7 +898,7 @@
|
|
|
880
898
|
"readonly": true,
|
|
881
899
|
"inheritedFrom": {
|
|
882
900
|
"name": "TextfieldBase",
|
|
883
|
-
"module": "src/Textfield.
|
|
901
|
+
"module": "src/Textfield.js"
|
|
884
902
|
}
|
|
885
903
|
},
|
|
886
904
|
{
|
|
@@ -920,7 +938,7 @@
|
|
|
920
938
|
"description": "Sets the start and end positions of the current selection.",
|
|
921
939
|
"inheritedFrom": {
|
|
922
940
|
"name": "TextfieldBase",
|
|
923
|
-
"module": "src/Textfield.
|
|
941
|
+
"module": "src/Textfield.js"
|
|
924
942
|
}
|
|
925
943
|
},
|
|
926
944
|
{
|
|
@@ -935,7 +953,7 @@
|
|
|
935
953
|
"description": "Selects all the text.",
|
|
936
954
|
"inheritedFrom": {
|
|
937
955
|
"name": "TextfieldBase",
|
|
938
|
-
"module": "src/Textfield.
|
|
956
|
+
"module": "src/Textfield.js"
|
|
939
957
|
}
|
|
940
958
|
},
|
|
941
959
|
{
|
|
@@ -949,7 +967,7 @@
|
|
|
949
967
|
},
|
|
950
968
|
"inheritedFrom": {
|
|
951
969
|
"name": "TextfieldBase",
|
|
952
|
-
"module": "src/Textfield.
|
|
970
|
+
"module": "src/Textfield.js"
|
|
953
971
|
}
|
|
954
972
|
},
|
|
955
973
|
{
|
|
@@ -963,7 +981,7 @@
|
|
|
963
981
|
},
|
|
964
982
|
"inheritedFrom": {
|
|
965
983
|
"name": "TextfieldBase",
|
|
966
|
-
"module": "src/Textfield.
|
|
984
|
+
"module": "src/Textfield.js"
|
|
967
985
|
}
|
|
968
986
|
},
|
|
969
987
|
{
|
|
@@ -977,7 +995,7 @@
|
|
|
977
995
|
},
|
|
978
996
|
"inheritedFrom": {
|
|
979
997
|
"name": "TextfieldBase",
|
|
980
|
-
"module": "src/Textfield.
|
|
998
|
+
"module": "src/Textfield.js"
|
|
981
999
|
}
|
|
982
1000
|
},
|
|
983
1001
|
{
|
|
@@ -991,7 +1009,7 @@
|
|
|
991
1009
|
},
|
|
992
1010
|
"inheritedFrom": {
|
|
993
1011
|
"name": "TextfieldBase",
|
|
994
|
-
"module": "src/Textfield.
|
|
1012
|
+
"module": "src/Textfield.js"
|
|
995
1013
|
}
|
|
996
1014
|
},
|
|
997
1015
|
{
|
|
@@ -1005,7 +1023,7 @@
|
|
|
1005
1023
|
},
|
|
1006
1024
|
"inheritedFrom": {
|
|
1007
1025
|
"name": "TextfieldBase",
|
|
1008
|
-
"module": "src/Textfield.
|
|
1026
|
+
"module": "src/Textfield.js"
|
|
1009
1027
|
}
|
|
1010
1028
|
},
|
|
1011
1029
|
{
|
|
@@ -1018,7 +1036,7 @@
|
|
|
1018
1036
|
"readonly": true,
|
|
1019
1037
|
"inheritedFrom": {
|
|
1020
1038
|
"name": "TextfieldBase",
|
|
1021
|
-
"module": "src/Textfield.
|
|
1039
|
+
"module": "src/Textfield.js"
|
|
1022
1040
|
}
|
|
1023
1041
|
},
|
|
1024
1042
|
{
|
|
@@ -1031,7 +1049,7 @@
|
|
|
1031
1049
|
"readonly": true,
|
|
1032
1050
|
"inheritedFrom": {
|
|
1033
1051
|
"name": "TextfieldBase",
|
|
1034
|
-
"module": "src/Textfield.
|
|
1052
|
+
"module": "src/Textfield.js"
|
|
1035
1053
|
}
|
|
1036
1054
|
},
|
|
1037
1055
|
{
|
|
@@ -1044,7 +1062,7 @@
|
|
|
1044
1062
|
"readonly": true,
|
|
1045
1063
|
"inheritedFrom": {
|
|
1046
1064
|
"name": "TextfieldBase",
|
|
1047
|
-
"module": "src/Textfield.
|
|
1065
|
+
"module": "src/Textfield.js"
|
|
1048
1066
|
}
|
|
1049
1067
|
},
|
|
1050
1068
|
{
|
|
@@ -1058,7 +1076,7 @@
|
|
|
1058
1076
|
},
|
|
1059
1077
|
"inheritedFrom": {
|
|
1060
1078
|
"name": "TextfieldBase",
|
|
1061
|
-
"module": "src/Textfield.
|
|
1079
|
+
"module": "src/Textfield.js"
|
|
1062
1080
|
}
|
|
1063
1081
|
},
|
|
1064
1082
|
{
|
|
@@ -1072,7 +1090,7 @@
|
|
|
1072
1090
|
},
|
|
1073
1091
|
"inheritedFrom": {
|
|
1074
1092
|
"name": "TextfieldBase",
|
|
1075
|
-
"module": "src/Textfield.
|
|
1093
|
+
"module": "src/Textfield.js"
|
|
1076
1094
|
}
|
|
1077
1095
|
}
|
|
1078
1096
|
],
|
|
@@ -1326,7 +1344,7 @@
|
|
|
1326
1344
|
"name": "TextfieldBase",
|
|
1327
1345
|
"declaration": {
|
|
1328
1346
|
"name": "TextfieldBase",
|
|
1329
|
-
"module": "src/Textfield.
|
|
1347
|
+
"module": "src/Textfield.js"
|
|
1330
1348
|
}
|
|
1331
1349
|
},
|
|
1332
1350
|
{
|
|
@@ -1334,7 +1352,7 @@
|
|
|
1334
1352
|
"name": "Textfield",
|
|
1335
1353
|
"declaration": {
|
|
1336
1354
|
"name": "Textfield",
|
|
1337
|
-
"module": "src/Textfield.
|
|
1355
|
+
"module": "src/Textfield.js"
|
|
1338
1356
|
}
|
|
1339
1357
|
}
|
|
1340
1358
|
]
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spectrum-web-components/textfield",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.35.0",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -57,15 +57,15 @@
|
|
|
57
57
|
"lit-html"
|
|
58
58
|
],
|
|
59
59
|
"dependencies": {
|
|
60
|
-
"@spectrum-web-components/base": "^0.
|
|
61
|
-
"@spectrum-web-components/help-text": "^0.
|
|
62
|
-
"@spectrum-web-components/icon": "^0.
|
|
63
|
-
"@spectrum-web-components/icons-ui": "^0.
|
|
64
|
-
"@spectrum-web-components/icons-workflow": "^0.
|
|
65
|
-
"@spectrum-web-components/shared": "^0.
|
|
60
|
+
"@spectrum-web-components/base": "^0.35.0",
|
|
61
|
+
"@spectrum-web-components/help-text": "^0.35.0",
|
|
62
|
+
"@spectrum-web-components/icon": "^0.35.0",
|
|
63
|
+
"@spectrum-web-components/icons-ui": "^0.35.0",
|
|
64
|
+
"@spectrum-web-components/icons-workflow": "^0.35.0",
|
|
65
|
+
"@spectrum-web-components/shared": "^0.35.0"
|
|
66
66
|
},
|
|
67
67
|
"devDependencies": {
|
|
68
|
-
"@spectrum-css/textfield": "^6.0.
|
|
68
|
+
"@spectrum-css/textfield": "^6.0.7"
|
|
69
69
|
},
|
|
70
70
|
"types": "./src/index.d.ts",
|
|
71
71
|
"customElements": "custom-elements.json",
|
|
@@ -73,5 +73,5 @@
|
|
|
73
73
|
"./sp-*.js",
|
|
74
74
|
"./**/*.dev.js"
|
|
75
75
|
],
|
|
76
|
-
"gitHead": "
|
|
76
|
+
"gitHead": "1ee5a6c92838cdf48321276d97f61c20f8476ac1"
|
|
77
77
|
}
|
package/src/Textfield.d.ts
CHANGED
|
@@ -17,6 +17,7 @@ declare const TextfieldBase_base: typeof Focusable & {
|
|
|
17
17
|
*/
|
|
18
18
|
export declare class TextfieldBase extends TextfieldBase_base {
|
|
19
19
|
static get styles(): CSSResultArray;
|
|
20
|
+
appliedLabel?: string;
|
|
20
21
|
allowedKeys: string;
|
|
21
22
|
focused: boolean;
|
|
22
23
|
protected inputElement: HTMLInputElement | HTMLTextAreaElement;
|
package/src/Textfield.dev.js
CHANGED
|
@@ -154,13 +154,15 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
154
154
|
}
|
|
155
155
|
get renderMultiline() {
|
|
156
156
|
return html`
|
|
157
|
-
${this.grows &&
|
|
158
|
-
<div id="sizer"
|
|
157
|
+
${this.grows && this.rows === -1 ? html`
|
|
158
|
+
<div id="sizer" class="input" aria-hidden="true">
|
|
159
|
+
${this.value}​
|
|
160
|
+
</div>
|
|
159
161
|
` : nothing}
|
|
160
162
|
<!-- @ts-ignore -->
|
|
161
163
|
<textarea
|
|
162
164
|
aria-describedby=${this.helpTextId}
|
|
163
|
-
aria-label=${this.label || this.placeholder}
|
|
165
|
+
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
|
164
166
|
aria-invalid=${ifDefined(this.invalid || void 0)}
|
|
165
167
|
class="input"
|
|
166
168
|
maxlength=${ifDefined(
|
|
@@ -169,6 +171,7 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
169
171
|
minlength=${ifDefined(
|
|
170
172
|
this.minlength > -1 ? this.minlength : void 0
|
|
171
173
|
)}
|
|
174
|
+
title=${this.invalid ? "" : nothing}
|
|
172
175
|
pattern=${ifDefined(this.pattern)}
|
|
173
176
|
placeholder=${this.placeholder}
|
|
174
177
|
.value=${this.displayValue}
|
|
@@ -190,9 +193,10 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
190
193
|
<input
|
|
191
194
|
type=${this.type}
|
|
192
195
|
aria-describedby=${this.helpTextId}
|
|
193
|
-
aria-label=${this.label || this.placeholder}
|
|
196
|
+
aria-label=${this.label || this.appliedLabel || this.placeholder}
|
|
194
197
|
aria-invalid=${ifDefined(this.invalid || void 0)}
|
|
195
198
|
class="input"
|
|
199
|
+
title=${this.invalid ? "" : nothing}
|
|
196
200
|
maxlength=${ifDefined(
|
|
197
201
|
this.maxlength > -1 ? this.maxlength : void 0
|
|
198
202
|
)}
|
|
@@ -249,6 +253,9 @@ export class TextfieldBase extends ManageHelpText(
|
|
|
249
253
|
return validity;
|
|
250
254
|
}
|
|
251
255
|
}
|
|
256
|
+
__decorateClass([
|
|
257
|
+
state()
|
|
258
|
+
], TextfieldBase.prototype, "appliedLabel", 2);
|
|
252
259
|
__decorateClass([
|
|
253
260
|
property({ attribute: "allowed-keys" })
|
|
254
261
|
], TextfieldBase.prototype, "allowedKeys", 2);
|
|
@@ -256,7 +263,7 @@ __decorateClass([
|
|
|
256
263
|
property({ type: Boolean, reflect: true })
|
|
257
264
|
], TextfieldBase.prototype, "focused", 2);
|
|
258
265
|
__decorateClass([
|
|
259
|
-
query(".input")
|
|
266
|
+
query(".input:not(#sizer)")
|
|
260
267
|
], TextfieldBase.prototype, "inputElement", 2);
|
|
261
268
|
__decorateClass([
|
|
262
269
|
property({ type: Boolean, reflect: true })
|
package/src/Textfield.dev.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["Textfield.ts"],
|
|
4
|
-
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && !this.quiet && this.rows === -1\n ? html`\n <div id=\"sizer\">${this.value}​</div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label || this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;AAYA;AAAA,EAEI;AAAA,EACA;AAAA,EAEA;AAAA,OAEG;AACP;AAAA,EACI;AAAA,EACA;AAAA,OACG;AACP;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AAEP,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB;AAC1B,OAAO;AACP,OAAO;AAEP,OAAO,qBAAqB;AAC5B,OAAO,qBAAqB;AAE5B,MAAM,iBAAiB,CAAC,QAAQ,OAAO,OAAO,SAAS,UAAU;AAO1D,aAAM,sBAAsB;AAAA,EAC/B,WAAW,WAAW;AAAA,IAClB,eAAe;AAAA,EACnB,CAAC;AACL,EAAE;AAAA,EAJK;AAAA;
|
|
4
|
+
"sourcesContent": ["/*\nCopyright 2020 Adobe. All rights reserved.\nThis file is licensed to you under the Apache License, Version 2.0 (the \"License\");\nyou may not use this file except in compliance with the License. You may obtain a copy\nof the License at http://www.apache.org/licenses/LICENSE-2.0\n\nUnless required by applicable law or agreed to in writing, software distributed under\nthe License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\nOF ANY KIND, either express or implied. See the License for the specific language\ngoverning permissions and limitations under the License.\n*/\n\nimport {\n CSSResultArray,\n html,\n nothing,\n PropertyValues,\n SizedMixin,\n TemplateResult,\n} from '@spectrum-web-components/base';\nimport {\n ifDefined,\n live,\n} from '@spectrum-web-components/base/src/directives.js';\nimport {\n property,\n query,\n state,\n} from '@spectrum-web-components/base/src/decorators.js';\n\nimport { ManageHelpText } from '@spectrum-web-components/help-text/src/manage-help-text.js';\nimport { Focusable } from '@spectrum-web-components/shared/src/focusable.js';\nimport '@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js';\nimport '@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js';\n\nimport textfieldStyles from './textfield.css.js';\nimport checkmarkStyles from '@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js';\n\nconst textfieldTypes = ['text', 'url', 'tel', 'email', 'password'] as const;\nexport type TextfieldType = typeof textfieldTypes[number];\n\n/**\n * @fires input - The value of the element has changed.\n * @fires change - An alteration to the value of the element has been committed by the user.\n */\nexport class TextfieldBase extends ManageHelpText(\n SizedMixin(Focusable, {\n noDefaultSize: true,\n })\n) {\n public static override get styles(): CSSResultArray {\n return [textfieldStyles, checkmarkStyles];\n }\n\n @state()\n appliedLabel?: string;\n\n @property({ attribute: 'allowed-keys' })\n allowedKeys = '';\n\n @property({ type: Boolean, reflect: true })\n public focused = false;\n\n @query('.input:not(#sizer)')\n protected inputElement!: HTMLInputElement | HTMLTextAreaElement;\n\n @property({ type: Boolean, reflect: true })\n public invalid = false;\n\n @property()\n public label = '';\n\n @property()\n public placeholder = '';\n\n @property({ attribute: 'type', reflect: true })\n private _type: TextfieldType = 'text';\n\n @state()\n get type(): TextfieldType {\n return textfieldTypes.find((t) => t === this._type) ?? 'text';\n }\n\n set type(val: TextfieldType) {\n const prev = this._type;\n this._type = val;\n this.requestUpdate('type', prev);\n }\n\n @property()\n public pattern?: string;\n\n @property({ type: Boolean, reflect: true })\n public grows = false;\n\n @property({ type: Number })\n public maxlength = -1;\n\n @property({ type: Number })\n public minlength = -1;\n\n @property({ type: Boolean, reflect: true })\n public multiline = false;\n\n @property({ type: Boolean, reflect: true })\n public readonly = false;\n\n @property({ type: Number })\n public rows = -1;\n\n @property({ type: Boolean, reflect: true })\n public valid = false;\n\n @property({ type: String })\n public set value(value: string | number) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public get value(): string | number {\n return this._value;\n }\n\n protected _value: string | number = '';\n\n @property({ type: Boolean, reflect: true })\n public quiet = false;\n\n @property({ type: Boolean, reflect: true })\n public required = false;\n\n @property({ type: String, reflect: true })\n public autocomplete?:\n | HTMLInputElement['autocomplete']\n | HTMLTextAreaElement['autocomplete'];\n\n public override get focusElement(): HTMLInputElement | HTMLTextAreaElement {\n return this.inputElement;\n }\n\n /**\n * Sets the start and end positions of the current selection.\n *\n * @param selectionStart The 0-based index of the first selected character. An index greater than the length of the\n * element's value is treated as pointing to the end of the value.\n * @param selectionEnd The 0-based index of the character after the last selected character. An index greater than\n * the length of the element's value is treated as pointing to the end of the value.\n * @param [selectionDirection=\"none\"] A string indicating the direction in which the selection is considered to\n * have been performed.\n */\n public setSelectionRange(\n selectionStart: number,\n selectionEnd: number,\n selectionDirection: 'forward' | 'backward' | 'none' = 'none'\n ): void {\n this.inputElement.setSelectionRange(\n selectionStart,\n selectionEnd,\n selectionDirection\n );\n }\n\n /**\n * Selects all the text.\n */\n public select(): void {\n this.inputElement.select();\n }\n\n protected handleInput(): void {\n if (this.allowedKeys && this.inputElement.value) {\n const regExp = new RegExp(`^[${this.allowedKeys}]*$`, 'u');\n if (!regExp.test(this.inputElement.value)) {\n const selectionStart = this.inputElement\n .selectionStart as number;\n const nextSelectStart = selectionStart - 1;\n this.inputElement.value = this.value.toString();\n this.inputElement.setSelectionRange(\n nextSelectStart,\n nextSelectStart\n );\n return;\n }\n }\n this.value = this.inputElement.value;\n }\n\n protected handleChange(): void {\n this.dispatchEvent(\n new Event('change', {\n bubbles: true,\n composed: true,\n })\n );\n }\n\n protected onFocus(): void {\n this.focused = !this.readonly && true;\n }\n\n protected onBlur(): void {\n this.focused = !this.readonly && false;\n }\n\n protected renderStateIcons(): TemplateResult | typeof nothing {\n if (this.invalid) {\n return html`\n <sp-icon-alert id=\"invalid\" class=\"icon\"></sp-icon-alert>\n `;\n } else if (this.valid) {\n return html`\n <sp-icon-checkmark100\n id=\"valid\"\n class=\"icon spectrum-UIIcon-Checkmark100\"\n ></sp-icon-checkmark100>\n `;\n }\n return nothing;\n }\n\n protected get displayValue(): string {\n return this.value.toString();\n }\n\n private get renderMultiline(): TemplateResult {\n return html`\n ${this.grows && this.rows === -1\n ? html`\n <div id=\"sizer\" class=\"input\" aria-hidden=\"true\">\n ${this.value}​\n </div>\n `\n : nothing}\n <!-- @ts-ignore -->\n <textarea\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n title=${this.invalid ? '' : nothing}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${this.displayValue}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n rows=${ifDefined(this.rows > -1 ? this.rows : undefined)}\n autocomplete=${ifDefined(this.autocomplete)}\n ></textarea>\n `;\n }\n\n private get renderInput(): TemplateResult {\n return html`\n <!-- @ts-ignore -->\n <input\n type=${this.type}\n aria-describedby=${this.helpTextId}\n aria-label=${this.label ||\n this.appliedLabel ||\n this.placeholder}\n aria-invalid=${ifDefined(this.invalid || undefined)}\n class=\"input\"\n title=${this.invalid ? '' : nothing}\n maxlength=${ifDefined(\n this.maxlength > -1 ? this.maxlength : undefined\n )}\n minlength=${ifDefined(\n this.minlength > -1 ? this.minlength : undefined\n )}\n pattern=${ifDefined(this.pattern)}\n placeholder=${this.placeholder}\n .value=${live(this.displayValue)}\n @change=${this.handleChange}\n @input=${this.handleInput}\n @focus=${this.onFocus}\n @blur=${this.onBlur}\n ?disabled=${this.disabled}\n ?required=${this.required}\n ?readonly=${this.readonly}\n autocomplete=${ifDefined(this.autocomplete)}\n />\n `;\n }\n\n protected renderField(): TemplateResult {\n return html`\n ${this.renderStateIcons()}\n ${this.multiline ? this.renderMultiline : this.renderInput}\n `;\n }\n\n protected override render(): TemplateResult {\n return html`\n <div id=\"textfield\">${this.renderField()}</div>\n ${this.renderHelpText(this.invalid)}\n `;\n }\n\n protected override update(changedProperties: PropertyValues): void {\n if (\n changedProperties.has('value') ||\n (changedProperties.has('required') && this.required)\n ) {\n this.updateComplete.then(() => {\n this.checkValidity();\n });\n }\n super.update(changedProperties);\n }\n\n public checkValidity(): boolean {\n let validity = this.inputElement.checkValidity();\n if (this.required || (this.value && this.pattern)) {\n if ((this.disabled || this.multiline) && this.pattern) {\n const regex = new RegExp(`^${this.pattern}$`, 'u');\n validity = regex.test(this.value.toString());\n }\n if (typeof this.minlength !== 'undefined') {\n validity =\n validity && this.value.toString().length >= this.minlength;\n }\n this.valid = validity;\n this.invalid = !validity;\n }\n return validity;\n }\n}\n\n/**\n * @element sp-textfield\n * @slot help-text - default or non-negative help text to associate to your form element\n * @slot negative-help-text - negative help text to associate to your form element when `invalid`\n */\nexport class Textfield extends TextfieldBase {\n @property({ type: String })\n public override set value(value: string) {\n if (value === this.value) {\n return;\n }\n const oldValue = this._value;\n this._value = value;\n this.requestUpdate('value', oldValue);\n }\n\n public override get value(): string {\n return this._value;\n }\n\n protected override _value = '';\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/src/Textfield.js
CHANGED
|
@@ -1,22 +1,25 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var c=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var t=(u,a,e,l)=>{for(var r=l>1?void 0:l?m(a,e):a,o=u.length-1,h;o>=0;o--)(h=u[o])&&(r=(l?h(a,e,r):h(r))||r);return l&&r&&c(a,e,r),r};import{html as s,nothing as p,SizedMixin as v}from"@spectrum-web-components/base";import{ifDefined as n,live as y}from"@spectrum-web-components/base/src/directives.js";import{property as i,query as b,state as d}from"@spectrum-web-components/base/src/decorators.js";import{ManageHelpText as g}from"@spectrum-web-components/help-text/src/manage-help-text.js";import{Focusable as f}from"@spectrum-web-components/shared/src/focusable.js";import"@spectrum-web-components/icons-ui/icons/sp-icon-checkmark100.js";import"@spectrum-web-components/icons-workflow/icons/sp-icon-alert.js";import $ from"./textfield.css.js";import S from"@spectrum-web-components/icon/src/spectrum-icon-checkmark.css.js";const E=["text","url","tel","email","password"];export class TextfieldBase extends g(v(f,{noDefaultSize:!0})){constructor(){super(...arguments);this.allowedKeys="";this.focused=!1;this.invalid=!1;this.label="";this.placeholder="";this._type="text";this.grows=!1;this.maxlength=-1;this.minlength=-1;this.multiline=!1;this.readonly=!1;this.rows=-1;this.valid=!1;this._value="";this.quiet=!1;this.required=!1}static get styles(){return[$,S]}get type(){var e;return(e=E.find(l=>l===this._type))!=null?e:"text"}set type(e){const l=this._type;this._type=e,this.requestUpdate("type",l)}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}get focusElement(){return this.inputElement}setSelectionRange(e,l,r="none"){this.inputElement.setSelectionRange(e,l,r)}select(){this.inputElement.select()}handleInput(){if(this.allowedKeys&&this.inputElement.value&&!new RegExp(`^[${this.allowedKeys}]*$`,"u").test(this.inputElement.value)){const r=this.inputElement.selectionStart-1;this.inputElement.value=this.value.toString(),this.inputElement.setSelectionRange(r,r);return}this.value=this.inputElement.value}handleChange(){this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}onFocus(){this.focused=!this.readonly&&!0}onBlur(){this.focused=!this.readonly&&!1}renderStateIcons(){return this.invalid?s`
|
|
2
2
|
<sp-icon-alert id="invalid" class="icon"></sp-icon-alert>
|
|
3
3
|
`:this.valid?s`
|
|
4
4
|
<sp-icon-checkmark100
|
|
5
5
|
id="valid"
|
|
6
6
|
class="icon spectrum-UIIcon-Checkmark100"
|
|
7
7
|
></sp-icon-checkmark100>
|
|
8
|
-
`:
|
|
9
|
-
${this.grows
|
|
10
|
-
<div id="sizer"
|
|
11
|
-
|
|
8
|
+
`:p}get displayValue(){return this.value.toString()}get renderMultiline(){return s`
|
|
9
|
+
${this.grows&&this.rows===-1?s`
|
|
10
|
+
<div id="sizer" class="input" aria-hidden="true">
|
|
11
|
+
${this.value}​
|
|
12
|
+
</div>
|
|
13
|
+
`:p}
|
|
12
14
|
<!-- @ts-ignore -->
|
|
13
15
|
<textarea
|
|
14
16
|
aria-describedby=${this.helpTextId}
|
|
15
|
-
aria-label=${this.label||this.placeholder}
|
|
17
|
+
aria-label=${this.label||this.appliedLabel||this.placeholder}
|
|
16
18
|
aria-invalid=${n(this.invalid||void 0)}
|
|
17
19
|
class="input"
|
|
18
20
|
maxlength=${n(this.maxlength>-1?this.maxlength:void 0)}
|
|
19
21
|
minlength=${n(this.minlength>-1?this.minlength:void 0)}
|
|
22
|
+
title=${this.invalid?"":p}
|
|
20
23
|
pattern=${n(this.pattern)}
|
|
21
24
|
placeholder=${this.placeholder}
|
|
22
25
|
.value=${this.displayValue}
|
|
@@ -35,14 +38,15 @@
|
|
|
35
38
|
<input
|
|
36
39
|
type=${this.type}
|
|
37
40
|
aria-describedby=${this.helpTextId}
|
|
38
|
-
aria-label=${this.label||this.placeholder}
|
|
41
|
+
aria-label=${this.label||this.appliedLabel||this.placeholder}
|
|
39
42
|
aria-invalid=${n(this.invalid||void 0)}
|
|
40
43
|
class="input"
|
|
44
|
+
title=${this.invalid?"":p}
|
|
41
45
|
maxlength=${n(this.maxlength>-1?this.maxlength:void 0)}
|
|
42
46
|
minlength=${n(this.minlength>-1?this.minlength:void 0)}
|
|
43
47
|
pattern=${n(this.pattern)}
|
|
44
48
|
placeholder=${this.placeholder}
|
|
45
|
-
.value=${
|
|
49
|
+
.value=${y(this.displayValue)}
|
|
46
50
|
@change=${this.handleChange}
|
|
47
51
|
@input=${this.handleInput}
|
|
48
52
|
@focus=${this.onFocus}
|
|
@@ -58,5 +62,5 @@
|
|
|
58
62
|
`}render(){return s`
|
|
59
63
|
<div id="textfield">${this.renderField()}</div>
|
|
60
64
|
${this.renderHelpText(this.invalid)}
|
|
61
|
-
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([
|
|
65
|
+
`}update(e){(e.has("value")||e.has("required")&&this.required)&&this.updateComplete.then(()=>{this.checkValidity()}),super.update(e)}checkValidity(){let e=this.inputElement.checkValidity();return(this.required||this.value&&this.pattern)&&((this.disabled||this.multiline)&&this.pattern&&(e=new RegExp(`^${this.pattern}$`,"u").test(this.value.toString())),typeof this.minlength!="undefined"&&(e=e&&this.value.toString().length>=this.minlength),this.valid=e,this.invalid=!e),e}}t([d()],TextfieldBase.prototype,"appliedLabel",2),t([i({attribute:"allowed-keys"})],TextfieldBase.prototype,"allowedKeys",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"focused",2),t([b(".input:not(#sizer)")],TextfieldBase.prototype,"inputElement",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"invalid",2),t([i()],TextfieldBase.prototype,"label",2),t([i()],TextfieldBase.prototype,"placeholder",2),t([i({attribute:"type",reflect:!0})],TextfieldBase.prototype,"_type",2),t([d()],TextfieldBase.prototype,"type",1),t([i()],TextfieldBase.prototype,"pattern",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"grows",2),t([i({type:Number})],TextfieldBase.prototype,"maxlength",2),t([i({type:Number})],TextfieldBase.prototype,"minlength",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"multiline",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"readonly",2),t([i({type:Number})],TextfieldBase.prototype,"rows",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"valid",2),t([i({type:String})],TextfieldBase.prototype,"value",1),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"quiet",2),t([i({type:Boolean,reflect:!0})],TextfieldBase.prototype,"required",2),t([i({type:String,reflect:!0})],TextfieldBase.prototype,"autocomplete",2);export class Textfield extends TextfieldBase{constructor(){super(...arguments);this._value=""}set value(e){if(e===this.value)return;const l=this._value;this._value=e,this.requestUpdate("value",l)}get value(){return this._value}}t([i({type:String})],Textfield.prototype,"value",1);
|
|
62
66
|
//# sourceMappingURL=Textfield.js.map
|