@patternfly/elements 4.0.2 → 4.2.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.
Files changed (295) hide show
  1. package/custom-elements.json +13680 -12603
  2. package/package.json +17 -14
  3. package/pf-accordion/pf-accordion-header.css +37 -0
  4. package/pf-accordion/pf-accordion-header.d.ts +0 -61
  5. package/pf-accordion/pf-accordion-header.js +180 -2
  6. package/pf-accordion/pf-accordion-header.js.map +1 -1
  7. package/pf-accordion/pf-accordion-panel.css +12 -0
  8. package/pf-accordion/pf-accordion-panel.d.ts +0 -34
  9. package/pf-accordion/pf-accordion-panel.js +87 -2
  10. package/pf-accordion/pf-accordion-panel.js.map +1 -1
  11. package/pf-accordion/pf-accordion.css +62 -0
  12. package/pf-accordion/pf-accordion.d.ts +1 -64
  13. package/pf-accordion/pf-accordion.js +156 -2
  14. package/pf-accordion/pf-accordion.js.map +1 -1
  15. package/pf-avatar/pf-avatar.css +14 -0
  16. package/pf-avatar/pf-avatar.d.ts +1 -14
  17. package/pf-avatar/pf-avatar.js +82 -2
  18. package/pf-avatar/pf-avatar.js.map +1 -1
  19. package/pf-back-to-top/pf-back-to-top.css +12 -0
  20. package/pf-back-to-top/pf-back-to-top.d.ts +1 -17
  21. package/pf-back-to-top/pf-back-to-top.js +91 -4
  22. package/pf-back-to-top/pf-back-to-top.js.map +1 -1
  23. package/pf-background-image/pf-background-image.css +7 -0
  24. package/pf-background-image/pf-background-image.d.ts +1 -8
  25. package/pf-background-image/pf-background-image.js +76 -2
  26. package/pf-background-image/pf-background-image.js.map +1 -1
  27. package/pf-badge/pf-badge.css +13 -0
  28. package/pf-badge/pf-badge.d.ts +1 -13
  29. package/pf-badge/pf-badge.js +53 -2
  30. package/pf-badge/pf-badge.js.map +1 -1
  31. package/pf-banner/pf-banner.css +21 -0
  32. package/pf-banner/pf-banner.d.ts +1 -19
  33. package/pf-banner/pf-banner.js +122 -2
  34. package/pf-banner/pf-banner.js.map +1 -1
  35. package/pf-button/pf-button-tokens.css +38 -0
  36. package/pf-button/pf-button.d.ts +1 -106
  37. package/pf-button/pf-button.js +837 -4
  38. package/pf-button/pf-button.js.map +1 -1
  39. package/pf-card/pf-card.css +24 -0
  40. package/pf-card/pf-card.d.ts +1 -38
  41. package/pf-card/pf-card.js +248 -2
  42. package/pf-card/pf-card.js.map +1 -1
  43. package/pf-card/test/pf-card.e2e.js +20 -1
  44. package/pf-card/test/pf-card.e2e.js.map +1 -1
  45. package/pf-chip/pf-chip-group.css +15 -0
  46. package/pf-chip/pf-chip-group.d.ts +0 -15
  47. package/pf-chip/pf-chip-group.js +111 -2
  48. package/pf-chip/pf-chip-group.js.map +1 -1
  49. package/pf-chip/pf-chip.css +30 -1
  50. package/pf-chip/pf-chip.d.ts +1 -20
  51. package/pf-chip/pf-chip.js +135 -2
  52. package/pf-chip/pf-chip.js.map +1 -1
  53. package/pf-clipboard-copy/pf-clipboard-copy.css +25 -0
  54. package/pf-clipboard-copy/pf-clipboard-copy.d.ts +1 -27
  55. package/pf-clipboard-copy/pf-clipboard-copy.js +323 -6
  56. package/pf-clipboard-copy/pf-clipboard-copy.js.map +1 -1
  57. package/pf-code-block/pf-code-block.css +11 -1
  58. package/pf-code-block/pf-code-block.js +70 -18
  59. package/pf-code-block/pf-code-block.js.map +1 -1
  60. package/pf-dropdown/pf-dropdown-group.js +40 -2
  61. package/pf-dropdown/pf-dropdown-group.js.map +1 -1
  62. package/pf-dropdown/pf-dropdown-item.css +10 -0
  63. package/pf-dropdown/pf-dropdown-item.d.ts +0 -27
  64. package/pf-dropdown/pf-dropdown-item.js +155 -2
  65. package/pf-dropdown/pf-dropdown-item.js.map +1 -1
  66. package/pf-dropdown/pf-dropdown-menu.js +39 -2
  67. package/pf-dropdown/pf-dropdown-menu.js.map +1 -1
  68. package/pf-dropdown/pf-dropdown.css +5 -0
  69. package/pf-dropdown/pf-dropdown.d.ts +1 -9
  70. package/pf-dropdown/pf-dropdown.js +350 -2
  71. package/pf-dropdown/pf-dropdown.js.map +1 -1
  72. package/pf-icon/pf-icon.css +1 -0
  73. package/pf-icon/pf-icon.d.ts +1 -3
  74. package/pf-icon/pf-icon.js +44 -4
  75. package/pf-icon/pf-icon.js.map +1 -1
  76. package/pf-jump-links/pf-jump-links-item.css +7 -1
  77. package/pf-jump-links/pf-jump-links-item.d.ts +0 -8
  78. package/pf-jump-links/pf-jump-links-item.js +77 -2
  79. package/pf-jump-links/pf-jump-links-item.js.map +1 -1
  80. package/pf-jump-links/pf-jump-links-list.css +3 -0
  81. package/pf-jump-links/pf-jump-links-list.d.ts +0 -5
  82. package/pf-jump-links/pf-jump-links-list.js +20 -2
  83. package/pf-jump-links/pf-jump-links-list.js.map +1 -1
  84. package/pf-jump-links/pf-jump-links.css +36 -0
  85. package/pf-jump-links/pf-jump-links.d.ts +1 -38
  86. package/pf-jump-links/pf-jump-links.js +179 -2
  87. package/pf-jump-links/pf-jump-links.js.map +1 -1
  88. package/pf-label/pf-label.css +51 -1
  89. package/pf-label/pf-label.d.ts +1 -58
  90. package/pf-label/pf-label.js +257 -2
  91. package/pf-label/pf-label.js.map +1 -1
  92. package/pf-modal/pf-modal.css +11 -0
  93. package/pf-modal/pf-modal.d.ts +1 -24
  94. package/pf-modal/pf-modal.js +215 -2
  95. package/pf-modal/pf-modal.js.map +1 -1
  96. package/pf-panel/pf-panel.css +29 -0
  97. package/pf-panel/pf-panel.d.ts +1 -32
  98. package/pf-panel/pf-panel.js +204 -2
  99. package/pf-panel/pf-panel.js.map +1 -1
  100. package/pf-popover/pf-popover.css +33 -0
  101. package/pf-popover/pf-popover.d.ts +1 -108
  102. package/pf-popover/pf-popover.js +251 -3
  103. package/pf-popover/pf-popover.js.map +1 -1
  104. package/pf-progress/pf-progress.css +19 -0
  105. package/pf-progress/pf-progress.d.ts +1 -57
  106. package/pf-progress/pf-progress.js +231 -2
  107. package/pf-progress/pf-progress.js.map +1 -1
  108. package/pf-progress-stepper/pf-progress-step.js +126 -2
  109. package/pf-progress-stepper/pf-progress-step.js.map +1 -1
  110. package/pf-progress-stepper/pf-progress-stepper.css +96 -0
  111. package/pf-progress-stepper/pf-progress-stepper.d.ts +1 -115
  112. package/pf-progress-stepper/pf-progress-stepper.js +326 -2
  113. package/pf-progress-stepper/pf-progress-stepper.js.map +1 -1
  114. package/pf-search-input/pf-search-input.css +308 -0
  115. package/pf-search-input/pf-search-input.d.ts +75 -0
  116. package/pf-search-input/pf-search-input.js +630 -0
  117. package/pf-search-input/pf-search-input.js.map +1 -0
  118. package/pf-search-input/test/pf-search-input.e2e.d.ts +1 -0
  119. package/pf-search-input/test/pf-search-input.e2e.js +23 -0
  120. package/pf-search-input/test/pf-search-input.e2e.js.map +1 -0
  121. package/pf-search-input/test/pf-search-input.spec.d.ts +1 -0
  122. package/pf-search-input/test/pf-search-input.spec.js +1021 -0
  123. package/pf-search-input/test/pf-search-input.spec.js.map +1 -0
  124. package/pf-select/pf-option-group.js +27 -2
  125. package/pf-select/pf-option-group.js.map +1 -1
  126. package/pf-select/pf-option.css +9 -1
  127. package/pf-select/pf-option.js +83 -2
  128. package/pf-select/pf-option.js.map +1 -1
  129. package/pf-select/pf-select.css +157 -0
  130. package/pf-select/pf-select.d.ts +1 -158
  131. package/pf-select/pf-select.js +542 -5
  132. package/pf-select/pf-select.js.map +1 -1
  133. package/pf-spinner/pf-spinner.css +13 -0
  134. package/pf-spinner/pf-spinner.d.ts +1 -14
  135. package/pf-spinner/pf-spinner.js +101 -2
  136. package/pf-spinner/pf-spinner.js.map +1 -1
  137. package/pf-switch/pf-switch.css +22 -0
  138. package/pf-switch/pf-switch.d.ts +1 -30
  139. package/pf-switch/pf-switch.js +156 -2
  140. package/pf-switch/pf-switch.js.map +1 -1
  141. package/pf-table/context.d.ts +3 -0
  142. package/pf-table/context.js +3 -0
  143. package/pf-table/context.js.map +1 -0
  144. package/pf-table/pf-caption.js +10 -2
  145. package/pf-table/pf-caption.js.map +1 -1
  146. package/pf-table/pf-table.css +211 -0
  147. package/pf-table/pf-table.d.ts +2 -635
  148. package/pf-table/pf-table.js +445 -4
  149. package/pf-table/pf-table.js.map +1 -1
  150. package/pf-table/pf-tbody.js +18 -2
  151. package/pf-table/pf-tbody.js.map +1 -1
  152. package/pf-table/pf-td.js +107 -2
  153. package/pf-table/pf-td.js.map +1 -1
  154. package/pf-table/pf-th.d.ts +1 -0
  155. package/pf-table/pf-th.js +102 -7
  156. package/pf-table/pf-th.js.map +1 -1
  157. package/pf-table/pf-thead.d.ts +1 -0
  158. package/pf-table/pf-thead.js +26 -2
  159. package/pf-table/pf-thead.js.map +1 -1
  160. package/pf-table/pf-tr.js +89 -2
  161. package/pf-table/pf-tr.js.map +1 -1
  162. package/pf-tabs/pf-tab-panel.css +1 -0
  163. package/pf-tabs/pf-tab-panel.d.ts +0 -2
  164. package/pf-tabs/pf-tab-panel.js +19 -3
  165. package/pf-tabs/pf-tab-panel.js.map +1 -1
  166. package/pf-tabs/pf-tab.css +33 -0
  167. package/pf-tabs/pf-tab.d.ts +1 -41
  168. package/pf-tabs/pf-tab.js +234 -4
  169. package/pf-tabs/pf-tab.js.map +1 -1
  170. package/pf-tabs/pf-tabs.css +26 -0
  171. package/pf-tabs/pf-tabs.d.ts +1 -34
  172. package/pf-tabs/pf-tabs.js +307 -2
  173. package/pf-tabs/pf-tabs.js.map +1 -1
  174. package/pf-tabs/test/pf-tabs.spec.js +9 -0
  175. package/pf-tabs/test/pf-tabs.spec.js.map +1 -1
  176. package/pf-text-area/pf-text-area.css +125 -0
  177. package/pf-text-area/pf-text-area.d.ts +1 -125
  178. package/pf-text-area/pf-text-area.js +320 -2
  179. package/pf-text-area/pf-text-area.js.map +1 -1
  180. package/pf-text-input/pf-text-input.css +126 -0
  181. package/pf-text-input/pf-text-input.d.ts +1 -126
  182. package/pf-text-input/pf-text-input.js +395 -2
  183. package/pf-text-input/pf-text-input.js.map +1 -1
  184. package/pf-tile/pf-tile.css +28 -8
  185. package/pf-tile/pf-tile.d.ts +1 -24
  186. package/pf-tile/pf-tile.js +156 -2
  187. package/pf-tile/pf-tile.js.map +1 -1
  188. package/pf-timestamp/pf-timestamp.d.ts +1 -0
  189. package/pf-timestamp/pf-timestamp.js +10 -2
  190. package/pf-timestamp/pf-timestamp.js.map +1 -1
  191. package/pf-tooltip/pf-tooltip.css +10 -0
  192. package/pf-tooltip/pf-tooltip.d.ts +1 -79
  193. package/pf-tooltip/pf-tooltip.js +115 -5
  194. package/pf-tooltip/pf-tooltip.js.map +1 -1
  195. package/pfe.min.js +0 -7439
  196. package/pfe.min.js.LEGAL.txt +0 -57
  197. package/pfe.min.js.map +0 -7
  198. package/react/pf-accordion/pf-accordion-header.d.ts +0 -5
  199. package/react/pf-accordion/pf-accordion-header.js +0 -12
  200. package/react/pf-accordion/pf-accordion-panel.d.ts +0 -5
  201. package/react/pf-accordion/pf-accordion-panel.js +0 -10
  202. package/react/pf-accordion/pf-accordion.d.ts +0 -5
  203. package/react/pf-accordion/pf-accordion.js +0 -13
  204. package/react/pf-avatar/pf-avatar.d.ts +0 -5
  205. package/react/pf-avatar/pf-avatar.js +0 -12
  206. package/react/pf-back-to-top/pf-back-to-top.d.ts +0 -5
  207. package/react/pf-back-to-top/pf-back-to-top.js +0 -10
  208. package/react/pf-background-image/pf-background-image.d.ts +0 -5
  209. package/react/pf-background-image/pf-background-image.js +0 -10
  210. package/react/pf-badge/pf-badge.d.ts +0 -5
  211. package/react/pf-badge/pf-badge.js +0 -10
  212. package/react/pf-banner/pf-banner.d.ts +0 -5
  213. package/react/pf-banner/pf-banner.js +0 -10
  214. package/react/pf-button/pf-button.d.ts +0 -5
  215. package/react/pf-button/pf-button.js +0 -12
  216. package/react/pf-card/pf-card.d.ts +0 -5
  217. package/react/pf-card/pf-card.js +0 -10
  218. package/react/pf-chip/pf-chip-group.d.ts +0 -5
  219. package/react/pf-chip/pf-chip-group.js +0 -13
  220. package/react/pf-chip/pf-chip.d.ts +0 -5
  221. package/react/pf-chip/pf-chip.js +0 -13
  222. package/react/pf-clipboard-copy/pf-clipboard-copy.d.ts +0 -5
  223. package/react/pf-clipboard-copy/pf-clipboard-copy.js +0 -12
  224. package/react/pf-code-block/pf-code-block.d.ts +0 -5
  225. package/react/pf-code-block/pf-code-block.js +0 -10
  226. package/react/pf-dropdown/pf-dropdown-group.d.ts +0 -5
  227. package/react/pf-dropdown/pf-dropdown-group.js +0 -10
  228. package/react/pf-dropdown/pf-dropdown-item.d.ts +0 -5
  229. package/react/pf-dropdown/pf-dropdown-item.js +0 -10
  230. package/react/pf-dropdown/pf-dropdown-menu.d.ts +0 -5
  231. package/react/pf-dropdown/pf-dropdown-menu.js +0 -10
  232. package/react/pf-dropdown/pf-dropdown.d.ts +0 -5
  233. package/react/pf-dropdown/pf-dropdown.js +0 -14
  234. package/react/pf-icon/pf-icon.d.ts +0 -5
  235. package/react/pf-icon/pf-icon.js +0 -13
  236. package/react/pf-jump-links/pf-jump-links-item.d.ts +0 -5
  237. package/react/pf-jump-links/pf-jump-links-item.js +0 -13
  238. package/react/pf-jump-links/pf-jump-links-list.d.ts +0 -5
  239. package/react/pf-jump-links/pf-jump-links-list.js +0 -10
  240. package/react/pf-jump-links/pf-jump-links.d.ts +0 -5
  241. package/react/pf-jump-links/pf-jump-links.js +0 -12
  242. package/react/pf-label/pf-label.d.ts +0 -5
  243. package/react/pf-label/pf-label.js +0 -12
  244. package/react/pf-modal/pf-modal.d.ts +0 -5
  245. package/react/pf-modal/pf-modal.js +0 -13
  246. package/react/pf-panel/pf-panel.d.ts +0 -5
  247. package/react/pf-panel/pf-panel.js +0 -10
  248. package/react/pf-popover/pf-popover.d.ts +0 -5
  249. package/react/pf-popover/pf-popover.js +0 -10
  250. package/react/pf-progress/pf-progress.d.ts +0 -5
  251. package/react/pf-progress/pf-progress.js +0 -10
  252. package/react/pf-progress-stepper/pf-progress-step.d.ts +0 -5
  253. package/react/pf-progress-stepper/pf-progress-step.js +0 -10
  254. package/react/pf-progress-stepper/pf-progress-stepper.d.ts +0 -5
  255. package/react/pf-progress-stepper/pf-progress-stepper.js +0 -10
  256. package/react/pf-select/pf-option-group.d.ts +0 -5
  257. package/react/pf-select/pf-option-group.js +0 -10
  258. package/react/pf-select/pf-option.d.ts +0 -5
  259. package/react/pf-select/pf-option.js +0 -10
  260. package/react/pf-select/pf-select.d.ts +0 -5
  261. package/react/pf-select/pf-select.js +0 -13
  262. package/react/pf-spinner/pf-spinner.d.ts +0 -5
  263. package/react/pf-spinner/pf-spinner.js +0 -10
  264. package/react/pf-switch/pf-switch.d.ts +0 -5
  265. package/react/pf-switch/pf-switch.js +0 -12
  266. package/react/pf-table/pf-caption.d.ts +0 -5
  267. package/react/pf-table/pf-caption.js +0 -10
  268. package/react/pf-table/pf-table.d.ts +0 -5
  269. package/react/pf-table/pf-table.js +0 -10
  270. package/react/pf-table/pf-tbody.d.ts +0 -5
  271. package/react/pf-table/pf-tbody.js +0 -10
  272. package/react/pf-table/pf-td.d.ts +0 -5
  273. package/react/pf-table/pf-td.js +0 -10
  274. package/react/pf-table/pf-th.d.ts +0 -5
  275. package/react/pf-table/pf-th.js +0 -10
  276. package/react/pf-table/pf-thead.d.ts +0 -5
  277. package/react/pf-table/pf-thead.js +0 -10
  278. package/react/pf-table/pf-tr.d.ts +0 -5
  279. package/react/pf-table/pf-tr.js +0 -10
  280. package/react/pf-tabs/pf-tab-panel.d.ts +0 -5
  281. package/react/pf-tabs/pf-tab-panel.js +0 -10
  282. package/react/pf-tabs/pf-tab.d.ts +0 -5
  283. package/react/pf-tabs/pf-tab.js +0 -12
  284. package/react/pf-tabs/pf-tabs.d.ts +0 -5
  285. package/react/pf-tabs/pf-tabs.js +0 -10
  286. package/react/pf-text-area/pf-text-area.d.ts +0 -5
  287. package/react/pf-text-area/pf-text-area.js +0 -10
  288. package/react/pf-text-input/pf-text-input.d.ts +0 -5
  289. package/react/pf-text-input/pf-text-input.js +0 -10
  290. package/react/pf-tile/pf-tile.d.ts +0 -5
  291. package/react/pf-tile/pf-tile.js +0 -10
  292. package/react/pf-timestamp/pf-timestamp.d.ts +0 -5
  293. package/react/pf-timestamp/pf-timestamp.js +0 -10
  294. package/react/pf-tooltip/pf-tooltip.d.ts +0 -5
  295. package/react/pf-tooltip/pf-tooltip.js +0 -10
package/pf-text-input/pf-text-input.js CHANGED
@@ -7,7 +7,400 @@ import { ifDefined } from 'lit/directives/if-defined.js';
7
7
  import { styleMap } from 'lit/directives/style-map.js';
8
8
  import { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';
9
9
  import { css } from "lit";
10
- const styles = css `:host {\n\t--pf-c-form-control--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem);\n\t--pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5);\n\t--pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);\n\t--pf-c-form-control--BorderRadius: 0;\n\t--pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);\n\t--pf-c-form-control--Width: 100%;\n\t--pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));\n\t--pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));\n\t--pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));\n\t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);\n\t--pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);\n\t--pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));\n\t--pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));\n\t--pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c);\n\t--pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73);\n\t--pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515);\n\t--pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);\n\t--pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n\t--pf-c-form-control--disabled--BorderColor: transparent;\n\t--pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);\n\t--pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));\n\t--pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);\n\t--pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);\n\t--pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;\n\t--pf-c-form-control--readonly--m-plain--inset--base: 0;\n\t--pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth));\n\t--pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);\n\t--pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));\n\t--pf-c-form-control--success--BackgroundPositionY: center;\n\t--pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);\n\t--pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);\n\t--pf-c-form-control--success--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%235ba352" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/%3E%3C/svg%3E');\n\t--pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth));\n\t--pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);\n\t--pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));\n\t--pf-c-form-control--m-warning--BackgroundPositionY: center;\n\t--pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);\n\t--pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;\n\t--pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);\n\t--pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");\n\t--pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);\n\t--pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth));\n\t--pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);\n\t--pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));\n\t--pf-c-form-control--invalid--BackgroundPositionY: center;\n\t--pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);\n\t--pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);\n\t--pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");\n\t--pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;\n\t--pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);\n\t--pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem);\n\t--pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);\n\t--pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");\n\t--pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));\n\t--pf-c-form-control--m-icon--BackgroundUrl: none;\n\t--pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));\n\t--pf-c-form-control--m-icon--BackgroundPositionY: center;\n\t--pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem);\n\t--pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));\n\t--pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));\n\t--pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);\n\t--pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);\n\t--pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);\n\t--pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);\n\t--pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);\n\t--pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);\n\t--pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);\n\t--pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);\n\t--pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);\n\t--pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");\n\t--pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");\n\t--pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));\n\t--pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth));\n\t--pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");\n\t--pf-c-form-control__select--BackgroundSize: .625em;\n\t--pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px);\n\t--pf-c-form-control__select--BackgroundPositionY: center;\n\t--pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);\n\t--pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem);\n\t--pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem);\n\t--pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);\n\t--pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem);\n\t--pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);\n\t--pf-c-form-control--textarea--Height: auto;\n\t--pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);\n\t--pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);\n\t--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);\n\t--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success);\n\t--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning);\n\t--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid);\n\t--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select);\n\t--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search);\n\t--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar);\n\t--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock);\n\t--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);\n\t--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px);\n\t--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem));\n\t--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);\n\t--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem));\n /* NB: this var doesn't exist in pf react */\n --pf-c-form-control__error-text--m-status--Color: var(--pf-global--danger-color--100, #c9190b);\n\n display: inline-block;\n /* adjust the host to fit the input */\n max-width: calc(100% - var(--pf-c-form-control--PaddingRight) - var(--pf-c-form-control--PaddingLeft));\n}\n\ninput {\n\tcolor: var(--pf-c-form-control--Color);\n\twidth: var(--pf-c-form-control--Width);\n\tpadding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);\n\tfont-size: var(--pf-c-form-control--FontSize);\n\tline-height: var(--pf-c-form-control--LineHeight);\n\tbackground-color: var(--pf-c-form-control--BackgroundColor);\n\tbackground-repeat: no-repeat;\n\tborder: var(--pf-c-form-control--BorderWidth) solid;\n\tborder-color: var(--pf-c-form-control--BorderTopColor) var(--pf-c-form-control--BorderRightColor) var(--pf-c-form-control--BorderBottomColor) var(--pf-c-form-control--BorderLeftColor);\n\tborder-radius: var(--pf-c-form-control--BorderRadius);\n height: var(--pf-c-form-control--Height);\n text-overflow: ellipsis;\n appearance: none;\n\t-moz-appearance: none;\n\t-webkit-appearance: none;\n}\n\ninput:disabled {\n --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);\n color: var(--pf-c-form-control--disabled--Color);\n cursor: not-allowed;\n border-color: var(--pf-c-form-control--disabled--BorderColor);\n}\n\ninput:hover {\n --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);\n}\n\ninput::placeholder {\n color: var(--pf-c-form-control--placeholder--Color);\n}\n\n#error-text {\n color: var(--pf-c-form-control__error-text--m-status--Color);\n}\n\n:host([left-truncated]) {\n position: relative;\n}\n\n:host([left-truncated]) input:not(:focus) {\n direction: rtl;\n text-overflow: ellipsis;\n}\n\n:host([readonly]) input {\n\tbackground-color: var(--pf-c-form-control--readonly--BackgroundColor);\n}\n\n:host([readonly][plain]) {\n\t--pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);\n\t--pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);\n}\n\n:host([readonly][plain]) input {\n\tborder-color: transparent;\n}\n\n:host(:invalid) {\n --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);\n --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);\n}\n\n:host(:invalid) input {\n padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);\n background-image: var(--pf-c-form-control--invalid--BackgroundUrl);\n background-position: var(--pf-c-form-control--invalid--BackgroundPosition);\n background-size: var(--pf-c-form-control--invalid--BackgroundSize);\n border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);\n}\n\n:host([icon]),\n:host([custom-icon-url]) {\n\t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--PaddingRight);\n}\n:host([icon]) input,\n:host([custom-icon-url]) input {\n\tbackground-image: var(--pf-c-form-control--m-icon--BackgroundUrl);\n\tbackground-position: var(--pf-c-form-control--m-icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);\n\tbackground-size: var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);\n}\n\n:host([icon="calendar"]) {\n --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-calendar--BackgroundUrl);\n}\n\n:host([icon="clock"]) {\n --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);\n}\n\n:host([validated="success"]) {\n\t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--success--PaddingRight);\n\t--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--success--BorderBottomColor);\n}\n\n:host([validated="success"]) input {\n\tpadding-bottom: var(--pf-c-form-control--success--PaddingBottom);\n\tbackground-image: var(--pf-c-form-control--success--BackgroundUrl);\n\tbackground-position: var(--pf-c-form-control--success--BackgroundPosition);\n\tbackground-size: var(--pf-c-form-control--success--BackgroundSize);\n\tborder-bottom-width: var(--pf-c-form-control--success--BorderBottomWidth);\n}\n\n:host([validated="warning"]) {\n\t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-warning--PaddingRight);\n\t--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-warning--BorderBottomColor);\n}\n\n:host([validated="warning"]) input {\n\tpadding-bottom: var(--pf-c-form-control--m-warning--PaddingBottom);\n\tbackground-image: var(--pf-c-form-control--m-warning--BackgroundUrl);\n\tbackground-position: var(--pf-c-form-control--m-warning--BackgroundPosition);\n\tbackground-size: var(--pf-c-form-control--m-warning--BackgroundSize);\n\tborder-bottom-width: var(--pf-c-form-control--m-warning--BorderBottomWidth);\n}\n\n/* TBD if we'll implement this\n:host([icon-sprite]) {\n\t--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);\n\t--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);\n\t--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);\n\t--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);\n\t--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);\n\t--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);\n\t--pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);\n\t--pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);\n\t--pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);\n\t--pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);\n\t--pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);\n\t--pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);\n}\n*/\n`;
10
+ const styles = css `:host {
11
+ \t/** Form control text color */
12
+ \t--pf-c-form-control--Color: var(--pf-global--Color--100, #151515);
13
+ \t/** Form control font size */
14
+ \t--pf-c-form-control--FontSize: var(--pf-global--FontSize--md, 1rem);
15
+ \t/** Form control line height */
16
+ \t--pf-c-form-control--LineHeight: var(--pf-global--LineHeight--md, 1.5);
17
+ \t/** Form control border width */
18
+ \t--pf-c-form-control--BorderWidth: var(--pf-global--BorderWidth--sm, 1px);
19
+ \t/** Form control top border color */
20
+ \t--pf-c-form-control--BorderTopColor: var(--pf-global--BorderColor--300, #f0f0f0);
21
+ \t/** Form control right border color */
22
+ \t--pf-c-form-control--BorderRightColor: var(--pf-global--BorderColor--300, #f0f0f0);
23
+ \t/** Form control bottom border color */
24
+ \t--pf-c-form-control--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
25
+ \t/** Form control left border color */
26
+ \t--pf-c-form-control--BorderLeftColor: var(--pf-global--BorderColor--300, #f0f0f0);
27
+ \t/** Form control border radius */
28
+ \t--pf-c-form-control--BorderRadius: 0;
29
+ \t/** Form control background color */
30
+ \t--pf-c-form-control--BackgroundColor: var(--pf-global--BackgroundColor--100, #fff);
31
+ \t/** Form control width */
32
+ \t--pf-c-form-control--Width: 100%;
33
+ \t/** Form control height */
34
+ \t--pf-c-form-control--Height: calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom));
35
+ \t/** Form control base inset */
36
+ \t--pf-c-form-control--inset--base: var(--pf-global--spacer--sm, 0.5rem);
37
+ \t/** Form control top padding */
38
+ \t--pf-c-form-control--PaddingTop: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
39
+ \t/** Form control bottom padding */
40
+ \t--pf-c-form-control--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
41
+ \t/** Form control right padding */
42
+ \t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--inset--base);
43
+ \t/** Form control left padding */
44
+ \t--pf-c-form-control--PaddingLeft: var(--pf-c-form-control--inset--base);
45
+ \t/** Form control hover bottom border color */
46
+ \t--pf-c-form-control--hover--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
47
+ \t/** Form control focus bottom border width */
48
+ \t--pf-c-form-control--focus--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
49
+ \t/** Form control focus bottom padding */
50
+ \t--pf-c-form-control--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
51
+ \t/** Form control focus bottom border color */
52
+ \t--pf-c-form-control--focus--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
53
+ \t/** Form control expanded bottom border width */
54
+ \t--pf-c-form-control--m-expanded--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
55
+ \t/** Form control expanded bottom padding */
56
+ \t--pf-c-form-control--m-expanded--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth));
57
+ \t/** Form control expanded bottom border color */
58
+ \t--pf-c-form-control--m-expanded--BorderBottomColor: var(--pf-global--primary-color--100, #06c);
59
+ \t/** Form control placeholder color */
60
+ \t--pf-c-form-control--placeholder--Color: var(--pf-global--Color--dark-200, #6a6e73);
61
+ \t/** Form control placeholder child color */
62
+ \t--pf-c-form-control--placeholder--child--Color: var(--pf-global--Color--100, #151515);
63
+ \t/** Form control disabled color */
64
+ \t--pf-c-form-control--disabled--Color: var(--pf-global--disabled-color--100, #6a6e73);
65
+ \t/** Form control disabled background color */
66
+ \t--pf-c-form-control--disabled--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
67
+ \t/** Form control disabled border color */
68
+ \t--pf-c-form-control--disabled--BorderColor: transparent;
69
+ \t/** Form control readonly background color */
70
+ \t--pf-c-form-control--readonly--BackgroundColor: var(--pf-global--disabled-color--300, #f0f0f0);
71
+ \t/** Form control readonly hover bottom border color */
72
+ \t--pf-c-form-control--readonly--hover--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
73
+ \t/** Form control readonly focus bottom padding */
74
+ \t--pf-c-form-control--readonly--focus--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px));
75
+ \t/** Form control readonly focus bottom border width */
76
+ \t--pf-c-form-control--readonly--focus--BorderBottomWidth: var(--pf-global--BorderWidth--sm, 1px);
77
+ \t/** Form control readonly focus bottom border color */
78
+ \t--pf-c-form-control--readonly--focus--BorderBottomColor: var(--pf-global--BorderColor--200, #8a8d90);
79
+ \t/** Form control readonly plain background color */
80
+ \t--pf-c-form-control--readonly--m-plain--BackgroundColor: transparent;
81
+ \t/** Form control readonly plain base inset */
82
+ \t--pf-c-form-control--readonly--m-plain--inset--base: 0;
83
+ \t/** Form control success bottom border width */
84
+ \t--pf-c-form-control--success--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
85
+ \t/** Form control success bottom padding */
86
+ \t--pf-c-form-control--success--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth));
87
+ \t/** Form control success bottom border color */
88
+ \t--pf-c-form-control--success--BorderBottomColor: var(--pf-global--success-color--100, #3e8635);
89
+ \t/** Form control success right padding */
90
+ \t--pf-c-form-control--success--PaddingRight: var(--pf-global--spacer--xl, 2rem);
91
+ \t/** Form control success background X position */
92
+ \t--pf-c-form-control--success--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
93
+ \t/** Form control success background Y position */
94
+ \t--pf-c-form-control--success--BackgroundPositionY: center;
95
+ \t/** Form control success background position */
96
+ \t--pf-c-form-control--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY);
97
+ \t/** Form control success background X size */
98
+ \t--pf-c-form-control--success--BackgroundSizeX: var(--pf-c-form-control--FontSize);
99
+ \t/** Form control success background Y size */
100
+ \t--pf-c-form-control--success--BackgroundSizeY: var(--pf-c-form-control--FontSize);
101
+ \t/** Form control success background size */
102
+ \t--pf-c-form-control--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY);
103
+ \t/** Form control success background URL */
104
+ \t--pf-c-form-control--success--BackgroundUrl: url('data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"%3E%3Cpath fill="%235ba352" d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/%3E%3C/svg%3E');
105
+ \t/** Form control warning bottom border width */
106
+ \t--pf-c-form-control--m-warning--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
107
+ \t/** Form control warning bottom padding */
108
+ \t--pf-c-form-control--m-warning--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth));
109
+ \t/** Form control warning bottom border color */
110
+ \t--pf-c-form-control--m-warning--BorderBottomColor: var(--pf-global--warning-color--100, #f0ab00);
111
+ \t/** Form control warning right padding */
112
+ \t--pf-c-form-control--m-warning--PaddingRight: var(--pf-global--spacer--xl, 2rem);
113
+ \t/** Form control warning background X position */
114
+ \t--pf-c-form-control--m-warning--BackgroundPositionX: calc(100% - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem));
115
+ \t/** Form control warning background Y position */
116
+ \t--pf-c-form-control--m-warning--BackgroundPositionY: center;
117
+ \t/** Form control warning background position */
118
+ \t--pf-c-form-control--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY);
119
+ \t/** Form control warning background X size */
120
+ \t--pf-c-form-control--m-warning--BackgroundSizeX: 1.25rem;
121
+ \t/** Form control warning background Y size */
122
+ \t--pf-c-form-control--m-warning--BackgroundSizeY: var(--pf-c-form-control--FontSize);
123
+ \t/** Form control warning background size */
124
+ \t--pf-c-form-control--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY);
125
+ \t/** Form control warning background URL */
126
+ \t--pf-c-form-control--m-warning--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23f0ab00' d='M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
127
+ \t/** Form control invalid bottom border width */
128
+ \t--pf-c-form-control--invalid--BorderBottomWidth: var(--pf-global--BorderWidth--md, 2px);
129
+ \t/** Form control invalid bottom padding */
130
+ \t--pf-c-form-control--invalid--PaddingBottom: calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth));
131
+ \t/** Form control invalid bottom border color */
132
+ \t--pf-c-form-control--invalid--BorderBottomColor: var(--pf-global--danger-color--100, #c9190b);
133
+ \t/** Form control invalid right padding */
134
+ \t--pf-c-form-control--invalid--PaddingRight: var(--pf-global--spacer--xl, 2rem);
135
+ \t/** Form control invalid background X position */
136
+ \t--pf-c-form-control--invalid--BackgroundPositionX: calc(100% - var(--pf-c-form-control--PaddingLeft));
137
+ \t/** Form control invalid background Y position */
138
+ \t--pf-c-form-control--invalid--BackgroundPositionY: center;
139
+ \t/** Form control invalid background position */
140
+ \t--pf-c-form-control--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY);
141
+ \t/** Form control invalid background X size */
142
+ \t--pf-c-form-control--invalid--BackgroundSizeX: var(--pf-c-form-control--FontSize);
143
+ \t/** Form control invalid background Y size */
144
+ \t--pf-c-form-control--invalid--BackgroundSizeY: var(--pf-c-form-control--FontSize);
145
+ \t/** Form control invalid background size */
146
+ \t--pf-c-form-control--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY);
147
+ \t/** Form control invalid background URL */
148
+ \t--pf-c-form-control--invalid--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23fe5142' d='M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z'/%3E%3C/svg%3E");
149
+ \t/** Form control invalid exclamation background */
150
+ \t--pf-c-form-control--invalid--exclamation--Background: var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat;
151
+ \t/** Form control invalid background */
152
+ \t--pf-c-form-control--invalid--Background: var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background);
153
+ \t/** Form control search left padding */
154
+ \t--pf-c-form-control--m-search--PaddingLeft: var(--pf-global--spacer--xl, 2rem);
155
+ \t/** Form control search background position */
156
+ \t--pf-c-form-control--m-search--BackgroundPosition: var(--pf-c-form-control--PaddingRight);
157
+ \t/** Form control search background size */
158
+ \t--pf-c-form-control--m-search--BackgroundSize: var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize);
159
+ \t/** Form control search background URL */
160
+ \t--pf-c-form-control--m-search--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z'/%3E%3C/svg%3E");
161
+ \t/** Form control icon right padding */
162
+ \t--pf-c-form-control--m-icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
163
+ \t/** Form control icon background URL */
164
+ \t--pf-c-form-control--m-icon--BackgroundUrl: none;
165
+ \t/** Form control icon background X position */
166
+ \t--pf-c-form-control--m-icon--BackgroundPositionX: calc(100% - var(--pf-c-form-control--inset--base));
167
+ \t/** Form control icon background Y position */
168
+ \t--pf-c-form-control--m-icon--BackgroundPositionY: center;
169
+ \t/** Form control icon background X size */
170
+ \t--pf-c-form-control--m-icon--BackgroundSizeX: var(--pf-c-form-control--FontSize);
171
+ \t/** Form control icon background Y size */
172
+ \t--pf-c-form-control--m-icon--BackgroundSizeY: var(--pf-c-form-control--FontSize);
173
+ \t/** Form control icon spacer */
174
+ \t--pf-c-form-control--m-icon--icon--spacer: var(--pf-global--spacer--sm, 0.5rem);
175
+ \t/** Form control icon right padding with validation */
176
+ \t--pf-c-form-control--m-icon--icon--PaddingRight: calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer));
177
+ \t/** Form control icon background X position with validation */
178
+ \t--pf-c-form-control--m-icon--icon--BackgroundPositionX: calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX));
179
+ \t/** Form control icon invalid background URL */
180
+ \t--pf-c-form-control--m-icon--invalid--BackgroundUrl: var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
181
+ \t/** Form control icon invalid background position */
182
+ \t--pf-c-form-control--m-icon--invalid--BackgroundPosition: var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
183
+ \t/** Form control icon invalid background size */
184
+ \t--pf-c-form-control--m-icon--invalid--BackgroundSize: var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
185
+ \t/** Form control icon success background URL */
186
+ \t--pf-c-form-control--m-icon--success--BackgroundUrl: var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
187
+ \t/** Form control icon success background position */
188
+ \t--pf-c-form-control--m-icon--success--BackgroundPosition: var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
189
+ \t/** Form control icon success background size */
190
+ \t--pf-c-form-control--m-icon--success--BackgroundSize: var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
191
+ \t/** Form control icon warning background URL */
192
+ \t--pf-c-form-control--m-icon--m-warning--BackgroundUrl: var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl);
193
+ \t/** Form control icon warning background position */
194
+ \t--pf-c-form-control--m-icon--m-warning--BackgroundPosition: var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
195
+ \t/** Form control icon warning background size */
196
+ \t--pf-c-form-control--m-icon--m-warning--BackgroundSize: var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
197
+ \t/** Form control calendar background URL */
198
+ \t--pf-c-form-control--m-calendar--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M0 464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V192H0v272zm320-196c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM192 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12h-40c-6.6 0-12-5.4-12-12v-40zM64 268c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zm0 128c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12H76c-6.6 0-12-5.4-12-12v-40zM400 64h-48V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H160V16c0-8.8-7.2-16-16-16h-32c-8.8 0-16 7.2-16 16v48H48C21.5 64 0 85.5 0 112v48h448v-48c0-26.5-21.5-48-48-48z'/%3E%3C/svg%3E");
199
+ \t/** Form control clock background URL */
200
+ \t--pf-c-form-control--m-clock--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23aaabac' d='M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z'/%3E%3C/svg%3E");
201
+ \t/** Select right padding */
202
+ \t--pf-c-form-control__select--PaddingRight: calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth));
203
+ \t/** Select left padding */
204
+ \t--pf-c-form-control__select--PaddingLeft: calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth));
205
+ \t/** Select background URL */
206
+ \t--pf-c-form-control__select--BackgroundUrl: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23urrentColor' d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z'/%3E%3C/svg%3E");
207
+ \t/** Select background size */
208
+ \t--pf-c-form-control__select--BackgroundSize: .625em;
209
+ \t/** Select background X position */
210
+ \t--pf-c-form-control__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px);
211
+ \t/** Select background Y position */
212
+ \t--pf-c-form-control__select--BackgroundPositionY: center;
213
+ \t/** Select background position */
214
+ \t--pf-c-form-control__select--BackgroundPosition: var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY);
215
+ \t/** Select success right padding */
216
+ \t--pf-c-form-control__select--success--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
217
+ \t/** Select success background position */
218
+ \t--pf-c-form-control__select--success--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
219
+ \t/** Select warning right padding */
220
+ \t--pf-c-form-control__select--m-warning--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
221
+ \t/** Select warning background position */
222
+ \t--pf-c-form-control__select--m-warning--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
223
+ \t/** Select invalid right padding */
224
+ \t--pf-c-form-control__select--invalid--PaddingRight: var(--pf-global--spacer--3xl, 4rem);
225
+ \t/** Select invalid background position */
226
+ \t--pf-c-form-control__select--invalid--BackgroundPosition: calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem));
227
+ \t/** Textarea width */
228
+ \t--pf-c-form-control--textarea--Width: var(--pf-c-form-control--Width);
229
+ \t/** Textarea height */
230
+ \t--pf-c-form-control--textarea--Height: auto;
231
+ \t/** Textarea success background Y position */
232
+ \t--pf-c-form-control--textarea--success--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
233
+ \t/** Textarea warning background Y position */
234
+ \t--pf-c-form-control--textarea--m-warning--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
235
+ \t/** Textarea invalid background Y position */
236
+ \t--pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
237
+ \t/** Icon sprite success background URL */
238
+ \t--pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#success);
239
+ \t/** Icon sprite warning background URL */
240
+ \t--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#warning);
241
+ \t/** Icon sprite invalid background URL */
242
+ \t--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#invalid);
243
+ \t/** Icon sprite select background URL */
244
+ \t--pf-c-form-control--m-icon-sprite__select--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#select);
245
+ \t/** Icon sprite search background URL */
246
+ \t--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#search);
247
+ \t/** Icon sprite calendar background URL */
248
+ \t--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#calendar);
249
+ \t/** Icon sprite clock background URL */
250
+ \t--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl: url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock);
251
+ \t/** Icon sprite select background size */
252
+ \t--pf-c-form-control--m-icon-sprite__select--BackgroundSize: var(--pf-c-form-control--FontSize);
253
+ \t/** Icon sprite select background X position */
254
+ \t--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX: calc(100% - var(--pf-global--spacer--md, 1rem) + 7px);
255
+ \t/** Icon sprite select success background position */
256
+ \t--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem));
257
+ \t/** Icon sprite select warning background position */
258
+ \t--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem);
259
+ \t/** Icon sprite select invalid background position */
260
+ \t--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition: calc(100% - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem));
261
+ /* NB: this var doesn't exist in pf react */
262
+ /** Error text status color */
263
+ --pf-c-form-control__error-text--m-status--Color: var(--pf-global--danger-color--100, #c9190b);
264
+
265
+ display: inline-block;
266
+ /* adjust the host to fit the input */
267
+ max-width: calc(100% - var(--pf-c-form-control--PaddingRight) - var(--pf-c-form-control--PaddingLeft));
268
+ }
269
+
270
+ input {
271
+ \tcolor: var(--pf-c-form-control--Color);
272
+ \twidth: var(--pf-c-form-control--Width);
273
+ \tpadding: var(--pf-c-form-control--PaddingTop) var(--pf-c-form-control--PaddingRight) var(--pf-c-form-control--PaddingBottom) var(--pf-c-form-control--PaddingLeft);
274
+ \tfont-size: var(--pf-c-form-control--FontSize);
275
+ \tline-height: var(--pf-c-form-control--LineHeight);
276
+ \tbackground-color: var(--pf-c-form-control--BackgroundColor);
277
+ \tbackground-repeat: no-repeat;
278
+ \tborder: var(--pf-c-form-control--BorderWidth) solid;
279
+ \tborder-color: var(--pf-c-form-control--BorderTopColor) var(--pf-c-form-control--BorderRightColor) var(--pf-c-form-control--BorderBottomColor) var(--pf-c-form-control--BorderLeftColor);
280
+ \tborder-radius: var(--pf-c-form-control--BorderRadius);
281
+ height: var(--pf-c-form-control--Height);
282
+ text-overflow: ellipsis;
283
+ appearance: none;
284
+ \t-moz-appearance: none;
285
+ \t-webkit-appearance: none;
286
+ }
287
+
288
+ input:disabled {
289
+ --pf-c-form-control--BackgroundColor: var(--pf-c-form-control--disabled--BackgroundColor);
290
+ color: var(--pf-c-form-control--disabled--Color);
291
+ cursor: not-allowed;
292
+ border-color: var(--pf-c-form-control--disabled--BorderColor);
293
+ }
294
+
295
+ input:hover {
296
+ --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--hover--BorderBottomColor);
297
+ }
298
+
299
+ input::placeholder {
300
+ color: var(--pf-c-form-control--placeholder--Color);
301
+ }
302
+
303
+ #error-text {
304
+ color: var(--pf-c-form-control__error-text--m-status--Color);
305
+ }
306
+
307
+ :host([left-truncated]) {
308
+ position: relative;
309
+ }
310
+
311
+ :host([left-truncated]) input:not(:focus) {
312
+ direction: rtl;
313
+ text-overflow: ellipsis;
314
+ }
315
+
316
+ :host([readonly]) input {
317
+ \tbackground-color: var(--pf-c-form-control--readonly--BackgroundColor);
318
+ }
319
+
320
+ :host([readonly][plain]) {
321
+ \t--pf-c-form-control--readonly--BackgroundColor: var(--pf-c-form-control--readonly--m-plain--BackgroundColor);
322
+ \t--pf-c-form-control--inset--base: var(--pf-c-form-control--readonly--m-plain--inset--base);
323
+ }
324
+
325
+ :host([readonly][plain]) input {
326
+ \tborder-color: transparent;
327
+ }
328
+
329
+ :host(:invalid) {
330
+ --pf-c-form-control--PaddingRight: var(--pf-c-form-control--invalid--PaddingRight);
331
+ --pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--invalid--BorderBottomColor);
332
+ }
333
+
334
+ :host(:invalid) input {
335
+ padding-bottom: var(--pf-c-form-control--invalid--PaddingBottom);
336
+ background-image: var(--pf-c-form-control--invalid--BackgroundUrl);
337
+ background-position: var(--pf-c-form-control--invalid--BackgroundPosition);
338
+ background-size: var(--pf-c-form-control--invalid--BackgroundSize);
339
+ border-bottom-width: var(--pf-c-form-control--invalid--BorderBottomWidth);
340
+ }
341
+
342
+ :host([icon]),
343
+ :host([custom-icon-url]) {
344
+ \t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-icon--PaddingRight);
345
+ }
346
+ :host([icon]) input,
347
+ :host([custom-icon-url]) input {
348
+ \tbackground-image: var(--pf-c-form-control--m-icon--BackgroundUrl);
349
+ \tbackground-position: var(--pf-c-form-control--m-icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY);
350
+ \tbackground-size: var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY);
351
+ }
352
+
353
+ :host([icon="calendar"]) {
354
+ --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-calendar--BackgroundUrl);
355
+ }
356
+
357
+ :host([icon="clock"]) {
358
+ --pf-c-form-control--m-icon--BackgroundUrl: var(--pf-c-form-control--m-clock--BackgroundUrl);
359
+ }
360
+
361
+ :host([validated="success"]) {
362
+ \t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--success--PaddingRight);
363
+ \t--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--success--BorderBottomColor);
364
+ }
365
+
366
+ :host([validated="success"]) input {
367
+ \tpadding-bottom: var(--pf-c-form-control--success--PaddingBottom);
368
+ \tbackground-image: var(--pf-c-form-control--success--BackgroundUrl);
369
+ \tbackground-position: var(--pf-c-form-control--success--BackgroundPosition);
370
+ \tbackground-size: var(--pf-c-form-control--success--BackgroundSize);
371
+ \tborder-bottom-width: var(--pf-c-form-control--success--BorderBottomWidth);
372
+ }
373
+
374
+ :host([validated="warning"]) {
375
+ \t--pf-c-form-control--PaddingRight: var(--pf-c-form-control--m-warning--PaddingRight);
376
+ \t--pf-c-form-control--BorderBottomColor: var(--pf-c-form-control--m-warning--BorderBottomColor);
377
+ }
378
+
379
+ :host([validated="warning"]) input {
380
+ \tpadding-bottom: var(--pf-c-form-control--m-warning--PaddingBottom);
381
+ \tbackground-image: var(--pf-c-form-control--m-warning--BackgroundUrl);
382
+ \tbackground-position: var(--pf-c-form-control--m-warning--BackgroundPosition);
383
+ \tbackground-size: var(--pf-c-form-control--m-warning--BackgroundSize);
384
+ \tborder-bottom-width: var(--pf-c-form-control--m-warning--BorderBottomWidth);
385
+ }
386
+
387
+ /* TBD if we'll implement this
388
+ :host([icon-sprite]) {
389
+ \t--pf-c-form-control--success--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--success--BackgroundUrl);
390
+ \t--pf-c-form-control--m-warning--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl);
391
+ \t--pf-c-form-control--invalid--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl);
392
+ \t--pf-c-form-control__select--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite__select--BackgroundUrl);
393
+ \t--pf-c-form-control--m-search--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl);
394
+ \t--pf-c-form-control--m-calendar--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl);
395
+ \t--pf-c-form-control--m-clock--BackgroundUrl: var(--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl);
396
+ \t--pf-c-form-control__select--BackgroundSize: var(--pf-c-form-control--m-icon-sprite__select--BackgroundSize);
397
+ \t--pf-c-form-control__select--BackgroundPositionX: var(--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX);
398
+ \t--pf-c-form-control__select--success--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition);
399
+ \t--pf-c-form-control__select--m-warning--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition);
400
+ \t--pf-c-form-control__select--invalid--BackgroundPosition: var(--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition);
401
+ }
402
+ */
403
+ `;
11
404
  let PfTextInput = class PfTextInput extends LitElement {
12
405
  constructor() {
13
406
  super(...arguments);
@@ -123,7 +516,7 @@ PfTextInput.shadowRootOptions = {
123
516
  ...LitElement.shadowRootOptions,
124
517
  delegatesFocus: true,
125
518
  };
126
- PfTextInput.version = "4.0.2";
519
+ PfTextInput.version = "4.2.0";
127
520
  __decorate([
128
521
  property({ type: Boolean, reflect: true, attribute: 'left-truncated' })
129
522
  ], PfTextInput.prototype, "leftTruncated", void 0);
package/pf-text-input/pf-text-input.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"pf-text-input.js","sourceRoot":"","sources":["pf-text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-text-input.css';\n\n/**\n * A **text input** is used to gather free-form text from a user.\n * @cssprop [--pf-c-form-control--Color=var(--pf-global--Color--100, #151515)] -\n * @cssprop [--pf-c-form-control--FontSize=var(--pf-global--FontSize--md, 1rem)] -\n * @cssprop [--pf-c-form-control--LineHeight=var(--pf-global--LineHeight--md, 1.5)] -\n * @cssprop [--pf-c-form-control--BorderWidth=var(--pf-global--BorderWidth--sm, 1px)] -\n * @cssprop [--pf-c-form-control--BorderTopColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderRightColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--BorderLeftColor=var(--pf-global--BorderColor--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--BorderRadius=0] -\n * @cssprop [--pf-c-form-control--BackgroundColor=var(--pf-global--BackgroundColor--100, #fff)] -\n * @cssprop [--pf-c-form-control--Width=100] -\n * @cssprop [--pf-c-form-control--Height=calc(var(--pf-c-form-control--FontSize) * var(--pf-c-form-control--LineHeight) + var(--pf-c-form-control--BorderWidth) * 2 + var(--pf-c-form-control--PaddingTop) + var(--pf-c-form-control--PaddingBottom))] -\n * @cssprop [--pf-c-form-control--inset--base=var(--pf-global--spacer--sm, 0.5rem)] -\n * @cssprop [--pf-c-form-control--PaddingTop=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--PaddingRight=var(--pf-c-form-control--inset--base)] -\n * @cssprop [--pf-c-form-control--PaddingLeft=var(--pf-c-form-control--inset--base)] -\n * @cssprop [--pf-c-form-control--hover--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--focus--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--focus--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--m-expanded--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--m-expanded--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--focus--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--m-expanded--BorderBottomColor=var(--pf-global--primary-color--100, #06c)] -\n * @cssprop [--pf-c-form-control--placeholder--Color=var(--pf-global--Color--dark-200, #6a6e73)] -\n * @cssprop [--pf-c-form-control--placeholder--child--Color=var(--pf-global--Color--100, #151515)] -\n * @cssprop [--pf-c-form-control--disabled--Color=var(--pf-global--disabled-color--100, #6a6e73)] -\n * @cssprop [--pf-c-form-control--disabled--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--disabled--BorderColor=transparent] -\n * @cssprop [--pf-c-form-control--readonly--BackgroundColor=var(--pf-global--disabled-color--300, #f0f0f0)] -\n * @cssprop [--pf-c-form-control--readonly--hover--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--readonly--focus--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-global--BorderWidth--sm, 1px))] -\n * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomWidth=var(--pf-global--BorderWidth--sm, 1px)] -\n * @cssprop [--pf-c-form-control--readonly--focus--BorderBottomColor=var(--pf-global--BorderColor--200, #8a8d90)] -\n * @cssprop [--pf-c-form-control--readonly--m-plain--BackgroundColor=transparent] -\n * @cssprop [--pf-c-form-control--readonly--m-plain--inset--base=0] -\n * @cssprop [--pf-c-form-control--success--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--success--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--success--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--success--BorderBottomColor=var(--pf-global--success-color--100, #3e8635)] -\n * @cssprop [--pf-c-form-control--success--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--success--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -\n * @cssprop [--pf-c-form-control--success--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPositionX) var(--pf-c-form-control--success--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSizeX) var(--pf-c-form-control--success--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--success--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-warning--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--m-warning--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--m-warning--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--m-warning--BorderBottomColor=var(--pf-global--warning-color--100, #f0ab00)] -\n * @cssprop [--pf-c-form-control--m-warning--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionX=calc(100 - calc(var(--pf-c-form-control--PaddingLeft) - 0.0625rem))] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPositionX) var(--pf-c-form-control--m-warning--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeX=1.25rem] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSizeX) var(--pf-c-form-control--m-warning--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--m-warning--BackgroundUrl -\n * @cssprop [--pf-c-form-control--invalid--BorderBottomWidth=var(--pf-global--BorderWidth--md, 2px)] -\n * @cssprop [--pf-c-form-control--invalid--PaddingBottom=calc(var(--pf-global--spacer--form-element, 0.375rem) - var(--pf-c-form-control--invalid--BorderBottomWidth))] -\n * @cssprop [--pf-c-form-control--invalid--BorderBottomColor=var(--pf-global--danger-color--100, #c9190b)] -\n * @cssprop [--pf-c-form-control--invalid--PaddingRight=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPositionX=calc(100 - var(--pf-c-form-control--PaddingLeft))] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPositionX) var(--pf-c-form-control--invalid--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSizeX) var(--pf-c-form-control--invalid--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--invalid--BackgroundUrl -\n * @cssprop [--pf-c-form-control--invalid--exclamation--Background=var(--pf-c-form-control--invalid--BackgroundUrl) var(--pf-c-form-control--invalid--BackgroundPosition) / var(--pf-c-form-control--invalid--BackgroundSize) no-repeat] -\n * @cssprop [--pf-c-form-control--invalid--Background=var(--pf-c-form-control--BackgroundColor) var(--pf-c-form-control--invalid--exclamation--Background)] -\n * @cssprop [--pf-c-form-control--m-search--PaddingLeft=var(--pf-global--spacer--xl, 2rem)] -\n * @cssprop [--pf-c-form-control--m-search--BackgroundPosition=var(--pf-c-form-control--PaddingRight)] -\n * @cssprop [--pf-c-form-control--m-search--BackgroundSize=var(--pf-c-form-control--FontSize) var(--pf-c-form-control--FontSize)] -\n * @cssprop --pf-c-form-control--m-search--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundUrl=none] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionX=calc(100 - var(--pf-c-form-control--inset--base))] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeX=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon--BackgroundSizeY=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon--icon--spacer=var(--pf-global--spacer--sm, 0.5rem)] -\n * @cssprop [--pf-c-form-control--m-icon--icon--PaddingRight=calc(var(--pf-c-form-control--inset--base) + var(--pf-c-form-control--invalid--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer) + var(--pf-c-form-control--m-icon--BackgroundSizeX) + var(--pf-c-form-control--m-icon--icon--spacer))] -\n * @cssprop [--pf-c-form-control--m-icon--icon--BackgroundPositionX=calc(var(--pf-c-form-control--m-icon--BackgroundPositionX) - var(--pf-c-form-control--m-icon--icon--spacer) - var(--pf-c-form-control--invalid--BackgroundSizeX))] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundUrl=var(--pf-c-form-control--invalid--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundPosition=var(--pf-c-form-control--invalid--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--invalid--BackgroundSize=var(--pf-c-form-control--invalid--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundUrl=var(--pf-c-form-control--success--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundPosition=var(--pf-c-form-control--success--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--success--BackgroundSize=var(--pf-c-form-control--success--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundUrl=var(--pf-c-form-control--m-warning--BackgroundUrl), var(--pf-c-form-control--m-icon--BackgroundUrl)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundPosition=var(--pf-c-form-control--m-warning--BackgroundPosition), var(--pf-c-form-control--m-icon--icon--BackgroundPositionX) var(--pf-c-form-control--m-icon--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control--m-icon--m-warning--BackgroundSize=var(--pf-c-form-control--m-warning--BackgroundSize), var(--pf-c-form-control--m-icon--BackgroundSizeX) var(--pf-c-form-control--m-icon--BackgroundSizeY)] -\n * @cssprop --pf-c-form-control--m-calendar--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-clock--BackgroundUrl -\n * @cssprop [--pf-c-form-control__select--PaddingRight=calc(var(--pf-global--spacer--lg, 1.5rem) + var(--pf-c-form-control--BorderWidth) + var(--pf-c-form-control--BorderWidth))] -\n * @cssprop [--pf-c-form-control__select--PaddingLeft=calc(var(--pf-global--spacer--sm, 0.5rem) - var(--pf-c-form-control--BorderWidth))] -\n * @cssprop --pf-c-form-control__select--BackgroundUrl -\n * @cssprop [--pf-c-form-control__select--BackgroundSize=.625em] -\n * @cssprop [--pf-c-form-control__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px)] -\n * @cssprop [--pf-c-form-control__select--BackgroundPositionY=center] -\n * @cssprop [--pf-c-form-control__select--BackgroundPosition=var(--pf-c-form-control__select--BackgroundPositionX) var(--pf-c-form-control__select--BackgroundPositionY)] -\n * @cssprop [--pf-c-form-control__select--success--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--success--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control__select--m-warning--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--m-warning--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -\n * @cssprop [--pf-c-form-control__select--invalid--PaddingRight=var(--pf-global--spacer--3xl, 4rem)] -\n * @cssprop [--pf-c-form-control__select--invalid--BackgroundPosition=calc(var(--pf-c-form-control__select--BackgroundPositionX) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control--textarea--Width=var(--pf-c-form-control--Width)] -\n * @cssprop [--pf-c-form-control--textarea--Height=auto] -\n * @cssprop [--pf-c-form-control--textarea--success--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop [--pf-c-form-control--textarea--m-warning--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop [--pf-c-form-control--textarea--invalid--BackgroundPositionY=var(--pf-c-form-control--PaddingLeft)] -\n * @cssprop --pf-c-form-control--m-icon-sprite--success--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite__select--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-search--BackgroundUrl -\n * @cssprop --pf-c-form-control--m-icon-sprite--m-calendar--BackgroundUrl -\n * @cssprop [--pf-c-form-control--m-icon-sprite--m-clock--BackgroundUrl=url(/v4/images/status-icon-sprite.4fee9fefc3971799d2dd4de0a15617f0.svg#clock)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundSize=var(--pf-c-form-control--FontSize)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--BackgroundPositionX=calc(100 - var(--pf-global--spacer--md, 1rem) + 7px)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--success--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) + 1px - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--m-warning--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem) + 0.0625rem)] -\n * @cssprop [--pf-c-form-control--m-icon-sprite__select--invalid--BackgroundPosition=calc(100 - var(--pf-global--spacer--md, 1rem) - var(--pf-global--spacer--lg, 1.5rem))] -\n * @cssprop [--pf-c-form-control__error-text--m-status--Color=var(--pf-global--danger-color--100, #c9190b)] -\n */\n@customElement('pf-text-input')\nexport class PfTextInput extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n static readonly formAssociated = true;\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Trim text on left */\n @property({ type: Boolean, reflect: true, attribute: 'left-truncated' }) leftTruncated = false;\n\n /**\n * Value to indicate if the input is modified to show that validation state.\n * If set to success, input will be modified to indicate valid state.\n * If set to warning, input will be modified to indicate warning state.\n * Invalid inputs will display an error state\n */\n @property({ reflect: true }) validated?: 'success' | 'warning';\n\n /** icon variant */\n @property({ reflect: true }) icon?: 'calendar' | 'clock' | 'search';\n\n /** Accessible label for the input when no `<label>` element is provided. */\n @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;\n\n /** Custom icon url to set as the text input's background-image */\n @property({ reflect: true, attribute: 'custom-icon-url' }) customIconUrl?: string;\n\n /** Dimensions for the custom icon set as the text input's background-size */\n @property({ reflect: true, attribute: 'custom-icon-dimensions' }) customIconDimensions?: string;\n\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Type that the input accepts. */\n @property({ reflect: true }) type?:\n | 'text'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'time'\n | 'url';\n\n /** Flag to show if the input is disabled. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Flag to show if the input is required. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Validation pattern, like `<input>` */\n @property() pattern?: string;\n\n /** Flag to show if the input is read only. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Helper text is text below a form field that helps a user provide the right information, like \"Enter a unique name\". */\n @property({ attribute: 'helper-text' }) helperText?: string;\n\n /** If set to 'blur', will validate when focus leaves the input */\n @property({ attribute: 'validate-on' }) validateOn?: 'blur';\n\n /** Displayed when validation fails */\n @property({ attribute: 'error-text' }) errorText?: string;\n\n /** Input placeholder. */\n @property() placeholder?: string;\n\n /** Value of the input. */\n @property() value = '';\n\n #internals = InternalsController.of(this);\n\n #derivedLabel = '';\n\n #touched = false;\n\n get #disabled() {\n return (!isServer && this.matches(':disabled')) || this.disabled;\n }\n\n get #input() {\n return this.shadowRoot?.getElementById('input') as HTMLInputElement ?? null;\n }\n\n override willUpdate(): void {\n this.#derivedLabel = this.accessibleLabel || this.#internals.computedLabelText;\n }\n\n override render(): TemplateResult<1> {\n const { valid } = this.#internals.validity;\n return html`\n <input id=\"input\"\n .placeholder=\"${this.placeholder ?? ''}\"\n .value=\"${this.value}\"\n pattern=\"${ifDefined(this.pattern)}\"\n @input=\"${this.#onInput}\"\n @keydown=\"${this.#onKeydown}\"\n @blur=\"${this.#onBlur}\"\n ?disabled=\"${this.#disabled}\"\n ?readonly=\"${this.readonly}\"\n ?required=\"${this.required}\"\n aria-label=\"${this.#derivedLabel}\"\n type=\"${ifDefined(this.type)}\"\n style=\"${ifDefined(this.customIconUrl && styleMap({\n backgroundImage: `url('${this.customIconUrl}')`,\n backgroundSize: this.customIconDimensions,\n }))}\">\n <span id=\"helper-text\" ?hidden=\"${!this.helperText || valid}\">${this.helperText}</span>\n <span id=\"error-text\" ?hidden=\"${valid}\">${this.#internals.validationMessage}</span>\n `;\n }\n\n #onInput(event: Event & { target: HTMLInputElement }) {\n const { value } = event.target;\n this.value = value;\n this.#internals.setFormValue(value);\n if (this.#touched && !this.#internals.validity.valid) {\n this.#onBlur();\n }\n this.#touched = true;\n }\n\n #onKeydown(event: Event) {\n switch ((event as KeyboardEvent).key) {\n case 'Enter':\n if (this.reportValidity()) {\n this.#internals.form?.requestSubmit(null);\n }\n }\n }\n\n #onBlur() {\n if (this.validateOn === 'blur') {\n this.checkValidity();\n }\n }\n\n #setValidityFromInput() {\n this.#internals.setValidity(\n this.#input?.validity,\n this.errorText ?? this.#input.validationMessage,\n );\n this.requestUpdate();\n }\n\n async formStateRestoreCallback(state: string, mode: string): Promise<void> {\n if (mode === 'restore') {\n const [controlMode, value] = state.split('/');\n this.value = value ?? controlMode;\n this.requestUpdate();\n await this.updateComplete;\n this.#setValidityFromInput();\n }\n }\n\n\n async formDisabledCallback(): Promise<void> {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n setCustomValidity(message: string): void {\n this.#internals.setValidity({}, message);\n this.requestUpdate();\n }\n\n checkValidity(): boolean {\n this.#setValidityFromInput();\n const validity = this.#internals.checkValidity();\n this.requestUpdate();\n return validity;\n }\n\n reportValidity(): boolean {\n this.#setValidityFromInput();\n return this.#internals.reportValidity();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-text-input': PfTextInput;\n }\n}\n"]}
1
+ {"version":3,"file":"pf-text-input.js","sourceRoot":"","sources":["pf-text-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, isServer, type TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators/custom-element.js';\nimport { property } from 'lit/decorators/property.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { styleMap } from 'lit/directives/style-map.js';\n\nimport { InternalsController } from '@patternfly/pfe-core/controllers/internals-controller.js';\n\nimport styles from './pf-text-input.css';\n\n/**\n * A **text input** is used to gather free-form text from a user.\n * @alias Text Input\n */\n@customElement('pf-text-input')\nexport class PfTextInput extends LitElement {\n static readonly styles: CSSStyleSheet[] = [styles];\n\n static readonly formAssociated = true;\n\n static override readonly shadowRootOptions: ShadowRootInit = {\n ...LitElement.shadowRootOptions,\n delegatesFocus: true,\n };\n\n /** Trim text on left */\n @property({ type: Boolean, reflect: true, attribute: 'left-truncated' }) leftTruncated = false;\n\n /**\n * Value to indicate if the input is modified to show that validation state.\n * If set to success, input will be modified to indicate valid state.\n * If set to warning, input will be modified to indicate warning state.\n * Invalid inputs will display an error state\n */\n @property({ reflect: true }) validated?: 'success' | 'warning';\n\n /** icon variant */\n @property({ reflect: true }) icon?: 'calendar' | 'clock' | 'search';\n\n /** Accessible label for the input when no `<label>` element is provided. */\n @property({ reflect: true, attribute: 'accessible-label' }) accessibleLabel?: string;\n\n /** Custom icon url to set as the text input's background-image */\n @property({ reflect: true, attribute: 'custom-icon-url' }) customIconUrl?: string;\n\n /** Dimensions for the custom icon set as the text input's background-size */\n @property({ reflect: true, attribute: 'custom-icon-dimensions' }) customIconDimensions?: string;\n\n @property({ type: Boolean, reflect: true }) plain = false;\n\n /** Type that the input accepts. */\n @property({ reflect: true }) type?:\n | 'text'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'time'\n | 'url';\n\n /** Flag to show if the input is disabled. */\n @property({ type: Boolean, reflect: true }) disabled = false;\n\n /** Flag to show if the input is required. */\n @property({ type: Boolean, reflect: true }) required = false;\n\n /** Validation pattern, like `<input>` */\n @property() pattern?: string;\n\n /** Flag to show if the input is read only. */\n @property({ type: Boolean, reflect: true }) readonly = false;\n\n /** Helper text is text below a form field that helps a user provide the right information, like \"Enter a unique name\". */\n @property({ attribute: 'helper-text' }) helperText?: string;\n\n /** If set to 'blur', will validate when focus leaves the input */\n @property({ attribute: 'validate-on' }) validateOn?: 'blur';\n\n /** Displayed when validation fails */\n @property({ attribute: 'error-text' }) errorText?: string;\n\n /** Input placeholder. */\n @property() placeholder?: string;\n\n /** Value of the input. */\n @property() value = '';\n\n #internals = InternalsController.of(this);\n\n #derivedLabel = '';\n\n #touched = false;\n\n get #disabled() {\n return (!isServer && this.matches(':disabled')) || this.disabled;\n }\n\n get #input() {\n return this.shadowRoot?.getElementById('input') as HTMLInputElement ?? null;\n }\n\n override willUpdate(): void {\n this.#derivedLabel = this.accessibleLabel || this.#internals.computedLabelText;\n }\n\n override render(): TemplateResult<1> {\n const { valid } = this.#internals.validity;\n return html`\n <input id=\"input\"\n .placeholder=\"${this.placeholder ?? ''}\"\n .value=\"${this.value}\"\n pattern=\"${ifDefined(this.pattern)}\"\n @input=\"${this.#onInput}\"\n @keydown=\"${this.#onKeydown}\"\n @blur=\"${this.#onBlur}\"\n ?disabled=\"${this.#disabled}\"\n ?readonly=\"${this.readonly}\"\n ?required=\"${this.required}\"\n aria-label=\"${this.#derivedLabel}\"\n type=\"${ifDefined(this.type)}\"\n style=\"${ifDefined(this.customIconUrl && styleMap({\n backgroundImage: `url('${this.customIconUrl}')`,\n backgroundSize: this.customIconDimensions,\n }))}\">\n <span id=\"helper-text\" ?hidden=\"${!this.helperText || valid}\">${this.helperText}</span>\n <span id=\"error-text\" ?hidden=\"${valid}\">${this.#internals.validationMessage}</span>\n `;\n }\n\n #onInput(event: Event & { target: HTMLInputElement }) {\n const { value } = event.target;\n this.value = value;\n this.#internals.setFormValue(value);\n if (this.#touched && !this.#internals.validity.valid) {\n this.#onBlur();\n }\n this.#touched = true;\n }\n\n #onKeydown(event: Event) {\n switch ((event as KeyboardEvent).key) {\n case 'Enter':\n if (this.reportValidity()) {\n this.#internals.form?.requestSubmit(null);\n }\n }\n }\n\n #onBlur() {\n if (this.validateOn === 'blur') {\n this.checkValidity();\n }\n }\n\n #setValidityFromInput() {\n this.#internals.setValidity(\n this.#input?.validity,\n this.errorText ?? this.#input.validationMessage,\n );\n this.requestUpdate();\n }\n\n async formStateRestoreCallback(state: string, mode: string): Promise<void> {\n if (mode === 'restore') {\n const [controlMode, value] = state.split('/');\n this.value = value ?? controlMode;\n this.requestUpdate();\n await this.updateComplete;\n this.#setValidityFromInput();\n }\n }\n\n\n async formDisabledCallback(): Promise<void> {\n await this.updateComplete;\n this.requestUpdate();\n }\n\n setCustomValidity(message: string): void {\n this.#internals.setValidity({}, message);\n this.requestUpdate();\n }\n\n checkValidity(): boolean {\n this.#setValidityFromInput();\n const validity = this.#internals.checkValidity();\n this.requestUpdate();\n return validity;\n }\n\n reportValidity(): boolean {\n this.#setValidityFromInput();\n return this.#internals.reportValidity();\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'pf-text-input': PfTextInput;\n }\n}\n"]}