qc-trousse-sdg 1.4.4 → 1.4.6

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 (77) hide show
  1. package/README.md +81 -53
  2. package/dist/css/qc-sdg-design-tokens.min.css +1 -1
  3. package/dist/css/qc-sdg-no-grid.min.css +1 -1
  4. package/dist/css/qc-sdg.min.css +1 -1
  5. package/dist/img/QUEBEC_blanc.svg +3 -12
  6. package/dist/img/QUEBEC_couleur.svg +3 -23
  7. package/dist/js/qc-sdg.min.js +1 -1
  8. package/index.html +1 -1
  9. package/package.json +1 -1
  10. package/plugins/buildHtmlDoc.js +5 -1
  11. package/public/css/qc-doc-sdg.css +31 -28
  12. package/public/css/qc-sdg-design-tokens.css +0 -2
  13. package/public/css/qc-sdg-no-grid.css +158 -112
  14. package/public/css/qc-sdg.css +158 -112
  15. package/public/img/QUEBEC_blanc.svg +3 -12
  16. package/public/img/QUEBEC_couleur.svg +3 -23
  17. package/public/img/favicon.ico +0 -0
  18. package/public/index.html +37 -31
  19. package/public/js/qc-doc-sdg.js +7550 -4468
  20. package/public/js/qc-sdg.js +10295 -7247
  21. package/rollup.config.js +3 -4
  22. package/src/doc/_index.html +3 -0
  23. package/src/doc/components/Code.svelte +13 -5
  24. package/src/doc/components/Exemple.svelte +0 -13
  25. package/src/doc/scss/components/_code.scss +4 -21
  26. package/src/doc/scss/components/_exemple.scss +21 -0
  27. package/src/doc/scss/qc-doc-sdg.scss +1 -0
  28. package/src/sdg/_components.js +0 -1
  29. package/src/sdg/bases/form/_form.scss +0 -4
  30. package/src/sdg/bases/links/_links.html +10 -10
  31. package/src/sdg/components/Alert/Alert.svelte +1 -1
  32. package/src/sdg/components/Alert/_alert.html +2 -2
  33. package/src/sdg/components/Checkbox/Checkbox.svelte +3 -3
  34. package/src/sdg/components/Checkbox/CheckboxWC.svelte +3 -3
  35. package/src/sdg/components/Checkbox/{updateInput.svelte.js → updateChoiceInput.svelte.js} +6 -1
  36. package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte +2 -2
  37. package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte +3 -0
  38. package/src/sdg/components/ChoiceGroup/Test/checkboxBaselineTest.html +3 -0
  39. package/src/sdg/components/ChoiceGroup/_choiceGroup.html +0 -2
  40. package/src/sdg/components/DropdownList/DropdownList.svelte +4 -7
  41. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte +1 -6
  42. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss +3 -8
  43. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss +1 -2
  44. package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss +2 -4
  45. package/src/sdg/components/DropdownList/SelectWC.svelte +31 -50
  46. package/src/sdg/components/DropdownList/Test/DropdownListSvelteTest.svelte +37 -2
  47. package/src/sdg/components/DropdownList/Test/{dropdownListTest.html → dropdownListBaselineTest.html} +19 -1
  48. package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js +14 -0
  49. package/src/sdg/components/DropdownList/_dropdownList.scss +11 -16
  50. package/src/sdg/components/DropdownList/_select.html +9 -0
  51. package/src/sdg/components/Fieldset/_fieldset.scss +17 -4
  52. package/src/sdg/components/FormfieldRow/_formfieldRow.html +7 -7
  53. package/src/sdg/components/Label/_label.scss +1 -0
  54. package/src/sdg/components/Notice/_notice.html +3 -3
  55. package/src/sdg/components/PivFooter/PivFooter.svelte +2 -2
  56. package/src/sdg/components/PivHeader/PivHeader.svelte +79 -74
  57. package/src/sdg/components/PivHeader/Test/pivHeaderBaselineTest.html +14 -3
  58. package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte +2 -1
  59. package/src/sdg/components/PivHeader/Test/pivHeaderTest.js +9 -0
  60. package/src/sdg/components/PivHeader/_pivHeader.html +3 -2
  61. package/src/sdg/components/PivHeader/_pivHeader.scss +52 -23
  62. package/src/sdg/components/TextField/Test/textFieldBaselineTest.html +24 -5
  63. package/src/sdg/components/TextField/TextField.svelte +29 -25
  64. package/src/sdg/components/TextField/TextFieldWC.svelte +18 -8
  65. package/src/sdg/components/TextField/_textField.html +0 -5
  66. package/src/sdg/components/TextField/_textField.scss +6 -13
  67. package/src/sdg/components/utils.js +55 -14
  68. package/src/sdg/qc-sdg-test.js +4 -0
  69. package/src/sdg/scss/settings/_tokens.scss +0 -4
  70. package/tests/buildSvelteTestsIgnore.json +2 -1
  71. package/tests/dropdown-list-baseline.spec.ts +51 -4
  72. package/tests/piv-header-baseline.spec.ts +3 -0
  73. package/src/sdg/components/Button/Button.svelte +0 -50
  74. package/src/sdg/components/Button/ButtonWC.svelte +0 -36
  75. package/src/sdg/components/CharCount/_charCount.html +0 -7
  76. package/src/sdg/components/RadioButton/_radioButton.html +0 -24
  77. package/tests/piv-header-svelte.spec.ts +0 -11
package/rollup.config.js CHANGED
@@ -18,12 +18,11 @@ import buildSvelteTests from "./plugins/buildSvelteTests";
18
18
 
19
19
  const
20
20
  dev_process = (process.env.npm_lifecycle_event == 'dev'),
21
- version_process = (process.env.npm_lifecycle_event == 'version'),
22
21
  build_process = (process.env.npm_lifecycle_event == 'build')
23
22
  ;
24
23
  const verbose = false;
25
24
  const includePaths = [
26
- dev_process && 'src/doc/scss',
25
+ !build_process && 'src/doc/scss',
27
26
  'src/sdg/scss',
28
27
  "src",
29
28
  ].filter(Boolean);
@@ -66,7 +65,7 @@ const scssOptions = {
66
65
  cssReplace({
67
66
  data: {
68
67
  'pkg-version': pkg.version,
69
- 'dev-env': dev_process ? 'true' : 'false',
68
+ 'dev-env': !build_process ? 'true' : 'false',
70
69
  }
71
70
  })
72
71
  ])
@@ -95,7 +94,7 @@ let
95
94
  compilerOptions: {
96
95
  // enable run-time checks
97
96
  customElement: true,
98
- dev: dev_process,
97
+ dev: !build_process,
99
98
  cssHash: ({ hash, name, filename, css }) => {
100
99
  // replacement of default `svelte-${hash(css)}`
101
100
  return `qc-hash-${hash(css)}`;
package/src/doc/_index.html CHANGED
@@ -18,6 +18,9 @@
18
18
  src='js/qc-doc-sdg.js'
19
19
  sdg-css-filename="qc-doc-sdg.css">
20
20
  </script>
21
+ <link rel="icon"
22
+ type="image/x-icon"
23
+ href="img/favicon.ico">
21
24
  </head>
22
25
  <body>
23
26
  <header>
package/src/doc/components/Code.svelte CHANGED
@@ -14,6 +14,8 @@
14
14
  import pretty from "pretty";
15
15
  import jsBeautify from "js-beautify";
16
16
 
17
+ const copyButtonTimeout = 2000;
18
+
17
19
  let {
18
20
  targetId = '',
19
21
  rawCode = '',
@@ -23,11 +25,14 @@
23
25
 
24
26
  let hlCode = $state();
25
27
  let prettyCode = $state();
28
+ let copied = $state(false);
26
29
 
27
30
  function copy() {
28
31
  navigator.clipboard.writeText(prettyCode);
29
- this.classList.add('copied')
30
- setTimeout(() => {this.classList.remove('copied')}, 500)
32
+ copied = true;
33
+ setTimeout(() => {
34
+ copied = false;
35
+ }, copyButtonTimeout);
31
36
  }
32
37
 
33
38
  function updateHLCode(rawCode, targetId) {
@@ -53,10 +58,13 @@
53
58
 
54
59
  <pre
55
60
  ><code class="hljs"
56
- ><button class="qc-button qc-compact qc-primary"
61
+ ><button class={`qc-button qc-compact ${copied? "qc-secondary" : "qc-primary"}`}
57
62
  onclick={copy}>
58
- <span class="copy">copier</span>
59
- <span class="copied">copié !</span>
63
+ {#if !copied}
64
+ <span class="copy">Copier</span>
65
+ {:else}
66
+ <span class="copied">Copié&nbsp!</span>
67
+ {/if}
60
68
  </button
61
69
  >{@html hlCode}</code
62
70
  ></pre>
package/src/doc/components/Exemple.svelte CHANGED
@@ -59,16 +59,3 @@
59
59
  <Code rawCode={exempleCode}></Code>
60
60
  {/if}
61
61
  </div>
62
- <style lang="scss">
63
- figure {
64
- //display: block;
65
- max-width: token-value(max-content-width);
66
- width: 100%;
67
- @include qc-shading(0);
68
- margin-bottom: token-value(spacer content-block mb);
69
- .exemple {
70
- padding: token-value(spacer sm) token-value(spacer sm) 0 token-value(spacer sm);
71
- margin-bottom: token-value(spacer sm);
72
- }
73
- }
74
- </style>
package/src/doc/scss/components/_code.scss CHANGED
@@ -10,34 +10,17 @@ pre {
10
10
  padding: 0;
11
11
  white-space: pre-wrap;
12
12
  overflow: auto;
13
+ position: relative;
13
14
 
14
15
  code, .qc-code {
15
16
  font-family: token-value(font, family, code);
16
17
 
17
18
  button {
18
19
  float: right;
19
- //position: absolute;
20
- right: token-value(spacer xs);
21
- top: token-value(spacer xs);
22
- padding: token-value(spacer xs) token-value(spacer sm) ;
23
- color : white;
24
- background-color: token-value(color blue piv);
25
- border: 1px solid;
20
+ position: absolute;
21
+ right: token-value(spacer sm);
22
+ top: token-value(spacer sm);
26
23
  white-space: nowrap;
27
- transition: none!important;
28
- .copy {display: inline;}
29
- .copied {display: none;}
30
- &.copied {
31
- background-color: transparent!important;
32
- border-color: transparent!important;;
33
- box-shadow: none!important;
34
- color: token-value(color blue piv)!important;
35
- .copy {display: none;}
36
- .copied {
37
- display: inline;
38
- //animation: fadeout .5s;
39
- }
40
- }
41
24
  }
42
25
  }
43
26
  }
package/src/doc/scss/components/_exemple.scss ADDED
@@ -0,0 +1,21 @@
1
+ @use "qc-sdg-lib" as *;
2
+
3
+ .exemple-area > figure {
4
+ display: block;
5
+ max-width: token-value(max-content-width);
6
+ width: 100%;
7
+ margin-bottom: token-value(spacer content-block mb);
8
+ padding-bottom: 1px;
9
+ .exemple {
10
+ padding: token-value(spacer sm) token-value(spacer sm) token-value(spacer sm) token-value(spacer sm);
11
+ @include qc-shading(0);
12
+
13
+ & > *:last-child {
14
+ margin-bottom: 0;
15
+ }
16
+ }
17
+
18
+ & > figcaption {
19
+ display: block;
20
+ }
21
+ }
package/src/doc/scss/qc-doc-sdg.scss CHANGED
@@ -1,5 +1,6 @@
1
1
  @use "qc-sdg-lib" as *;
2
2
  @use "components/code" as *;
3
+ @use "components/exemple" as *;
3
4
  @use "tables";
4
5
  @use "jQueryUI/jquery-ui.autocomplete";
5
6
 
package/src/sdg/_components.js CHANGED
@@ -11,7 +11,6 @@ export * from './components/IconButton/IconButtonWC.svelte'
11
11
  export * from './components/ChoiceGroup/ChoiceGroupWC.svelte'
12
12
  export * from './components/Checkbox/CheckboxWC.svelte'
13
13
  export * from './components/TextField/TextFieldWC.svelte'
14
- export * from './components/Button/ButtonWC.svelte'
15
14
  export * from './components/ToggleSwitch/ToggleSwitchWC.svelte'
16
15
  export * from './components/ChoiceGroup/ToggleSwitchGroupWC.svelte'
17
16
  export * from './components/DropdownList/SelectWC.svelte'
package/src/sdg/bases/form/_form.scss CHANGED
@@ -15,7 +15,3 @@ label {
15
15
  legend {
16
16
  padding: 0;
17
17
  }
18
-
19
- qc-select select {
20
- appearance: none;
21
- }
package/src/sdg/bases/links/_links.html CHANGED
@@ -2,33 +2,33 @@
2
2
  <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
3
3
  <dl>
4
4
  <dt>Lien interne</dt>
5
- <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
5
+ <dd><a href="#" class="not-visited">Lien interne</a></dd>
6
6
  <dd>
7
- <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
7
+ <qc-external-link><a href="#" class="not-visited">Lien externe</a></qc-external-link>
8
8
  </dd>
9
9
 
10
10
  <dt>Lien au survol (pseudo-classe :hover)</dt>
11
- <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
11
+ <dd><a href="#" class="pseudo-hover">Lien interne</a></dd>
12
12
  <dd>
13
- <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
13
+ <qc-external-link><a href="#" class="pseudo-hover">Lien externe</a>
14
14
  </qc-external-link>
15
15
  </dd>
16
16
  <dt>Lien au focus (pseudo-classe :focus)</dt>
17
- <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
17
+ <dd><a href="#" class="pseudo-focus">Lien interne</a></dd>
18
18
  <dd>
19
- <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
19
+ <qc-external-link><a href="#" class="pseudo-focus">Lien externe</a>
20
20
  </qc-external-link>
21
21
  </dd>
22
22
  <dt>Lien au clic (pseudo-classe :active)</dt>
23
- <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
23
+ <dd><a href="#" class="pseudo-active">Lien interne</a></dd>
24
24
  <dd>
25
- <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
25
+ <qc-external-link><a href="#" class="pseudo-active">Lien externe</a>
26
26
  </qc-external-link>
27
27
  </dd>
28
28
  <dt>Lien visité (pseudo-classe :visited)</dt>
29
- <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
29
+ <dd><a href="#" class="pseudo-visited">Lien interne</a></dd>
30
30
  <dd>
31
- <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
31
+ <qc-external-link><a href="#" class="pseudo-visited">Lien externe</a>
32
32
  </qc-external-link>
33
33
  </dd>
34
34
  </dl>
package/src/sdg/components/Alert/Alert.svelte CHANGED
@@ -57,7 +57,7 @@
57
57
  size="nm"
58
58
  icon="xclose"
59
59
  iconSize="sm"
60
- iconColor="text-primary"
60
+ iconColor="blue-piv"
61
61
  />
62
62
  {/if}
63
63
  </div>
package/src/sdg/components/Alert/_alert.html CHANGED
@@ -2,7 +2,7 @@
2
2
  <h3>Exemples</h3>
3
3
  <h4>Alerte jaune</h4>
4
4
  <p>
5
- <a href="javascript:;"
5
+ <a href="#"
6
6
  id="show-qc-alert"
7
7
  hidden
8
8
  >
@@ -26,7 +26,7 @@
26
26
  caption="Exemple d’alerte générale">
27
27
  <qc-alert type="general"
28
28
  maskable="false">
29
- <p>Alerte bleue d’importance modérée <a href="javascript:;">avec un lien textuel</a></p>
29
+ <p>Alerte bleue d’importance modérée <a href="#">avec un lien textuel</a></p>
30
30
  </qc-alert>
31
31
  </qc-doc-exemple>
32
32
 
package/src/sdg/components/Checkbox/Checkbox.svelte CHANGED
@@ -2,7 +2,7 @@
2
2
  import { Utils } from "../utils";
3
3
  import FormError from "../FormError/FormError.svelte";
4
4
  import {getContext, onMount} from "svelte";
5
- import {updateInput, onChange} from "./updateInput.svelte";
5
+ import {updateChoiceInput, onChange} from "./updateChoiceInput.svelte.js";
6
6
 
7
7
  const lang = Utils.getPageLanguage(),
8
8
  qcCheckoxContext = getContext("qc-checkbox");
@@ -32,7 +32,7 @@
32
32
  onMount(() => {
33
33
  if (qcCheckoxContext) return;
34
34
  labelElement = rootElement?.querySelector('label')
35
- input = rootElement?.querySelector('input')
35
+ input = rootElement?.querySelector('input[type="checkbox"]')
36
36
  onChange(input, _invalid => invalid = _invalid)
37
37
  })
38
38
 
@@ -42,7 +42,7 @@
42
42
  }
43
43
  })
44
44
 
45
- $effect(_ => updateInput(input, required, invalid, compact, false, false))
45
+ $effect(_ => updateChoiceInput(input, required, invalid, compact, false, false))
46
46
 
47
47
  $effect(() => {
48
48
  if (!required) return;
package/src/sdg/components/Checkbox/CheckboxWC.svelte CHANGED
@@ -12,7 +12,7 @@
12
12
  import Checkbox from "./Checkbox.svelte";
13
13
  import {onMount, setContext} from "svelte";
14
14
  import {Utils} from "../utils";
15
- import {onChange} from "./updateInput.svelte";
15
+ import {onChange} from "./updateChoiceInput.svelte.js";
16
16
 
17
17
  setContext('qc-checkbox', true);
18
18
 
@@ -29,8 +29,8 @@
29
29
 
30
30
  onMount(() => {
31
31
  labelElement = $host()
32
- .querySelector('label')
33
- input = $host().querySelector('input')
32
+ .querySelector("label")
33
+ input = $host().querySelector('input[type="checkbox"]')
34
34
  onChange(input, _invalid => invalid = _invalid)
35
35
  })
36
36
 
package/src/sdg/components/Checkbox/{updateInput.svelte.js → updateChoiceInput.svelte.js} RENAMED
@@ -1,7 +1,12 @@
1
- export function updateInput(input, required, invalid, compact, selectionButton, inline, name) {
1
+ export function updateChoiceInput(input, required, invalid, compact, selectionButton, inline, name) {
2
2
  if (!input ) return;
3
3
  if (input.role === "switch") return;
4
+ if (input.type === "hidden") return;
4
5
  let label = input.closest('label');
6
+ if (!label) {
7
+ console.warn("Pas d'élément label parent pour l'input", input);
8
+ return;
9
+ }
5
10
  input.classList.add('qc-choicefield')
6
11
  label.classList.add('qc-choicefield-label')
7
12
  input.classList.toggle('qc-selection-button', selectionButton)
package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte CHANGED
@@ -1,7 +1,7 @@
1
1
  <script>
2
2
  import Fieldset from "../Fieldset/Fieldset.svelte";
3
3
  import {onMount} from "svelte";
4
- import {updateInput} from "../Checkbox/updateInput.svelte";
4
+ import {updateChoiceInput} from "../Checkbox/updateChoiceInput.svelte.js";
5
5
 
6
6
  let {
7
7
  invalid = $bindable(false),
@@ -27,7 +27,7 @@
27
27
  .querySelectorAll('input, .qc-choicefield')
28
28
  .forEach(
29
29
  input =>
30
- updateInput(
30
+ updateChoiceInput(
31
31
  input,
32
32
  required,
33
33
  invalid,
package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte CHANGED
@@ -15,6 +15,7 @@
15
15
  name="tile-1"
16
16
  >
17
17
  <label>
18
+ <input type="hidden">
18
19
  <input {type}
19
20
 
20
21
  value="1"
@@ -27,6 +28,7 @@
27
28
  </label>
28
29
 
29
30
  <label>
31
+ <input type="hidden">
30
32
  <input {type}
31
33
 
32
34
  value="2"
@@ -36,6 +38,7 @@
36
38
  </span>
37
39
  </label>
38
40
  <label>
41
+ <input type="hidden">
39
42
  <input {type}
40
43
 
41
44
  value="3"
package/src/sdg/components/ChoiceGroup/Test/checkboxBaselineTest.html CHANGED
@@ -5,6 +5,7 @@
5
5
  name="tile-1"
6
6
  >
7
7
  <label>
8
+ <input type="hidden">
8
9
  <input type="checkbox"
9
10
 
10
11
  value="1"
@@ -17,6 +18,7 @@
17
18
  </label>
18
19
 
19
20
  <label>
21
+ <input type="hidden">
20
22
  <input type="checkbox"
21
23
 
22
24
  value="2"
@@ -26,6 +28,7 @@
26
28
  </span>
27
29
  </label>
28
30
  <label>
31
+ <input type="hidden">
29
32
  <input type="checkbox"
30
33
 
31
34
  value="3"
package/src/sdg/components/ChoiceGroup/_choiceGroup.html CHANGED
@@ -277,8 +277,6 @@
277
277
  </table>
278
278
  </div>
279
279
 
280
- <p>Pour les autres attributs, voir la rubrique de <a href="#selection-button-attributes">boutons de sélection</a>.</p>
281
-
282
280
  <h5>Zone d’ajout de contenu HTML</h5>
283
281
 
284
282
  <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>
package/src/sdg/components/DropdownList/DropdownList.svelte CHANGED
@@ -27,7 +27,6 @@
27
27
  rootElement = $bindable(),
28
28
  errorElement = $bindable(),
29
29
  webComponentMode = false,
30
- webComponentParentRow,
31
30
  } = $props();
32
31
 
33
32
  const
@@ -81,9 +80,9 @@
81
80
  const keyword = webComponentMode ? "container" : "root";
82
81
 
83
82
  if (availableWidths.includes(width)) {
84
- return `qc-dropdown-list-${keyword}-${width}`;
83
+ return `qc-dropdown-list-${width}`;
85
84
  }
86
- return `qc-dropdown-list-${keyword}-md`;
85
+ return `qc-dropdown-list-md`;
87
86
  }),
88
87
  srItemsCountText = $derived.by(() => {
89
88
  const s = displayedItems.length > 1 ? "s" : "";
@@ -273,14 +272,11 @@
273
272
  <svelte:body onclick={handleOuterEvent} onkeydown={handleTab}/>
274
273
  <div
275
274
  class={[
276
- "qc-dropdown-list-root",
277
- !webComponentMode && widthClass,
278
- !(parentRow || webComponentParentRow) && "qc-dropdown-list-margin"
275
+ !parentRow && !webComponentMode && "qc-select"
279
276
  ]} bind:this={rootElement}
280
277
  >
281
278
  <div class={[
282
279
  "qc-dropdown-list-container",
283
- webComponentMode && widthClass
284
280
  ]}>
285
281
  <!-- svelte-ignore a11y_click_events_have_key_events -->
286
282
  <!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
@@ -301,6 +297,7 @@
301
297
  <div
302
298
  class={[
303
299
  `qc-dropdown-list`,
300
+ widthClass,
304
301
  invalid && "qc-dropdown-list-invalid",
305
302
  ]}
306
303
  tabindex="-1"
package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte CHANGED
@@ -20,11 +20,6 @@
20
20
  placeholder,
21
21
  } = $props()
22
22
 
23
- const
24
- precentRootFontSize = 62.5,
25
- remRatio = 0.16
26
- ;
27
-
28
23
  let itemsComponent = $state();
29
24
  let usedHeight = $derived.by(() => {
30
25
  const maxItemsHeight = 336;
@@ -68,7 +63,7 @@
68
63
  id={id}
69
64
  class="qc-dropdown-list-items"
70
65
  tabindex="-1"
71
- style="--dropdown-items-height: {usedHeight / (remRatio * precentRootFontSize)}rem;"
66
+ style="--dropdown-items-height: {usedHeight};"
72
67
  >
73
68
  {#if multiple}
74
69
  <DropdownListItemsMultiple
package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss CHANGED
@@ -5,15 +5,10 @@
5
5
 
6
6
  label {
7
7
  margin: 0;
8
- padding-left: token-value(spacer, xs);
9
- padding-right: token-value(spacer, xs);
8
+ padding: token-value(spacer, xs);
10
9
  flex-grow: 1;
11
- align-items: center;
12
10
  }
13
- .qc-choicefield {
14
- margin-top: 0 !important;
15
- &:focus {
16
- outline: none;
17
- }
11
+ .qc-choicefield:focus {
12
+ outline: none;
18
13
  }
19
14
  }
package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss CHANGED
@@ -1,8 +1,7 @@
1
1
  @use "../../../../scss/qc-sdg-lib" as *;
2
2
 
3
3
  .qc-dropdown-list-single {
4
- padding-left: token-value(spacer, xs);
5
- padding-right: token-value(spacer, xs);
4
+ padding: token-value(spacer, xs);
6
5
  margin: 0;
7
6
  }
8
7
 
package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  $min-height: 40;
6
6
 
7
7
  .qc-dropdown-list-items {
8
- max-height: var(--dropdown-items-height);
8
+ max-height: calc(var(--dropdown-items-height) * $rem-ratio * 1rem);
9
9
  overflow-y: auto;
10
10
  overflow-x: hidden;
11
11
 
@@ -38,15 +38,13 @@ $min-height: 40;
38
38
 
39
39
  * {
40
40
  overflow: hidden;
41
- white-space: nowrap;
42
- text-overflow: ellipsis;
43
41
  }
44
42
  }
45
43
 
46
44
  .qc-dropdown-list-multiple, .qc-dropdown-list-single {
47
45
  display: flex;
48
46
  align-items: center;
49
- height: rem($min-height);
47
+ min-height: rem($min-height);
50
48
 
51
49
  &.qc-dropdown-list-active:hover {
52
50
  background-color: token-value(color, grey, pale);