@quartzds/core 1.0.0-beta.81 → 1.0.0-beta.82

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 (264) hide show
  1. package/components/index.js +2 -2
  2. package/components/{p-7b04d43e.js → p-002e77af.js} +656 -328
  3. package/components/p-002e77af.js.map +1 -0
  4. package/components/{p-9df62f97.js → p-065d722e.js} +18 -7
  5. package/components/{p-9df62f97.js.map → p-065d722e.js.map} +1 -1
  6. package/components/{p-d279ae53.js → p-2e88c3cc.js} +11 -3
  7. package/components/p-2e88c3cc.js.map +1 -0
  8. package/components/{p-b82bac0a.js → p-84aae53b.js} +20 -11
  9. package/components/p-84aae53b.js.map +1 -0
  10. package/components/{p-698edde1.js → p-86778e81.js} +79 -44
  11. package/components/p-86778e81.js.map +1 -0
  12. package/components/{p-028b9d2e.js → p-86a0fdf3.js} +11 -4
  13. package/components/p-86a0fdf3.js.map +1 -0
  14. package/components/{p-7f6e797a.js → p-938d74a8.js} +17 -12
  15. package/components/p-938d74a8.js.map +1 -0
  16. package/components/{p-82461767.js → p-9a9561a8.js} +8 -80
  17. package/components/p-9a9561a8.js.map +1 -0
  18. package/components/{p-f5ba28ff.js → p-ae6eda4e.js} +41 -30
  19. package/components/p-ae6eda4e.js.map +1 -0
  20. package/components/{p-f85b490c.js → p-ed500f42.js} +72 -28
  21. package/components/p-ed500f42.js.map +1 -0
  22. package/components/{p-355efdb1.js → p-ee2621aa.js} +11 -5
  23. package/components/p-ee2621aa.js.map +1 -0
  24. package/components/{p-4141d6ed.js → p-efdb8fa2.js} +2 -2
  25. package/components/p-efdb8fa2.js.map +1 -0
  26. package/components/qds-badge-counter.js +1 -1
  27. package/components/qds-badge-indicator.js +1 -1
  28. package/components/qds-breadcrumb-item.js +65 -15
  29. package/components/qds-breadcrumb-item.js.map +1 -1
  30. package/components/qds-button.js +1 -1
  31. package/components/qds-checkbox.js +1 -1
  32. package/components/qds-chip.js +46 -25
  33. package/components/qds-chip.js.map +1 -1
  34. package/components/qds-dialog.js +9 -4
  35. package/components/qds-dialog.js.map +1 -1
  36. package/components/qds-divider.js +1 -1
  37. package/components/qds-dropdown.js +25 -18
  38. package/components/qds-dropdown.js.map +1 -1
  39. package/components/qds-form-message.js +18 -8
  40. package/components/qds-form-message.js.map +1 -1
  41. package/components/qds-icon.js +1 -1
  42. package/components/qds-inline-link.js +18 -17
  43. package/components/qds-inline-link.js.map +1 -1
  44. package/components/qds-input.js +116 -51
  45. package/components/qds-input.js.map +1 -1
  46. package/components/qds-label.js +1 -1
  47. package/components/qds-list-item.js +21 -22
  48. package/components/qds-list-item.js.map +1 -1
  49. package/components/qds-loader.js +6 -4
  50. package/components/qds-loader.js.map +1 -1
  51. package/components/qds-nav-list-item.js +32 -16
  52. package/components/qds-nav-list-item.js.map +1 -1
  53. package/components/qds-progress-bar.js +26 -8
  54. package/components/qds-progress-bar.js.map +1 -1
  55. package/components/qds-radio.js +25 -24
  56. package/components/qds-radio.js.map +1 -1
  57. package/components/qds-select.js +117 -27
  58. package/components/qds-select.js.map +1 -1
  59. package/components/qds-standalone-link.js +26 -19
  60. package/components/qds-standalone-link.js.map +1 -1
  61. package/components/qds-switch.js +70 -21
  62. package/components/qds-switch.js.map +1 -1
  63. package/components/qds-tab.js +71 -45
  64. package/components/qds-tab.js.map +1 -1
  65. package/components/qds-tabbar.js +34 -27
  66. package/components/qds-tabbar.js.map +1 -1
  67. package/components/qds-table-body.js +3 -3
  68. package/components/qds-table-body.js.map +1 -1
  69. package/components/qds-table-cell.js +3 -5
  70. package/components/qds-table-cell.js.map +1 -1
  71. package/components/qds-table-head-cell.js +3 -7
  72. package/components/qds-table-head-cell.js.map +1 -1
  73. package/components/qds-table-head.js +3 -3
  74. package/components/qds-table-head.js.map +1 -1
  75. package/components/qds-table-row.js +3 -3
  76. package/components/qds-table-row.js.map +1 -1
  77. package/components/qds-table.js +3 -3
  78. package/components/qds-table.js.map +1 -1
  79. package/components/qds-tag.js +1 -1
  80. package/components/qds-textarea.js +92 -35
  81. package/components/qds-textarea.js.map +1 -1
  82. package/components/qds-title.js +1 -1
  83. package/components/qds-tooltip.js +1 -1
  84. package/dist/cjs/helpers-cdd65bd0.js.map +1 -1
  85. package/dist/cjs/{index-a9985af0.js → index-644fe556.js} +720 -273
  86. package/dist/cjs/index-644fe556.js.map +1 -0
  87. package/dist/cjs/index.cjs.js +2 -2
  88. package/dist/cjs/{library-57845012.js → library-1fda56bc.js} +2 -2
  89. package/dist/cjs/{library-57845012.js.map → library-1fda56bc.js.map} +1 -1
  90. package/dist/cjs/loader.cjs.js +2 -2
  91. package/dist/cjs/qds-badge-counter_2.cjs.entry.js +151 -0
  92. package/dist/cjs/qds-badge-counter_2.cjs.entry.js.map +1 -0
  93. package/dist/cjs/qds-breadcrumb-item.cjs.entry.js +53 -12
  94. package/dist/cjs/qds-breadcrumb-item.cjs.entry.js.map +1 -1
  95. package/dist/cjs/qds-button.cjs.entry.js +73 -38
  96. package/dist/cjs/qds-button.cjs.entry.js.map +1 -1
  97. package/dist/cjs/qds-checkbox.cjs.entry.js +67 -22
  98. package/dist/cjs/qds-checkbox.cjs.entry.js.map +1 -1
  99. package/dist/cjs/qds-chip.cjs.entry.js +43 -21
  100. package/dist/cjs/qds-chip.cjs.entry.js.map +1 -1
  101. package/dist/cjs/qds-dialog.cjs.entry.js +8 -3
  102. package/dist/cjs/qds-dialog.cjs.entry.js.map +1 -1
  103. package/dist/cjs/qds-divider.cjs.entry.js +9 -3
  104. package/dist/cjs/qds-divider.cjs.entry.js.map +1 -1
  105. package/dist/cjs/qds-dropdown.cjs.entry.js +24 -17
  106. package/dist/cjs/qds-dropdown.cjs.entry.js.map +1 -1
  107. package/dist/cjs/qds-form-message.cjs.entry.js +16 -6
  108. package/dist/cjs/qds-form-message.cjs.entry.js.map +1 -1
  109. package/dist/cjs/qds-icon.cjs.entry.js +7 -5
  110. package/dist/cjs/qds-icon.cjs.entry.js.map +1 -1
  111. package/dist/cjs/qds-inline-link.cjs.entry.js +16 -15
  112. package/dist/cjs/qds-inline-link.cjs.entry.js.map +1 -1
  113. package/dist/cjs/qds-input.cjs.entry.js +109 -41
  114. package/dist/cjs/qds-input.cjs.entry.js.map +1 -1
  115. package/dist/cjs/qds-label.cjs.entry.js +16 -5
  116. package/dist/cjs/qds-label.cjs.entry.js.map +1 -1
  117. package/dist/cjs/qds-list-item.cjs.entry.js +17 -18
  118. package/dist/cjs/qds-list-item.cjs.entry.js.map +1 -1
  119. package/dist/cjs/qds-loader.cjs.entry.js +5 -3
  120. package/dist/cjs/qds-loader.cjs.entry.js.map +1 -1
  121. package/dist/cjs/qds-nav-list-item.cjs.entry.js +29 -13
  122. package/dist/cjs/qds-nav-list-item.cjs.entry.js.map +1 -1
  123. package/dist/cjs/qds-progress-bar.cjs.entry.js +26 -8
  124. package/dist/cjs/qds-progress-bar.cjs.entry.js.map +1 -1
  125. package/dist/cjs/qds-radio.cjs.entry.js +22 -21
  126. package/dist/cjs/qds-radio.cjs.entry.js.map +1 -1
  127. package/dist/cjs/qds-select.cjs.entry.js +114 -23
  128. package/dist/cjs/qds-select.cjs.entry.js.map +1 -1
  129. package/dist/cjs/qds-standalone-link.cjs.entry.js +24 -17
  130. package/dist/cjs/qds-standalone-link.cjs.entry.js.map +1 -1
  131. package/dist/cjs/qds-switch.cjs.entry.js +68 -18
  132. package/dist/cjs/qds-switch.cjs.entry.js.map +1 -1
  133. package/dist/cjs/qds-tab.cjs.entry.js +64 -38
  134. package/dist/cjs/qds-tab.cjs.entry.js.map +1 -1
  135. package/dist/cjs/qds-tabbar.cjs.entry.js +27 -20
  136. package/dist/cjs/qds-tabbar.cjs.entry.js.map +1 -1
  137. package/dist/cjs/qds-table-body.cjs.entry.js +2 -2
  138. package/dist/cjs/qds-table-body.cjs.entry.js.map +1 -1
  139. package/dist/cjs/qds-table-cell.cjs.entry.js +2 -4
  140. package/dist/cjs/qds-table-cell.cjs.entry.js.map +1 -1
  141. package/dist/cjs/qds-table-head-cell.cjs.entry.js +2 -6
  142. package/dist/cjs/qds-table-head-cell.cjs.entry.js.map +1 -1
  143. package/dist/cjs/qds-table-head.cjs.entry.js +2 -2
  144. package/dist/cjs/qds-table-head.cjs.entry.js.map +1 -1
  145. package/dist/cjs/qds-table-row.cjs.entry.js +2 -2
  146. package/dist/cjs/qds-table-row.cjs.entry.js.map +1 -1
  147. package/dist/cjs/qds-table.cjs.entry.js +2 -2
  148. package/dist/cjs/qds-table.cjs.entry.js.map +1 -1
  149. package/dist/cjs/qds-tag_2.cjs.entry.js +30 -16
  150. package/dist/cjs/qds-tag_2.cjs.entry.js.map +1 -1
  151. package/dist/cjs/qds-textarea.cjs.entry.js +90 -30
  152. package/dist/cjs/qds-textarea.cjs.entry.js.map +1 -1
  153. package/dist/cjs/{qds-badge-counter_3.cjs.entry.js → qds-tooltip.cjs.entry.js} +40 -152
  154. package/dist/cjs/qds-tooltip.cjs.entry.js.map +1 -0
  155. package/dist/cjs/qds.cjs.js +3 -3
  156. package/dist/cjs/qds.cjs.js.map +1 -1
  157. package/dist/custom-elements.json +102 -201
  158. package/dist/docs.d.ts +8 -0
  159. package/dist/docs.json +870 -630
  160. package/dist/esm/{helpers-4eb4fa44.js → helpers-d08540f8.js} +2 -2
  161. package/dist/esm/helpers-d08540f8.js.map +1 -0
  162. package/dist/esm/{index-5291e8ff.js → index-be1284b6.js} +720 -273
  163. package/dist/esm/index-be1284b6.js.map +1 -0
  164. package/dist/esm/index.js +2 -2
  165. package/dist/esm/{library-9edbe354.js → library-a92b7d9e.js} +2 -2
  166. package/dist/esm/{library-9edbe354.js.map → library-a92b7d9e.js.map} +1 -1
  167. package/dist/esm/loader.js +3 -3
  168. package/dist/esm/qds-badge-counter_2.entry.js +146 -0
  169. package/dist/esm/qds-badge-counter_2.entry.js.map +1 -0
  170. package/dist/esm/qds-breadcrumb-item.entry.js +54 -13
  171. package/dist/esm/qds-breadcrumb-item.entry.js.map +1 -1
  172. package/dist/esm/qds-button.entry.js +74 -39
  173. package/dist/esm/qds-button.entry.js.map +1 -1
  174. package/dist/esm/qds-checkbox.entry.js +69 -24
  175. package/dist/esm/qds-checkbox.entry.js.map +1 -1
  176. package/dist/esm/qds-chip.entry.js +44 -22
  177. package/dist/esm/qds-chip.entry.js.map +1 -1
  178. package/dist/esm/qds-dialog.entry.js +9 -4
  179. package/dist/esm/qds-dialog.entry.js.map +1 -1
  180. package/dist/esm/qds-divider.entry.js +10 -4
  181. package/dist/esm/qds-divider.entry.js.map +1 -1
  182. package/dist/esm/qds-dropdown.entry.js +25 -18
  183. package/dist/esm/qds-dropdown.entry.js.map +1 -1
  184. package/dist/esm/qds-form-message.entry.js +17 -7
  185. package/dist/esm/qds-form-message.entry.js.map +1 -1
  186. package/dist/esm/qds-icon.entry.js +8 -6
  187. package/dist/esm/qds-icon.entry.js.map +1 -1
  188. package/dist/esm/qds-inline-link.entry.js +17 -16
  189. package/dist/esm/qds-inline-link.entry.js.map +1 -1
  190. package/dist/esm/qds-input.entry.js +111 -43
  191. package/dist/esm/qds-input.entry.js.map +1 -1
  192. package/dist/esm/qds-label.entry.js +17 -6
  193. package/dist/esm/qds-label.entry.js.map +1 -1
  194. package/dist/esm/qds-list-item.entry.js +18 -19
  195. package/dist/esm/qds-list-item.entry.js.map +1 -1
  196. package/dist/esm/qds-loader.entry.js +5 -3
  197. package/dist/esm/qds-loader.entry.js.map +1 -1
  198. package/dist/esm/qds-nav-list-item.entry.js +30 -14
  199. package/dist/esm/qds-nav-list-item.entry.js.map +1 -1
  200. package/dist/esm/qds-progress-bar.entry.js +26 -8
  201. package/dist/esm/qds-progress-bar.entry.js.map +1 -1
  202. package/dist/esm/qds-radio.entry.js +23 -22
  203. package/dist/esm/qds-radio.entry.js.map +1 -1
  204. package/dist/esm/qds-select.entry.js +116 -25
  205. package/dist/esm/qds-select.entry.js.map +1 -1
  206. package/dist/esm/qds-standalone-link.entry.js +25 -18
  207. package/dist/esm/qds-standalone-link.entry.js.map +1 -1
  208. package/dist/esm/qds-switch.entry.js +70 -20
  209. package/dist/esm/qds-switch.entry.js.map +1 -1
  210. package/dist/esm/qds-tab.entry.js +65 -39
  211. package/dist/esm/qds-tab.entry.js.map +1 -1
  212. package/dist/esm/qds-tabbar.entry.js +28 -21
  213. package/dist/esm/qds-tabbar.entry.js.map +1 -1
  214. package/dist/esm/qds-table-body.entry.js +3 -3
  215. package/dist/esm/qds-table-body.entry.js.map +1 -1
  216. package/dist/esm/qds-table-cell.entry.js +3 -5
  217. package/dist/esm/qds-table-cell.entry.js.map +1 -1
  218. package/dist/esm/qds-table-head-cell.entry.js +3 -7
  219. package/dist/esm/qds-table-head-cell.entry.js.map +1 -1
  220. package/dist/esm/qds-table-head.entry.js +3 -3
  221. package/dist/esm/qds-table-head.entry.js.map +1 -1
  222. package/dist/esm/qds-table-row.entry.js +3 -3
  223. package/dist/esm/qds-table-row.entry.js.map +1 -1
  224. package/dist/esm/qds-table.entry.js +3 -3
  225. package/dist/esm/qds-table.entry.js.map +1 -1
  226. package/dist/esm/qds-tag_2.entry.js +31 -17
  227. package/dist/esm/qds-tag_2.entry.js.map +1 -1
  228. package/dist/esm/qds-textarea.entry.js +92 -32
  229. package/dist/esm/qds-textarea.entry.js.map +1 -1
  230. package/dist/esm/{qds-badge-counter_3.entry.js → qds-tooltip.entry.js} +42 -152
  231. package/dist/esm/qds-tooltip.entry.js.map +1 -0
  232. package/dist/esm/qds.js +4 -4
  233. package/dist/esm/qds.js.map +1 -1
  234. package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts +4 -0
  235. package/dist/types/components/checkbox/checkbox.d.ts +0 -6
  236. package/dist/types/components/chip/chip.d.ts +0 -6
  237. package/dist/types/components/input/input.d.ts +1 -29
  238. package/dist/types/components/select/select.d.ts +0 -6
  239. package/dist/types/components/switch/switch.d.ts +0 -6
  240. package/dist/types/components/tag/tag.d.ts +1 -1
  241. package/dist/types/components/textarea/textarea.d.ts +1 -28
  242. package/dist/types/components.d.ts +623 -91
  243. package/dist/types/stencil-public-runtime.d.ts +6 -0
  244. package/dist/vscode.html-custom-data.json +0 -80
  245. package/hydrate/index.d.ts +28 -5
  246. package/hydrate/index.js +2748 -1041
  247. package/hydrate/index.mjs +2748 -1041
  248. package/package.json +3 -3
  249. package/components/p-028b9d2e.js.map +0 -1
  250. package/components/p-355efdb1.js.map +0 -1
  251. package/components/p-4141d6ed.js.map +0 -1
  252. package/components/p-698edde1.js.map +0 -1
  253. package/components/p-7b04d43e.js.map +0 -1
  254. package/components/p-7f6e797a.js.map +0 -1
  255. package/components/p-82461767.js.map +0 -1
  256. package/components/p-b82bac0a.js.map +0 -1
  257. package/components/p-d279ae53.js.map +0 -1
  258. package/components/p-f5ba28ff.js.map +0 -1
  259. package/components/p-f85b490c.js.map +0 -1
  260. package/dist/cjs/index-a9985af0.js.map +0 -1
  261. package/dist/cjs/qds-badge-counter_3.cjs.entry.js.map +0 -1
  262. package/dist/esm/helpers-4eb4fa44.js.map +0 -1
  263. package/dist/esm/index-5291e8ff.js.map +0 -1
  264. package/dist/esm/qds-badge-counter_3.entry.js.map +0 -1
@@ -3,10 +3,10 @@
3
3
  *
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { p as proxyCustomElement, H, c as createEvent, h } from './p-7b04d43e.js';
7
- import { b as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, i as inheritAriaAttributes } from './p-4141d6ed.js';
8
- import { C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS, V as VALID_STATE } from './p-d107c90c.js';
9
- import { d as defineCustomElement$2 } from './p-82461767.js';
6
+ import { p as proxyCustomElement, H, c as createEvent, h } from './p-002e77af.js';
7
+ import { c as invariant, p as pickFocusEventAttributes, h as pickInputEventAttributes, i as inheritAriaAttributes } from './p-efdb8fa2.js';
8
+ import { V as VALID_STATE, C as CUSTOM_ERROR_FLAGS, N as NO_ERROR_FLAGS } from './p-d107c90c.js';
9
+ import { d as defineCustomElement$2 } from './p-9a9561a8.js';
10
10
 
11
11
  const selectCss = ":host([hidden]){display:none!important}:host{display:inline-block}slot{display:none}.qds-container{box-sizing:border-box;display:grid;grid-template-areas:\"i\";width:inherit}.qds-icon,.qds-select{color:var(--qds-theme-control-text-standard);grid-area:i}.qds-icon{margin-inline-end:calc(var(--qds-control-input-padding-horizontal) + var(--qds-control-border-width));place-self:center end;pointer-events:none}.qds-select{-webkit-appearance:none;appearance:none;background-color:var(--qds-theme-control-input-background);border-color:var(--qds-theme-control-border);border-radius:var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n ) var(--qds-control-border-radius-top-right,var(--qds-control-border-radius)) var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n ) var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n );border-style:solid;border-width:var(--qds-control-border-width) var(--qds-control-border-width-inline-end,var(--qds-control-border-width)) var(--qds-control-border-width-block-end,var(--qds-control-border-width)) var(--qds-control-border-width);margin:0;outline:0;padding-block:0;padding-inline:var(--qds-control-input-padding-horizontal)}.qds-select[aria-invalid=true]:not(:focus){border-color:var(--qds-theme-feedback-result-failure)}.qds-select:disabled,.qds-select:disabled+.qds-icon{opacity:var(--qds-theme-disabled)}:is(::slotted(optgroup),::slotted(optgroup:not(:disabled)>option),::slotted(option)):disabled{opacity:var(--qds-theme-disabled)}::slotted(optgroup){font:var(--qds-accessory-section-title)}::slotted(optgroup>option),::slotted(option){font:var(--qds-list-item-label-main)}.qds-select[data-size=small]{font:var(--qds-control-small-text)}.qds-select[data-size=small]:not([multiple]){height:var(--qds-control-small-height);padding-inline-end:calc(var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-select[data-size=standard]{font:var(--qds-control-standard-text)}.qds-select[data-size=standard]:not([multiple]){height:var(--qds-control-standard-height);padding-inline-end:calc(var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-select[data-size=large]{font:var(--qds-control-large-text)}.qds-select[data-size=large]:not([multiple]){height:var(--qds-control-large-height);padding-inline-end:calc(var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) + var(--qds-control-input-padding-horizontal))}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}.qds-focus-ring{border-radius:max(1px,var(\n --qds-control-border-radius-top-left,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-top-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-right,var(--qds-control-border-radius)\n )) max(1px,var(\n --qds-control-border-radius-bottom-left,var(--qds-control-border-radius)\n ));grid-area:i;height:calc(100% + var(--qds-control-border-width) - var(--qds-control-border-width-block-end, var(--qds-control-border-width)));isolation:isolate;outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset);pointer-events:none;visibility:hidden;width:calc(100% + var(--qds-control-border-width) - var(\n --qds-control-border-width-inline-end,\n var(--qds-control-border-width)\n ))}.qds-select:focus-visible~.qds-focus-ring{visibility:visible}";
12
12
  const QdsSelectStyle0 = selectCss;
@@ -54,6 +54,116 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
54
54
  this.inputEmitter = createEvent(this, "qdsInput", 6);
55
55
  this.internals = this.attachInternals();
56
56
  _Select_instances.add(this);
57
+ /**
58
+ * The select's size.
59
+ *
60
+ * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS
61
+ * `height` should be used instead if this functionality is needed.
62
+ *
63
+ * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size
64
+ */
65
+ this.size = 'standard';
66
+ /**
67
+ * The [`<form>`][] element to associate the select with (its form owner).
68
+ *
69
+ * The value of this attribute must be the id of a `<form>` in the same
70
+ * document. If this attribute is not set, the `<qds-select>` is associated
71
+ * with its ancestor `<form>` element, if any.
72
+ *
73
+ * This attribute lets you associate `<qds-select>` elements to `<form>`s
74
+ * anywhere in the document, not just inside a `<form>`. It can also override
75
+ * an ancestor `<form>` element.
76
+ *
77
+ * [`<form>`]: https://developer.mozilla.org/docs/Web/HTML/Element/form
78
+ *
79
+ * @readonly
80
+ * @webnative
81
+ */
82
+ // eslint-disable-next-line unicorn/no-null
83
+ this.form = null;
84
+ /**
85
+ * Returns the number of elements in the [`<option>`s collection][].
86
+ *
87
+ * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
88
+ *
89
+ * @readonly
90
+ * @webnative
91
+ */
92
+ this.length = 0;
93
+ /**
94
+ * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by
95
+ * the `<qds-select>` element.
96
+ *
97
+ * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection
98
+ * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
99
+ *
100
+ * @readonly
101
+ * @webnative
102
+ */
103
+ this.options = EMPTY_OPTIONS_COLLECTION;
104
+ /**
105
+ * The index of the first or last selected [`<option>`][] element, depending
106
+ * on the value of `multiple`. The value `-1` indicates that no element is
107
+ * selected.
108
+ *
109
+ * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
110
+ *
111
+ * @webnative
112
+ */
113
+ this.selectedIndex = -1;
114
+ /**
115
+ * Collection of the [`<option>`][] elements contained within the
116
+ * `<qds-select>` element that are currently selected.
117
+ *
118
+ * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
119
+ *
120
+ * @readonly
121
+ * @webnative
122
+ */
123
+ this.selectedOptions = EMPTY_OPTIONS_COLLECTION;
124
+ /**
125
+ * Returns `select-multiple` if the `multiple` attribute is true;
126
+ * `select-one` otherwise.
127
+ *
128
+ * @readonly
129
+ * @webnative
130
+ */
131
+ this.type = 'select-one';
132
+ /**
133
+ * The error message that would be shown to the user if the `<qds-select>`
134
+ * was to be checked for validity.
135
+ *
136
+ * @readonly
137
+ * @webnative
138
+ */
139
+ this.validationMessage = '';
140
+ /**
141
+ * The [`ValidityState`][] object for this `<qds-select>`.
142
+ *
143
+ * [`ValidityState`]: https://developer.mozilla.org/docs/Web/API/ValidityState
144
+ *
145
+ * @readonly
146
+ * @webnative
147
+ */
148
+ this.validity = VALID_STATE;
149
+ /**
150
+ * The `value` property of the first selected [`<option>`][] element, or the
151
+ * empty string if no options are selected.
152
+ *
153
+ * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option
154
+ *
155
+ * @webnative
156
+ */
157
+ this.value = '';
158
+ /**
159
+ * True if `<qds-select>` will be validated when the form is submitted;
160
+ * false otherwise.
161
+ *
162
+ * @readonly
163
+ * @webnative
164
+ */
165
+ this.willValidate = false;
166
+ this.invalid = false;
57
167
  _Select_inheritedAttributes.set(this, {});
58
168
  _Select_select.set(this, void 0);
59
169
  this.checkValidity = () => this.internals.checkValidity();
@@ -104,25 +214,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
104
214
  invariant(currentTarget instanceof HTMLSlotElement);
105
215
  __classPrivateFieldGet(this, _Select_select, "f").replaceChildren(...currentTarget.assignedNodes().map((node) => node.cloneNode(true)));
106
216
  });
107
- this.size = 'standard';
108
- this.autoComplete = undefined;
109
- this.autoFocus = undefined;
110
- this.disabled = undefined;
111
- this.form = null;
112
- this.length = 0;
113
- this.multiple = undefined;
114
- this.name = undefined;
115
- this.options = EMPTY_OPTIONS_COLLECTION;
116
- this.required = undefined;
117
- this.selectedIndex = -1;
118
- this.selectedOptions = EMPTY_OPTIONS_COLLECTION;
119
- this.type = 'select-one';
120
- this.validationMessage = '';
121
- this.validity = VALID_STATE;
122
- this.value = '';
123
- this.willValidate = false;
124
- this.invalid = false;
125
- this.tabIndex = undefined;
126
217
  }
127
218
  onClick(event) {
128
219
  if (__classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get))
@@ -173,12 +264,12 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
173
264
  this.selectedIndex = __classPrivateFieldGet(this, _Select_select, "f").selectedIndex;
174
265
  }
175
266
  render() {
176
- return (h("div", { key: '955b111e80d3349096ef98d69f5cc15f29efd012', class: {
267
+ return (h("div", { key: '9f3b12662f0690fd8d52c2d000c388f97687f9e5', class: {
177
268
  'qds-container': true,
178
269
  'qds-multiple': this.multiple ?? false,
179
- }, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: '1c09a8f5b76a50a53f694368eb4520b2ba320736', "aria-invalid": this.invalid.toString(), autoComplete: this.autoComplete,
270
+ }, "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get) }, h("select", { key: '48ee8e6bce787afbc957c08c8313fa7083425ff2', "aria-invalid": this.invalid.toString(), autoComplete: this.autoComplete,
180
271
  // eslint-disable-next-line jsx-a11y/no-autofocus
181
- autoFocus: this.autoFocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: '62e60ff482c9b7e5a00e78607a96c9f0f3250de3', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), library: "core", name: "dropdown" })), h("slot", { key: '0fba27d238da6b60c0cb7ccea6eb36c95e99e807', onSlotchange: __classPrivateFieldGet(this, _Select_onSlotchange, "f") }), h("div", { key: '2a532b44f24f9192121b4f4c9b0d80f52ba242a8', class: "qds-focus-ring" })));
272
+ autoFocus: this.host.autofocus, class: "qds-select", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), disabled: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get), multiple: this.multiple, name: this.name, onBlur: __classPrivateFieldGet(this, _Select_onBlur, "f"), onChange: __classPrivateFieldGet(this, _Select_onChange, "f"), onFocus: __classPrivateFieldGet(this, _Select_onFocus, "f"), onInput: __classPrivateFieldGet(this, _Select_onInput, "f"), ref: __classPrivateFieldGet(this, _Select_ref, "f"), required: this.required, tabIndex: __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedDisabled_get) ? undefined : this.tabIndex, ...__classPrivateFieldGet(this, _Select_inheritedAttributes, "f") }), this.multiple !== true && (h("qds-icon", { key: 'd1140445f956298664d0a6b1dd24e95664508354', "aria-hidden": "true", class: "qds-icon", "data-size": __classPrivateFieldGet(this, _Select_instances, "a", _Select_computedSize_get), library: "core", name: "dropdown" })), h("slot", { key: 'c62318f5f66813c10319993b352b2ef3831b3994', onSlotchange: __classPrivateFieldGet(this, _Select_onSlotchange, "f") }), h("div", { key: 'c9d396bc32870fdc20996286de72dabdb739af5e', class: "qds-focus-ring" })));
182
273
  }
183
274
  static get delegatesFocus() { return true; }
184
275
  static get formAssociated() { return true; }
@@ -194,7 +285,6 @@ const Select = /*@__PURE__*/ proxyCustomElement(class Select extends H {
194
285
  }, [81, "qds-select", {
195
286
  "size": [1],
196
287
  "autoComplete": [1, "autocomplete"],
197
- "autoFocus": [4, "autofocus"],
198
288
  "disabled": [4],
199
289
  "form": [1],
200
290
  "length": [2],
@@ -1 +1 @@
1
- {"file":"qds-select.js","mappings":"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","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.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\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\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 margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\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: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\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.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\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 } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: 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 * Specify whether the select should have focus when the page loads.\n *\n * @webnative\n */\n @Prop({ attribute: 'autofocus' })\n public readonly autoFocus?: boolean\n\n /**\n * Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the select 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-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` will be validated when the form is submitted;\n * false 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select's value changes.\n */\n @Event({ eventName: 'qdsInput', cancelable: false })\n private readonly inputEmitter!: EventEmitter<QdsInputEventDetail>\n\n @Element() private readonly host!: HTMLQdsSelectElement\n\n @State() private invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\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 #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\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('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\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('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\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\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.autoFocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\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 if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\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 readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\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-select.js","mappings":";;;;;;;;;;AAAA,MAAM,SAAS,GAAG,0zHAA0zH,CAAC;AAC70H,wBAAe,SAAS;;ACDxB;AACA;AACA;;;;;;;;;;;;;;;;;;AAgCA,MAAM,UAAU,GAAG;IACjB,SAAS,CAAC,KAAK,CAAC,CAAA;AAClB,CAAC,CAAA;AACD,MAAM,wBAAwB,GAAiC;IAC7D,MAAM,EAAE,CAAC;IACT,aAAa,EAAE,CAAC,CAAC;IACjB,GAAG,EAAE,UAAU;IACf,MAAM,EAAE,UAAU;IAClB,IAAI,EAAE,UAAU;IAChB,SAAS,EAAE,UAAU;IACrB,CAAC,MAAM,CAAC,QAAQ,GAAG,UAAU;CAC9B,CAAA;MAcY,MAAM;IANnB;;;;;;;;;;;;;;;;;;QAe0B,SAAI,GAAU,UAAU,CAAA;;;;;;;;;;;;;;;;;;QAwCxB,SAAI,GAAsC,IAAI,CAAA;;;;;;;;;QAU9C,WAAM,GAAgC,CAAC,CAAA;;;;;;;;;;;QA6BvC,YAAO,GAC7B,wBAAwB,CAAA;;;;;;;;;;QA0BnB,kBAAa,GAAuC,CAAC,CAAC,CAAA;;;;;;;;;;QAY7C,oBAAe,GAC7B,wBAAwB,CAAA;;;;;;;;QASF,SAAI,GAAe,YAAY,CAAA;;;;;;;;QAUvC,sBAAiB,GAA0C,EAAE,CAAA;;;;;;;;;QAUrD,aAAQ,GAAiC,WAAW,CAAA;;;;;;;;;QAU5C,UAAK,GAAI,EAAE,CAAA;;;;;;;;QASnB,iBAAY,GAAqC,KAAK,CAAA;QA+B7D,YAAO,GAAG,KAAK,CAAA;QAIhC,sCAAmC,EAAE,EAAA;QAErC,iCAA2B;QAgKpB,kBAAa,GAAsC,MACxD,IAAI,CAAC,SAAS,CAAC,aAAa,EAAE,CAAA;QAEzB,mBAAc,GAAuC,MAC1D,IAAI,CAAC,SAAS,CAAC,cAAc,EAAE,CAAA;QAE1B,sBAAiB,GAA0C,CAAC,KAAK;YACtE,IAAI,KAAK;gBACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,kBAAkB,EAAE,KAAK,EAAE,uBAAA,IAAI,sBAAQ,CAAC,CAAA;;gBAChE,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,CAAC,CAAA;YAC/C,IAAI,CAAC,OAAO,GAAG,CAAC,CAAC,KAAK,CAAA;SACvB,CAAA;QAEM,YAAO,GAA6B,CAAC,OAAO,EAAE,MAAM;YACzD,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,uBAAA,IAAI,sBAAQ,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC,CAAA;SAClC,CAAA;QAEM,eAAU,GAAG,CAAC,KAAa;YAChC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,uBAAA,IAAI,sBAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;SAC3B,CAAA;QAEM,SAAI,GAA8B,CAAC,KAAK;YAC7C,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;SAChC,CAAA;QAEM,cAAS,GAAmC,CAAC,IAAI;YACtD,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;SACpC,CAAA;QAEQ,sBAAO,CAAC,MAA0B;YACzC,uBAAA,IAAI,kBAAW,MAAM,MAAA,CAAA;SACtB,EAAA;QAEQ,yBAAU,CAAC,KAAiB;YACnC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACvD,EAAA;QAEQ,2BAAY;YACnB,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAA;SAC1B,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,0BAAW,CAAC,KAAiB;YACpC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YAEvB,IAAI,CAAC,KAAK,GAAG,uBAAA,IAAI,sBAAQ,CAAC,KAAK,CAAA;YAC/B,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC,CAAA;SACxD,EAAA;QAEQ,+BAAgB,CAAC,KAAY;YACpC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;YACvB,MAAM,EAAE,aAAa,EAAE,GAAG,KAAK,CAAA;YAC/B,SAAS,CAAC,aAAa,YAAY,eAAe,CAAC,CAAA;YAEnD,uBAAA,IAAI,sBAAQ,CAAC,eAAe,CAC1B,GAAG,aAAa,CAAC,aAAa,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CACrE,CAAA;SACF,EAAA;KAKF;IA5LW,OAAO,CAAC,KAAiB;QACjC,IAAI,uBAAA,IAAI,uDAAkB;YAAE,KAAK,CAAC,wBAAwB,EAAE,CAAA;KAC7D;IAGS,eAAe;QACvB,IAAI,uBAAA,IAAI,uDAAkB;;YAExB,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,IAAI,CAAC,CAAA;;YAC9B,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,uBAAA,IAAI,oDAAe,CAAC,CAAA;KACtD;IAGS,oBAAoB;QAC5B,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAA;KAChD;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;IAIS,iBAAiB;QACzB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,uBAAA,IAAI,sBAAQ,CAAC,KAAK,GAAG,uBAAA,IAAI,oDAAe,CAAA;QACxC,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAA;QAE9C,MAAM,EAAE,KAAK,EAAE,GAAG,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,CAAA;QACvC,IAAI,KAAK;YACP,IAAI,CAAC,SAAS,CAAC,WAAW,CAAC,cAAc,EAAE,SAAS,EAAE,uBAAA,IAAI,sBAAQ,CAAC,CAAA;;YAEnE,IAAI,CAAC,SAAS,CAAC,WAAW,CACxB,uBAAA,IAAI,sBAAQ,CAAC,QAAQ,EACrB,uBAAA,IAAI,sBAAQ,CAAC,iBAAiB,EAC9B,uBAAA,IAAI,sBAAQ,CACb,CAAA;QACH,IAAI,CAAC,OAAO,GAAG,CAAC,KAAK,CAAA;KACtB;IAEM,iBAAiB;QACtB,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;QACrD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,cAAc,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,YAAY,CAAC,CAAA;QACrE,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,UAAU,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAA;QAC7D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EACF,mBAAmB,EACnB,MAAM,IAAI,CAAC,SAAS,CAAC,iBAAiB,CACvC,CAAA;QAED,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,MAAM,EAAE,MAAM,uBAAA,IAAI,mDAAc,CAAC,CAAA;QACpD,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,SAAS,EAAE,MAAM,uBAAA,IAAI,sDAAiB,CAAC,CAAA;QAC1D,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,QAAQ,EAAE,MAAM,uBAAA,IAAI,sDAAiB,CAAC,MAAM,CAAC,CAAA;QAChE,uBAAA,IAAI,+CAAc,MAAlB,IAAI,EAAe,iBAAiB,EAAE,MAAM,uBAAA,IAAI,8DAAyB,CAAC,CAAA;QAE1E,uBAAA,IAAI,+BAAwB,qBAAqB,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,gBAAgB;QACrB,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;QAEvB,IAAI,CAAC,iBAAiB,EAAE,CAAA;QACxB,IAAI,CAAC,aAAa,GAAG,uBAAA,IAAI,sBAAQ,CAAC,aAAa,CAAA;KAChD;IAEM,MAAM;QACX,QACE,4DACE,KAAK,EAAE;gBACL,eAAe,EAAE,IAAI;gBACrB,cAAc,EAAE,IAAI,CAAC,QAAQ,IAAI,KAAK;aACvC,eACU,uBAAA,IAAI,mDAAc,IAE7B,+EACgB,IAAI,CAAC,OAAO,CAAC,QAAQ,EAAE,EACrC,YAAY,EAAE,IAAI,CAAC,YAAY;;YAE/B,SAAS,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAC9B,KAAK,EAAC,YAAY,eACP,uBAAA,IAAI,mDAAc,EAC7B,QAAQ,EAAE,uBAAA,IAAI,uDAAkB,EAChC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,MAAM,EAAE,uBAAA,IAAI,sBAAQ,EACpB,QAAQ,EAAE,uBAAA,IAAI,wBAAU,EACxB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,OAAO,EAAE,uBAAA,IAAI,uBAAS,EACtB,GAAG,EAAE,uBAAA,IAAI,mBAAK,EACd,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,uBAAA,IAAI,uDAAkB,GAAG,SAAS,GAAG,IAAI,CAAC,QAAQ,KAExD,uBAAA,IAAI,mCAAqB,GAC7B,EACD,IAAI,CAAC,QAAQ,KAAK,IAAI,KACrB,gFACc,MAAM,EAClB,KAAK,EAAC,UAAU,eACL,uBAAA,IAAI,mDAAc,EAC7B,OAAO,EAAC,MAAM,EACd,IAAI,EAAC,UAAU,GACf,CACH,EACD,6DAAM,YAAY,EAAE,uBAAA,IAAI,4BAAc,GAAI,EAC1C,4DAAK,KAAK,EAAC,gBAAgB,GAAG,CAC1B,EACP;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IA3JC,QACE,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,CAAC,KAAK,OAAO,EAC/C;AACH,CAAC;IAGC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,OAAO,CAAA;AAC7B,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,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,IAAI,CAAA;AAC1B,CAAC;IAGC,OAAO,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;AACzB,CAAC;IAGC,SAAS,CAAC,uBAAA,IAAI,sBAAQ,CAAC,CAAA;IAEvB,OAAO,uBAAA,IAAI,sBAAQ,CAAC,eAAe,CAAA;AACrC,CAAC,uDA4La,CAAc,EAAE,GAAkB;IAC9C,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,GAAG,EAAE,CAAC,CAAA;AAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/select/select.css?tag=qds-select&encapsulation=shadow","src/components/select/select.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\nslot {\n display: none;\n}\n\n.qds-container {\n box-sizing: border-box;\n display: grid;\n grid-template-areas: 'select';\n width: inherit;\n}\n\n.qds-icon,\n.qds-select {\n color: var(--qds-theme-control-text-standard);\n grid-area: select;\n}\n\n.qds-icon {\n margin-inline-end: calc(\n var(--qds-control-input-padding-horizontal) +\n var(--qds-control-border-width)\n );\n place-self: center end;\n pointer-events: none;\n}\n\n.qds-select {\n appearance: none;\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 margin: 0;\n outline: 0;\n padding-block: 0;\n padding-inline: var(--qds-control-input-padding-horizontal);\n\n &:not(:focus)[aria-invalid='true'] {\n border-color: var(--qds-theme-feedback-result-failure);\n }\n}\n\n.qds-select:disabled,\n.qds-select:disabled + .qds-icon {\n opacity: var(--qds-theme-disabled);\n}\n\n:is(\n ::slotted(optgroup),\n ::slotted(optgroup:not(:disabled) > option),\n ::slotted(option)\n ):disabled {\n opacity: var(--qds-theme-disabled);\n}\n\n::slotted(optgroup) {\n font: var(--qds-accessory-section-title);\n}\n\n::slotted(optgroup > option),\n::slotted(option) {\n font: var(--qds-list-item-label-main);\n}\n\n[data-size='small'] {\n &.qds-select {\n font: var(--qds-control-small-text);\n\n &:not([multiple]) {\n height: var(--qds-control-small-height);\n padding-inline-end: calc(\n var(--qds-control-small-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-select {\n font: var(--qds-control-standard-text);\n\n &:not([multiple]) {\n height: var(--qds-control-standard-height);\n padding-inline-end: calc(\n var(--qds-control-standard-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-select {\n font: var(--qds-control-large-text);\n\n &:not([multiple]) {\n height: var(--qds-control-large-height);\n padding-inline-end: calc(\n var(--qds-control-large-icon-size) + var(--qds-text-icon-gap) +\n var(--qds-control-input-padding-horizontal)\n );\n }\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\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: select;\n isolation: isolate;\n outline: var(--qds-theme-focus-border) solid var(--qds-focus-border-width);\n outline-offset: var(--qds-focus-border-offset);\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.qds-select:focus-visible ~ .qds-focus-ring {\n visibility: visible;\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 } from '../controls'\nimport { CUSTOM_ERROR_FLAGS, NO_ERROR_FLAGS, VALID_STATE } from '../controls'\nimport type { Size } from '../shared'\n\nexport type SelectType = 'select-multiple' | 'select-one'\n\nconst throwError = (): never => {\n invariant(false)\n}\nconst EMPTY_OPTIONS_COLLECTION: HTMLSelectElement['options'] = {\n length: 0,\n selectedIndex: -1,\n add: throwError,\n remove: throwError,\n item: throwError,\n namedItem: throwError,\n [Symbol.iterator]: throwError,\n}\n\n/**\n * The `<qds-select>` element represents a control that provides a menu of\n * options.\n *\n * @see https://quartz.se.com/build/components/select\n */\n@Component({\n tag: 'qds-select',\n formAssociated: true,\n shadow: { delegatesFocus: true },\n styleUrl: 'select.css',\n})\nexport class Select implements ComponentInterface {\n /**\n * The select's size.\n *\n * > ***NOTE:*** The native [`size` HTML attribute] is not supported. CSS\n * `height` should be used instead if this functionality is needed.\n *\n * [`size` HTML attribute]: https://developer.mozilla.org/docs/Web/HTML/Attributes/size\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Provides a hint for a [user agent's][] autocomplete feature. See\n * [the HTML `autocomplete` attribute][] for a complete list of values and\n * details on how to use `autoComplete`.\n *\n * [user agent's]: https://developer.mozilla.org/docs/Glossary/User_agent\n * [the HTML `autocomplete` attribute]: 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 * Prevents the select from being interacted with: it cannot be pressed or\n * focused.\n *\n * @webnative\n */\n @Prop() public readonly disabled?: boolean\n\n /**\n * The [`<form>`][] element to associate the select 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-select>` is associated\n * with its ancestor `<form>` element, if any.\n *\n * This attribute lets you associate `<qds-select>` 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 * Returns the number of elements in the [`<option>`s collection][].\n *\n * [`<option>`s collection]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly length: HTMLSelectElement['length'] = 0\n\n /**\n * Indicates that multiple options can be selected in the list. If it is not\n * specified, then only one option can be selected at a time. When `multiple`\n * is specified, most browsers will show a scrolling list box instead of a\n * single line dropdown.\n *\n * @webnative\n */\n @Prop() public multiple?: boolean\n\n /**\n * The name of the select, which is submitted with the form data.\n *\n * @webnative\n */\n @Prop() public readonly name?: string\n\n /**\n * An [`HTMLOptionsCollection`][] of the [`<option>`][] elements contained by\n * the `<qds-select>` element.\n *\n * [`HTMLOptionsCollection`]: https://developer.mozilla.org/docs/Web/API/HTMLOptionsCollection\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly options: HTMLSelectElement['options'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * An `<option>` with a non-empty string value must be selected before this\n * select can be submitted.\n *\n * See [Client-side validation] and the [HTML attribute: `required`] for more\n * information.\n *\n * [Client-side validation]: https://developer.mozilla.org/docs/Web/HTML/Element/input#client-side_validation\n * [HTML attribute: `required`]: https://developer.mozilla.org/docs/Web/HTML/Attributes/required\n *\n * @webnative\n */\n @Prop() public readonly required?: boolean\n\n /**\n * The index of the first or last selected [`<option>`][] element, depending\n * on the value of `multiple`. The value `-1` indicates that no element is\n * selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true })\n public selectedIndex: HTMLSelectElement['selectedIndex'] = -1\n\n /**\n * Collection of the [`<option>`][] elements contained within the\n * `<qds-select>` element that are currently selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @readonly\n * @webnative\n */\n @Prop()\n public readonly selectedOptions: HTMLSelectElement['selectedOptions'] =\n EMPTY_OPTIONS_COLLECTION\n\n /**\n * Returns `select-multiple` if the `multiple` attribute is true;\n * `select-one` otherwise.\n *\n * @readonly\n * @webnative\n */\n @Prop() public readonly type: SelectType = 'select-one'\n\n /**\n * The error message that would be shown to the user if the `<qds-select>`\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-select>`.\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` property of the first selected [`<option>`][] element, or the\n * empty string if no options are selected.\n *\n * [`<option>`]: https://developer.mozilla.org/docs/Web/HTML/Element/option\n *\n * @webnative\n */\n @Prop({ mutable: true }) public value? = ''\n\n /**\n * True if `<qds-select>` will be validated when the form is submitted;\n * false 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 select loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when an alteration to the select's value is committed by the\n * user.\n */\n @Event({ eventName: 'qdsChange', cancelable: false })\n private readonly changeEmitter!: EventEmitter<void>\n\n /**\n * Emitted when the select gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the select'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 invalid = false\n\n @State() private tabIndex?: number\n\n #inheritedAttributes: Attributes = {}\n\n #select?: HTMLSelectElement\n\n get #computedDisabled(): boolean {\n return (\n (this.host.matches(':disabled') || (this.disabled ?? false)) &&\n this.host.getAttribute('disabled') !== 'false'\n )\n }\n\n get #computedOptions(): HTMLSelectElement['options'] {\n invariant(this.#select)\n\n return this.#select.options\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 #computedType(): HTMLSelectElement['type'] {\n invariant(this.#select)\n\n return this.#select.type\n }\n\n get #computedValue(): string {\n return this.value ?? ''\n }\n\n get #computedSelectedOptions(): HTMLSelectElement['selectedOptions'] {\n invariant(this.#select)\n\n return this.#select.selectedOptions\n }\n\n @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.#computedDisabled) event.stopImmediatePropagation()\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('selectedIndex')\n protected selectedIndexChanged(): void {\n invariant(this.#select)\n\n this.#select.selectedIndex = this.selectedIndex\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('required')\n @Watch('value')\n protected validationChanged(): void {\n invariant(this.#select)\n\n this.#select.value = this.#computedValue\n this.#select.required = this.required ?? false\n\n const { valid } = this.#select.validity\n if (valid)\n this.internals.setValidity(NO_ERROR_FLAGS, undefined, this.#select)\n else\n this.internals.setValidity(\n this.#select.validity,\n this.#select.validationMessage,\n this.#select,\n )\n this.invalid = !valid\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\n this.#defineGetter('type', () => this.#computedType)\n this.#defineGetter('options', () => this.#computedOptions)\n this.#defineGetter('length', () => this.#computedOptions.length)\n this.#defineGetter('selectedOptions', () => this.#computedSelectedOptions)\n\n this.#inheritedAttributes = inheritAriaAttributes(this.host)\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n invariant(this.#select)\n\n this.validationChanged()\n this.selectedIndex = this.#select.selectedIndex\n }\n\n public render() {\n return (\n <div\n class={{\n 'qds-container': true,\n 'qds-multiple': this.multiple ?? false,\n }}\n data-size={this.#computedSize}\n >\n <select\n aria-invalid={this.invalid.toString()}\n autoComplete={this.autoComplete}\n // eslint-disable-next-line jsx-a11y/no-autofocus\n autoFocus={this.host.autofocus}\n class=\"qds-select\"\n data-size={this.#computedSize}\n disabled={this.#computedDisabled}\n multiple={this.multiple}\n name={this.name}\n onBlur={this.#onBlur}\n onChange={this.#onChange}\n onFocus={this.#onFocus}\n onInput={this.#onInput}\n ref={this.#ref}\n required={this.required}\n tabIndex={this.#computedDisabled ? undefined : this.tabIndex}\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...this.#inheritedAttributes}\n />\n {this.multiple !== true && (\n <qds-icon\n aria-hidden=\"true\"\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library=\"core\"\n name=\"dropdown\"\n />\n )}\n <slot onSlotchange={this.#onSlotchange} />\n <div class=\"qds-focus-ring\" />\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 if (error)\n this.internals.setValidity(CUSTOM_ERROR_FLAGS, error, this.#select)\n else this.internals.setValidity(NO_ERROR_FLAGS)\n this.invalid = !!error\n }\n\n public addItem: HTMLSelectElement['add'] = (element, before) => {\n invariant(this.#select)\n\n this.#select.add(element, before)\n }\n\n public removeItem = (index: number): void => {\n invariant(this.#select)\n\n this.#select.remove(index)\n }\n\n public item: HTMLSelectElement['item'] = (index) => {\n invariant(this.#select)\n\n return this.#select.item(index)\n }\n\n public namedItem: HTMLSelectElement['namedItem'] = (name) => {\n invariant(this.#select)\n\n return this.#select.namedItem(name)\n }\n\n readonly #ref = (select?: HTMLSelectElement): void => {\n this.#select = select\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 readonly #onInput = (event: InputEvent): void => {\n invariant(this.#select)\n\n this.value = this.#select.value\n this.inputEmitter.emit(pickInputEventAttributes(event))\n }\n\n readonly #onSlotchange = (event: Event): void => {\n invariant(this.#select)\n const { currentTarget } = event\n invariant(currentTarget instanceof HTMLSlotElement)\n\n this.#select.replaceChildren(\n ...currentTarget.assignedNodes().map((node) => node.cloneNode(true)),\n )\n }\n\n #defineGetter(p: PropertyKey, get: () => unknown): void {\n Object.defineProperty(this.host, p, { enumerable: true, get })\n }\n}\n"],"version":3}
@@ -3,9 +3,9 @@
3
3
  *
4
4
  * SPDX-License-Identifier: Apache-2.0
5
5
  */
6
- import { p as proxyCustomElement, H, c as createEvent, h } from './p-7b04d43e.js';
7
- import { a as attachInternals, p as pickFocusEventAttributes, g as determineLinkIcon } from './p-4141d6ed.js';
8
- import { d as defineCustomElement$2 } from './p-82461767.js';
6
+ import { p as proxyCustomElement, H, c as createEvent, h } from './p-002e77af.js';
7
+ import { a as attachInternals, p as pickFocusEventAttributes, g as determineLinkIcon } from './p-efdb8fa2.js';
8
+ import { d as defineCustomElement$2 } from './p-9a9561a8.js';
9
9
 
10
10
  const standaloneLinkCss = ":host([hidden]){display:none!important}:host{display:inline-block}.qds-icon{flex-shrink:0;transform:scaleX(var(--qds-direction-factor,1));vertical-align:text-bottom}.qds-standalone-link{align-items:center;border-radius:var(--qds-focus-border-radius);box-sizing:border-box;display:inline-flex;justify-content:center;-webkit-print-color-adjust:exact;print-color-adjust:exact;-webkit-text-decoration:none;text-decoration:none;width:100%}.qds-standalone-link:focus-visible{outline:var(--qds-theme-focus-border) solid var(--qds-focus-border-width);outline-offset:var(--qds-focus-border-offset)}.qds-standalone-link:active,.qds-standalone-link:hover{-webkit-text-decoration:underline;text-decoration:underline}[data-importance=subdued]{color:var(--qds-theme-link-subdued-default)}.qds-visitable[data-importance=subdued]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=subdued]:hover{color:var(--qds-theme-link-subdued-hover)}[data-importance=subdued]:active{color:var(--qds-theme-link-subdued-pressed)}.qds-visitable[data-importance=subdued]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=subdued]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=standard]{color:var(--qds-theme-link-standard-default)}.qds-visitable[data-importance=standard]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=standard]:hover{color:var(--qds-theme-link-standard-hover)}[data-importance=standard]:active{color:var(--qds-theme-link-standard-pressed)}.qds-visitable[data-importance=standard]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=standard]:visited:active{color:var(--qds-theme-link-visited-pressed)}[data-importance=emphasized]{color:var(--qds-theme-link-emphasized-default)}.qds-visitable[data-importance=emphasized]:visited{color:var(--qds-theme-link-visited-default)}[data-importance=emphasized]:hover{color:var(--qds-theme-link-emphasized-hover)}[data-importance=emphasized]:active{color:var(--qds-theme-link-emphasized-pressed)}.qds-visitable[data-importance=emphasized]:visited:hover{color:var(--qds-theme-link-visited-hover)}.qds-visitable[data-importance=emphasized]:visited:active{color:var(--qds-theme-link-visited-pressed)}.qds-disabled{opacity:var(--qds-theme-disabled);pointer-events:none}.qds-standalone-link[data-size=small]{font:var(--qds-control-small-link);gap:var(--qds-control-small-gap-internal);padding-block:var(--qds-control-small-padding-auto-height)}[data-size=small][data-importance=subdued]{font:var(--qds-control-small-text)}.qds-icon[data-size=small]{height:var(--qds-control-small-icon-size);width:var(--qds-control-small-icon-size)}.qds-standalone-link[data-size=standard]{font:var(--qds-control-standard-link);gap:var(--qds-control-standard-gap-internal);padding-block:var(--qds-control-standard-padding-auto-height)}[data-size=standard][data-importance=subdued]{font:var(--qds-control-standard-text)}.qds-icon[data-size=standard]{height:var(--qds-control-standard-icon-size);width:var(--qds-control-standard-icon-size)}.qds-standalone-link[data-size=large]{font:var(--qds-control-large-link);gap:var(--qds-control-large-gap-internal);padding-block:var(--qds-control-large-padding-auto-height)}[data-size=large][data-importance=subdued]{font:var(--qds-control-large-text)}.qds-icon[data-size=large]{height:var(--qds-control-large-icon-size);width:var(--qds-control-large-icon-size)}";
11
11
  const QdsStandaloneLinkStyle0 = standaloneLinkCss;
@@ -29,6 +29,27 @@ const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink ext
29
29
  this.blurEmitter = createEvent(this, "qdsBlur", 2);
30
30
  this.focusEmitter = createEvent(this, "qdsFocus", 2);
31
31
  _StandaloneLink_instances.add(this);
32
+ /**
33
+ * Prevents the standalone link from being interacted with: it cannot be pressed
34
+ * or focused.
35
+ */
36
+ this.disabled = false;
37
+ /**
38
+ * The name of a registered icon library.
39
+ */
40
+ this.iconLibrary = 'default';
41
+ /**
42
+ * The standalone link's importance.
43
+ */
44
+ this.importance = 'standard';
45
+ /**
46
+ * The standalone link's size.
47
+ */
48
+ this.size = 'standard';
49
+ /**
50
+ * Defines if the standalone link will display the visited state.
51
+ */
52
+ this.visitable = false;
32
53
  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
33
54
  _StandaloneLink_internals.set(this, attachInternals.call(this));
34
55
  _StandaloneLink_onBlur.set(this, (event) => {
@@ -40,20 +61,6 @@ const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink ext
40
61
  _StandaloneLink_onSlotchange.set(this, () => {
41
62
  __classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
42
63
  });
43
- this.disabled = false;
44
- this.iconName = undefined;
45
- this.iconLibrary = 'default';
46
- this.importance = 'standard';
47
- this.size = 'standard';
48
- this.visitable = false;
49
- this.download = undefined;
50
- this.href = undefined;
51
- this.hreflang = undefined;
52
- this.referrerPolicy = undefined;
53
- this.rel = undefined;
54
- this.target = undefined;
55
- this.linkIcon = undefined;
56
- this.tabIndex = undefined;
57
64
  }
58
65
  onClick(event) {
59
66
  if (this.disabled)
@@ -82,11 +89,11 @@ const StandaloneLink = /*@__PURE__*/ proxyCustomElement(class StandaloneLink ext
82
89
  __classPrivateFieldGet(this, _StandaloneLink_internals, "f").ariaLabel = this.host.textContent;
83
90
  }
84
91
  render() {
85
- return (h("a", { key: 'c32eff6a17ec5705d7780a38c3d3765a9fb565a1', "aria-hidden": "true", class: {
92
+ return (h("a", { key: '14185a27f43513328980dbd847da91f7c1d6778b', "aria-hidden": "true", class: {
86
93
  'qds-standalone-link': true,
87
94
  'qds-disabled': this.disabled,
88
95
  'qds-visitable': this.visitable,
89
- }, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '20631e6c064af9961702341d93ab7b44ada34c59', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("div", { key: 'b6e30026e9f4e9e4129f566fbc102040ea673a4b' }, h("slot", { key: '055f5488cea6eea0be8ac1ba6a06c41faa74d325', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("qds-icon", { key: '458da3c410a46cae061f9d8c229030fab414a629', class: "qds-icon", library: "core", name: this.linkIcon })), this.importance === 'emphasized' && (h("qds-icon", { key: '0167593b9a9f340471f3a307197329564cf08a1a', class: "qds-icon", library: "core", name: "next" }))));
96
+ }, "data-importance": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedImportance_get), "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), download: this.download, href: this.href?.toString(), hrefLang: this.hreflang, onBlur: __classPrivateFieldGet(this, _StandaloneLink_onBlur, "f"), onFocus: __classPrivateFieldGet(this, _StandaloneLink_onFocus, "f"), referrerPolicy: this.referrerPolicy, rel: this.rel, tabIndex: this.disabled ? -1 : this.tabIndex, target: this.target }, this.iconName !== undefined && this.iconName !== '' && (h("qds-icon", { key: '0cd61c6e3d5fdece554517170ef981b66b072ae2', class: "qds-icon", "data-size": __classPrivateFieldGet(this, _StandaloneLink_instances, "a", _StandaloneLink_computedSize_get), library: this.iconLibrary, name: this.iconName })), h("div", { key: 'a232b56c3e085717b90e62c7993555298e34f87a' }, h("slot", { key: 'acc3ac05435e29aee77cdb7c76b582b9dd758049', onSlotchange: __classPrivateFieldGet(this, _StandaloneLink_onSlotchange, "f") })), this.linkIcon && (h("qds-icon", { key: '09e7954b52f296f370bb580ef7bb8124d8c756b6', class: "qds-icon", library: "core", name: this.linkIcon })), this.importance === 'emphasized' && (h("qds-icon", { key: '4f1c62d50c0ea59b9aa34092de32029b269ee06d', class: "qds-icon", library: "core", name: "next" }))));
90
97
  }
91
98
  static get delegatesFocus() { return true; }
92
99
  get host() { return this; }
@@ -1 +1 @@
1
- {"file":"qds-standalone-link.js","mappings":"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","names":[],"sources":["src/components/standalone-link/standalone-link.css?tag=qds-standalone-link&encapsulation=shadow","src/components/standalone-link/standalone-link.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-icon {\n flex-shrink: 0;\n transform: scaleX(var(--qds-direction-factor, 1));\n vertical-align: text-bottom;\n}\n\n.qds-standalone-link {\n align-items: center;\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n print-color-adjust: exact;\n text-decoration: none;\n width: 100%;\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,\n &:active {\n text-decoration: underline;\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-standalone-link {\n font: var(--qds-control-small-link);\n gap: var(--qds-control-small-gap-internal);\n padding-block: var(--qds-control-small-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-small-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-standalone-link {\n font: var(--qds-control-standard-link);\n gap: var(--qds-control-standard-gap-internal);\n padding-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-standard-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-standalone-link {\n font: var(--qds-control-large-link);\n gap: var(--qds-control-large-gap-internal);\n padding-block: var(--qds-control-large-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-large-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n attachInternals,\n determineLinkIcon,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Size, Target } from '../shared'\n\n/**\n * `<qds-standalone-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-standalone-link>` *should* indicate the standalone link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-standalone-link>` element will activate it.\n *\n * @slot Content to display for the standalone link.\n * @see https://quartz.se.com/build/components/standalone-link\n */\n@Component({\n tag: 'qds-standalone-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'standalone-link.css',\n})\nexport class StandaloneLink implements ComponentInterface {\n /**\n * Prevents the standalone link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The standalone link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The standalone link's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Defines if the standalone link will display the visited state.\n */\n @Prop() public readonly visitable: boolean = false\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the standalone link points to. Standalone links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: URL | string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the standalone link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the standalone link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the standalone link gains focus.\n */\n @Event({ eventName: 'qdsFocus', bubbles: false, cancelable: false })\n private readonly focusEmitter!: EventEmitter<QdsFocusEventDetail>\n\n @Element() private readonly host!: HTMLQdsStandaloneLinkElement\n\n @State() private linkIcon?: LinkIcon\n\n @State() private tabIndex?: number\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n readonly #internals: ElementInternals = attachInternals.call(this)\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): Size | undefined {\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.#internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests\n // to fail, but it's not clear why this is the case since it works for\n // other components.\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Watch('href')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.href, this.target)\n }\n\n public componentWillLoad(): void {\n this.#internals.role = 'link'\n\n this.disabledChanged()\n this.hrefTargetChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.#internals.ariaLabel = this.host.textContent\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-standalone-link': true,\n 'qds-disabled': this.disabled,\n 'qds-visitable': this.visitable,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n download={this.download}\n href={this.href?.toString()}\n hrefLang={this.hreflang}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n tabIndex={this.disabled ? -1 : this.tabIndex}\n target={this.target}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div>\n <slot onSlotchange={this.#onSlotchange} />\n </div>\n {this.linkIcon && (\n <qds-icon class=\"qds-icon\" library=\"core\" name={this.linkIcon} />\n )}\n {this.importance === 'emphasized' && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"next\" />\n )}\n </a>\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onSlotchange = (): void => {\n this.#internals.ariaLabel = this.host.textContent\n }\n}\n"],"version":3}
1
+ {"file":"qds-standalone-link.js","mappings":"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","names":[],"sources":["src/components/standalone-link/standalone-link.css?tag=qds-standalone-link&encapsulation=shadow","src/components/standalone-link/standalone-link.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-icon {\n flex-shrink: 0;\n transform: scaleX(var(--qds-direction-factor, 1));\n vertical-align: text-bottom;\n}\n\n.qds-standalone-link {\n align-items: center;\n border-radius: var(--qds-focus-border-radius);\n box-sizing: border-box;\n display: inline-flex;\n justify-content: center;\n print-color-adjust: exact;\n text-decoration: none;\n width: 100%;\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,\n &:active {\n text-decoration: underline;\n }\n}\n\n[data-importance='subdued'] {\n color: var(--qds-theme-link-subdued-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-subdued-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-subdued-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='standard'] {\n color: var(--qds-theme-link-standard-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-standard-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-standard-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n[data-importance='emphasized'] {\n color: var(--qds-theme-link-emphasized-default);\n\n &:visited.qds-visitable {\n color: var(--qds-theme-link-visited-default);\n }\n\n &:hover {\n color: var(--qds-theme-link-emphasized-hover);\n }\n\n &:active {\n color: var(--qds-theme-link-emphasized-pressed);\n }\n\n &:visited:hover.qds-visitable {\n color: var(--qds-theme-link-visited-hover);\n }\n\n &:visited:active.qds-visitable {\n color: var(--qds-theme-link-visited-pressed);\n }\n}\n\n.qds-disabled {\n opacity: var(--qds-theme-disabled);\n pointer-events: none;\n}\n\n[data-size='small'] {\n &.qds-standalone-link {\n font: var(--qds-control-small-link);\n gap: var(--qds-control-small-gap-internal);\n padding-block: var(--qds-control-small-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-small-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-small-icon-size);\n width: var(--qds-control-small-icon-size);\n }\n}\n\n[data-size='standard'] {\n &.qds-standalone-link {\n font: var(--qds-control-standard-link);\n gap: var(--qds-control-standard-gap-internal);\n padding-block: var(--qds-control-standard-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-standard-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-standard-icon-size);\n width: var(--qds-control-standard-icon-size);\n }\n}\n\n[data-size='large'] {\n &.qds-standalone-link {\n font: var(--qds-control-large-link);\n gap: var(--qds-control-large-gap-internal);\n padding-block: var(--qds-control-large-padding-auto-height);\n }\n\n &[data-importance='subdued'] {\n font: var(--qds-control-large-text);\n }\n\n &.qds-icon {\n height: var(--qds-control-large-icon-size);\n width: var(--qds-control-large-icon-size);\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'\nimport type { LiteralUnion } from 'type-fest'\n\nimport type { QdsFocusEventDetail } from '../../helpers'\nimport {\n attachInternals,\n determineLinkIcon,\n pickFocusEventAttributes,\n} from '../../helpers'\nimport type { Importance, LinkIcon, Size, Target } from '../shared'\n\n/**\n * `<qds-standalone-link>` elements, with their `href` property, create a hyperlink\n * to web pages, files, email addresses, locations in the same page, or\n * anything else a URL can address.\n *\n * Content within each `<qds-standalone-link>` *should* indicate the standalone link's\n * destination. If the `href` property is present, pressing the enter key while\n * focused on the `<qds-standalone-link>` element will activate it.\n *\n * @slot Content to display for the standalone link.\n * @see https://quartz.se.com/build/components/standalone-link\n */\n@Component({\n tag: 'qds-standalone-link',\n shadow: { delegatesFocus: true },\n styleUrl: 'standalone-link.css',\n})\nexport class StandaloneLink implements ComponentInterface {\n /**\n * Prevents the standalone link from being interacted with: it cannot be pressed\n * or focused.\n */\n @Prop() public readonly disabled: boolean = false\n\n /**\n * The name of the icon to render.\n *\n * Available names depend on the icon library being used.\n */\n @Prop() public readonly iconName?: string\n\n /**\n * The name of a registered icon library.\n */\n @Prop() public readonly iconLibrary: string = 'default'\n\n /**\n * The standalone link's importance.\n */\n @Prop() public readonly importance?: Importance = 'standard'\n\n /**\n * The standalone link's size.\n */\n @Prop() public readonly size?: Size = 'standard'\n\n /**\n * Defines if the standalone link will display the visited state.\n */\n @Prop() public readonly visitable: boolean = false\n\n /**\n * Causes the browser to treat the linked URL as a download. Can be used with\n * or without a `filename` value:\n *\n * - Without a value, the browser will suggest a filename/extension,\n * generated from various sources:\n *\n * - The\n * [`Content-Disposition`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Disposition)\n * HTTP header\n * - The final segment in the URL\n * [path](https://developer.mozilla.org/docs/Web/API/URL/pathname)\n * - The\n * [media type](https://developer.mozilla.org/docs/Glossary/MIME_type)\n * (from the\n * [`Content-Type`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Content-Type)\n * header, the start of a\n * [`data:` URL](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs),\n * or\n * [`Blob.type`](https://developer.mozilla.org/docs/Web/API/Blob/type)\n * for a\n * [`blob:` URL](https://developer.mozilla.org/docs/Web/API/URL/createObjectURL))\n * - `filename`: defining a value suggests it as the filename. `/` and `\\`\n * characters are converted to underscores (`_`). Filesystems may forbid\n * other characters in filenames, so browsers will adjust the suggested name\n * if necessary.\n *\n * @webnative\n */\n @Prop() public readonly download?: boolean | string\n\n /**\n * The URL that the standalone link points to. Standalone links are not restricted to\n * HTTP-based URLs — they can use any URL scheme supported by browsers:\n *\n * - Sections of a page with document fragments\n * - Specific text portions with\n * [text fragments](https://developer.mozilla.org/docs/Web/Text_fragments)\n * - Pieces of media files with media fragments\n * - Telephone numbers with `tel:` URLs\n * - Email addresses with `mailto:` URLs\n * - While web browsers may not support other URL schemes, websites can with\n * [`registerProtocolHandler()`](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler)\n *\n * @webnative\n */\n @Prop() public readonly href?: URL | string\n\n /**\n * Hints at the human language of the linked URL. No built-in functionality.\n * Allowed values are the same as\n * [the global `lang` attribute](https://developer.mozilla.org/docs/Web/HTML/Global_attributes/lang).\n *\n * @webnative\n */\n @Prop() public readonly hreflang?: string\n\n /**\n * How much of the\n * [referrer](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * to send when following the standalone link.\n *\n * - `no-referrer`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent.\n * - `no-referrer-when-downgrade`: The\n * [`Referer`](https://developer.mozilla.org/docs/Web/HTTP/Headers/Referer)\n * header will not be sent to\n * [origin](https://developer.mozilla.org/docs/Glossary/Origin)s\n * without [TLS](https://developer.mozilla.org/docs/Glossary/TLS)\n * ([HTTPS](https://developer.mozilla.org/docs/Glossary/HTTPS)).\n * - `origin`: The sent referrer will be limited to the origin of the\n * referring page: its\n * [scheme](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL),\n * [host](https://developer.mozilla.org/docs/Glossary/Host), and\n * [port](https://developer.mozilla.org/docs/Glossary/Port).\n * - `origin-when-cross-origin`: The referrer sent to other origins will be\n * limited to the scheme, the host, and the port. Navigations on the same\n * origin will still include the path.\n * - `same-origin`: A referrer will be sent for\n * [same origin](https://developer.mozilla.org/docs/Glossary/Same-origin_policy),\n * but cross-origin requests will contain no referrer information.\n * - `strict-origin`: Only send the origin of the document as the referrer\n * when the protocol security level stays the same (HTTPS→HTTPS), but don't\n * send it to a less secure destination (HTTPS→HTTP).\n * - `strict-origin-when-cross-origin` (default): Send a full URL when\n * performing a same-origin request, only send the origin when the protocol\n * security level stays the same (HTTPS→HTTPS), and send no header to a less\n * secure destination (HTTPS→HTTP).\n * - `unsafe-url`: The referrer will include the origin and the path (but not the\n * [fragment](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/hash),\n * [password](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/password),\n * or [username](https://developer.mozilla.org/docs/Web/API/HTMLAnchorElement/username)).\n * **This value is unsafe** because it leaks origins and paths from\n * TLS-protected resources to insecure origins.\n *\n * @webnative\n */\n @Prop({ attribute: 'referrerpolicy' })\n public readonly referrerPolicy?: ReferrerPolicy\n\n /**\n * The relationship of the linked URL as space-separated\n * [link types](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel).\n *\n * The following list includes some of the most important existing keywords.\n * Every keyword within a space-separated value should be unique within that\n * value.\n *\n * - [`alternate`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-alternate):\n * Alternate representations of the current document.\n * - [`author`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-author):\n * Author of the current document or article.\n * - [`bookmark`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-bookmark):\n * Permalink for the nearest ancestor section.\n * - [`external`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-external):\n * The referenced document is not part of the same site as the current\n * document. An icon will be rendered next to the text if this value is\n * specified.\n * - [`help`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-help):\n * Link to context-sensitive help.\n * - [`license`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-license):\n * Indicates that the main content of the current document is covered by the\n * copyright license described by the referenced document.\n * - [`me`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/me):\n * Indicates that the current document represents the person who owns the\n * linked content.\n * - [`next`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-next):\n * Indicates that the current document is a part of a series and that the\n * next document in the series is the referenced document.\n * - [`nofollow`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-nofollow):\n * Indicates that the current document's original author or publisher does\n * not endorse the referenced document.\n * - [`noopener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel/noopener):\n * Creates a top-level browsing context that is not an auxiliary browsing\n * context if the hyperlink would create either of those, to begin with (i.e.,\n * has an appropriate `target` attribute value).\n * - [`noreferrer`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-noreferrer):\n * No `Referer` header will be included. Additionally, has the same effect as\n * `noopener`.\n * - [`opener`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-opener):\n * Creates an auxiliary browsing context if the hyperlink would otherwise\n * create a top-level browsing context that is not an auxiliary browsing\n * context (i.e., has \"`_blank`\" as `target` attribute value).\n * - [`prev`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-prev):\n * Indicates that the current document is a part of a series and that the\n * previous document in the series is the referenced document.\n * - [`search`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-search):\n * Gives a link to a resource that can be used to search through the current\n * document and its related pages.\n * - [`tag`](https://developer.mozilla.org/docs/Web/HTML/Attributes/rel#attr-tag):\n * Gives a tag (identified by the given address) that applies to the current\n * document.\n *\n * @webnative\n */\n @Prop() public readonly rel?: string\n\n /**\n * Where to display the linked URL, as the name for a browsing context (a\n * tab, window, or\n * [`<iframe>`](https://developer.mozilla.org/docs/Web/HTML/Element/iframe).\n * The following keywords have special meanings for where to load the URL:\n *\n * - `_blank`: usually a new tab, but users can configure browsers to open a new\n * window instead.\n * - `_parent`: the parent browsing context of the current one. If no parent,\n * behaves as `_self`.\n * - `_self`: the current browsing context.\n * - `_top`: the topmost browsing context (the \"highest\" context that's an\n * ancestor of the current one). If no ancestors, behaves as `_self`.\n *\n * @webnative\n */\n @Prop() public readonly target?: LiteralUnion<Target, string>\n\n /**\n * Emitted when the standalone link loses focus.\n */\n @Event({ eventName: 'qdsBlur', bubbles: false, cancelable: false })\n private readonly blurEmitter!: EventEmitter<QdsFocusEventDetail>\n\n /**\n * Emitted when the standalone link 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 linkIcon?: LinkIcon\n\n @State() private tabIndex?: number\n\n // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n readonly #internals: ElementInternals = attachInternals.call(this)\n\n get #computedImportance(): Importance {\n switch (this.importance) {\n case 'subdued':\n case 'emphasized': {\n return this.importance\n }\n default: {\n return 'standard'\n }\n }\n }\n\n get #computedSize(): Size | undefined {\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 @Listen('click')\n protected onClick(event: MouseEvent): void {\n if (this.disabled) event.stopImmediatePropagation()\n }\n\n @Watch('disabled')\n protected disabledChanged(): void {\n this.#internals.ariaDisabled = this.disabled.toString()\n }\n\n @Watch('tabindex')\n protected tabindexChanged(newValue: string): void {\n const parsedValue = Number.parseInt(newValue, 10)\n // FIXME: `undefined` instead of `0` causes `qdsFocus/qdsBlur` E2E tests\n // to fail, but it's not clear why this is the case since it works for\n // other components.\n this.tabIndex = Number.isNaN(parsedValue) ? 0 : parsedValue\n }\n\n @Watch('href')\n @Watch('target')\n protected hrefTargetChanged(): void {\n this.linkIcon = determineLinkIcon(this.href, this.target)\n }\n\n public componentWillLoad(): void {\n this.#internals.role = 'link'\n\n this.disabledChanged()\n this.hrefTargetChanged()\n this.tabindexChanged(this.host.getAttribute('tabindex') ?? '0')\n }\n\n public componentDidLoad(): void {\n this.#internals.ariaLabel = this.host.textContent\n }\n\n public render() {\n return (\n <a\n aria-hidden=\"true\"\n class={{\n 'qds-standalone-link': true,\n 'qds-disabled': this.disabled,\n 'qds-visitable': this.visitable,\n }}\n data-importance={this.#computedImportance}\n data-size={this.#computedSize}\n download={this.download}\n href={this.href?.toString()}\n hrefLang={this.hreflang}\n onBlur={this.#onBlur}\n onFocus={this.#onFocus}\n referrerPolicy={this.referrerPolicy}\n rel={this.rel}\n tabIndex={this.disabled ? -1 : this.tabIndex}\n target={this.target}\n >\n {this.iconName !== undefined && this.iconName !== '' && (\n <qds-icon\n class=\"qds-icon\"\n data-size={this.#computedSize}\n library={this.iconLibrary}\n name={this.iconName}\n />\n )}\n <div>\n <slot onSlotchange={this.#onSlotchange} />\n </div>\n {this.linkIcon && (\n <qds-icon class=\"qds-icon\" library=\"core\" name={this.linkIcon} />\n )}\n {this.importance === 'emphasized' && (\n <qds-icon class=\"qds-icon\" library=\"core\" name=\"next\" />\n )}\n </a>\n )\n }\n\n readonly #onBlur = (event: FocusEvent): void => {\n this.blurEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onFocus = (event: FocusEvent): void => {\n this.focusEmitter.emit(pickFocusEventAttributes(event))\n }\n\n readonly #onSlotchange = (): void => {\n this.#internals.ariaLabel = this.host.textContent\n }\n}\n"],"version":3}