@api-client/ui 0.2.3 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (203) hide show
  1. package/.vscode/settings.json +3 -3
  2. package/build/src/elements/authorization/ui/ApiKeyAuthorization.d.ts +1 -1
  3. package/build/src/elements/authorization/ui/ApiKeyAuthorization.d.ts.map +1 -1
  4. package/build/src/elements/authorization/ui/ApiKeyAuthorization.js +7 -7
  5. package/build/src/elements/authorization/ui/ApiKeyAuthorization.js.map +1 -1
  6. package/build/src/elements/authorization/ui/Authorization.styles.js +4 -4
  7. package/build/src/elements/authorization/ui/Authorization.styles.js.map +1 -1
  8. package/build/src/elements/authorization/ui/BasicAuthorization.d.ts +1 -1
  9. package/build/src/elements/authorization/ui/BasicAuthorization.d.ts.map +1 -1
  10. package/build/src/elements/authorization/ui/BasicAuthorization.js +5 -5
  11. package/build/src/elements/authorization/ui/BasicAuthorization.js.map +1 -1
  12. package/build/src/elements/authorization/ui/BearerAuthorization.d.ts +1 -1
  13. package/build/src/elements/authorization/ui/BearerAuthorization.d.ts.map +1 -1
  14. package/build/src/elements/authorization/ui/BearerAuthorization.js +3 -3
  15. package/build/src/elements/authorization/ui/BearerAuthorization.js.map +1 -1
  16. package/build/src/elements/authorization/ui/NtlmAuthorization.d.ts +1 -1
  17. package/build/src/elements/authorization/ui/NtlmAuthorization.d.ts.map +1 -1
  18. package/build/src/elements/authorization/ui/NtlmAuthorization.js +7 -7
  19. package/build/src/elements/authorization/ui/NtlmAuthorization.js.map +1 -1
  20. package/build/src/elements/authorization/ui/OAuth2Authorization.d.ts +1 -1
  21. package/build/src/elements/authorization/ui/OAuth2Authorization.d.ts.map +1 -1
  22. package/build/src/elements/authorization/ui/OAuth2Authorization.js +32 -27
  23. package/build/src/elements/authorization/ui/OAuth2Authorization.js.map +1 -1
  24. package/build/src/elements/authorization/ui/OidcAuthorization.js +4 -4
  25. package/build/src/elements/authorization/ui/OidcAuthorization.js.map +1 -1
  26. package/build/src/elements/autocomplete/autocomplete-input.d.ts +10 -0
  27. package/build/src/elements/autocomplete/autocomplete-input.d.ts.map +1 -0
  28. package/build/src/{md/text-field/ui-text-field.js → elements/autocomplete/autocomplete-input.js} +9 -9
  29. package/build/src/elements/autocomplete/autocomplete-input.js.map +1 -0
  30. package/build/src/elements/autocomplete/internals/autocomplete.d.ts +209 -0
  31. package/build/src/elements/autocomplete/internals/autocomplete.d.ts.map +1 -0
  32. package/build/src/elements/autocomplete/internals/autocomplete.js +493 -0
  33. package/build/src/elements/autocomplete/internals/autocomplete.js.map +1 -0
  34. package/build/src/elements/autocomplete/internals/autocomplete.styles.d.ts +3 -0
  35. package/build/src/elements/autocomplete/internals/autocomplete.styles.d.ts.map +1 -0
  36. package/build/src/elements/autocomplete/internals/autocomplete.styles.js +25 -0
  37. package/build/src/elements/autocomplete/internals/autocomplete.styles.js.map +1 -0
  38. package/build/src/elements/dialog/internals/DeleteCookieAction.element.d.ts +1 -1
  39. package/build/src/elements/dialog/internals/DeleteCookieAction.element.d.ts.map +1 -1
  40. package/build/src/elements/dialog/internals/DeleteCookieAction.element.js +5 -5
  41. package/build/src/elements/dialog/internals/DeleteCookieAction.element.js.map +1 -1
  42. package/build/src/elements/dialog/internals/Rename.d.ts +1 -1
  43. package/build/src/elements/dialog/internals/Rename.d.ts.map +1 -1
  44. package/build/src/elements/dialog/internals/Rename.js +3 -3
  45. package/build/src/elements/dialog/internals/Rename.js.map +1 -1
  46. package/build/src/elements/dialog/internals/SetCookieAction.element.d.ts +1 -1
  47. package/build/src/elements/dialog/internals/SetCookieAction.element.d.ts.map +1 -1
  48. package/build/src/elements/dialog/internals/SetCookieAction.element.js +9 -9
  49. package/build/src/elements/dialog/internals/SetCookieAction.element.js.map +1 -1
  50. package/build/src/elements/environment/EnvironmentEditor.d.ts +1 -1
  51. package/build/src/elements/environment/EnvironmentEditor.d.ts.map +1 -1
  52. package/build/src/elements/environment/EnvironmentEditor.js +3 -3
  53. package/build/src/elements/environment/EnvironmentEditor.js.map +1 -1
  54. package/build/src/elements/environment/EnvironmentEditor.styles.js +1 -1
  55. package/build/src/elements/environment/EnvironmentEditor.styles.js.map +1 -1
  56. package/build/src/elements/environment/ServerEditor.d.ts +1 -1
  57. package/build/src/elements/environment/ServerEditor.d.ts.map +1 -1
  58. package/build/src/elements/environment/ServerEditor.js +7 -7
  59. package/build/src/elements/environment/ServerEditor.js.map +1 -1
  60. package/build/src/elements/environment/ServerEditor.styles.js +1 -1
  61. package/build/src/elements/environment/ServerEditor.styles.js.map +1 -1
  62. package/build/src/elements/http/BodyMultipartEditor.d.ts.map +1 -1
  63. package/build/src/elements/http/BodyMultipartEditor.js +4 -0
  64. package/build/src/elements/http/BodyMultipartEditor.js.map +1 -1
  65. package/build/src/elements/http/CertificateAdd.element.d.ts +1 -1
  66. package/build/src/elements/http/CertificateAdd.element.d.ts.map +1 -1
  67. package/build/src/elements/http/CertificateAdd.element.js +8 -8
  68. package/build/src/elements/http/CertificateAdd.element.js.map +1 -1
  69. package/build/src/elements/http/CertificateAdd.styles.js +1 -1
  70. package/build/src/elements/http/CertificateAdd.styles.js.map +1 -1
  71. package/build/src/elements/http/HttpAssertions.element.js +3 -3
  72. package/build/src/elements/http/HttpAssertions.element.js.map +1 -1
  73. package/build/src/elements/http/HttpFlows.element.js +3 -3
  74. package/build/src/elements/http/HttpFlows.element.js.map +1 -1
  75. package/build/src/elements/http/HttpFlowsUi.d.ts +1 -1
  76. package/build/src/elements/http/HttpFlowsUi.d.ts.map +1 -1
  77. package/build/src/elements/http/HttpFlowsUi.js +31 -31
  78. package/build/src/elements/http/HttpFlowsUi.js.map +1 -1
  79. package/build/src/elements/http/RequestConfigElement.d.ts +1 -1
  80. package/build/src/elements/http/RequestConfigElement.d.ts.map +1 -1
  81. package/build/src/elements/http/RequestConfigElement.js +7 -7
  82. package/build/src/elements/http/RequestConfigElement.js.map +1 -1
  83. package/build/src/elements/http/UrlParamsForm.d.ts +1 -1
  84. package/build/src/elements/http/UrlParamsForm.d.ts.map +1 -1
  85. package/build/src/elements/http/UrlParamsForm.js +1 -1
  86. package/build/src/elements/http/UrlParamsForm.js.map +1 -1
  87. package/build/src/elements/project/ProjectRunner.d.ts +1 -1
  88. package/build/src/elements/project/ProjectRunner.d.ts.map +1 -1
  89. package/build/src/elements/project/ProjectRunner.js +5 -5
  90. package/build/src/elements/project/ProjectRunner.js.map +1 -1
  91. package/build/src/md/input/Input.d.ts +0 -15
  92. package/build/src/md/input/Input.d.ts.map +1 -1
  93. package/build/src/md/input/Input.js +7 -42
  94. package/build/src/md/input/Input.js.map +1 -1
  95. package/build/src/md/list/internals/List.d.ts +7 -2
  96. package/build/src/md/list/internals/List.d.ts.map +1 -1
  97. package/build/src/md/list/internals/List.js +6 -0
  98. package/build/src/md/list/internals/List.js.map +1 -1
  99. package/build/src/md/list/internals/ListItem.styles.d.ts.map +1 -1
  100. package/build/src/md/list/internals/ListItem.styles.js +8 -0
  101. package/build/src/md/list/internals/ListItem.styles.js.map +1 -1
  102. package/build/src/md/listbox/internals/Listbox.d.ts +2 -2
  103. package/build/src/md/listbox/internals/Listbox.d.ts.map +1 -1
  104. package/build/src/md/listbox/internals/Listbox.js.map +1 -1
  105. package/build/src/md/text-area/internals/TextAreaElement.d.ts.map +1 -1
  106. package/build/src/md/text-area/internals/TextAreaElement.js +0 -5
  107. package/build/src/md/text-area/internals/TextAreaElement.js.map +1 -1
  108. package/build/src/md/text-area/ui-text-area.d.ts.map +1 -1
  109. package/build/src/md/text-area/ui-text-area.js +3 -2
  110. package/build/src/md/text-area/ui-text-area.js.map +1 -1
  111. package/build/src/md/text-field/internals/{TextFieldElement.d.ts → TextField.d.ts} +2 -2
  112. package/build/src/md/text-field/internals/TextField.d.ts.map +1 -0
  113. package/build/src/md/text-field/internals/{TextFieldElement.js → TextField.js} +2 -5
  114. package/build/src/md/text-field/internals/TextField.js.map +1 -0
  115. package/build/src/md/text-field/internals/{TextField.styles.d.ts → common.styles.d.ts} +1 -1
  116. package/build/src/md/text-field/internals/common.styles.d.ts.map +1 -0
  117. package/build/src/md/text-field/internals/{TextField.styles.js → common.styles.js} +8 -94
  118. package/build/src/md/text-field/internals/common.styles.js.map +1 -0
  119. package/build/src/md/text-field/internals/filled.styles.d.ts +3 -0
  120. package/build/src/md/text-field/internals/filled.styles.d.ts.map +1 -0
  121. package/build/src/md/text-field/internals/filled.styles.js +107 -0
  122. package/build/src/md/text-field/internals/filled.styles.js.map +1 -0
  123. package/build/src/md/text-field/internals/outlined.styles.d.ts +3 -0
  124. package/build/src/md/text-field/internals/outlined.styles.d.ts.map +1 -0
  125. package/build/src/md/text-field/internals/outlined.styles.js +43 -0
  126. package/build/src/md/text-field/internals/outlined.styles.js.map +1 -0
  127. package/build/src/md/text-field/ui-filled-text-field.d.ts +11 -0
  128. package/build/src/md/text-field/ui-filled-text-field.d.ts.map +1 -0
  129. package/build/src/md/text-field/ui-filled-text-field.js +28 -0
  130. package/build/src/md/text-field/ui-filled-text-field.js.map +1 -0
  131. package/build/src/md/text-field/ui-outlined-text-field.d.ts +11 -0
  132. package/build/src/md/text-field/ui-outlined-text-field.d.ts.map +1 -0
  133. package/build/src/md/text-field/ui-outlined-text-field.js +28 -0
  134. package/build/src/md/text-field/ui-outlined-text-field.js.map +1 -0
  135. package/build/src/types/input.d.ts +1 -1
  136. package/build/src/types/input.d.ts.map +1 -1
  137. package/build/src/types/input.js.map +1 -1
  138. package/demo/elements/authorization/oauth-authorize.html +4 -4
  139. package/demo/elements/authorization/oauth-authorize.ts +1 -1
  140. package/demo/elements/autocomplete/index.html +24 -0
  141. package/demo/elements/autocomplete/index.ts +123 -0
  142. package/demo/elements/http/body-editor.ts +3 -3
  143. package/demo/elements/index.html +15 -11
  144. package/demo/md/index.html +1 -1
  145. package/demo/md/inputs/input.html +10 -15
  146. package/demo/md/inputs/input.ts +389 -101
  147. package/demo/page.css +4 -0
  148. package/package.json +1 -1
  149. package/src/elements/authorization/ui/ApiKeyAuthorization.ts +7 -7
  150. package/src/elements/authorization/ui/Authorization.styles.ts +4 -4
  151. package/src/elements/authorization/ui/BasicAuthorization.ts +5 -5
  152. package/src/elements/authorization/ui/BearerAuthorization.ts +3 -3
  153. package/src/elements/authorization/ui/NtlmAuthorization.ts +7 -7
  154. package/src/elements/authorization/ui/OAuth2Authorization.ts +32 -27
  155. package/src/elements/authorization/ui/OidcAuthorization.ts +4 -4
  156. package/src/elements/autocomplete/autocomplete-input.ts +14 -0
  157. package/src/elements/autocomplete/internals/autocomplete.styles.ts +25 -0
  158. package/src/elements/autocomplete/internals/autocomplete.ts +490 -0
  159. package/src/elements/dialog/internals/DeleteCookieAction.element.ts +5 -5
  160. package/src/elements/dialog/internals/Rename.ts +3 -3
  161. package/src/elements/dialog/internals/SetCookieAction.element.ts +9 -9
  162. package/src/elements/environment/EnvironmentEditor.styles.ts +1 -1
  163. package/src/elements/environment/EnvironmentEditor.ts +3 -3
  164. package/src/elements/environment/ServerEditor.styles.ts +1 -1
  165. package/src/elements/environment/ServerEditor.ts +7 -7
  166. package/src/elements/http/BodyMultipartEditor.ts +4 -0
  167. package/src/elements/http/CertificateAdd.element.ts +8 -8
  168. package/src/elements/http/CertificateAdd.styles.ts +1 -1
  169. package/src/elements/http/HttpAssertions.element.ts +3 -3
  170. package/src/elements/http/HttpFlows.element.ts +3 -3
  171. package/src/elements/http/HttpFlowsUi.ts +31 -31
  172. package/src/elements/http/RequestConfigElement.ts +7 -7
  173. package/src/elements/http/UrlParamsForm.ts +1 -1
  174. package/src/elements/project/ProjectRunner.ts +5 -5
  175. package/src/md/input/Input.ts +6 -21
  176. package/src/md/list/internals/List.ts +14 -2
  177. package/src/md/list/internals/ListItem.styles.ts +8 -0
  178. package/src/md/listbox/internals/Listbox.ts +2 -2
  179. package/src/md/text-area/internals/TextAreaElement.ts +0 -5
  180. package/src/md/text-area/ui-text-area.ts +3 -2
  181. package/src/md/text-field/internals/{TextFieldElement.ts → TextField.ts} +1 -4
  182. package/src/md/text-field/internals/{TextField.styles.ts → common.styles.ts} +7 -93
  183. package/src/md/text-field/internals/filled.styles.ts +107 -0
  184. package/src/md/text-field/internals/outlined.styles.ts +43 -0
  185. package/src/md/text-field/ui-filled-text-field.ts +16 -0
  186. package/src/md/text-field/ui-outlined-text-field.ts +16 -0
  187. package/src/types/input.ts +0 -1
  188. package/test/elements/authorization/basic-method.test.ts +3 -3
  189. package/test/elements/authorization/bearer-method.test.ts +2 -2
  190. package/test/elements/authorization/ntlm-method.test.ts +4 -4
  191. package/test/elements/autocomplete/autocomplete-input.spec.ts +448 -0
  192. package/test/elements/http/BodyMultipartEditorElement.test.ts +15 -16
  193. package/test/elements/http/CertificateAdd.test.ts +11 -11
  194. package/test/elements/http/HttpAssertions.test.ts +9 -9
  195. package/test/elements/http/HttpFlows.test.ts +4 -4
  196. package/build/src/md/text-field/internals/TextField.styles.d.ts.map +0 -1
  197. package/build/src/md/text-field/internals/TextField.styles.js.map +0 -1
  198. package/build/src/md/text-field/internals/TextFieldElement.d.ts.map +0 -1
  199. package/build/src/md/text-field/internals/TextFieldElement.js.map +0 -1
  200. package/build/src/md/text-field/ui-text-field.d.ts +0 -11
  201. package/build/src/md/text-field/ui-text-field.d.ts.map +0 -1
  202. package/build/src/md/text-field/ui-text-field.js.map +0 -1
  203. package/src/md/text-field/ui-text-field.ts +0 -15
@@ -821,7 +821,7 @@ describe('element', () => {
821
821
  const spy = sinon.spy()
822
822
  editor.addEventListener('change', spy)
823
823
  const input = editor.shadowRoot!.querySelector(
824
- `ui-text-field[data-kind="${CoreAssertions.EqualAssertionKind}"]`
824
+ `ui-filled-text-field[data-kind="${CoreAssertions.EqualAssertionKind}"]`
825
825
  ) as Input
826
826
  input.value = 'test value'
827
827
  input.dispatchEvent(new Event('change'))
@@ -840,7 +840,7 @@ describe('element', () => {
840
840
  const spy = sinon.spy()
841
841
  editor.addEventListener('change', spy)
842
842
  const input = editor.shadowRoot!.querySelector(
843
- `ui-text-field[data-kind="${CoreAssertions.NotEqualAssertionKind}"]`
843
+ `ui-filled-text-field[data-kind="${CoreAssertions.NotEqualAssertionKind}"]`
844
844
  ) as Input
845
845
  input.value = 'test value'
846
846
  input.dispatchEvent(new Event('change'))
@@ -859,7 +859,7 @@ describe('element', () => {
859
859
  const spy = sinon.spy()
860
860
  editor.addEventListener('change', spy)
861
861
  const input = editor.shadowRoot!.querySelector(
862
- `ui-text-field[data-kind="${CoreAssertions.IncludesAssertionKind}"]`
862
+ `ui-filled-text-field[data-kind="${CoreAssertions.IncludesAssertionKind}"]`
863
863
  ) as Input
864
864
  input.value = 'test value'
865
865
  input.dispatchEvent(new Event('change'))
@@ -878,7 +878,7 @@ describe('element', () => {
878
878
  const spy = sinon.spy()
879
879
  editor.addEventListener('change', spy)
880
880
  const input = editor.shadowRoot!.querySelector(
881
- `ui-text-field[data-kind="${CoreAssertions.NotIncludesAssertionKind}"]`
881
+ `ui-filled-text-field[data-kind="${CoreAssertions.NotIncludesAssertionKind}"]`
882
882
  ) as Input
883
883
 
884
884
  input.value = 'test value'
@@ -898,7 +898,7 @@ describe('element', () => {
898
898
  const spy = sinon.spy()
899
899
  editor.addEventListener('change', spy)
900
900
  const input = editor.shadowRoot!.querySelector(
901
- `ui-text-field[data-kind="${CoreAssertions.MatchesAssertionKind}"]`
901
+ `ui-filled-text-field[data-kind="${CoreAssertions.MatchesAssertionKind}"]`
902
902
  ) as Input
903
903
 
904
904
  input.value = 'test value'
@@ -918,7 +918,7 @@ describe('element', () => {
918
918
  const spy = sinon.spy()
919
919
  editor.addEventListener('change', spy)
920
920
  const input = editor.shadowRoot!.querySelector(
921
- `ui-text-field[data-kind="${CoreAssertions.ToBeAssertionKind}"]`
921
+ `ui-filled-text-field[data-kind="${CoreAssertions.ToBeAssertionKind}"]`
922
922
  ) as Input
923
923
 
924
924
  input.value = 'test value'
@@ -938,7 +938,7 @@ describe('element', () => {
938
938
  const spy = sinon.spy()
939
939
  editor.addEventListener('change', spy)
940
940
  const input = editor.shadowRoot!.querySelector(
941
- `ui-text-field[data-kind="${CoreAssertions.NotToBeAssertionKind}"]`
941
+ `ui-filled-text-field[data-kind="${CoreAssertions.NotToBeAssertionKind}"]`
942
942
  ) as Input
943
943
 
944
944
  input.value = 'test value'
@@ -958,7 +958,7 @@ describe('element', () => {
958
958
  const spy = sinon.spy()
959
959
  editor.addEventListener('change', spy)
960
960
  const input = editor.shadowRoot!.querySelector(
961
- `ui-text-field[data-kind="${CoreAssertions.GreaterThanAssertionKind}"]`
961
+ `ui-filled-text-field[data-kind="${CoreAssertions.GreaterThanAssertionKind}"]`
962
962
  ) as Input
963
963
 
964
964
  input.value = '20'
@@ -978,7 +978,7 @@ describe('element', () => {
978
978
  const spy = sinon.spy()
979
979
  editor.addEventListener('change', spy)
980
980
  const input = editor.shadowRoot!.querySelector(
981
- `ui-text-field[data-kind="${CoreAssertions.LessThanAssertionKind}"]`
981
+ `ui-filled-text-field[data-kind="${CoreAssertions.LessThanAssertionKind}"]`
982
982
  ) as Input
983
983
 
984
984
  input.value = '20'
@@ -84,7 +84,7 @@ describe('element', () => {
84
84
  button.click()
85
85
  const dialog = element.flowAddDialog!
86
86
  await dialog.updateComplete
87
- const input = dialog.querySelector('ui-text-field')!
87
+ const input = dialog.querySelector('ui-filled-text-field')!
88
88
  input.value = 'My Flow 1'
89
89
  input.notifyChange()
90
90
  const dialogButton = dialog.shadowRoot!.querySelector('.internal-button[value="confirm"]') as UiButton
@@ -288,7 +288,7 @@ describe('element', () => {
288
288
  assert.ok(pill, 'renders the data pill')
289
289
  assert.equal(pill.textContent?.trim(), 'Read value', 'renders the data pill value')
290
290
  assert.isTrue(spacer.nextElementSibling === pill, 'render the drop target before the pill')
291
- const input = unit.querySelector('ui-text-field') as Input
291
+ const input = unit.querySelector('ui-filled-text-field') as Input
292
292
  assert.ok(input, 'renders the path input')
293
293
  })
294
294
 
@@ -313,7 +313,7 @@ describe('element', () => {
313
313
  assert.ok(unit, 'renders the step container')
314
314
  const spacer = unit.querySelector('.drop-target.spacer')!
315
315
  assert.ok(spacer, 'renders the drop target')
316
- const input = unit.querySelector('ui-text-field')!
316
+ const input = unit.querySelector('ui-filled-text-field')!
317
317
  assert.ok(input, 'renders the value input')
318
318
  })
319
319
 
@@ -478,7 +478,7 @@ describe('element', () => {
478
478
  assert.ok(pill, 'renders the data pill')
479
479
  assert.equal(pill.textContent?.trim(), 'Read value', 'renders the data pill value')
480
480
  assert.isTrue(spacer.nextElementSibling === pill, 'render the drop target before the pill')
481
- const input = unit.querySelector('ui-text-field') as Input
481
+ const input = unit.querySelector('ui-filled-text-field') as Input
482
482
  assert.ok(input, 'renders the path input')
483
483
  })
484
484
 
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.styles.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.styles.ts"],"names":[],"mappings":";AAEA,wBA8QC"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextField.styles.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextField.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8QjB,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport default css`\n :host {\n display: inline-flex;\n flex-direction: column;\n vertical-align: top;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n cursor: text;\n\n --_active-indicator-color: var(--md-sys-color-on-surface-variant);\n --_active-indicator-height: 1px;\n --_focus-active-indicator-color: var(--md-sys-color-primary, #6750a4);\n --_focus-active-indicator-height: 2px;\n\n min-width: 200px;\n }\n\n .surface {\n height: 56px;\n position: relative;\n display: flex;\n align-items: center;\n border-radius: var(--md-sys-shape-corner-extra-small-top);\n cursor: inherit;\n }\n\n .container {\n position: absolute;\n inset: 0;\n z-index: 1;\n background-color: var(--md-sys-color-surface-variant);\n border-radius: inherit;\n }\n\n .content {\n height: inherit;\n display: flex;\n align-items: center;\n justify-content: start;\n box-sizing: border-box;\n position: relative;\n z-index: 2;\n flex: 1;\n cursor: inherit;\n }\n\n .body {\n flex: 1;\n overflow: hidden;\n padding-top: 1em;\n box-sizing: border-box;\n position: relative;\n cursor: inherit;\n }\n\n .label {\n color: var(--md-sys-color-on-surface-variant);\n max-width: 100%;\n pointer-events: none;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n z-index: 3;\n\n position: absolute;\n transform: translateY(-1.35rem) scale(0.8);\n transform-origin: left center;\n top: 50%;\n transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n }\n\n .labelResting .label {\n transform: translateY(-50%) scale(1);\n }\n\n :host(:focus-within) .label {\n color: var(--md-sys-color-primary);\n }\n\n .input {\n caret-color: var(--md-sys-color-primary);\n color: var(--md-sys-color-on-surface);\n height: 24px; /* ??? */\n flex: 1; /* ??? */\n white-space: nowrap;\n overflow: hidden;\n background: transparent;\n border: none;\n outline: none;\n padding: 0;\n margin: 0;\n width: 1px;\n cursor: inherit;\n\n font-family: var(--md-sys-typescale-body-large-font);\n font-weight: var(--md-sys-typescale-body-large-weight);\n font-size: var(--md-sys-typescale-body-large-size);\n letter-spacing: var(--md-sys-typescale-body-large-tracking);\n line-height: var(--md-sys-typescale-body-large-height);\n }\n\n .input:-webkit-autofill,\n .input:autofill {\n background-color: transparent !important;\n }\n\n .start,\n .body,\n .end {\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: start;\n }\n\n .start {\n width: 16px;\n min-width: 16px;\n }\n\n .start.prefixed {\n width: 24px;\n min-width: 24px;\n margin-left: 12px;\n margin-right: 16px;\n }\n\n .end {\n width: 16px;\n min-width: 16px;\n }\n\n .end.suffixed {\n width: 24px;\n min-width: 24px;\n margin-right: 12px;\n padding-right: 12px;\n margin-left: 16px;\n }\n\n .end ::slotted(*),\n .start ::slotted(*) {\n cursor: default;\n }\n\n .highlight {\n inset: auto 0px 0px;\n pointer-events: none;\n position: absolute;\n width: 100%;\n z-index: 4;\n }\n\n .highlight::before {\n content: '';\n border-bottom: 1px solid var(--md-sys-color-on-surface-variant);\n inset: auto 0px 0px;\n position: absolute;\n }\n\n .highlight::after {\n content: '';\n border-bottom-color: var(--md-sys-color-primary);\n border-bottom-width: 2px;\n border-bottom-style: solid;\n opacity: 0;\n transform: scaleX(0);\n transform-origin: center center;\n\n transition:\n opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0s,\n transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 150ms;\n\n position: absolute;\n inset: auto 0px 0px;\n }\n\n :host(:focus-within) .highlight::after {\n opacity: 1;\n transform: scaleX(1);\n }\n\n .labelHidden .label {\n display: none;\n }\n\n .labelHidden .body {\n padding-top: 0;\n }\n\n .supporting-text {\n padding-top: 4px;\n color: var(--md-sys-color-on-surface-variant);\n font-family: var(--md-sys-typescale-body-medium-font);\n font-weight: var(--md-sys-typescale-body-medium-weight);\n font-size: var(--md-sys-typescale-body-medium-size);\n letter-spacing: var(--md-sys-typescale-body-medium-tracking);\n line-height: var(--md-sys-typescale-body-medium-height);\n display: flex;\n justify-content: space-between;\n padding: 0 16px;\n }\n\n .supporting-text-start {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n flex: 1;\n margin-right: 16px;\n }\n\n .container::before {\n content: '';\n position: absolute;\n inset: 0;\n opacity: 0;\n background-color: var(--md-sys-color-on-surface-variant);\n transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n :host(:hover) .container::before {\n opacity: var(--md-sys-state-hover-state-layer-opacity);\n }\n\n :host([disabled]) {\n pointer-events: none;\n }\n\n :host([disabled]) .container {\n background-color: var(--md-sys-color-on-surface);\n opacity: 0.04;\n }\n\n :host([disabled]) .highlight::before {\n border-bottom-color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n\n :host([disabled]) .label,\n :host([disabled]) .input,\n :host([disabled]) .end ::slotted(*),\n :host([disabled]) .start ::slotted(*) {\n color: var(--md-sys-color-on-surface);\n opacity: 0.38;\n }\n\n :host([invalid]) .highlight::before {\n border-bottom-color: var(--md-sys-color-error);\n }\n\n :host([invalid]) .label,\n :host([invalid]) .supporting-text,\n :host([invalid]) .end ::slotted(*) {\n color: var(--md-sys-color-error);\n }\n\n :host([invalid]:hover) .highlight::before {\n border-bottom-color: var(--md-sys-color-on-error-container);\n }\n\n :host([invalid]:hover) .label,\n :host([invalid]:hover) .end ::slotted(*) {\n color: var(--md-sys-color-on-error-container);\n }\n`\n"]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextFieldElement.d.ts","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextFieldElement.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,cAAc,EAAE,MAAM,KAAK,CAAA;AAI1C,OAAO,KAAK,MAAM,sBAAsB,CAAA;AAExC,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK;cAC9B,WAAW,IAAI,cAAc;CAoEjD"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"TextFieldElement.js","sourceRoot":"","sources":["../../../../../src/md/text-field/internals/TextFieldElement.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, TemplateResult } from 'lit'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { live } from 'lit/directives/live.js'\nimport { StyleInfo, styleMap } from 'lit/directives/style-map.js'\nimport Input from '../../input/Input.js'\n\nexport default class TextFieldElement extends Input {\n protected override renderInput(): TemplateResult {\n const placeholderValue = this.placeholder || undefined\n const maxValue = this.max || undefined\n const maxLengthValue = this.maxLength > -1 ? this.maxLength : undefined\n const minValue = this.min || undefined\n const minLengthValue = this.minLength > -1 ? this.minLength : undefined\n const patternValue = this.pattern || undefined\n const roleValue = this.dataRole || undefined\n const stepValue = this.step || undefined\n const { disabled } = this\n\n const style: StyleInfo = {}\n if (this.textDirection) {\n style.direction = this.textDirection\n }\n\n const ariaActiveDescendantValue = this.ariaActiveDescendant || undefined\n const ariaAutoCompleteValue = this.ariaAutoComplete || undefined\n const ariaControlsValue = this.ariaControls || undefined\n const ariaDescribedByValue = this.getAriaDescribedBy() || undefined\n const ariaExpandedValue = this.ariaExpanded || undefined\n const ariaLabelValue = this.ariaLabel || this.label || undefined\n const ariaLabelledByValue = this.ariaLabelledBy || undefined\n\n return html`\n <input\n class=\"input\"\n style=${styleMap(style)}\n type=${this.effectiveType}\n name=\"${ifDefined(this.name)}\"\n .value=${live(this.getInputValue())}\n max=${ifDefined(maxValue as unknown as number)}\n maxlength=${ifDefined(maxLengthValue)}\n min=${ifDefined(minValue as unknown as number)}\n minlength=${ifDefined(minLengthValue)}\n pattern=${ifDefined(patternValue)}\n placeholder=${ifDefined(placeholderValue)}\n role=${ifDefined(roleValue as 'textbox')}\n ?disabled=${disabled}\n ?readonly=${this.readOnly}\n ?required=${this.required}\n step=${ifDefined(stepValue as unknown as number)}\n autocomplete=\"${ifDefined(this.autocomplete)}\"\n autocapitalize=\"${ifDefined(this.autocapitalize)}\"\n autocorrect=\"${ifDefined(this.autocorrect)}\"\n inputmode=\"${ifDefined(this.inputMode)}\"\n size=\"${ifDefined(this.size)}\"\n results=\"${ifDefined(this.results)}\"\n accept=\"${ifDefined(this.accept)}\"\n ?multiple=\"${this.multiple}\"\n spellcheck=\"${ifDefined(this.spellcheck)}\"\n list=\"input-list\"\n @change=${this.retargetEvent}\n @input=${this.handleInput}\n @select=${this.retargetEvent}\n @invalid=${this.invalidHandler}\n @search=\"${this.retargetEvent}\"\n aria-activedescendant=${ifDefined(ariaActiveDescendantValue)}\n aria-autocomplete=${ifDefined(ariaAutoCompleteValue)}\n aria-controls=${ifDefined(ariaControlsValue)}\n aria-describedby=${ifDefined(ariaDescribedByValue)}\n aria-expanded=${ifDefined(ariaExpandedValue)}\n aria-invalid=${this.getError()}\n aria-label=${ifDefined(ariaLabelValue)}\n aria-labelledby=${ifDefined(ariaLabelledByValue)}\n />\n `\n }\n}\n"]}
@@ -1,11 +0,0 @@
1
- import type { CSSResultOrNative } from 'lit';
2
- import Element from './internals/TextFieldElement.js';
3
- export declare class UiTextFieldElement extends Element {
4
- static styles: CSSResultOrNative[];
5
- }
6
- declare global {
7
- interface HTMLElementTagNameMap {
8
- 'ui-text-field': UiTextFieldElement;
9
- }
10
- }
11
- //# sourceMappingURL=ui-text-field.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"ui-text-field.d.ts","sourceRoot":"","sources":["../../../../src/md/text-field/ui-text-field.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,KAAK,CAAA;AAE5C,OAAO,OAAO,MAAM,iCAAiC,CAAA;AAGrD,qBACa,kBAAmB,SAAQ,OAAO;IAC7C,OAAgB,MAAM,EAAE,iBAAiB,EAAE,CAAW;CACvD;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,kBAAkB,CAAA;KACpC;CACF"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"ui-text-field.js","sourceRoot":"","sources":["../../../../src/md/text-field/ui-text-field.ts"],"names":[],"mappings":";AACA,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,OAAO,MAAM,iCAAiC,CAAA;AACrD,OAAO,MAAM,MAAM,iCAAiC,CAAA;IAGvC,kBAAkB;4BAD9B,aAAa,CAAC,eAAe,CAAC;;;;sBACS,OAAO;kCAAf,SAAQ,WAAO;;;;YAA/C,6KAEC;;;;QADC,MAAM,CAAU,MAAM,GAAwB,CAAC,MAAM,CAAC,CAAA;;YAD3C,uDAAkB;;;;;SAAlB,kBAAkB","sourcesContent":["import type { CSSResultOrNative } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport Element from './internals/TextFieldElement.js'\nimport styles from './internals/TextField.styles.js'\n\n@customElement('ui-text-field')\nexport class UiTextFieldElement extends Element {\n static override styles: CSSResultOrNative[] = [styles]\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ui-text-field': UiTextFieldElement\n }\n}\n"]}
@@ -1,15 +0,0 @@
1
- import type { CSSResultOrNative } from 'lit'
2
- import { customElement } from 'lit/decorators.js'
3
- import Element from './internals/TextFieldElement.js'
4
- import styles from './internals/TextField.styles.js'
5
-
6
- @customElement('ui-text-field')
7
- export class UiTextFieldElement extends Element {
8
- static override styles: CSSResultOrNative[] = [styles]
9
- }
10
-
11
- declare global {
12
- interface HTMLElementTagNameMap {
13
- 'ui-text-field': UiTextFieldElement
14
- }
15
- }