@quartzds/core 1.0.0-beta.91 → 1.0.0-beta.92

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 (181) hide show
  1. package/components/index.js +2 -2
  2. package/components/{p-2806fee1.js → p-50f85f75.js} +6 -30
  3. package/components/p-50f85f75.js.map +1 -0
  4. package/components/{p-fed0d11f.js → p-5570cc30.js} +2 -2
  5. package/components/{p-fed0d11f.js.map → p-5570cc30.js.map} +1 -1
  6. package/components/{p-c80f112a.js → p-70d12c72.js} +7 -24
  7. package/components/p-70d12c72.js.map +1 -0
  8. package/components/{p-ba880369.js → p-72c09714.js} +9 -3
  9. package/components/p-72c09714.js.map +1 -0
  10. package/components/{p-2bf0797c.js → p-9ffb4b49.js} +7 -7
  11. package/components/p-9ffb4b49.js.map +1 -0
  12. package/components/{p-3baf75f4.js → p-a529eb5c.js} +3 -3
  13. package/components/{p-3baf75f4.js.map → p-a529eb5c.js.map} +1 -1
  14. package/components/{p-a020ece3.js → p-b5608061.js} +10 -7
  15. package/components/p-b5608061.js.map +1 -0
  16. package/components/{p-d6e52d0b.js → p-b6c04008.js} +21 -13
  17. package/components/p-b6c04008.js.map +1 -0
  18. package/components/{p-a6310886.js → p-ba860c62.js} +10 -7
  19. package/components/p-ba860c62.js.map +1 -0
  20. package/components/{p-3c48ff53.js → p-e22dd76d.js} +2 -2
  21. package/components/{p-3c48ff53.js.map → p-e22dd76d.js.map} +1 -1
  22. package/components/{p-b4c302d4.js → p-e2a9e441.js} +3 -3
  23. package/components/{p-b4c302d4.js.map → p-e2a9e441.js.map} +1 -1
  24. package/components/qds-badge-counter.js +1 -1
  25. package/components/qds-badge-indicator.js +1 -1
  26. package/components/qds-breadcrumb-item.js +7 -4
  27. package/components/qds-breadcrumb-item.js.map +1 -1
  28. package/components/qds-button.js +1 -1
  29. package/components/qds-checkbox.js +1 -1
  30. package/components/qds-chip.js +12 -9
  31. package/components/qds-chip.js.map +1 -1
  32. package/components/qds-dialog.js +3 -3
  33. package/components/qds-dialog.js.map +1 -1
  34. package/components/qds-divider.js +1 -1
  35. package/components/qds-dropdown.js +3 -3
  36. package/components/qds-form-message.js +4 -4
  37. package/components/qds-icon.js +1 -1
  38. package/components/qds-inline-link.js +4 -4
  39. package/components/qds-input.js +43 -17
  40. package/components/qds-input.js.map +1 -1
  41. package/components/qds-label.js +1 -1
  42. package/components/qds-list-item.js +5 -5
  43. package/components/qds-loader.js +3 -3
  44. package/components/qds-nav-list-item.js +6 -6
  45. package/components/qds-progress-bar.js +3 -3
  46. package/components/qds-radio.js +7 -7
  47. package/components/qds-radio.js.map +1 -1
  48. package/components/qds-select.js +2 -2
  49. package/components/qds-standalone-link.js +4 -4
  50. package/components/qds-switch.js +5 -5
  51. package/components/qds-switch.js.map +1 -1
  52. package/components/qds-tab.js +7 -7
  53. package/components/qds-tabbar.js +7 -7
  54. package/components/qds-table-body.js +2 -2
  55. package/components/qds-table-cell.js +2 -2
  56. package/components/qds-table-head-cell.js +1 -1
  57. package/components/qds-table-head.js +2 -2
  58. package/components/qds-table-row.js +2 -2
  59. package/components/qds-table.js +2 -2
  60. package/components/qds-tag.js +1 -1
  61. package/components/qds-textarea.js +1 -1
  62. package/components/qds-title.js +1 -1
  63. package/components/qds-tooltip.js +1 -1
  64. package/dist/cjs/{index-523dd2e0.js → index-dbcccf98.js} +6 -29
  65. package/dist/cjs/index-dbcccf98.js.map +1 -0
  66. package/dist/cjs/index.cjs.js +2 -2
  67. package/dist/cjs/{library-41b19b9e.js → library-23467d99.js} +8 -2
  68. package/dist/cjs/library-23467d99.js.map +1 -0
  69. package/dist/cjs/loader.cjs.js +2 -2
  70. package/dist/cjs/qds-badge-counter_2.cjs.entry.js +1 -1
  71. package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +6 -3
  72. package/dist/cjs/qds-breadcrumb-item.cjs.entry.js.map +1 -1
  73. package/dist/cjs/qds-button.cjs.entry.js +16 -8
  74. package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
  75. package/dist/cjs/qds-checkbox.cjs.entry.js +3 -3
  76. package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
  77. package/dist/cjs/qds-chip.cjs.entry.js +10 -7
  78. package/dist/cjs/qds-chip.cjs.entry.js.map +1 -1
  79. package/dist/cjs/qds-dialog.cjs.entry.js +3 -3
  80. package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -1
  81. package/dist/cjs/qds-divider.cjs.entry.js +2 -2
  82. package/dist/cjs/qds-dropdown.cjs.entry.js +3 -3
  83. package/dist/cjs/qds-form-message.cjs.entry.js +3 -3
  84. package/dist/cjs/qds-icon.cjs.entry.js +3 -3
  85. package/dist/cjs/qds-inline-link.cjs.entry.js +3 -3
  86. package/dist/cjs/qds-input.cjs.entry.js +36 -11
  87. package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
  88. package/dist/cjs/qds-label.cjs.entry.js +8 -5
  89. package/dist/cjs/qds-label.cjs.entry.js.map +1 -1
  90. package/dist/cjs/qds-list-item.cjs.entry.js +1 -1
  91. package/dist/cjs/qds-loader.cjs.entry.js +2 -2
  92. package/dist/cjs/qds-nav-list-item.cjs.entry.js +4 -4
  93. package/dist/cjs/qds-progress-bar.cjs.entry.js +3 -3
  94. package/dist/cjs/qds-radio.cjs.entry.js +4 -4
  95. package/dist/cjs/qds-radio.cjs.entry.js.map +1 -1
  96. package/dist/cjs/qds-select.cjs.entry.js +1 -1
  97. package/dist/cjs/qds-standalone-link.cjs.entry.js +3 -3
  98. package/dist/cjs/qds-switch.cjs.entry.js +5 -5
  99. package/dist/cjs/qds-switch.cjs.entry.js.map +1 -1
  100. package/dist/cjs/qds-tab.cjs.entry.js +1 -1
  101. package/dist/cjs/qds-tabbar.cjs.entry.js +1 -1
  102. package/dist/cjs/qds-table-body.cjs.entry.js +2 -2
  103. package/dist/cjs/qds-table-cell.cjs.entry.js +2 -2
  104. package/dist/cjs/qds-table-head-cell.cjs.entry.js +1 -1
  105. package/dist/cjs/qds-table-head.cjs.entry.js +2 -2
  106. package/dist/cjs/qds-table-row.cjs.entry.js +2 -2
  107. package/dist/cjs/qds-table.cjs.entry.js +2 -2
  108. package/dist/cjs/qds-tag_2.cjs.entry.js +7 -4
  109. package/dist/cjs/qds-tag_2.cjs.entry.js.map +1 -1
  110. package/dist/cjs/qds-textarea.cjs.entry.js +1 -1
  111. package/dist/cjs/qds-tooltip.cjs.entry.js +6 -21
  112. package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -1
  113. package/dist/cjs/qds.cjs.js +2 -2
  114. package/dist/custom-elements.json +50 -20
  115. package/dist/docs.json +1 -1
  116. package/dist/esm/{index-b1d6acd2.js → index-bc9462c1.js} +6 -30
  117. package/dist/esm/index-bc9462c1.js.map +1 -0
  118. package/dist/esm/index.js +2 -2
  119. package/dist/esm/{library-2e5458af.js → library-52ae166a.js} +8 -2
  120. package/dist/esm/library-52ae166a.js.map +1 -0
  121. package/dist/esm/loader.js +3 -3
  122. package/dist/esm/qds-badge-counter_2.entry.js +1 -1
  123. package/dist/esm/qds-breadcrumb-item.entry.js +6 -3
  124. package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
  125. package/dist/esm/qds-button.entry.js +16 -8
  126. package/dist/esm/qds-button.entry.js.map +1 -1
  127. package/dist/esm/qds-checkbox.entry.js +3 -3
  128. package/dist/esm/qds-checkbox.entry.js.map +1 -1
  129. package/dist/esm/qds-chip.entry.js +10 -7
  130. package/dist/esm/qds-chip.entry.js.map +1 -1
  131. package/dist/esm/qds-dialog.entry.js +3 -3
  132. package/dist/esm/qds-dialog.entry.js.map +1 -1
  133. package/dist/esm/qds-divider.entry.js +2 -2
  134. package/dist/esm/qds-dropdown.entry.js +3 -3
  135. package/dist/esm/qds-form-message.entry.js +3 -3
  136. package/dist/esm/qds-icon.entry.js +3 -3
  137. package/dist/esm/qds-inline-link.entry.js +3 -3
  138. package/dist/esm/qds-input.entry.js +36 -11
  139. package/dist/esm/qds-input.entry.js.map +1 -1
  140. package/dist/esm/qds-label.entry.js +8 -5
  141. package/dist/esm/qds-label.entry.js.map +1 -1
  142. package/dist/esm/qds-list-item.entry.js +1 -1
  143. package/dist/esm/qds-loader.entry.js +2 -2
  144. package/dist/esm/qds-nav-list-item.entry.js +4 -4
  145. package/dist/esm/qds-progress-bar.entry.js +3 -3
  146. package/dist/esm/qds-radio.entry.js +4 -4
  147. package/dist/esm/qds-radio.entry.js.map +1 -1
  148. package/dist/esm/qds-select.entry.js +1 -1
  149. package/dist/esm/qds-standalone-link.entry.js +3 -3
  150. package/dist/esm/qds-switch.entry.js +5 -5
  151. package/dist/esm/qds-switch.entry.js.map +1 -1
  152. package/dist/esm/qds-tab.entry.js +1 -1
  153. package/dist/esm/qds-tabbar.entry.js +1 -1
  154. package/dist/esm/qds-table-body.entry.js +2 -2
  155. package/dist/esm/qds-table-cell.entry.js +2 -2
  156. package/dist/esm/qds-table-head-cell.entry.js +1 -1
  157. package/dist/esm/qds-table-head.entry.js +2 -2
  158. package/dist/esm/qds-table-row.entry.js +2 -2
  159. package/dist/esm/qds-table.entry.js +2 -2
  160. package/dist/esm/qds-tag_2.entry.js +7 -4
  161. package/dist/esm/qds-tag_2.entry.js.map +1 -1
  162. package/dist/esm/qds-textarea.entry.js +1 -1
  163. package/dist/esm/qds-tooltip.entry.js +6 -21
  164. package/dist/esm/qds-tooltip.entry.js.map +1 -1
  165. package/dist/esm/qds.js +3 -3
  166. package/dist/types/components/input/input.d.ts +1 -0
  167. package/dist/types/components/tooltip/tooltip.d.ts +0 -2
  168. package/hydrate/index.js +134 -115
  169. package/hydrate/index.mjs +134 -115
  170. package/package.json +1 -1
  171. package/components/p-2806fee1.js.map +0 -1
  172. package/components/p-2bf0797c.js.map +0 -1
  173. package/components/p-a020ece3.js.map +0 -1
  174. package/components/p-a6310886.js.map +0 -1
  175. package/components/p-ba880369.js.map +0 -1
  176. package/components/p-c80f112a.js.map +0 -1
  177. package/components/p-d6e52d0b.js.map +0 -1
  178. package/dist/cjs/index-523dd2e0.js.map +0 -1
  179. package/dist/cjs/library-41b19b9e.js.map +0 -1
  180. package/dist/esm/index-b1d6acd2.js.map +0 -1
  181. package/dist/esm/library-2e5458af.js.map +0 -1
@@ -1 +1 @@
1
- {"file":"qds-input.entry.cjs.js","mappings":"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","names":["VALID_STATE","invariant","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n@-moz-document url-prefix() {\n [type='date'],\n [type='datetime-local'],\n [type='month'],\n [type='time'],\n [type='week'] {\n ~ .qds-icon-container {\n display: none;\n }\n }\n}\n\n.qds-container,\n.qds-input {\n max-width: inherit;\n width: inherit;\n}\n\n.qds-container {\n align-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'input';\n}\n\n.qds-icon {\n --qds-theme-interactive-background-hover: none;\n --qds-theme-interactive-background-pressed: none;\n --qds-control-small-height: var(--qds-control-small-icon-size);\n\n flex-shrink: 0;\n}\n\n.qds-input,\n.qds-icon-container {\n grid-area: input;\n}\n\n.qds-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n justify-self: end;\n padding-inline-end: var(--qds-control-input-padding-horizontal);\n\n &.no-padding {\n padding-inline-end: 0;\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: input;\n isolation: isolate;\n outline: var(--qds-control-input-focus-border-width) solid\n var(--qds-theme-control-input-focus-border);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n height: var(--qds-control-small-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n width: var(--qds-control-small-icon-size);\n height: var(--qds-control-small-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-small-gap-internal);\n margin-inline-start: var(--qds-control-small-gap-internal);\n }\n\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-small-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-small-text);\n height: var(--qds-control-small-height);\n margin-inline-end: var(--qds-control-small-gap-siblings-related);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-small-gap-internal);\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-small-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-small-gap-internal)\n );\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n height: var(--qds-control-standard-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(\n --qds-control-standard-height\n );\n\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-standard-gap-internal);\n margin-inline-start: var(--qds-control-standard-gap-internal);\n }\n\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-standard-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-standard-text);\n height: var(--qds-control-standard-height);\n margin-inline-end: var(--qds-control-standard-gap-siblings-related);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-standard-gap-internal);\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-standard-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-standard-gap-internal)\n );\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n height: var(--qds-control-large-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-large-gap-internal);\n margin-inline-start: var(--qds-control-large-gap-internal);\n }\n\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-large-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-large-text);\n height: var(--qds-control-large-height);\n margin-inline-end: var(--qds-control-large-gap-siblings-related);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &[type='number'] {\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-large-gap-internal);\n }\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-large-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-large-gap-internal)\n );\n }\n}\n\n.qds-input {\n appearance: textfield;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n grid-area: input;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &.qds-hide ~ .qds-icon-container {\n display: none;\n }\n\n &:disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n }\n\n &:focus-visible {\n outline: none;\n\n ~ .qds-focus-ring {\n visibility: visible;\n }\n }\n\n &:placeholder-shown {\n color: var(--qds-theme-control-text-placeholder);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n\n &:is(\n [type='date'],\n [type='datetime-local'],\n [type='month'],\n [type='time'],\n [type='week']\n )::-webkit-calendar-picker-indicator,\n &::-webkit-search-cancel-button {\n cursor: pointer;\n display: none;\n }\n\n &[type='file'] {\n padding-block: var(--qds-control-input-padding-horizontal);\n\n &::file-selector-button {\n background-color: transparent;\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n\n &[type='text'],\n &[type='password'],\n &[type='color'],\n &[type='number'] {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n\n &[type='color'] {\n appearance: none;\n min-width: 50px;\n padding-block: var(--qds-control-input-padding-horizontal);\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n }\n\n &::-moz-color-swatch {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n }\n\n cursor: pointer;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n\n &[data-size='small'],\n &[data-size='standard'],\n &[data-size='large'] {\n &.qds-search-padding {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n\n &[type='file'] {\n height: initial;\n }\n\n &.qds-padding {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n\n @-moz-document url-prefix() {\n &[type='date'],\n &[type='datetime-local'],\n &[type='month'],\n &[type='week'],\n &[type='time'] {\n padding-inline-end: var(--qds-control-input-padding-horizontal);\n }\n }\n }\n\n @-moz-document url-prefix() {\n &[type='number'] {\n appearance: none;\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type Capture = '' | 'environment' | 'user'\n\nexport type InputType =\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week'\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n tag: 'qds-input',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n /**\n * Hide the input type's icon.\n *\n * > **_NOTE:_** Due to browser limitations, the icon may not be hidden in\n * all browsers.\n */\n @Prop() public readonly noIcon?: boolean = false\n\n /**\n * The input's size.\n *\n * > **_NOTE:_** The native [`size` HTML attribute][size] is not supported.\n * CSS `width` should be used instead if this functionality is needed.\n *\n * [size]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Defines the file types the `file` type input should accept. This is a\n * comma-separated list of [unique file type specifiers][]. Because a given\n * file type may be identified in more than one manner, it's useful to\n * provide a thorough set of type specifiers when you files of a given format\n * are needed.\n *\n * For instance, there are a number of ways Microsoft Word files can be\n * identified, so a site that accepts Word files might use a `<qds-input>`\n * like this:\n *\n * @example\n * <qds-input\n * type=\"file\"\n * accept=\".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n * ></qds-input>\n *\n * [unique file type specifiers]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file#unique_file_type_specifiers\n *\n * @webnative\n */\n @Prop() public readonly accept?: string\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][autocomplete] for a complete list of\n * values and details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [autocomplete]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Specifies that a new file should be captured and which device should be\n * used to capture that new media of the type defined by `accept`.\n *\n * Values include `user`, `environment`, and `''`:\n *\n * - `user`: The user-facing camera and/or microphone should be used.\n * - `environment`: The outward-facing camera and/or microphone should be\n * used.\n * - `''`: The implementation-specific capture state.\n *\n * @webnative\n */\n @Prop() public readonly capture?: Capture\n\n /**\n * Prevents the input from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * What action label (or icon) to present for the enter key on virtual\n * keyboards. Possible values:\n *\n * - `\"done\"`: Typically meaning there is nothing more to input and the input\n * method editor (IME) will be closed.\n * - `\"enter\"`:\tTypically inserting a new line.\n * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n * they typed.\n * - `\"next\"`: \tTypically taking the user to the next field that will accept\n * text.\n * - `\"previous\"`: Typically taking the user to the previous field that will\n * accept text.\n * - `\"search\"`: Typically taking the user to the results of searching for\n * the text they have typed.\n * - `\"send\"`: Typically delivering the text to its target.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n /**\n * Returns a file list for a `file` type input.\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly files: HTMLInputElement['files'] = null\n\n /**\n * The [`<form>`][] element to associate the input with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-input>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-input>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Provide a hint to browsers as to the type of virtual keyboard\n * configuration to use when editing this element or its contents.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n @Prop() public readonly inputmode?: InputMode\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-input` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /**\n * Defines the greatest value in the range of permitted values. If the\n * `value` entered into the input exceeds this, the input fails\n * [constraint validation][]. Only valid for `date`, `datetime-local`,\n * `month`, `time`, and `week` inputs.\n *\n * If this value isn't a valid number, then the input has no maximum value.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n *\n * @webnative\n */\n @Prop() public readonly max?: number | string\n\n /**\n * The maximum number of characters (as UTF-16 code units) the user can enter\n * into the input. This must be an non-negative integer value. If no\n * `maxlength` is specified, or an invalid value is specified, the input has\n * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n * `text`, and `url` inputs.\n *\n * The input will fail [constraint validation][] if the length of the text\n * entered into the field is greater than `maxlength` UTF-16 code units long.\n * By default, browsers prevent users from entering more characters than\n * allowed by the `maxlength` attribute. See [Client-side validation][] for\n * more information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n /**\n * Defines the most negative value in the range of permitted values. If the\n * `value` entered into the input is less than this, the input fails\n * [constraint validation][]. Only valid for `date`, `datetime-local`,\n * `month`, `time`, and `week` inputs.\n *\n * This value must be less than or equal to the value of the `max` attribute.\n * If this value isn't a valid number, then the input has no minimum value.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n *\n * @webnative\n */\n @Prop() public readonly min?: number | string\n\n /**\n * The minimum number of characters (as UTF-16 code units) the user can enter\n * into the input. This must be an non-negative integer value smaller than or\n * equal to the value specified by `maxlength`. If no `minlength` is\n * specified, or an invalid value is specified, the input has no minimum\n * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n * `url` inputs.\n *\n * The input will fail [constraint validation][] if the length of the text\n * entered into the field is fewer than `minlength` UTF-16 code units long,\n * preventing form submission. See [Client-side validation][] for more\n * information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n /**\n * For `email` inputs, specifies if multiple comma-separated email addresses\n * can be entered. For `file` inputs, specifies if the user is allowed to\n * select more than one file.\n *\n * Only valid for `email` or `file` inputs.\n *\n * @webnative\n */\n @Prop() public readonly multiple?: boolean\n\n /**\n * The name of the input, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Defines a regular expression that the input's `value` must match in order\n * for the value to pass [constraint validation][]. It must be a valid\n * JavaScript regular expression, as used by the [`RegExp`][] type, and as\n * documented in MDN's [guide on regular expressions][]; the `'u'` flag is\n * specified when compiling the regular expression, so that the pattern is\n * treated as a sequence of Unicode code points, instead of as ASCII. No\n * forward slashes should be specified around the pattern text. Only valid\n * for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.\n *\n * If the `pattern` is invalid, no regular expression is applied and this\n * property is ignored. If the pattern is valid and a non-empty value does\n * not match the pattern, constraint validation will prevent form submission.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [`RegExp`]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp\n * [guide on regular expressions]: https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions\n *\n * @webnative\n */\n @Prop() public readonly pattern?: string\n\n /**\n * Text that appears in the input when it has no value set. Only valid for\n * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n *\n * @webnative\n */\n @Prop() public readonly placeholder?: string\n\n /**\n * A value must be specified for the input before the owning form can be\n * submitted. Not valid for `color` inputs.\n *\n * See [Client-side validation][] and the\n * [HTML attribute: `required`][required] for more information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [required]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * Get or set the selection direction of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n /**\n * Get or set the ending position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n /**\n * Get or set the starting position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionStart: HTMLInputElement['selectionStart'] = null\n\n /**\n * Specifies the granularity that the `value` must adhere to. Only valid for\n * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n *\n * The value must be a positive number—integer or float—or the special value\n * `any`, which means no stepping is implied, and any value is allowed\n * (barring other constraints, such as `min` and `max`).\n *\n * If `any` is not explicitly set, valid values for the `number` are the\n * basis for stepping — the `min` value and increments of the step value, up\n * to the `max` value, if specified.\n *\n * @webnative\n */\n @Prop() public readonly step?: number | 'any'\n\n /**\n * The type of input to render:\n *\n * - `\"date\"`: An input for entering a date (year, month, and day, with no\n * time). Opens a date picker or numeric wheels for year, month, day when\n * active in supporting browsers.\n * - `\"datetime-local\"`: An input for entering a date and time, with no time\n * zone. Opens a date picker or numeric wheels for date and time components\n * when active in supporting browsers.\n * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n * input, but has validation parameters and relevant keyboard in supporting\n * browsers and devices with dynamic keyboards.\n * - `\"month\"`: An input for entering a month and year, with no time zone.\n * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n * default validation when supported. Displays a numeric keypad in some\n * devices with dynamic keypads.\n * - `\"password\"`: A single-line text input whose value is obscured. Will\n * alert user if site is not secure.\n * - `\"search\"`: A single-line text input for entering search strings.\n * Line-breaks are automatically removed from the input value. May include a\n * delete icon in supporting browsers that can be used to clear the input.\n * Displays a search icon instead of enter key on some devices with dynamic\n * keypads.\n * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n * keypad in some devices with dynamic keypads.\n * - `\"text\"`: A single-line text input. Line-breaks are automatically\n * removed from the input value.\n * - `\"time\"`: An input for entering a time value with no time zone.\n * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n * has validation parameters and relevant keyboard in supporting browsers and\n * devices with dynamic keyboards.\n * - `\"week\"`: An input for entering a date consisting of a week-year number\n * and a week number with no time zone.\n *\n * @webnative\n */\n @Prop() public readonly type?: InputType\n\n /**\n * The error message that would be shown to the user if the `<qds-input>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-input>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the input.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * True if `<qds-input>` will be validated when the form is submitted; false\n * otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the input loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the user cancels the file picker via the <kbd>Esc</kbd> key\n * or the cancel button and when the user re-selects the same files that were\n * previously selected.\n */\n @Event({ eventName: 'qdsCancel', cancelable: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /**\n * Emitted when an alteration to the input's value is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the input gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the input's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.host.matches(':disabled') || (this.disabled ?? false)\n }\n\n get #computedIconName(): `input-${InputType}` | undefined {\n switch (this.type) {\n case 'date':\n case 'datetime-local':\n case 'email':\n case 'month':\n case 'search':\n case 'tel':\n case 'time':\n case 'url':\n case 'week': {\n return `input-${this.type}`\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n if (typeof this.value === 'number') return this.value.toString()\n // eslint-disable-next-line unicorn/no-null\n return this.value === undefined ? null : this.value\n }\n\n get #hasIcon(): boolean {\n return (\n typeof this.type === 'string' &&\n ['email', 'tel', 'url'].includes(this.type)\n )\n }\n\n get #hasInteractiveIcon(): boolean {\n return (\n typeof this.type === 'string' &&\n ['month', 'time', 'date', 'datetime-local', 'week'].includes(this.type)\n )\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === 'Enter' && this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectionDirection')\n protected selectionDirectionChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionDirection = this.selectionDirection\n }\n\n @Watch('selectionEnd')\n protected selectionEndChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionEnd = this.selectionEnd\n }\n\n @Watch('selectionStart')\n protected selectionStartChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionStart = this.selectionStart\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('max')\n @Watch('maxLength')\n @Watch('min')\n @Watch('minLength')\n @Watch('pattern')\n @Watch('required')\n @Watch('step')\n @Watch('type')\n @Watch('value')\n protected validationChanged(): void {\n if (!this.#input) return\n\n if (this.#input.max !== this.max && this.max !== undefined)\n this.#input.max = this.max.toString()\n if (this.maxLength !== undefined) this.#input.maxLength = this.maxLength\n if (this.#input.min !== this.min && this.min !== undefined)\n this.#input.min = this.min.toString()\n if (this.minLength !== undefined) this.#input.minLength = this.minLength\n if (this.pattern !== undefined) this.#input.pattern = this.pattern\n this.#input.required = this.required ?? false\n if (this.#input.step !== this.step && this.step !== undefined)\n this.#input.step = this.step.toString()\n if (this.type !== undefined) this.#input.type = this.type\n // eslint-disable-next-line unicorn/no-null\n if (this.type !== 'file' && this.value != null)\n this.#input.value = this.value.toString()\n\n const { valid } = this.#input.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#input)\n else\n this.internals.setValidity(\n this.#input.validity,\n this.#input.validationMessage,\n this.#input,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (!this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('files', this.#getFiles)\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#input)\n\n this.validationChanged()\n this.valueChanged()\n // FIXME: This event is supported by the native `<input>` element but not\n // recognized by Stencil's type definitions, so it needs to be manually\n // bound here.\n this.#input.addEventListener('cancel', this.#onCancel)\n }\n\n public disconnectedCallback(): void {\n if (this.#input) this.#input.removeEventListener('cancel', this.#onCancel)\n }\n\n public render() {\n const hasValue =\n this.value !== null && this.value !== undefined && this.value !== ''\n const isSearchType = this.type === 'search'\n const shouldShowClearButton = isSearchType && hasValue\n const shouldShowSearchIcon = isSearchType && this.noIcon === false\n const shouldHideIcon = !isSearchType && this.noIcon === true\n const shouldRemoveSearchPadding = isSearchType && this.noIcon === true\n\n return (\n <div class=\"qds-container\">\n <input\n accept={this.accept}\n autoCapitalize={this.host.autocapitalize}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n capture={this.capture}\n class={{\n 'qds-search-padding': shouldRemoveSearchPadding,\n 'qds-input': true,\n 'qds-hide': shouldHideIcon,\n 'qds-padding': shouldHideIcon,\n }}\n data-size={this.#computedSize}\n disabled={this.disabled}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n max={this.max}\n maxLength={this.maxLength}\n min={this.min}\n minLength={this.minLength}\n multiple={this.multiple}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n placeholder={this.placeholder}\n ref={this.#ref}\n spellcheck={this.host.spellcheck}\n step={this.step}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type={this.type}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <div class=\"qds-focus-ring\" />\n {this.#computedIconName && (\n <div\n class={{\n 'qds-icon-container': true,\n 'no-padding': shouldRemoveSearchPadding,\n }}\n >\n {shouldShowClearButton && (\n <qds-button\n class={{\n 'qds-icon': true,\n 'qds-hide': !hasValue,\n }}\n disabled={this.disabled}\n iconLibrary=\"core\"\n iconName=\"clear\"\n iconOnly\n importance=\"subdued\"\n onClick={this.#onClear}\n size=\"small\"\n text=\"clear input\"\n />\n )}\n {this.#hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedIconName}\n />\n )}\n {this.#hasInteractiveIcon && (\n <qds-button\n class=\"qds-icon\"\n disabled={this.disabled}\n iconLibrary=\"core\"\n iconName={this.#computedIconName}\n iconOnly\n importance=\"subdued\"\n onClick={this.showPicker}\n size=\"small\"\n text={this.type ?? ''}\n />\n )}\n {shouldShowSearchIcon ? (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedIconName}\n />\n ) : (\n <div />\n )}\n </div>\n )}\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n invariant(this.#input)\n\n this.#input.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#input)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public select: HTMLInputElement['select'] = () => {\n invariant(this.#input)\n\n this.#input.select()\n }\n\n public getSelectionDirection: () => HTMLInputElement['selectionDirection'] =\n () => {\n invariant(this.#input)\n\n return this.#input.selectionDirection\n }\n\n public getSelectionStart: () => HTMLInputElement['selectionStart'] = () => {\n invariant(this.#input)\n\n return this.#input.selectionStart\n }\n\n public getSelectionEnd: () => HTMLInputElement['selectionEnd'] = () => {\n invariant(this.#input)\n\n return this.#input.selectionEnd\n }\n\n public setRangeText = (\n replacement: string,\n start: number,\n end: number,\n selectionMode?: SelectionMode,\n ): void => {\n invariant(this.#input)\n\n this.#input.setRangeText(replacement, start, end, selectionMode)\n\n if (this.value !== this.#input.value) {\n this.value = this.#input.value\n this.inputEmitter.emit()\n this.changeEmitter.emit()\n }\n }\n\n public setSelectionRange: HTMLInputElement['setSelectionRange'] = (\n start,\n end,\n direction,\n ) => {\n invariant(this.#input)\n\n this.#input.setSelectionRange(start, end, direction)\n }\n\n public stepDown: HTMLInputElement['stepDown'] = (n) => {\n invariant(this.#input)\n\n this.#input.stepDown(n)\n }\n\n public stepUp: HTMLInputElement['stepUp'] = (n) => {\n invariant(this.#input)\n\n this.#input.stepUp(n)\n }\n\n public showPicker: HTMLInputElement['showPicker'] = () => {\n invariant(this.#input)\n\n this.#input.showPicker()\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\n }\n\n readonly #getFiles: () => HTMLInputElement['files'] = () => {\n invariant(this.#input)\n\n return this.#input.files\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onCancel = (): void => {\n this.cancelEmitter.emit()\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onClear = (): void => {\n invariant(this.#input)\n\n this.#input.value = ''\n this.#onInput(new InputEvent('input', { inputType: 'deleteContent' }))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#input)\n\n this.value = this.#input.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
1
+ {"file":"qds-input.entry.cjs.js","mappings":"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","names":["VALID_STATE","invariant","CUSTOM_ERROR_FLAGS","NO_ERROR_FLAGS","pickFocusEventAttributes","pickInputEventAttributes","inheritAriaAttributes","h"],"sources":["src/components/input/input.css?tag=qds-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n@-moz-document url-prefix() {\n [type='date'],\n [type='datetime-local'],\n [type='month'],\n [type='time'],\n [type='week'] {\n ~ .qds-icon-container {\n display: none;\n }\n }\n}\n\n.qds-container,\n.qds-input {\n max-width: inherit;\n width: inherit;\n}\n\n.qds-container {\n align-content: flex-start;\n align-items: center;\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'input';\n}\n\n.qds-icon {\n --qds-theme-interactive-background-hover: none;\n --qds-theme-interactive-background-pressed: none;\n --qds-control-small-height: var(--qds-control-small-icon-size);\n\n flex-shrink: 0;\n}\n\n.qds-input,\n.qds-icon-container {\n grid-area: input;\n}\n\n.qds-icon-container {\n display: flex;\n align-items: center;\n justify-content: center;\n justify-self: end;\n padding-inline-end: var(--qds-control-input-padding-horizontal);\n\n &.no-padding {\n padding-inline-end: 0;\n }\n}\n\n.qds-focus-ring {\n border-radius: max(\n 1px,\n var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-top-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n )\n max(\n 1px,\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n )\n );\n grid-area: input;\n isolation: isolate;\n outline: var(--qds-control-input-focus-border-width) solid\n var(--qds-theme-control-input-focus-border);\n pointer-events: none;\n visibility: hidden;\n width: calc(\n 100% + var(--qds-control-border-width) -\n var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n )\n );\n height: calc(\n 100% + var(--qds-control-border-width) -\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n );\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n height: var(--qds-control-small-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-small-height);\n\n width: var(--qds-control-small-icon-size);\n height: var(--qds-control-small-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-small-gap-internal);\n margin-inline-start: var(--qds-control-small-gap-internal);\n }\n\n &.qds-password-padding,\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-small-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-small-text);\n height: var(--qds-control-small-height);\n margin-inline-end: var(--qds-control-small-gap-siblings-related);\n padding-inline: var(--qds-control-button-small-padding-horizontal);\n }\n\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-small-gap-internal);\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-small-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-small-gap-internal)\n );\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n height: var(--qds-control-standard-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(\n --qds-control-standard-height\n );\n\n width: var(--qds-control-standard-icon-size);\n height: var(--qds-control-standard-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-standard-gap-internal);\n margin-inline-start: var(--qds-control-standard-gap-internal);\n }\n\n &.qds-password-padding,\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-standard-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-standard-text);\n height: var(--qds-control-standard-height);\n margin-inline-end: var(--qds-control-standard-gap-siblings-related);\n padding-inline: var(--qds-control-button-standard-padding-horizontal);\n }\n\n &[type='number']::-webkit-inner-spin-button,\n &[type='number']::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-standard-gap-internal);\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-standard-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-standard-gap-internal)\n );\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n height: var(--qds-control-large-height);\n\n &.qds-icon {\n --qds-experimental-icon-click-target-size: var(--qds-control-large-height);\n\n width: var(--qds-control-large-icon-size);\n height: var(--qds-control-large-icon-size);\n }\n\n & ~ .qds-icon-container {\n gap: var(--qds-control-large-gap-internal);\n margin-inline-start: var(--qds-control-large-gap-internal);\n }\n\n &.qds-password-padding,\n &[type='date'],\n &[type='datetime-local'],\n &[type='email'],\n &[type='month'],\n &[type='time'],\n &[type='url'],\n &[type='tel'],\n &[type='week'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-large-height)\n );\n }\n\n &[type='file']::file-selector-button {\n font: var(--qds-control-large-text);\n height: var(--qds-control-large-height);\n margin-inline-end: var(--qds-control-large-gap-siblings-related);\n padding-inline: var(--qds-control-button-large-padding-horizontal);\n }\n\n &[type='number'] {\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button {\n margin-inline-start: var(--qds-control-large-gap-internal);\n }\n }\n\n &[type='search'] {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) + var(--qds-control-large-icon-size) +\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-large-gap-internal)\n );\n }\n}\n\n.qds-input {\n appearance: textfield;\n background-color: var(--qds-theme-control-input-background);\n border-color: var(--qds-theme-control-border);\n border-radius: var(\n --qds-control-border-radius-top-left,\n var(--qds-control-border-radius)\n )\n var(--qds-control-border-radius-top-right, var(--qds-control-border-radius))\n var(\n --qds-control-border-radius-bottom-right,\n var(--qds-control-border-radius)\n )\n var(\n --qds-control-border-radius-bottom-left,\n var(--qds-control-border-radius)\n );\n border-style: solid;\n border-width: var(--qds-control-border-width)\n var(--qds-control-border-width-inline-end, var(--qds-control-border-width))\n var(--qds-control-border-width-block-end, var(--qds-control-border-width))\n var(--qds-control-border-width);\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n grid-area: input;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &.qds-hide ~ .qds-icon-container {\n display: none;\n }\n\n &:disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n }\n\n &:focus-visible {\n outline: none;\n\n ~ .qds-focus-ring {\n visibility: visible;\n }\n }\n\n &:placeholder-shown {\n color: var(--qds-theme-control-text-placeholder);\n }\n\n &:not(:focus):user-invalid {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n\n &:is(\n [type='date'],\n [type='datetime-local'],\n [type='month'],\n [type='time'],\n [type='week']\n )::-webkit-calendar-picker-indicator,\n &::-webkit-search-cancel-button {\n cursor: pointer;\n display: none;\n }\n\n &[type='file'] {\n padding-block: var(--qds-control-input-padding-horizontal);\n\n &::file-selector-button {\n background-color: transparent;\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n color: var(--qds-theme-control-text-standard);\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n }\n\n &[type='color'],\n &[type='number'] {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n\n &[type='color'] {\n appearance: none;\n min-width: 50px;\n padding-block: var(--qds-control-input-padding-horizontal);\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n }\n\n &::-moz-color-swatch {\n border: var(--qds-control-border-width) solid\n var(--qds-theme-control-border);\n border-radius: var(--qds-control-border-radius);\n }\n\n cursor: pointer;\n\n &:hover {\n background-color: var(--qds-theme-interactive-background-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-interactive-background-pressed);\n }\n }\n\n &[data-size='small'],\n &[data-size='standard'],\n &[data-size='large'] {\n &.qds-search-padding {\n padding-inline: var(--qds-control-input-padding-horizontal)\n calc(\n var(--qds-control-small-height) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n\n &[type='file'] {\n height: initial;\n }\n\n &.qds-padding {\n padding-inline: var(--qds-control-input-padding-horizontal);\n }\n\n @-moz-document url-prefix() {\n &[type='date'],\n &[type='datetime-local'],\n &[type='month'],\n &[type='week'],\n &[type='time'] {\n padding-inline-end: var(--qds-control-input-padding-horizontal);\n }\n }\n }\n\n @-moz-document url-prefix() {\n &[type='number'] {\n appearance: none;\n }\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n AttachInternals,\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type {\n Attributes,\n QdsFocusEventDetail,\n QdsInputEventDetail,\n} from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n pickInputEventAttributes,\n} from '../../helpers'\nimport type { AutoComplete, EnterKeyHint, InputMode, Value } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type Capture = '' | 'environment' | 'user'\n\nexport type InputType =\n | 'color'\n | 'date'\n | 'datetime-local'\n | 'email'\n | 'file'\n | 'month'\n | 'number'\n | 'password'\n | 'search'\n | 'tel'\n | 'text'\n | 'time'\n | 'url'\n | 'week'\n\n/**\n * The `<qds-input>` element is used to create interactive controls for\n * web-based forms in order to accept data from the user; a wide variety of\n * types of input data and control widgets are available, depending on the\n * device and\n * [user agent](https://developer.mozilla.org/docs/Glossary/User_agent).\n *\n * @see https://quartz.se.com/build/components/input\n */\n@Component({\n tag: 'qds-input',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'input.css',\n})\nexport class Input implements ComponentInterface {\n /**\n * Hide the input type's icon.\n *\n * > **_NOTE:_** Due to browser limitations, the icon may not be hidden in\n * all browsers.\n */\n @Prop() public readonly noIcon?: boolean = false\n\n /**\n * The input's size.\n *\n * > **_NOTE:_** The native [`size` HTML attribute][size] is not supported.\n * CSS `width` should be used instead if this functionality is needed.\n *\n * [size]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Defines the file types the `file` type input should accept. This is a\n * comma-separated list of [unique file type specifiers][]. Because a given\n * file type may be identified in more than one manner, it's useful to\n * provide a thorough set of type specifiers when you files of a given format\n * are needed.\n *\n * For instance, there are a number of ways Microsoft Word files can be\n * identified, so a site that accepts Word files might use a `<qds-input>`\n * like this:\n *\n * @example\n * <qds-input\n * type=\"file\"\n * accept=\".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document\"\n * ></qds-input>\n *\n * [unique file type specifiers]: https://developer.mozilla.org/docs/Web/HTML/Element/input/file#unique_file_type_specifiers\n *\n * @webnative\n */\n @Prop() public readonly accept?: string\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][autocomplete] for a complete list of\n * values and details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [autocomplete]: https://developer.mozilla.org/docs/Web/HTML/Attributes/autocomplete\n *\n * @webnative\n */\n @Prop({ attribute: 'autocomplete' })\n public readonly autoComplete?: AutoComplete\n\n /**\n * Specifies that a new file should be captured and which device should be\n * used to capture that new media of the type defined by `accept`.\n *\n * Values include `user`, `environment`, and `''`:\n *\n * - `user`: The user-facing camera and/or microphone should be used.\n * - `environment`: The outward-facing camera and/or microphone should be\n * used.\n * - `''`: The implementation-specific capture state.\n *\n * @webnative\n */\n @Prop() public readonly capture?: Capture\n\n /**\n * Prevents the input from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * What action label (or icon) to present for the enter key on virtual\n * keyboards. Possible values:\n *\n * - `\"done\"`: Typically meaning there is nothing more to input and the input\n * method editor (IME) will be closed.\n * - `\"enter\"`:\tTypically inserting a new line.\n * - `\"go\"`: \tTypically meaning to take the user to the target of the text\n * they typed.\n * - `\"next\"`: \tTypically taking the user to the next field that will accept\n * text.\n * - `\"previous\"`: Typically taking the user to the previous field that will\n * accept text.\n * - `\"search\"`: Typically taking the user to the results of searching for\n * the text they have typed.\n * - `\"send\"`: Typically delivering the text to its target.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `enterKeyHint` instead.\n @Prop() public readonly enterkeyhint?: EnterKeyHint\n\n /**\n * Returns a file list for a `file` type input.\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly files: HTMLInputElement['files'] = null\n\n /**\n * The [`<form>`][] element to associate the input with (its form owner).\n *\n * The value of this attribute must be the id of a `<form>` in the same\n * document. If this attribute is not set, the `<qds-input>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-input>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form\n *\n * @readonly\n * @webnative\n */\n // eslint-disable-next-line unicorn/no-null\n @Prop() public readonly form: ElementInternals['form'] | string = null\n\n /**\n * Provide a hint to browsers as to the type of virtual keyboard\n * configuration to use when editing this element or its contents.\n *\n * @webnative\n */\n // FIXME: Can't use `attribute` option here to name this `inputMode` instead.\n @Prop() public readonly inputmode?: InputMode\n\n /**\n * Returns a list of the [`<label>`][] elements associated with the\n * `qds-input` element.\n *\n * [`<label>`]: https://developer.mozilla.org/docs/Web/HTML/Element/label\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly labels: ElementInternals['labels'] =\n {} as ElementInternals['labels']\n\n /**\n * Defines the greatest value in the range of permitted values. If the\n * `value` entered into the input exceeds this, the input fails\n * [constraint validation][]. Only valid for `date`, `datetime-local`,\n * `month`, `time`, and `week` inputs.\n *\n * If this value isn't a valid number, then the input has no maximum value.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n *\n * @webnative\n */\n @Prop() public readonly max?: number | string\n\n /**\n * The maximum number of characters (as UTF-16 code units) the user can enter\n * into the input. This must be an non-negative integer value. If no\n * `maxlength` is specified, or an invalid value is specified, the input has\n * no maximum length. Only valid for `email`, `password`, `search`, `tel`,\n * `text`, and `url` inputs.\n *\n * The input will fail [constraint validation][] if the length of the text\n * entered into the field is greater than `maxlength` UTF-16 code units long.\n * By default, browsers prevent users from entering more characters than\n * allowed by the `maxlength` attribute. See [Client-side validation][] for\n * more information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'maxlength' }) public readonly maxLength?: number\n\n /**\n * Defines the most negative value in the range of permitted values. If the\n * `value` entered into the input is less than this, the input fails\n * [constraint validation][]. Only valid for `date`, `datetime-local`,\n * `month`, `time`, and `week` inputs.\n *\n * This value must be less than or equal to the value of the `max` attribute.\n * If this value isn't a valid number, then the input has no minimum value.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n *\n * @webnative\n */\n @Prop() public readonly min?: number | string\n\n /**\n * The minimum number of characters (as UTF-16 code units) the user can enter\n * into the input. This must be an non-negative integer value smaller than or\n * equal to the value specified by `maxlength`. If no `minlength` is\n * specified, or an invalid value is specified, the input has no minimum\n * length. Only valid for `email`, `password`, `search`, `tel`, `text`, and\n * `url` inputs.\n *\n * The input will fail [constraint validation][] if the length of the text\n * entered into the field is fewer than `minlength` UTF-16 code units long,\n * preventing form submission. See [Client-side validation][] for more\n * information.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n *\n * @webnative\n */\n @Prop({ attribute: 'minlength' }) public readonly minLength?: number\n\n /**\n * For `email` inputs, specifies if multiple comma-separated email addresses\n * can be entered. For `file` inputs, specifies if the user is allowed to\n * select more than one file.\n *\n * Only valid for `email` or `file` inputs.\n *\n * @webnative\n */\n @Prop() public readonly multiple?: boolean\n\n /**\n * The name of the input, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Defines a regular expression that the input's `value` must match in order\n * for the value to pass [constraint validation][]. It must be a valid\n * JavaScript regular expression, as used by the [`RegExp`][] type, and as\n * documented in MDN's [guide on regular expressions][]; the `'u'` flag is\n * specified when compiling the regular expression, so that the pattern is\n * treated as a sequence of Unicode code points, instead of as ASCII. No\n * forward slashes should be specified around the pattern text. Only valid\n * for `email`, `password`, `search`, `tel`, `text`, and `url` inputs.\n *\n * If the `pattern` is invalid, no regular expression is applied and this\n * property is ignored. If the pattern is valid and a non-empty value does\n * not match the pattern, constraint validation will prevent form submission.\n *\n * [constraint validation]: https://developer.mozilla.org/docs/Web/Guide/HTML/Constraint_validation\n * [`RegExp`]: https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/RegExp\n * [guide on regular expressions]: https://developer.mozilla.org/docs/Web/JavaScript/Guide/Regular_Expressions\n *\n * @webnative\n */\n @Prop() public readonly pattern?: string\n\n /**\n * Text that appears in the input when it has no value set. Only valid for\n * `email`, `number`, `password`, `search`, `tel`, `text`, and `url` inputs.\n *\n * @webnative\n */\n @Prop() public readonly placeholder?: string\n\n /**\n * A value must be specified for the input before the owning form can be\n * submitted. Not valid for `color` inputs.\n *\n * See [Client-side validation][] and the\n * [HTML attribute: `required`][required] for more information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [required]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * Get or set the selection direction of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionDirection: HTMLInputElement['selectionDirection'] = null\n\n /**\n * Get or set the ending position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionEnd: HTMLInputElement['selectionEnd'] = null\n\n /**\n * Get or set the starting position or offset of a text selection.\n *\n * > **_NOTE:_** This property has no effect when used as an attribute.\n *\n * @webnative\n */\n @Prop({ mutable: true })\n // eslint-disable-next-line unicorn/no-null\n public selectionStart: HTMLInputElement['selectionStart'] = null\n\n /**\n * Specifies the granularity that the `value` must adhere to. Only valid for\n * `date`, `datetime-local`, `month`, `number`, `time`, and `week` inputs.\n *\n * The value must be a positive number—integer or float—or the special value\n * `any`, which means no stepping is implied, and any value is allowed\n * (barring other constraints, such as `min` and `max`).\n *\n * If `any` is not explicitly set, valid values for the `number` are the\n * basis for stepping — the `min` value and increments of the step value, up\n * to the `max` value, if specified.\n *\n * @webnative\n */\n @Prop() public readonly step?: number | 'any'\n\n /**\n * The type of input to render:\n *\n * - `\"date\"`: An input for entering a date (year, month, and day, with no\n * time). Opens a date picker or numeric wheels for year, month, day when\n * active in supporting browsers.\n * - `\"datetime-local\"`: An input for entering a date and time, with no time\n * zone. Opens a date picker or numeric wheels for date and time components\n * when active in supporting browsers.\n * - `\"email\"`: An input for editing an email address. Looks like a `\"text\"`\n * input, but has validation parameters and relevant keyboard in supporting\n * browsers and devices with dynamic keyboards.\n * - `\"month\"`: An input for entering a month and year, with no time zone.\n * - `\"number\"`: An input for entering a number. Displays a spinner and adds\n * default validation when supported. Displays a numeric keypad in some\n * devices with dynamic keypads.\n * - `\"password\"`: A single-line text input whose value is obscured. Will\n * alert user if site is not secure.\n * - `\"search\"`: A single-line text input for entering search strings.\n * Line-breaks are automatically removed from the input value. May include a\n * delete icon in supporting browsers that can be used to clear the input.\n * Displays a search icon instead of enter key on some devices with dynamic\n * keypads.\n * - `\"tel\"`: An input for entering a telephone number. Displays a telephone\n * keypad in some devices with dynamic keypads.\n * - `\"text\"`: A single-line text input. Line-breaks are automatically\n * removed from the input value.\n * - `\"time\"`: An input for entering a time value with no time zone.\n * - `\"url\"`: An input for entering a URL. Looks like a `\"text\"` input, but\n * has validation parameters and relevant keyboard in supporting browsers and\n * devices with dynamic keyboards.\n * - `\"week\"`: An input for entering a date consisting of a week-year number\n * and a week number with no time zone.\n *\n * @webnative\n */\n @Prop() public readonly type?: InputType\n\n /**\n * The error message that would be shown to the user if the `<qds-input>`\n * was to be checked for validity.\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly validationMessage: ElementInternals['validationMessage'] = ''\n\n /**\n * The [`ValidityState`][] object for this `<qds-input>`.\n *\n * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly validity: ElementInternals['validity'] = VALID_STATE\n\n /**\n * The value of the input.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * True if `<qds-input>` will be validated when the form is submitted; false\n * otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly willValidate: ElementInternals['willValidate'] = false\n\n @AttachInternals() private readonly internals!: ElementInternals\n\n /**\n * Emitted when the input loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the user cancels the file picker via the <kbd>Esc</kbd> key\n * or the cancel button and when the user re-selects the same files that were\n * previously selected.\n */\n @Event({ eventName: 'qdsCancel', cancelable: false })\n private readonly cancelEmitter!: EventEmitter<void>\n\n /**\n * Emitted when an alteration to the input's value is committed by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the input gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the input's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n @State() private isPasswordVisible = false\n\n #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.host.matches(':disabled') || (this.disabled ?? false)\n }\n\n get #computedIconName():\n | `input-${InputType}`\n | `input-password-hide`\n | `input-password-show`\n | undefined {\n if (this.type === 'password')\n return this.isPasswordVisible\n ? 'input-password-hide'\n : 'input-password-show'\n\n switch (this.type) {\n case 'date':\n case 'datetime-local':\n case 'email':\n case 'month':\n case 'search':\n case 'tel':\n case 'time':\n case 'url':\n case 'week': {\n return `input-${this.type}`\n }\n default: {\n return undefined\n }\n }\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedValue(): Parameters<ElementInternals['setFormValue']>[0] {\n if (typeof this.value === 'number') return this.value.toString()\n // eslint-disable-next-line unicorn/no-null\n return this.value === undefined ? null : this.value\n }\n\n get #hasIcon(): boolean {\n return (\n typeof this.type === 'string' &&\n ['email', 'tel', 'url'].includes(this.type)\n )\n }\n\n get #hasInteractiveIcon(): boolean {\n return (\n typeof this.type === 'string' &&\n ['month', 'time', 'date', 'datetime-local', 'week', 'password'].includes(\n this.type,\n )\n )\n }\n\n get #iconClickHandler(): () => void {\n return this.type === 'password'\n ? this.#togglePasswordVisibility\n : this.showPicker\n }\n\n get #computedType(): InputType {\n return this.type === 'password' && this.isPasswordVisible\n ? 'text'\n : (this.type ?? 'text')\n }\n\n get #computedAriaLabel(): string {\n return this.type === 'password'\n ? this.isPasswordVisible\n ? 'Hide password'\n : 'Show password'\n : (this.type ?? '')\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\n }\n\n @Listen('keydown')\n protected onKeydown(event: KeyboardEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n if (event.key === 'Enter' && this.internals.form) {\n this.internals.form.requestSubmit()\n event.preventDefault()\n }\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n if (this.#computedDisabled)\n // eslint-disable-next-line unicorn/no-null\n this.internals.setFormValue(null)\n else this.internals.setFormValue(this.#computedValue)\n }\n\n @Watch('selectionDirection')\n protected selectionDirectionChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionDirection = this.selectionDirection\n }\n\n @Watch('selectionEnd')\n protected selectionEndChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionEnd = this.selectionEnd\n }\n\n @Watch('selectionStart')\n protected selectionStartChanged(): void {\n invariant(this.#input)\n\n this.#input.selectionStart = this.selectionStart\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n @Watch('max')\n @Watch('maxLength')\n @Watch('min')\n @Watch('minLength')\n @Watch('pattern')\n @Watch('required')\n @Watch('step')\n @Watch('type')\n @Watch('value')\n protected validationChanged(): void {\n if (!this.#input) return\n\n if (this.#input.max !== this.max && this.max !== undefined)\n this.#input.max = this.max.toString()\n if (this.maxLength !== undefined) this.#input.maxLength = this.maxLength\n if (this.#input.min !== this.min && this.min !== undefined)\n this.#input.min = this.min.toString()\n if (this.minLength !== undefined) this.#input.minLength = this.minLength\n if (this.pattern !== undefined) this.#input.pattern = this.pattern\n this.#input.required = this.required ?? false\n if (this.#input.step !== this.step && this.step !== undefined)\n this.#input.step = this.step.toString()\n this.#input.type = this.#computedType\n\n // eslint-disable-next-line unicorn/no-null\n if (this.type !== 'file' && this.value != null)\n this.#input.value = this.value.toString()\n\n const { valid } = this.#input.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#input)\n else\n this.internals.setValidity(\n this.#input.validity,\n this.#input.validationMessage,\n this.#input,\n )\n }\n\n @Watch('value')\n protected valueChanged(): void {\n if (!this.#computedDisabled)\n this.internals.setFormValue(this.#computedValue)\n }\n\n public componentWillLoad(): void {\n this.#defineGetter('form', () => this.internals.form)\n this.#defineGetter('willValidate', () => this.internals.willValidate)\n this.#defineGetter('validity', () => this.internals.validity)\n this.#defineGetter(\n 'validationMessage',\n () => this.internals.validationMessage,\n )\n this.#defineGetter('files', this.#getFiles)\n this.#defineGetter('labels', () => this.internals.labels)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#input)\n\n this.validationChanged()\n this.valueChanged()\n // FIXME: This event is supported by the native `<input>` element but not\n // recognized by Stencil's type definitions, so it needs to be manually\n // bound here.\n this.#input.addEventListener('cancel', this.#onCancel)\n }\n\n public disconnectedCallback(): void {\n if (this.#input) this.#input.removeEventListener('cancel', this.#onCancel)\n }\n\n public render() {\n const hasValue =\n this.value !== null && this.value !== undefined && this.value !== ''\n const isSearchType = this.type === 'search'\n const shouldShowClearButton = isSearchType && hasValue\n const shouldShowSearchIcon = isSearchType && this.noIcon === false\n const shouldHideIcon = !isSearchType && this.noIcon === true\n const shouldRemoveSearchPadding = isSearchType && this.noIcon === true\n\n return (\n <div class=\"qds-container\">\n <input\n accept={this.accept}\n autoCapitalize={this.host.autocapitalize}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n capture={this.capture}\n class={{\n 'qds-search-padding': shouldRemoveSearchPadding,\n 'qds-input': true,\n 'qds-hide': shouldHideIcon,\n 'qds-padding': shouldHideIcon,\n 'qds-password-padding':\n this.type === 'password' ||\n (this.isPasswordVisible && this.type === 'text'),\n }}\n data-size={this.#computedSize}\n disabled={this.disabled}\n enterKeyHint={this.enterkeyhint}\n inputMode={this.inputmode}\n max={this.max}\n maxLength={this.maxLength}\n min={this.min}\n minLength={this.minLength}\n multiple={this.multiple}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n placeholder={this.placeholder}\n ref={this.#ref}\n spellcheck={this.host.spellcheck}\n step={this.step}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type={this.#computedType}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <div class=\"qds-focus-ring\" />\n {this.#computedIconName && (\n <div\n class={{\n 'qds-icon-container': true,\n 'no-padding': shouldRemoveSearchPadding,\n }}\n >\n {shouldShowClearButton && (\n <qds-button\n class={{\n 'qds-icon': true,\n 'qds-hide': !hasValue,\n }}\n disabled={this.disabled}\n iconLibrary=\"core\"\n iconName=\"clear\"\n iconOnly\n importance=\"subdued\"\n onClick={this.#onClear}\n size=\"small\"\n text=\"clear input\"\n />\n )}\n {this.#hasIcon && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedIconName}\n />\n )}\n {this.#hasInteractiveIcon && (\n <qds-button\n class=\"qds-icon\"\n disabled={this.disabled}\n iconLibrary=\"core\"\n iconName={this.#computedIconName}\n iconOnly\n importance=\"subdued\"\n onClick={this.#iconClickHandler}\n size=\"small\"\n text={this.#computedAriaLabel}\n />\n )}\n {shouldShowSearchIcon ? (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name={this.#computedIconName}\n />\n ) : (\n <div />\n )}\n </div>\n )}\n </div>\n )\n }\n\n public checkValidity: ElementInternals['checkValidity'] = () =>\n this.internals.checkValidity()\n\n public reportValidity: ElementInternals['reportValidity'] = () =>\n this.internals.reportValidity()\n\n public setCustomValidity: HTMLInputElement['setCustomValidity'] = (error) => {\n invariant(this.#input)\n\n this.#input.setCustomValidity(error)\n if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#input)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n }\n\n public select: HTMLInputElement['select'] = () => {\n invariant(this.#input)\n\n this.#input.select()\n }\n\n public getSelectionDirection: () => HTMLInputElement['selectionDirection'] =\n () => {\n invariant(this.#input)\n\n return this.#input.selectionDirection\n }\n\n public getSelectionStart: () => HTMLInputElement['selectionStart'] = () => {\n invariant(this.#input)\n\n return this.#input.selectionStart\n }\n\n public getSelectionEnd: () => HTMLInputElement['selectionEnd'] = () => {\n invariant(this.#input)\n\n return this.#input.selectionEnd\n }\n\n public setRangeText = (\n replacement: string,\n start: number,\n end: number,\n selectionMode?: SelectionMode,\n ): void => {\n invariant(this.#input)\n\n this.#input.setRangeText(replacement, start, end, selectionMode)\n\n if (this.value !== this.#input.value) {\n this.value = this.#input.value\n this.inputEmitter.emit()\n this.changeEmitter.emit()\n }\n }\n\n public setSelectionRange: HTMLInputElement['setSelectionRange'] = (\n start,\n end,\n direction,\n ) => {\n invariant(this.#input)\n\n this.#input.setSelectionRange(start, end, direction)\n }\n\n public stepDown: HTMLInputElement['stepDown'] = (n) => {\n invariant(this.#input)\n\n this.#input.stepDown(n)\n }\n\n public stepUp: HTMLInputElement['stepUp'] = (n) => {\n invariant(this.#input)\n\n this.#input.stepUp(n)\n }\n\n public showPicker: HTMLInputElement['showPicker'] = () => {\n invariant(this.#input)\n\n this.#input.showPicker()\n }\n\n readonly #togglePasswordVisibility = (): void => {\n invariant(this.#input)\n this.isPasswordVisible = !this.isPasswordVisible\n\n this.#input.type = this.#computedType\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\n }\n\n readonly #getFiles: () => HTMLInputElement['files'] = () => {\n invariant(this.#input)\n\n return this.#input.files\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onCancel = (): void => {\n this.cancelEmitter.emit()\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onClear = (): void => {\n invariant(this.#input)\n\n this.#input.value = ''\n this.#onInput(new InputEvent('input', { inputType: 'deleteContent' }))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onInput = (event: InputEvent): void => {\n invariant(this.#input)\n\n this.value = this.#input.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
@@ -7,10 +7,10 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
  const helpers = require('./helpers-10154521.js');
12
12
 
13
- const labelCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap)}.qds-label:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}";
13
+ const labelCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-label{box-sizing:border-box;color:var(--qds-theme-control-text-standard);display:inline-flex;gap:var(--qds-text-icon-gap);width:100%}.qds-label:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-focus-border-width) solid var(--qds-theme-focus-border);outline-offset:var(--qds-focus-border-offset)}.qds-text{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}.qds-required{color:var(--qds-theme-feedback-field-required);-webkit-user-select:none;user-select:none}[data-size=small]{font:var(--qds-control-small-text)}.qds-inline[data-size=small]{margin-block:var(--qds-control-small-padding-auto-height)}[data-size=standard]{font:var(--qds-control-standard-text)}.qds-inline[data-size=standard]{margin-block:var(--qds-control-standard-padding-auto-height)}[data-size=large]{font:var(--qds-control-large-text)}.qds-inline[data-size=large]{margin-block:var(--qds-control-large-padding-auto-height)}";
14
14
  const QdsLabelStyle0 = labelCss;
15
15
 
16
16
  // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -73,7 +73,10 @@ const Label = class {
73
73
  __classPrivateFieldGet(this, _Label_ro, "f").disconnect();
74
74
  if (!__classPrivateFieldGet(this, _Label_span, "f"))
75
75
  return;
76
- this.tooltip = helpers.isOverflowing(__classPrivateFieldGet(this, _Label_span, "f"));
76
+ const span = __classPrivateFieldGet(this, _Label_span, "f");
77
+ index.readTask(() => {
78
+ this.tooltip = helpers.isOverflowing(span);
79
+ });
77
80
  __classPrivateFieldSet(this, _Label_ro, new ResizeObserver(([spanEntry]) => {
78
81
  this.tooltip = helpers.isOverflowing(spanEntry.target);
79
82
  }), "f");
@@ -87,12 +90,12 @@ const Label = class {
87
90
  __classPrivateFieldGet(this, _Label_ro, "f").disconnect();
88
91
  }
89
92
  render() {
90
- return (index.h("span", { key: '87f5b083f2433de63705377cd25132dd4b9a4ec8', class: {
93
+ return (index.h("span", { key: 'bd56de0869e706f0b028e0fb03e0cc946cbbf1fd', class: {
91
94
  'qds-inline': this.inline,
92
95
  'qds-label': true,
93
96
  }, "data-size": __classPrivateFieldGet(this, _Label_instances, "a", _Label_computedSize_get), ref: __classPrivateFieldGet(this, _Label_labelRef, "f"),
94
97
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
95
- tabIndex: this.tooltip ? 0 : undefined }, this.required && index.h("span", { key: '46a398ab4adb384d7117fd327a1c2dd9a3567a9e', class: "qds-required" }, "*"), index.h("span", { key: 'c62c558ab3a364c9310a6eaa0571d33a78675a13', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (index.h("qds-tooltip", { key: 'ddfb792feda73cad459fbfbc823cd2b84a11ed42', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
98
+ tabIndex: this.tooltip ? 0 : undefined }, this.required && index.h("span", { key: '9df743ea0b47028f9ae6951d88d2d353fd813a4b', class: "qds-required" }, "*"), index.h("span", { key: '680c6840424a63e6533230e249ec3b10ac5b0ab7', class: "qds-text", ref: __classPrivateFieldGet(this, _Label_spanRef, "f") }, this.text), this.tooltip && (index.h("qds-tooltip", { key: '6ec7e5624a50e5d9084580dcd40359fb88d9b8ff', "aria-hidden": "true", ref: __classPrivateFieldGet(this, _Label_tooltipRef, "f") }, this.text))));
96
99
  }
97
100
  static get watchers() { return {
98
101
  "text": ["textChanged"]
@@ -1 +1 @@
1
- {"file":"qds-label.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,u/BAAu/B,CAAC;AACzgC,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAkBa,KAAK;IALlB;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,aAAQ,GAAY,KAAK,CAAA;;;;QAKzB,SAAI,GAAU,UAAU,CAAA;QAO/B,YAAO,GAAG,KAAK,CAAA;QAEhC,+BAAwB;QAExB,4BAAoB;QAEpB,8BAAuB;QA6Dd,0BAAY,CAAC,KAAuB;YAC3C,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,yBAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,eAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,4BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,oBAAO,CAAA;SAC/B,EAAA;KACF;IA1DW,WAAW;QACnB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,mBAAM;YAAE,OAAM;QAEvB,IAAI,CAAC,OAAO,GAAGA,qBAAa,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;QACxC,uBAAA,IAAI,aAAO,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,OAAO,GAAGA,qBAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;SAC/C,CAAC,MAAA,CAAA;QACF,uBAAA,IAAI,iBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;KAC7B;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACEC,mEACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAU;;YAEnB,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,IAErC,IAAI,CAAC,QAAQ,IAAIA,mEAAM,KAAK,EAAC,cAAc,QAAS,EACrDA,mEAAM,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,uBAAA,IAAI,sBAAS,IACtC,IAAI,CAAC,IAAI,CACL,EACN,IAAI,CAAC,OAAO,KACXA,yFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,yBAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACI,EACR;KACF;;;;;;IAxDC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;","names":["isOverflowing","h"],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-label {\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n display: inline-flex;\n gap: var(--qds-text-icon-gap);\n\n &:focus-visible {\n outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n outline-offset: var(--qds-focus-border-offset);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-required {\n color: var(--qds-theme-feedback-field-required);\n user-select: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, State, Watch } from '@stencil/core'\n\nimport { isOverflowing } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n tag: 'qds-label',\n shadow: true,\n styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n /**\n * Adds vertical margin to the label for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * Specify the labelled item as required by appending a red asterisk (*).\n */\n @Prop() public readonly required: boolean = false\n\n /**\n * The label's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The label's text.\n */\n @Prop() public readonly text?: string\n\n @State() private tooltip = false\n\n #label?: HTMLSpanElement\n\n #ro?: ResizeObserver\n\n #span?: HTMLSpanElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#ro) this.#ro.disconnect()\n\n if (!this.#span) return\n\n this.tooltip = isOverflowing(this.#span)\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isOverflowing(spanEntry.target)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n ref={this.#labelRef}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={this.tooltip ? 0 : undefined}\n >\n {this.required && <span class=\"qds-required\">*</span>}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </span>\n )\n }\n\n readonly #labelRef = (label?: HTMLSpanElement): void => {\n this.#label = label\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#label\n }\n}\n"],"version":3}
1
+ {"file":"qds-label.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,kgCAAkgC,CAAC;AACphC,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAkBa,KAAK;IALlB;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,aAAQ,GAAY,KAAK,CAAA;;;;QAKzB,SAAI,GAAU,UAAU,CAAA;QAO/B,YAAO,GAAG,KAAK,CAAA;QAEhC,+BAAwB;QAExB,4BAAoB;QAEpB,8BAAuB;QAgEd,0BAAY,CAAC,KAAuB;YAC3C,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,yBAAW,CAAC,IAAsB;YACzC,uBAAA,IAAI,eAAS,IAAI,MAAA,CAAA;SAClB,EAAA;QAEQ,4BAAc,CAAC,OAA+B;YACrD,IAAI,OAAO;;gBAET,OAAO,CAAC,MAAM,GAAG,uBAAA,IAAI,oBAAO,CAAA;SAC/B,EAAA;KACF;IA7DW,WAAW;QACnB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;QAEnC,IAAI,CAAC,uBAAA,IAAI,mBAAM;YAAE,OAAM;QAEvB,MAAM,IAAI,GAAG,uBAAA,IAAI,mBAAM,CAAA;QACvBA,cAAQ,CAAC;YACP,IAAI,CAAC,OAAO,GAAGC,qBAAa,CAAC,IAAI,CAAC,CAAA;SACnC,CAAC,CAAA;QACF,uBAAA,IAAI,aAAO,IAAI,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;YACxC,IAAI,CAAC,OAAO,GAAGA,qBAAa,CAAC,SAAS,CAAC,MAAM,CAAC,CAAA;SAC/C,CAAC,MAAA,CAAA;QACF,uBAAA,IAAI,iBAAI,CAAC,OAAO,CAAC,uBAAA,IAAI,mBAAM,CAAC,CAAA;KAC7B;IAEM,gBAAgB;QACrB,IAAI,CAAC,WAAW,EAAE,CAAA;KACnB;IAEM,oBAAoB;QACzB,IAAI,uBAAA,IAAI,iBAAI;YAAE,uBAAA,IAAI,iBAAI,CAAC,UAAU,EAAE,CAAA;KACpC;IAEM,MAAM;QACX,QACEC,mEACE,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,EAC7B,GAAG,EAAE,uBAAA,IAAI,uBAAU;;YAEnB,QAAQ,EAAE,IAAI,CAAC,OAAO,GAAG,CAAC,GAAG,SAAS,IAErC,IAAI,CAAC,QAAQ,IAAIA,mEAAM,KAAK,EAAC,cAAc,QAAS,EACrDA,mEAAM,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,uBAAA,IAAI,sBAAS,IACtC,IAAI,CAAC,IAAI,CACL,EACN,IAAI,CAAC,OAAO,KACXA,yFAAyB,MAAM,EAAC,GAAG,EAAE,uBAAA,IAAI,yBAAY,IAClD,IAAI,CAAC,IAAI,CACE,CACf,CACI,EACR;KACF;;;;;;IA3DC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;;;;;","names":["readTask","isOverflowing","h"],"sources":["src/components/label/label.css?tag=qds-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n}\n\n.qds-label {\n box-sizing: border-box;\n color: var(--qds-theme-control-text-standard);\n display: inline-flex;\n gap: var(--qds-text-icon-gap);\n width: 100%;\n\n &:focus-visible {\n outline: var(--qds-focus-border-width) solid var(--qds-theme-focus-border);\n outline-offset: var(--qds-focus-border-offset);\n border-radius: var(--qds-focus-border-radius);\n }\n}\n\n.qds-text {\n display: -webkit-box;\n -webkit-box-orient: vertical;\n -webkit-line-clamp: 2;\n overflow: hidden;\n}\n\n.qds-required {\n color: var(--qds-theme-feedback-field-required);\n user-select: none;\n}\n\n[data-size='small'] {\n font: var(--qds-control-small-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n}\n\n[data-size='standard'] {\n font: var(--qds-control-standard-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n}\n\n[data-size='large'] {\n font: var(--qds-control-large-text);\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface } from '@stencil/core'\nimport { Component, h, Prop, readTask, State, Watch } from '@stencil/core'\n\nimport { isOverflowing } from '../../helpers'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-label>` elements represent a caption for an item in a user interface.\n *\n * @see https://quartz.se.com/build/components/label\n */\n@Component({\n tag: 'qds-label',\n shadow: true,\n styleUrl: 'label.css',\n})\nexport class Label implements ComponentInterface {\n /**\n * Adds vertical margin to the label for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * Specify the labelled item as required by appending a red asterisk (*).\n */\n @Prop() public readonly required: boolean = false\n\n /**\n * The label's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The label's text.\n */\n @Prop() public readonly text?: string\n\n @State() private tooltip = false\n\n #label?: HTMLSpanElement\n\n #ro?: ResizeObserver\n\n #span?: HTMLSpanElement\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n @Watch('text')\n protected textChanged(): void {\n if (this.#ro) this.#ro.disconnect()\n\n if (!this.#span) return\n\n const span = this.#span\n readTask(() => {\n this.tooltip = isOverflowing(span)\n })\n this.#ro = new ResizeObserver(([spanEntry]) => {\n this.tooltip = isOverflowing(spanEntry.target)\n })\n this.#ro.observe(this.#span)\n }\n\n public componentDidLoad(): void {\n this.textChanged()\n }\n\n public disconnectedCallback(): void {\n if (this.#ro) this.#ro.disconnect()\n }\n\n public render() {\n return (\n <span\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n ref={this.#labelRef}\n // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex\n tabIndex={this.tooltip ? 0 : undefined}\n >\n {this.required && <span class=\"qds-required\">*</span>}\n <span class=\"qds-text\" ref={this.#spanRef}>\n {this.text}\n </span>\n {this.tooltip && (\n <qds-tooltip aria-hidden=\"true\" ref={this.#tooltipRef}>\n {this.text}\n </qds-tooltip>\n )}\n </span>\n )\n }\n\n readonly #labelRef = (label?: HTMLSpanElement): void => {\n this.#label = label\n }\n\n readonly #spanRef = (span?: HTMLSpanElement): void => {\n this.#span = span\n }\n\n readonly #tooltipRef = (tooltip?: HTMLQdsTooltipElement): void => {\n if (tooltip)\n // eslint-disable-next-line no-param-reassign\n tooltip.target = this.#label\n }\n}\n"],"version":3}
@@ -7,7 +7,7 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
  const helpers = require('./helpers-10154521.js');
12
12
 
13
13
  const listItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-indented-content,.qds-list-item{align-items:center;box-sizing:border-box;display:flex}.qds-list-action{pointer-events:none}.qds-indented-content{align-self:stretch;flex:1 0}.qds-destination{transform:scaleX(var(--qds-direction-factor,1))}.qds-divider{border-block-end:var(--qds-list-border-width) solid var(--qds-theme-divider-standard)}.qds-icon{color:var(--qds-theme-text-standard)}.qds-texts{display:flex;flex:1 0;flex-direction:column;justify-items:center;padding:0;position:relative}.qds-input{-webkit-appearance:none;appearance:none;background:none;border:none;border-radius:var(--qds-control-border-radius);inset:0;margin:0;outline:none;position:absolute}.qds-title{color:var(--qds-theme-title)}.qds-subtitle{color:var(--qds-theme-subtitle)}.qds-kicker{color:var(--qds-theme-kicker)}.qds-list-item[data-size=small]{gap:var(--qds-list-item-small-gap-internal);padding-inline-start:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-indented-content{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline-end:var(--qds-list-item-small-padding-horizontal)}[data-size=small] .qds-icon{font-size:var(--qds-control-small-icon-size)}[data-size=small] .qds-main-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small] .qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-kicker{font:var(--qds-list-item-small-kicker)}[data-size=small] .qds-title{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtitle{font:var(--qds-list-item-small-subtitle)}.qds-list-item[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);padding-inline-start:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-indented-content{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline-end:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard] .qds-icon{font-size:var(--qds-control-standard-icon-size)}[data-size=standard] .qds-main-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard] .qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-kicker{font:var(--qds-list-item-standard-kicker)}[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtitle{font:var(--qds-list-item-standard-subtitle)}.qds-list-item[data-size=large]{gap:var(--qds-list-item-large-gap-internal);padding-inline-start:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-indented-content{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline-end:var(--qds-list-item-large-padding-horizontal)}[data-size=large] .qds-icon{font-size:var(--qds-control-large-icon-size)}[data-size=large] .qds-main-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large] .qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-kicker{font:var(--qds-list-item-large-kicker)}[data-size=large] .qds-title{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtitle{font:var(--qds-list-item-large-subtitle)}.qds-list-item:hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-list-item:active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-list-item:has(input:focus-visible){outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-selected.qds-list-item{background-color:var(--qds-theme-interactive-background-selected)}.qds-selected[data-size=small] .qds-title{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-title{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-title{font:var(--qds-list-item-large-title-emphasized)}:host(:last-of-type) .qds-divider{border-block-end:none}";
@@ -7,9 +7,9 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
 
12
- const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-control-small-icon-size);padding:var(--qds-signature-circle-progress-small-border-width);width:var(--qds-control-small-icon-size)}[data-size=standard]{height:var(--qds-control-standard-icon-size);padding:var(--qds-signature-circle-progress-standard-border-width);width:var(--qds-control-standard-icon-size)}[data-size=large]{height:var(--qds-control-large-icon-size);padding:var(--qds-signature-circle-progress-large-border-width);width:var(--qds-control-large-icon-size)}[data-size=jumbo]{height:var(--qds-control-jumbo-icon-size);padding:var(--qds-signature-circle-progress-jumbo-border-width);width:var(--qds-control-jumbo-icon-size)}[data-status=loading]{animation:a 1s linear infinite;background-image:var(--qds-theme-signature-circle-progress-indeterminate);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes a{to{transform:rotate(1turn)}}[data-status=success]{background-color:var(--qds-theme-feedback-result-success)}[data-status=warning]{background-color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{background-color:var(--qds-theme-feedback-result-failure)}";
12
+ const loaderCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-loader{border-radius:var(--qds-control-rounded-border-radius);box-sizing:border-box;color:var(--qds-theme-feedback-action-destructive-contrast)}[data-size=small]{height:var(--qds-control-small-icon-size);padding:var(--qds-signature-circle-progress-small-border-width);width:var(--qds-control-small-icon-size)}[data-size=standard]{height:var(--qds-control-standard-icon-size);padding:var(--qds-signature-circle-progress-standard-border-width);width:var(--qds-control-standard-icon-size)}[data-size=large]{height:var(--qds-control-large-icon-size);padding:var(--qds-signature-circle-progress-large-border-width);width:var(--qds-control-large-icon-size)}[data-size=jumbo]{height:var(--qds-control-jumbo-icon-size);padding:var(--qds-signature-circle-progress-jumbo-border-width);width:var(--qds-control-jumbo-icon-size)}[data-status=loading]{animation:b 1s linear infinite;background-image:var(--qds-theme-signature-circle-progress-indeterminate);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes b{to{transform:rotate(1turn)}}[data-status=success]{background-color:var(--qds-theme-feedback-result-success)}[data-status=warning]{background-color:var(--qds-theme-feedback-result-partial-success)}[data-status=error]{background-color:var(--qds-theme-feedback-result-failure)}";
13
13
  const QdsLoaderStyle0 = loaderCss;
14
14
 
15
15
  // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -7,7 +7,7 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
  const helpers = require('./helpers-10154521.js');
12
12
 
13
13
  const navListItemCss = ":host([hidden]){display:none!important}:host{display:block}.qds-button,.qds-nav-list-item,.qds-texts{display:flex}.qds-button,.qds-texts{flex:1 0}.qds-icon,.qds-text{color:var(--qds-theme-title)}.qds-button{align-items:center;-webkit-appearance:none;appearance:none;background:none;border:none;cursor:pointer;text-align:initial}.qds-button:focus-visible{border-radius:var(--qds-focus-border-radius);outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width)}.qds-button:not(.qds-selected):hover{background-color:var(--qds-theme-interactive-background-hover)}.qds-button:not(.qds-selected):active{background-color:var(--qds-theme-interactive-background-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-subtext{color:var(--qds-theme-subtitle)}.qds-texts{flex-direction:column}.qds-button[data-size=small]{gap:var(--qds-list-item-small-gap-internal);min-height:var(--qds-list-item-small-height);padding-block:var(--qds-list-item-small-padding-vertical);padding-inline:var(--qds-list-item-small-padding-horizontal)}[data-size=small]>.qds-icon{font-size:var(--qds-list-item-small-icon-size)}[data-size=small]>.qds-texts{gap:var(--qds-list-item-small-titles-gap)}[data-size=small] .qds-text{font:var(--qds-list-item-small-title)}[data-size=small] .qds-subtext{font:var(--qds-list-item-small-subtitle)}.qds-button[data-size=standard]{gap:var(--qds-list-item-standard-gap-internal);min-height:var(--qds-list-item-standard-height);padding-block:var(--qds-list-item-standard-padding-vertical);padding-inline:var(--qds-list-item-standard-padding-horizontal)}[data-size=standard]>.qds-icon{font-size:var(--qds-list-item-standard-icon-size)}[data-size=standard]>.qds-texts{gap:var(--qds-list-item-standard-titles-gap)}[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title)}[data-size=standard] .qds-subtext{font:var(--qds-list-item-standard-subtitle)}.qds-button[data-size=large]{gap:var(--qds-list-item-large-gap-internal);min-height:var(--qds-list-item-large-height);padding-block:var(--qds-list-item-large-padding-vertical);padding-inline:var(--qds-list-item-large-padding-horizontal)}[data-size=large]>.qds-icon{font-size:var(--qds-list-item-large-icon-size)}[data-size=large]>.qds-texts{gap:var(--qds-list-item-large-titles-gap)}[data-size=large] .qds-text{font:var(--qds-list-item-large-title)}[data-size=large] .qds-subtext{font:var(--qds-list-item-large-subtitle)}.qds-selected.qds-nav-list-item{background-color:var(\n --qds-theme-navigation-subsection-standard-background\n )}.qds-selected.qds-nav-list-item:after{background-color:var(--qds-theme-signature-color-default);border-radius:var(--qds-signature-line-connection-cap-radius);content:\"\";cursor:pointer;margin-right:calc(var(--qds-signature-line-connection-width)*-1/2);width:var(--qds-signature-line-connection-width)}.qds-selected .qds-icon{color:var(--qds-theme-signature-color-default)}.qds-selected[data-size=small] .qds-text{font:var(--qds-list-item-small-title-emphasized)}.qds-selected[data-size=standard] .qds-text{font:var(--qds-list-item-standard-title-emphasized)}.qds-selected[data-size=large] .qds-text{font:var(--qds-list-item-large-title-emphasized)}";
@@ -85,14 +85,14 @@ const NavListItem = class {
85
85
  this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0');
86
86
  }
87
87
  render() {
88
- return (index.h(index.Host, { key: 'd8fa60da531b9bd93a16c3e21f8d3ac3986c61a0' }, index.h("li", { key: 'fc5237181a7ec072fa4643e5b6702b25843698ae', class: {
88
+ return (index.h(index.Host, { key: '861bd4dceb564cea7ef0deb6f3968a967f4a8ecd' }, index.h("li", { key: '85fb0ded3ffe45b3b492b5d46c07e9a72589fc81', class: {
89
89
  'qds-nav-list-item': true,
90
90
  'qds-disabled': this.disabled,
91
91
  'qds-selected': this.selected,
92
- }, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, index.h("button", { key: '07ed4f3b4b369565bfa3807969d0d45795c66694', class: {
92
+ }, ref: __classPrivateFieldGet(this, _NavListItem_liRef, "f"), ...this.inheritedAttributes }, index.h("button", { key: '7c105a685c879cb014cc0cfd514bfdf1c5a86888', class: {
93
93
  'qds-button': true,
94
94
  'qds-selected': this.selected,
95
- }, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '920ce703bd408a135c97d0efa29da86bb8b08bc2', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (index.h("qds-tooltip", { key: '6cf3305f81a62bc2f1146298bfcd109f96ee7281', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
95
+ }, "data-size": __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_computedSize_get), disabled: this.disabled, onBlur: __classPrivateFieldGet(this, _NavListItem_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _NavListItem_onFocus, "f"), tabIndex: this.disabled ? undefined : this.tabIndex, type: "button" }, this.iconName !== undefined && this.iconName !== '' && (index.h("qds-icon", { key: '2c0a4554e721bb64bb59af6aeb3f4e6efa1362b7', "aria-hidden": "true", class: "qds-icon", library: this.iconLibrary, name: this.iconName })), !__classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && this.renderText())), __classPrivateFieldGet(this, _NavListItem_instances, "a", _NavListItem_shouldCollapse_get) && this.text && (index.h("qds-tooltip", { key: 'ec28ae83b18c2f6702e04331b09603085c77651b', placement: "right", ref: __classPrivateFieldGet(this, _NavListItem_tooltipRef, "f") }, this.renderText()))));
96
96
  }
97
97
  renderText() {
98
98
  return (index.h("div", { class: "qds-texts" }, index.h("div", { class: "qds-text" }, this.text), this.subtext !== undefined && this.subtext !== '' && (index.h("div", { class: "qds-subtext" }, this.subtext))));
@@ -7,9 +7,9 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
 
12
- const progressBarCss = ":host([hidden]){display:none!important}:host{display:block;width:100%}.qds-bar,.qds-track{overflow:hidden}.qds-track{background-color:var(--qds-theme-control-slider-track-inactive)}.qds-bar,.qds-track{border-radius:var(--qds-signature-line-progress-cap-radius)}.qds-bar{background-color:var(--qds-theme-signature-line-progress-determinate);transition:width .6s cubic-bezier(.83,0,.17,1)}@media (prefers-reduced-motion){.qds-bar{transition:none}}.qds-indeterminate{animation:b 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes b{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}[data-size=small]{height:var(--qds-signature-line-progress-small-height)}[data-size=standard]{height:var(--qds-signature-line-progress-standard-height)}[data-size=large]{height:var(--qds-signature-line-progress-large-height)}";
12
+ const progressBarCss = ":host([hidden]){display:none!important}:host{display:block;width:100%}.qds-bar,.qds-track{overflow:hidden}.qds-track{background-color:var(--qds-theme-control-slider-track-inactive)}.qds-bar,.qds-track{border-radius:var(--qds-signature-line-progress-cap-radius)}.qds-bar{background-color:var(--qds-theme-signature-line-progress-determinate);transition:width .6s cubic-bezier(.83,0,.17,1)}@media (prefers-reduced-motion){.qds-bar{transition:none}}.qds-indeterminate{animation:a 2s linear infinite;background-color:initial;background-image:var(--qds-theme-signature-line-progress-indeterminate)}@keyframes a{0%{transform:translateX(-100%)}to{transform:translateX(200%)}}[data-size=small]{height:var(--qds-signature-line-progress-small-height)}[data-size=standard]{height:var(--qds-signature-line-progress-standard-height)}[data-size=large]{height:var(--qds-signature-line-progress-large-height)}";
13
13
  const QdsProgressBarStyle0 = progressBarCss;
14
14
 
15
15
  // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -95,7 +95,7 @@ const ProgressBar = class {
95
95
  this.valueChanged();
96
96
  }
97
97
  render() {
98
- return (index.h("div", { key: 'a27fc224ae0a302c1303a7f8e3495b7085078b5f', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, index.h("div", { key: '35b538fed23adf5c01bc92c00dd9cf220ddd0634', class: {
98
+ return (index.h("div", { key: '89fad7b1dd2348a3f4c8a2571fe916d342166acb', "aria-hidden": "true", class: "qds-track", "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get) }, index.h("div", { key: '84ffc7461e57cc90cb8889e16d5cbdf229f0b9f3', class: {
99
99
  'qds-bar': true,
100
100
  'qds-indeterminate': __classPrivateFieldGet(this, _ProgressBar_position, "f") === -1,
101
101
  }, "data-size": __classPrivateFieldGet(this, _ProgressBar_instances, "a", _ProgressBar_computedSize_get), style: { width: this.width } })));
@@ -7,10 +7,10 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
  const helpers = require('./helpers-10154521.js');
12
12
 
13
- const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:i;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"i\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
13
+ const radioCss = "[hidden].sc-qds-radio-h{display:none!important}.sc-qds-radio-h{display:inline-block;line-height:0}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio,.qds-radio.sc-qds-radio{grid-area:i;place-self:center}.qds-box.sc-qds-radio,.qds-icon.sc-qds-radio{display:none;pointer-events:none}.qds-box.sc-qds-radio{border-radius:var(--qds-control-rounded-border-radius)}.qds-container.sc-qds-radio{align-self:flex-start;display:grid;grid-template-areas:\"i\"}.qds-icon.sc-qds-radio{color:var(--qds-theme-signature-color-contrast)}.qds-label.sc-qds-radio{cursor:pointer;display:inline-flex;width:inherit}.qds-label-inner.sc-qds-radio{flex:1 1 auto;min-width:0}.qds-radio.sc-qds-radio{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border:var(--qds-control-border-width) solid var(--qds-theme-control-border);border-radius:var(--qds-control-rounded-border-radius);cursor:pointer;margin:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}.qds-radio.sc-qds-radio:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio,.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:hover~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:active~.qds-box.sc-qds-radio{background-color:var(--qds-theme-signature-color-pressed)}.qds-radio.sc-qds-radio:checked{background-color:var(--qds-theme-signature-color-default);border-color:#0000}.qds-radio.sc-qds-radio:checked~.qds-icon.sc-qds-radio{display:block}.qds-radio.sc-qds-radio:checked:hover{background-color:var(--qds-theme-signature-color-hover)}.qds-radio.sc-qds-radio:checked:active{background-color:var(--qds-theme-signature-color-pressed)}[aria-disabled=true].sc-qds-radio{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-radio[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-box-small-size);width:var(--qds-control-toggle-box-small-size)}.qds-icon[data-size=small].sc-qds-radio{font-size:var(--qds-control-small-icon-size)}.qds-box[data-size=small].sc-qds-radio{height:var(--qds-control-toggle-indicator-small-size);width:var(--qds-control-toggle-indicator-small-size)}.qds-inline[data-size=small].sc-qds-radio{margin-block:var(--qds-control-small-padding-auto-height)}.qds-label[data-size=small].sc-qds-radio{gap:var(--qds-control-small-gap-siblings-related)}.qds-radio[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-box-standard-size);width:var(--qds-control-toggle-box-standard-size)}.qds-icon[data-size=standard].sc-qds-radio{font-size:var(--qds-control-standard-icon-size)}.qds-box[data-size=standard].sc-qds-radio{height:var(--qds-control-toggle-indicator-standard-size);width:var(--qds-control-toggle-indicator-standard-size)}.qds-inline[data-size=standard].sc-qds-radio{margin-block:var(--qds-control-standard-padding-auto-height)}.qds-label[data-size=standard].sc-qds-radio{gap:var(--qds-control-standard-gap-siblings-related)}.qds-radio[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-box-large-size);width:var(--qds-control-toggle-box-large-size)}.qds-icon[data-size=large].sc-qds-radio{font-size:var(--qds-control-large-icon-size)}.qds-box[data-size=large].sc-qds-radio{height:var(--qds-control-toggle-indicator-large-size);width:var(--qds-control-toggle-indicator-large-size)}.qds-inline[data-size=large].sc-qds-radio{margin-block:var(--qds-control-large-padding-auto-height)}.qds-label[data-size=large].sc-qds-radio{gap:var(--qds-control-large-gap-siblings-related)}";
14
14
  const QdsRadioStyle0 = radioCss;
15
15
 
16
16
  // SPDX-FileCopyrightText: © 2024 Schneider Electric
@@ -86,10 +86,10 @@ const Radio = class {
86
86
  render() {
87
87
  return (
88
88
  // eslint-disable-next-line jsx-a11y/label-has-associated-control
89
- index.h("label", { key: 'f99d16e9047808d58a0b9df5c82def391b8f3225', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
89
+ index.h("label", { key: '667293f89507bd2e846c4ed1ed5e70076a93f0ed', "aria-disabled": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? 'true' : undefined, class: {
90
90
  'qds-inline': this.inline,
91
91
  'qds-label': true,
92
- }, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: 'e4c7d0fd23677892234d64a198847fef0232fc6b', class: "qds-container" }, index.h("input", { key: '4a8f523abc487d43ea23ec2f507c474ce19bb7ba', checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("div", { key: 'b070acd21946c19f1aec067236a611767dc25caf', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }), index.h("qds-icon", { key: '5e666d8584249258f5fdf21fa413e315c5e3950a', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (index.h("qds-label", { key: '7ad8a439c6144598b090192451f72f8b6f29d581', size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
92
+ }, "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }, index.h("div", { key: '956dccf841262856939cc29165642846f8f4ae01', class: "qds-container" }, index.h("input", { key: '8920f9888ad5b49e667e9517a5eaaad66434b82b', checked: this.checked, class: "qds-radio", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), disabled: this.disabled, form: this.form, name: this.name, onBlur: __classPrivateFieldGet(this, _Radio_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Radio_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Radio_onFocus, "f"), ref: __classPrivateFieldGet(this, _Radio_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedDisabled_get) ? undefined : this.tabIndex, type: "radio", value: this.value ?? undefined, ...__classPrivateFieldGet(this, _Radio_inheritedAttributes, "f") }), index.h("div", { key: 'efb2a7e06ec89d59e744f3ecddc606b719570f70', class: "qds-box", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get) }), index.h("qds-icon", { key: '71851b402290456eeb9f467ff1efea93c4c0b1cd', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), library: "core", name: "checked" })), __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_hasText_get) && (index.h("qds-label", { key: '1b405bc19a6b884678a69b7adfff4a29cba2e6f0', class: "qds-label-inner", size: __classPrivateFieldGet(this, _Radio_instances, "a", _Radio_computedSize_get), text: this.text }))));
93
93
  }
94
94
  get host() { return index.getElement(this); }
95
95
  static get watchers() { return {
@@ -1 +1 @@
1
- {"file":"qds-radio.entry.cjs.js","mappings":";;;;;;;;;;;;AAAA,MAAM,QAAQ,GAAG,q/GAAq/G,CAAC;AACvgH,uBAAe,QAAQ;;ACDvB;AACA;AACA;;;;;;;;;;;;;;;;;;MAsCa,KAAK;IALlB;;;;;;;;;;;;QAY0B,WAAM,GAAY,KAAK,CAAA;;;;QAKvB,SAAI,GAAU,UAAU,CAAA;QA0FhD,qCAAmC,EAAE,EAAA;QAErC,+BAAyB;QA6FhB,qBAAO,CAAC,KAAwB;YACvC,uBAAA,IAAI,gBAAU,KAAK,MAAA,CAAA;SACpB,EAAA;QAEQ,wBAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAACA,gCAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,0BAAY;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,EAAA;QAEQ,yBAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAACA,gCAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;KACF;IApFW,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,qDAAkB,EAAE;YAC1B,KAAK,CAAC,wBAAwB,EAAE,CAAA;YAChC,OAAM;SACP;QAEDC,iBAAS,CAAC,uBAAA,IAAI,oBAAO,CAAC,CAAA;QAEtB,IAAI,CAAC,OAAO,GAAG,uBAAA,IAAI,oBAAO,CAAC,OAAO,CAAA;KACnC;IAGS,eAAe,CAAC,QAAgB;QACxC,MAAM,WAAW,GAAG,MAAM,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;QACjD,IAAI,CAAC,QAAQ;YACX,WAAW,KAAK,CAAC,IAAI,MAAM,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,SAAS,GAAG,WAAW,CAAA;KAC3E;IAEM,iBAAiB;QACtB,uBAAA,IAAI,8BAAwBC,6BAAqB,CAAC,IAAI,CAAC,IAAI,CAAC,MAAA,CAAA;QAC5D,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,IAAI,GAAG,CAAC,CAAA;KAChE;IAEM,MAAM;QACX;;QAEEC,qFACiB,uBAAA,IAAI,qDAAkB,GAAG,MAAM,GAAG,SAAS,EAC1D,KAAK,EAAE;gBACL,YAAY,EAAE,IAAI,CAAC,MAAM;gBACzB,WAAW,EAAE,IAAI;aAClB,eACU,uBAAA,IAAI,iDAAc,IAE7BA,kEAAK,KAAK,EAAC,eAAe,IACxBA,oEACE,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,KAAK,EAAC,WAAW,eACN,uBAAA,IAAI,iDAAc,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,uBAAA,IAAI,qBAAQ,EACpB,QAAQ,EAAE,uBAAA,IAAI,uBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,sBAAS,EACtB,GAAG,EAAE,uBAAA,IAAI,kBAAK,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,uBAAA,IAAI,qDAAkB,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,EAC5D,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,SAAS,KAE1B,uBAAA,IAAI,kCAAqB,GAC7B,EACFA,kEAAK,KAAK,EAAC,SAAS,eAAY,uBAAA,IAAI,iDAAc,GAAI,EACtDA,sFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,iDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,SAAS,GACd,CACE,EACL,uBAAA,IAAI,4CAAS,KACZA,wEAAW,IAAI,EAAE,uBAAA,IAAI,iDAAc,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CACzD,CACK,EACT;KACF;;;;;;;IAxFC,OAAO,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;AAC/B,CAAC;IAGC,QAAQ,IAAI,CAAC,IAAI;QACf,KAAK,UAAU,CAAC;QAChB,KAAK,OAAO,CAAC;QACb,KAAK,OAAO,EAAE;YACZ,OAAO,IAAI,CAAC,IAAI,CAAA;SACjB;QACD,SAAS;YACP,OAAO,UAAU,CAAA;SAClB;KACF;AACH,CAAC;IAGC,OAAO,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,IAAI,KAAK,EAAE,CAAA;AACpD,CAAC;;;;;","names":["pickFocusEventAttributes","invariant","inheritAriaAttributes","h"],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-radio,\n.qds-box,\n.qds-icon {\n grid-area: radio;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'radio';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n}\n\n.qds-radio {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-rounded-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n & ~ .qds-icon {\n display: block;\n }\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n tag: 'qds-radio',\n scoped: true,\n styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n /**\n * Adds vertical margin to the radio for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The radio button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The radio button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Sets the radio button's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the radio button from being interacted with: it cannot be pressed\n * or focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the radio button with (its form owner).\n *\n * The value of this property must be the id of a `<form>` in the same\n * document. If this property is not set, the `<qds-radio>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-radio>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * @webnative\n */\n @Prop() public readonly form?: string\n\n /**\n * Specify the radio group this radio button belongs to.\n *\n * Once a radio group is established, selecting any radio button in that\n * group automatically deselects any currently-selected radio button in the\n * same group.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Specify the group the radio button belongs to as required.\n *\n * If any radio button in a same-named group of radio buttons has the\n * `required` attribute, a radio button in that group must be checked,\n * although it doesn't have to be the one with the attribute applied.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The value of the radio button, submitted as a name/value pair with form\n * data.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the radio button is checked by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the radio button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n invariant(this.#input)\n\n this.checked = this.#input.checked\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n checked={this.checked}\n class=\"qds-radio\"\n data-size={this.#computedSize}\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"radio\"\n value={this.value ?? undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n </div>\n {this.#hasText && (\n <qds-label size={this.#computedSize} text={this.text} />\n )}\n </label>\n )\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
1
+ {"file":"qds-radio.entry.cjs.js","mappings":"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","names":["pickFocusEventAttributes","invariant","inheritAriaAttributes","h"],"sources":["src/components/radio/radio.css?tag=qds-radio&encapsulation=scoped","src/components/radio/radio.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: © 2024 Schneider Electric\n *\n * SPDX-License-Identifier: Apache-2.0\n */\n\n@import url('../shared.css');\n\n:host {\n display: inline-block;\n line-height: 0;\n}\n\n.qds-radio,\n.qds-box,\n.qds-icon {\n grid-area: radio;\n place-self: center;\n}\n\n.qds-icon,\n.qds-box {\n display: none;\n pointer-events: none;\n}\n\n.qds-box {\n border-radius: var(--qds-control-rounded-border-radius);\n}\n\n.qds-container {\n display: grid;\n align-self: flex-start;\n grid-template-areas: 'radio';\n}\n\n.qds-icon {\n color: var(--qds-theme-signature-color-contrast);\n}\n\n.qds-label {\n cursor: pointer;\n display: inline-flex;\n width: inherit;\n}\n\n.qds-label-inner {\n flex: 1 1 auto;\n min-width: 0;\n}\n\n.qds-radio {\n appearance: none;\n background-color: var(--qds-theme-control-input-background);\n border-radius: var(--qds-control-rounded-border-radius);\n border: var(--qds-control-border-width) solid var(--qds-theme-control-border);\n cursor: pointer;\n margin: 0;\n print-color-adjust: exact;\n\n &:focus-visible {\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\n }\n\n &:hover ~ .qds-box,\n &:active ~ .qds-box {\n display: block;\n }\n\n &:hover ~ .qds-box {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active ~ .qds-box {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n\n &:checked {\n background-color: var(--qds-theme-signature-color-default);\n border-color: transparent;\n\n & ~ .qds-icon {\n display: block;\n }\n\n &:hover {\n background-color: var(--qds-theme-signature-color-hover);\n }\n\n &:active {\n background-color: var(--qds-theme-signature-color-pressed);\n }\n }\n}\n\n[aria-disabled='true'] {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-small-size);\n height: var(--qds-control-toggle-box-small-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-small-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-small-size);\n height: var(--qds-control-toggle-indicator-small-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-small-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-small-gap-siblings-related);\n }\n}\n\n[data-size='standard'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-standard-size);\n height: var(--qds-control-toggle-box-standard-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-standard-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-standard-size);\n height: var(--qds-control-toggle-indicator-standard-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-standard-gap-siblings-related);\n }\n}\n\n[data-size='large'] {\n &.qds-radio {\n width: var(--qds-control-toggle-box-large-size);\n height: var(--qds-control-toggle-box-large-size);\n }\n\n &.qds-icon {\n font-size: var(--qds-control-large-icon-size);\n }\n\n &.qds-box {\n width: var(--qds-control-toggle-indicator-large-size);\n height: var(--qds-control-toggle-indicator-large-size);\n }\n\n &.qds-inline {\n margin-block: var(--qds-control-large-padding-auto-height);\n }\n\n &.qds-label {\n gap: var(--qds-control-large-gap-siblings-related);\n }\n}\n","// SPDX-FileCopyrightText: © 2024 Schneider Electric\n//\n// SPDX-License-Identifier: Apache-2.0\n\nimport type { ComponentInterface, EventEmitter } from '@stencil/core'\nimport {\n Component,\n Element,\n Event,\n h,\n Listen,\n Prop,\n State,\n Watch,\n} from '@stencil/core'\n\nimport type { Attributes, QdsFocusEventDetail } from '../../helpers'\nimport {\n inheritAriaAttributes,\n invariant,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Value } from '../controls'\nimport type { Size } from '../shared'\n\n/**\n * `<qds-radio>` elements are rendered as circles that are filled when\n * selected. They are generally used in **radio groups** — collections of radio\n * buttons describing a set of related options.\n *\n * Only one radio button in a given radio group can be selected at the same\n * time.\n *\n * @see https://quartz.se.com/build/components/radio\n */\n@Component({\n tag: 'qds-radio',\n scoped: true,\n styleUrl: 'radio.css',\n})\nexport class Radio implements ComponentInterface {\n /**\n * Adds vertical margin to the radio for alignment.\n *\n * This is useful when creating inline layouts so that the first lines have\n * the correct vertical centering.\n */\n @Prop() public readonly inline: boolean = false\n\n /**\n * The radio button's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * The radio button's text.\n */\n @Prop() public readonly text?: string\n\n /**\n * Sets the radio button's state.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public checked?: boolean\n\n /**\n * Prevents the radio button from being interacted with: it cannot be pressed\n * or focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`](https://developer.mozilla.org/docs/Web/HTML/Element/form)\n * element to associate the radio button with (its form owner).\n *\n * The value of this property must be the id of a `<form>` in the same\n * document. If this property is not set, the `<qds-radio>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This property lets you associate `<qds-radio>` elements to `<form>`s\n * anywhere in the document, not just inside a `<form>`. It can also override\n * an ancestor `<form>` element.\n *\n * @webnative\n */\n @Prop() public readonly form?: string\n\n /**\n * Specify the radio group this radio button belongs to.\n *\n * Once a radio group is established, selecting any radio button in that\n * group automatically deselects any currently-selected radio button in the\n * same group.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * Specify the group the radio button belongs to as required.\n *\n * If any radio button in a same-named group of radio buttons has the\n * `required` attribute, a radio button in that group must be checked,\n * although it doesn't have to be the one with the attribute applied.\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The value of the radio button, submitted as a name/value pair with form\n * data.\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value?: Value\n\n /**\n * Emitted when the radio button loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the radio button is checked by the user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the radio button gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLElement\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #input?: HTMLInputElement\n\n get #computedDisabled(): boolean {\n return this.disabled ?? false\n }\n\n get #computedSize(): Size {\n switch (this.size) {\n case 'standard':\n case 'small':\n case 'large': {\n return this.size\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #hasText(): boolean {\n return this.text !== undefined && this.text !== ''\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) {\n event.stopImmediatePropagation()\n return\n }\n\n invariant(this.#input)\n\n this.checked = this.#input.checked\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n this.tabIndex =\n parsedValue === 0 || Number.isNaN(parsedValue) ? undefined : parsedValue\n }\n\n public componentWillLoad(): void {\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public render() {\n return (\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n aria-disabled={this.#computedDisabled ? 'true' : undefined}\n class={{\n 'qds-inline': this.inline,\n 'qds-label': true,\n }}\n data-size={this.#computedSize}\n >\n <div class=\"qds-container\">\n <input\n checked={this.checked}\n class=\"qds-radio\"\n data-size={this.#computedSize}\n disabled={this.disabled}\n form={this.form}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n type=\"radio\"\n value={this.value ?? undefined}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n <div class=\"qds-box\" data-size={this.#computedSize} />\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"checked\"\n />\n </div>\n {this.#hasText && (\n <qds-label\n class=\"qds-label-inner\"\n size={this.#computedSize}\n text={this.text}\n />\n )}\n </label>\n )\n }\n\n readonly #ref = (input?: HTMLInputElement): void => {\n this.#input = input\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onChange = (): void => {\n this.changeEmitter.emit()\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n}\n"],"version":3}
@@ -7,7 +7,7 @@
7
7
 
8
8
  Object.defineProperty(exports, '__esModule', { value: true });
9
9
 
10
- const index = require('./index-523dd2e0.js');
10
+ const index = require('./index-dbcccf98.js');
11
11
  const helpers = require('./helpers-10154521.js');
12
12
  const controls = require('./controls-ee3d2ec8.js');
13
13