q2-tecton-elements 1.9.8 → 1.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (119) hide show
  1. package/dist/cjs/{icons-077ed9b7.js → icons-fa5f4367.js} +22 -22
  2. package/dist/cjs/index-14348270.js +557 -0
  3. package/dist/cjs/loader.cjs.js +1 -1
  4. package/dist/cjs/q2-avatar.cjs.entry.js +1 -1
  5. package/dist/cjs/q2-btn_2.cjs.entry.js +3 -3
  6. package/dist/cjs/q2-calendar.cjs.entry.js +2 -2
  7. package/dist/cjs/q2-carousel-pane.cjs.entry.js +1 -1
  8. package/dist/cjs/q2-carousel.cjs.entry.js +1 -1
  9. package/dist/cjs/q2-checkbox-group.cjs.entry.js +2 -2
  10. package/dist/cjs/q2-checkbox.cjs.entry.js +1 -1
  11. package/dist/cjs/q2-dropdown-item.cjs.entry.js +1 -1
  12. package/dist/cjs/q2-dropdown.cjs.entry.js +2 -2
  13. package/dist/cjs/q2-editable-field.cjs.entry.js +1 -1
  14. package/dist/cjs/q2-icon.cjs.entry.js +23 -10
  15. package/dist/cjs/q2-input.cjs.entry.js +8 -3
  16. package/dist/cjs/q2-loc.cjs.entry.js +1 -1
  17. package/dist/cjs/q2-optgroup.cjs.entry.js +1 -1
  18. package/dist/cjs/q2-option.cjs.entry.js +43 -5
  19. package/dist/cjs/q2-radio-group.cjs.entry.js +1 -1
  20. package/dist/cjs/q2-radio.cjs.entry.js +1 -1
  21. package/dist/cjs/q2-section.cjs.entry.js +1 -1
  22. package/dist/cjs/q2-select.cjs.entry.js +104 -62
  23. package/dist/cjs/q2-stepper-pane.cjs.entry.js +27 -0
  24. package/dist/cjs/q2-stepper.cjs.entry.js +187 -0
  25. package/dist/cjs/q2-tab-container.cjs.entry.js +12 -464
  26. package/dist/cjs/q2-tecton-elements.cjs.js +1 -1
  27. package/dist/cjs/q2-textarea.cjs.entry.js +1 -1
  28. package/dist/collection/collection-manifest.json +2 -0
  29. package/dist/collection/components/q2-btn/index.js +2 -2
  30. package/dist/collection/components/q2-calendar/styles.css +18 -0
  31. package/dist/collection/components/q2-checkbox-group/styles.css +12 -2
  32. package/dist/collection/components/q2-dropdown/styles.css +18 -0
  33. package/dist/collection/components/q2-icon/icons.js +22 -22
  34. package/dist/collection/components/q2-icon/index.js +41 -9
  35. package/dist/collection/components/q2-icon/styles.css +57 -50
  36. package/dist/collection/components/q2-input/index.js +7 -2
  37. package/dist/collection/components/q2-option/index.js +104 -8
  38. package/dist/collection/components/q2-option/styles.css +31 -37
  39. package/dist/collection/components/q2-select/index.js +106 -62
  40. package/dist/collection/components/q2-select/styles.css +18 -0
  41. package/dist/collection/components/q2-stepper/index.js +283 -0
  42. package/dist/collection/components/q2-stepper/styles.css +253 -0
  43. package/dist/collection/components/q2-stepper-pane/index.js +76 -0
  44. package/dist/collection/components/q2-stepper-pane/styles.css +70 -0
  45. package/dist/collection/components/q2-tab-container/index.js +2 -9
  46. package/dist/collection/utils/index.js +23 -2
  47. package/dist/esm/{icons-5506a72c.js → icons-17612675.js} +22 -22
  48. package/dist/esm/index-da24669a.js +548 -0
  49. package/dist/esm/loader.js +1 -1
  50. package/dist/esm/q2-avatar.entry.js +1 -1
  51. package/dist/esm/q2-btn_2.entry.js +3 -3
  52. package/dist/esm/q2-calendar.entry.js +2 -2
  53. package/dist/esm/q2-carousel-pane.entry.js +1 -1
  54. package/dist/esm/q2-carousel.entry.js +1 -1
  55. package/dist/esm/q2-checkbox-group.entry.js +2 -2
  56. package/dist/esm/q2-checkbox.entry.js +1 -1
  57. package/dist/esm/q2-dropdown-item.entry.js +1 -1
  58. package/dist/esm/q2-dropdown.entry.js +2 -2
  59. package/dist/esm/q2-editable-field.entry.js +1 -1
  60. package/dist/esm/q2-icon.entry.js +23 -10
  61. package/dist/esm/q2-input.entry.js +8 -3
  62. package/dist/esm/q2-loc.entry.js +1 -1
  63. package/dist/esm/q2-optgroup.entry.js +1 -1
  64. package/dist/esm/q2-option.entry.js +44 -6
  65. package/dist/esm/q2-radio-group.entry.js +1 -1
  66. package/dist/esm/q2-radio.entry.js +1 -1
  67. package/dist/esm/q2-section.entry.js +1 -1
  68. package/dist/esm/q2-select.entry.js +104 -62
  69. package/dist/esm/q2-stepper-pane.entry.js +23 -0
  70. package/dist/esm/q2-stepper.entry.js +183 -0
  71. package/dist/esm/q2-tab-container.entry.js +2 -454
  72. package/dist/esm/q2-tecton-elements.js +1 -1
  73. package/dist/esm/q2-textarea.entry.js +1 -1
  74. package/dist/q2-tecton-elements/{p-f1ec7948.entry.js → p-2a28baa9.entry.js} +1 -1
  75. package/dist/q2-tecton-elements/{p-9f328dbd.entry.js → p-2c2a5d58.entry.js} +1 -1
  76. package/dist/q2-tecton-elements/{p-93799868.entry.js → p-2f2bbed9.entry.js} +3 -3
  77. package/dist/q2-tecton-elements/p-37d281b7.entry.js +1 -0
  78. package/dist/q2-tecton-elements/{p-dfe693e9.entry.js → p-3f2590c0.entry.js} +1 -1
  79. package/dist/q2-tecton-elements/p-4d283b84.entry.js +1 -0
  80. package/dist/q2-tecton-elements/p-5289f040.entry.js +1 -0
  81. package/dist/q2-tecton-elements/{p-54cbd826.entry.js → p-576509e6.entry.js} +1 -1
  82. package/dist/q2-tecton-elements/{p-c6d4933e.entry.js → p-64eef8d1.entry.js} +1 -1
  83. package/dist/q2-tecton-elements/{p-89ae4f7b.entry.js → p-65894494.entry.js} +1 -1
  84. package/dist/q2-tecton-elements/p-6ed006a7.entry.js +1 -0
  85. package/dist/q2-tecton-elements/p-6f570344.js +1 -0
  86. package/dist/q2-tecton-elements/{p-0c23d50a.entry.js → p-7520656d.entry.js} +1 -1
  87. package/dist/q2-tecton-elements/p-792d1170.entry.js +1 -0
  88. package/dist/q2-tecton-elements/{p-ccb8126f.entry.js → p-82b24667.entry.js} +1 -1
  89. package/dist/q2-tecton-elements/{p-ec245511.entry.js → p-86116f5c.entry.js} +1 -1
  90. package/dist/q2-tecton-elements/{p-ed433950.entry.js → p-891ca6f8.entry.js} +1 -1
  91. package/dist/q2-tecton-elements/p-8b4f6d3f.entry.js +1 -0
  92. package/dist/q2-tecton-elements/{p-0e9e5b53.entry.js → p-9b420e22.entry.js} +1 -1
  93. package/dist/q2-tecton-elements/p-aaa55918.js +1 -0
  94. package/dist/q2-tecton-elements/{p-915ce8d8.entry.js → p-c14e0622.entry.js} +1 -1
  95. package/dist/q2-tecton-elements/p-c92e3bc2.entry.js +1 -0
  96. package/dist/q2-tecton-elements/{p-7a952b02.entry.js → p-d0d605dc.entry.js} +1 -1
  97. package/dist/q2-tecton-elements/p-e3a27b97.entry.js +1 -0
  98. package/dist/q2-tecton-elements/{p-72f9686c.entry.js → p-ebee91e2.entry.js} +1 -1
  99. package/dist/q2-tecton-elements/q2-tecton-elements.esm.js +1 -1
  100. package/dist/types/components/q2-icon/index.d.ts +1 -0
  101. package/dist/types/components/q2-option/index.d.ts +9 -2
  102. package/dist/types/components/q2-select/index.d.ts +4 -1
  103. package/dist/types/components/q2-stepper/index.d.ts +33 -0
  104. package/dist/types/components/q2-stepper-pane/index.d.ts +9 -0
  105. package/dist/types/components.d.ts +46 -0
  106. package/dist/types/global.d.ts +1 -0
  107. package/dist/types/utils/index.d.ts +5 -2
  108. package/dist/types/workspace/workspace/{_tecton-production_release_1.9.x → Tecton_tecton-production_master}/packages/q2-tecton-elements/.stencil/test/helpers.d.ts +0 -0
  109. package/package.json +2 -2
  110. package/dist/cjs/index-2dcb1a72.js +0 -99
  111. package/dist/esm/index-f3de8cee.js +0 -91
  112. package/dist/q2-tecton-elements/p-031a8f06.js +0 -1
  113. package/dist/q2-tecton-elements/p-0feefe56.js +0 -1
  114. package/dist/q2-tecton-elements/p-1022a1c6.entry.js +0 -1
  115. package/dist/q2-tecton-elements/p-12f6dc10.entry.js +0 -1
  116. package/dist/q2-tecton-elements/p-5da60194.entry.js +0 -1
  117. package/dist/q2-tecton-elements/p-b0cb8867.entry.js +0 -1
  118. package/dist/q2-tecton-elements/p-d93abdce.entry.js +0 -1
  119. package/dist/q2-tecton-elements/p-e5e8eac3.entry.js +0 -1
@@ -89,7 +89,11 @@ fieldset.has-error .error-icon-container {
89
89
  position: absolute;
90
90
  width: 40%;
91
91
  text-align: right;
92
- background: linear-gradient(to right, transparent, white);
92
+ background: linear-gradient(
93
+ to right,
94
+ var(--tct-checkbox-group-error-gradient-start, var(--t-base-a0, rgba(255, 255, 255, 0))),
95
+ var(--tct-checkbox-group-error-gradient-end, var(--t-base, rgba(255, 255, 255)))
96
+ );
93
97
  }
94
98
 
95
99
  fieldset.has-error legend + div.error-icon-container.no-label {
@@ -117,7 +121,13 @@ legend.sr-only {
117
121
  );
118
122
  color: var(
119
123
  --tct-input-label-optional-font-color,
120
- var(--tct-a11y-color, var(--t-a11y-gray-color, var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))))
124
+ var(
125
+ --tct-a11y-color,
126
+ var(
127
+ --t-a11y-gray-color,
128
+ var(--tct-gray-7, var(--t-gray-7, var(--tct-gray-d1, var(--app-gray-d1, #666666))))
129
+ )
130
+ )
121
131
  );
122
132
  font-size: var(--tct-input-label-optional-font-size, 12px);
123
133
  font-weight: var(--tct-input-label-optional-font-weight, 400);
@@ -80,6 +80,24 @@ button {
80
80
  visibility: hidden;
81
81
  transition: opacity var(--app-tween-1);
82
82
  border-radius: var(--tct-dropdown-element-br, 0);
83
+ --comp-scrollbar-size: var(--tct-scrollbar-size, var(--app-scale-1x, 5px));
84
+ --comp-scrollbar-border-radius: var(--tct-scrollbar-border-radius, var(--app-border-radius-1, 3px));
85
+ --comp-scrollbar-color: var(--tct-scrollbar-color, var(--t-a11y-gray-color, #747474));
86
+ scrollbar-width: thin;
87
+ scrollbar-color: var(--comp-scrollbar-color) transparent;
88
+ }
89
+ .q2-element-dropdown::-webkit-scrollbar {
90
+ width: var(--comp-scrollbar-size);
91
+ height: var(--comp-scrollbar-size);
92
+ margin: 5px;
93
+ }
94
+ .q2-element-dropdown::-webkit-scrollbar-thumb {
95
+ background: var(--comp-scrollbar-color);
96
+ border-radius: var(--comp-scrollbar-border-radius);
97
+ }
98
+ .q2-element-dropdown::-webkit-scrollbar-track {
99
+ background: transparent;
100
+ border-radius: var(--comp-scrollbar-border-radius);
83
101
  }
84
102
 
85
103
  .q2-element-dropdown.sizable {
@@ -24,7 +24,7 @@ const icons = {
24
24
  h("path", { d: "M3 6.565L7.565 2m15.522 4.565L18.522 2" })))))
25
25
  },
26
26
  ambulance: {
27
- markup: () => (h("g", { "stroke-width": "1.5" },
27
+ markup: () => (h("g", null,
28
28
  h("g", { class: "stroke-primary" },
29
29
  h("path", { d: "M5.371 20.951H3.339V8.08h14.903l5.42 5.419v7.452h-2.033m-10.838 0h5.419" }),
30
30
  h("path", { d: "M16.887 10.79v3.387h4.065" })),
@@ -873,10 +873,10 @@ const icons = {
873
873
  },
874
874
  'card-amazon': {
875
875
  markup: () => (h("g", null,
876
- h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
877
- h("g", { class: "filled" },
878
- h("path", { d: "M14.765 13.469c-.852.629-2.087.963-3.151.963a5.703 5.703 0 0 1-3.85-1.468c-.08-.072-.008-.171.088-.115a7.748 7.748 0 0 0 3.851 1.021c.945 0 1.983-.196 2.939-.602.144-.06.265.096.123.2z" }),
879
- h("path", { d: "M15.12 13.064c-.108-.14-.72-.066-.995-.033-.083.01-.096-.063-.02-.116.487-.342 1.286-.244 1.38-.129.093.116-.025.917-.483 1.3-.07.058-.137.027-.106-.05.103-.257.333-.832.224-.972zm-.976-2.569v-.333c0-.05.039-.084.085-.084h1.492c.047 0 .086.035.086.084v.285c0 .048-.04.11-.112.21l-.773 1.104c.287-.007.59.036.85.182.06.033.075.083.08.13v.356c0 .049-.054.105-.11.076a1.719 1.719 0 0 0-1.577.003c-.052.027-.106-.028-.106-.077v-.339c0-.054.001-.146.055-.228l.896-1.285h-.78a.083.083 0 0 1-.086-.084zm-5.442 2.08h-.454a.085.085 0 0 1-.081-.077v-2.33c0-.047.04-.084.088-.084h.422c.045.002.08.036.083.078v.305h.008c.11-.295.318-.432.598-.432.283 0 .462.137.588.432a.645.645 0 0 1 .627-.432c.191 0 .399.078.526.255.144.196.114.48.114.73v1.47c0 .047-.04.084-.088.084h-.453a.085.085 0 0 1-.082-.083v-1.235c0-.098.009-.343-.013-.436-.033-.157-.135-.201-.265-.201a.302.302 0 0 0-.272.19c-.046.118-.042.315-.042.447v1.235c0 .046-.04.084-.088.084h-.453a.085.085 0 0 1-.082-.084v-1.235c0-.26.043-.642-.28-.642-.326 0-.313.372-.313.642v1.235a.085.085 0 0 1-.087.083zm8.39-2.54c.674 0 1.038.579 1.038 1.314 0 .71-.403 1.275-1.038 1.275-.661 0-1.022-.579-1.022-1.3 0-.725.365-1.289 1.022-1.289zm.004.476c-.335 0-.356.455-.356.74 0 .284-.005.892.351.892.352 0 .369-.49.369-.79 0-.195-.009-.43-.068-.617-.05-.162-.152-.225-.296-.225zm1.907 2.064h-.452a.085.085 0 0 1-.081-.084l-.001-2.331a.086.086 0 0 1 .087-.076h.421c.04.002.072.03.08.065v.357h.01c.126-.319.304-.471.618-.471.203 0 .402.074.53.275.118.186.118.5.118.725V12.5a.086.086 0 0 1-.087.073h-.455a.086.086 0 0 1-.08-.073v-1.264c0-.255.03-.628-.284-.628-.11 0-.212.074-.263.187a1.038 1.038 0 0 0-.072.44v1.255c0 .047-.04.084-.089.084zm-6.048-1.113c0 .176.004.324-.085.481-.072.128-.187.207-.314.207-.175 0-.277-.133-.277-.33 0-.386.347-.457.676-.457v.099zm.457 1.107a.095.095 0 0 1-.107.01c-.15-.125-.178-.183-.26-.302-.25.253-.426.33-.749.33-.382 0-.68-.236-.68-.708 0-.368.2-.619.485-.742.246-.108.59-.127.854-.157v-.059c0-.108.008-.236-.056-.33-.055-.083-.161-.117-.255-.117-.173 0-.327.088-.365.272-.007.041-.037.082-.078.084l-.441-.048c-.036-.008-.078-.038-.067-.095.101-.534.583-.695 1.015-.695.22 0 .51.059.684.226.22.206.2.481.2.781v.707c0 .213.088.307.17.421.03.041.036.09 0 .12a16.78 16.78 0 0 0-.349.302zm-6.408-1.107c0 .176.005.324-.085.481-.072.128-.186.207-.314.207-.174 0-.276-.133-.276-.33 0-.386.347-.457.675-.457v.099zm.458 1.107a.095.095 0 0 1-.108.01c-.15-.125-.177-.183-.26-.302-.25.253-.426.33-.748.33-.382 0-.68-.236-.68-.708 0-.368.2-.619.484-.742.247-.108.59-.127.854-.157v-.059c0-.108.008-.236-.055-.33-.055-.083-.161-.117-.255-.117-.173 0-.327.088-.365.272-.008.041-.038.082-.079.084l-.44-.048c-.037-.008-.078-.038-.067-.095.1-.534.583-.695 1.014-.695.221 0 .51.059.684.226.221.206.2.481.2.781v.707c0 .213.088.307.171.421.029.041.036.09-.001.12-.093.078-.258.221-.348.302h-.001z" }))))
876
+ h("path", { class: "stroke-primary", d: "M2 19.67V6.47C2 5.66 2.66 5 3.47 5h19.06c.81 0 1.47.66 1.47 1.47v13.2c0 .8-.66 1.46-1.47 1.46H3.47c-.81 0-1.47-.65-1.47-1.46Z" }),
877
+ h("g", { class: "fill-primary" },
878
+ h("path", { d: "M14.77 14.47a5.7 5.7 0 0 1-7-.5c-.09-.08-.01-.18.08-.12a7.75 7.75 0 0 0 6.8.42c.14-.06.26.1.12.2Z" }),
879
+ h("path", { d: "M15.12 14.06c-.1-.14-.72-.06-1-.03-.08.01-.1-.06-.01-.11.48-.35 1.28-.25 1.38-.13.09.11-.03.91-.49 1.3-.07.05-.13.02-.1-.05.1-.26.33-.84.22-.98Zm-.98-2.56v-.34c0-.05.04-.08.09-.08h1.5c.04 0 .08.03.08.08v.29c0 .05-.04.1-.12.2l-.77 1.11c.29 0 .6.04.85.18.06.04.08.09.08.13v.36c0 .05-.05.1-.1.08a1.72 1.72 0 0 0-1.58 0c-.06.03-.11-.03-.11-.08v-.34c0-.05 0-.14.05-.23l.9-1.28h-.78a.08.08 0 0 1-.09-.08ZM8.7 13.58h-.45a.09.09 0 0 1-.08-.08v-2.33c0-.05.04-.09.09-.09h.42c.04 0 .08.04.08.08v.3c.12-.29.33-.43.6-.43.29 0 .47.14.6.44.09-.27.34-.44.62-.44.2 0 .4.08.53.26.14.2.11.48.11.73v1.47c0 .05-.04.08-.09.08h-.45a.09.09 0 0 1-.08-.08v-1.23l-.01-.44c-.04-.16-.14-.2-.27-.2a.3.3 0 0 0-.27.19c-.05.12-.04.31-.04.45v1.23c0 .05-.04.09-.1.09h-.45a.08.08 0 0 1-.08-.09v-1.23c0-.26.05-.65-.28-.65-.32 0-.31.38-.31.65v1.23a.09.09 0 0 1-.09.08Zm8.4-2.54c.67 0 1.03.57 1.03 1.3 0 .72-.4 1.28-1.04 1.28-.66 0-1.02-.57-1.02-1.3 0-.72.37-1.29 1.02-1.29Zm0 .47c-.34 0-.36.46-.36.74 0 .29 0 .9.35.9s.37-.5.37-.8c0-.2 0-.43-.07-.61-.05-.17-.15-.23-.3-.23Zm-4.4-.5c.23 0 .52.06.7.23.18.18.2.41.2.67v.82c0 .2.08.3.16.42.03.04.04.09 0 .12l-.35.3a.1.1 0 0 1-.1 0c-.15-.12-.18-.17-.27-.3-.24.26-.42.34-.74.34-.39 0-.68-.24-.68-.71 0-.37.2-.62.48-.74.25-.11.6-.13.86-.16v-.06c0-.1 0-.23-.06-.33-.06-.08-.16-.12-.26-.12-.17 0-.32.1-.36.28 0 .04-.04.08-.08.08l-.44-.05c-.04 0-.08-.04-.07-.1.1-.53.59-.69 1.02-.69Zm-5.94 0c.22 0 .5.06.68.23.2.18.2.41.2.67v.82c0 .2.09.3.17.42.03.04.04.09 0 .12l-.35.3a.1.1 0 0 1-.1 0c-.16-.12-.18-.17-.27-.3-.25.26-.42.34-.74.34-.39 0-.68-.24-.68-.71 0-.37.2-.62.48-.74.25-.11.59-.13.85-.16v-.06c0-.1.01-.23-.05-.33-.06-.08-.16-.12-.26-.12-.17 0-.32.1-.36.28 0 .04-.04.08-.08.08l-.44-.05c-.04 0-.08-.04-.07-.1.1-.53.59-.69 1.02-.69Zm12.93.03c.2 0 .4.07.52.27.1.15.12.4.12.6v1.59c0 .04-.04.07-.08.07h-.46a.09.09 0 0 1-.08-.07v-1.26c0-.26.03-.63-.28-.63-.11 0-.21.07-.27.19-.04.1-.06.21-.07.32v1.37c0 .05-.04.08-.09.08h-.45a.09.09 0 0 1-.08-.08v-2.33c0-.04.04-.08.09-.08h.42c.04 0 .07.03.08.07v.36c.13-.32.31-.47.63-.47Zm-6.74 1.32c-.32 0-.67.07-.67.46 0 .2.1.33.28.33.12 0 .24-.08.31-.2.09-.16.09-.31.09-.49Zm-5.95 0c-.32 0-.67.07-.67.46 0 .2.1.33.28.33.12 0 .24-.08.3-.2.1-.16.1-.31.1-.49Z" }))))
880
880
  },
881
881
  'card-amazon-color': {
882
882
  markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
@@ -988,7 +988,7 @@ const icons = {
988
988
  'card-amex': {
989
989
  markup: () => (h("g", null,
990
990
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
991
- h("path", { d: "M7.074 12.255H8.1l-.512-1.257-.513 1.257zM21.36 9.867h-2.626l-.641.691-.577-.691h-5.573l-.513 1.131-.512-1.131H8.676v.502l-.256-.502H6.498l-1.858 4.4h2.242l.256-.692h.641l.256.692h2.499v-.503l.192.503h1.281l.192-.566v.566h5.125l.64-.692.577.692h2.627l-1.666-2.2 1.858-2.2zm-7.751 3.771h-.705v-2.451l-1.09 2.451h-.64l-1.089-2.451v2.451H8.612l-.257-.691H6.818l-.256.691h-.833l1.345-3.143h1.09L9.38 13.45v-2.954h1.217l.961 2.137.897-2.137h1.217v3.142h-.064zm6.342 0h-.962l-.832-1.068-.961 1.068h-2.883v-3.143h2.947l.897 1.006.96-1.005h.898l-1.41 1.57 1.346 1.572zm-4.933-2.514v.566h1.601v.628h-1.601v.629h1.793l.833-.943-.769-.88h-1.857z", class: "filled" })))
991
+ h("path", { d: "M7.074 12.255H8.1l-.512-1.257-.513 1.257zM21.36 9.867h-2.626l-.641.691-.577-.691h-5.573l-.513 1.131-.512-1.131H8.676v.502l-.256-.502H6.498l-1.858 4.4h2.242l.256-.692h.641l.256.692h2.499v-.503l.192.503h1.281l.192-.566v.566h5.125l.64-.692.577.692h2.627l-1.666-2.2 1.858-2.2zm-7.751 3.771h-.705v-2.451l-1.09 2.451h-.64l-1.089-2.451v2.451H8.612l-.257-.691H6.818l-.256.691h-.833l1.345-3.143h1.09L9.38 13.45v-2.954h1.217l.961 2.137.897-2.137h1.217v3.142h-.064zm6.342 0h-.962l-.832-1.068-.961 1.068h-2.883v-3.143h2.947l.897 1.006.96-1.005h.898l-1.41 1.57 1.346 1.572zm-4.933-2.514v.566h1.601v.628h-1.601v.629h1.793l.833-.943-.769-.88h-1.857z", class: "fill-primary" })))
992
992
  },
993
993
  'card-amex-color': {
994
994
  markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
@@ -999,7 +999,7 @@ const icons = {
999
999
  'card-applepay': {
1000
1000
  markup: () => (h("g", null,
1001
1001
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1002
- h("g", { class: "filled" },
1002
+ h("g", { class: "fill-primary" },
1003
1003
  h("path", { d: "M15.837 13.609c-.156.343-.23.497-.43.8-.278.424-.67.952-1.157.957-.432.004-.543-.282-1.13-.278-.587.003-.71.283-1.142.279-.486-.005-.858-.481-1.137-.906-.778-1.185-.86-2.576-.38-3.316.342-.526.88-.833 1.387-.833.515 0 .84.283 1.266.283.414 0 .666-.283 1.262-.283.45 0 .928.245 1.268.669-1.115.61-.934 2.202.193 2.628z" }),
1004
1004
  h("path", { d: "M13.924 9.838c.216-.278.38-.67.32-1.071-.353.024-.767.249-1.008.542-.22.267-.4.661-.33 1.045.386.012.786-.218 1.018-.516z" }))))
1005
1005
  },
@@ -1013,7 +1013,7 @@ const icons = {
1013
1013
  'card-bitcoin': {
1014
1014
  markup: () => (h("g", null,
1015
1015
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1016
- h("g", { class: "filled" },
1016
+ h("g", { class: "fill-primary" },
1017
1017
  h("path", { d: "M12.977 10.667l-.24.964c.272.068 1.113.345 1.249-.2.142-.569-.736-.696-1.009-.764zm-.362 1.451l-.265 1.063c.328.081 1.337.405 1.486-.194.156-.626-.893-.787-1.22-.869z" }),
1018
1018
  h("path", { d: "M14.241 7.086a5.133 5.133 0 1 0-2.482 9.962 5.133 5.133 0 0 0 2.482-9.962zm1.022 4.25c-.074.5-.352.741-.72.826.506.264.763.667.518 1.367-.304.868-1.026.942-1.987.76l-.233.934-.563-.14.23-.922a21.157 21.157 0 0 1-.45-.117l-.23.927-.563-.14.234-.937c-.132-.034-.266-.07-.402-.104l-.733-.182.28-.645s.415.11.41.102c.159.04.23-.064.257-.133l.633-2.536c.007-.119-.035-.27-.263-.327a7.442 7.442 0 0 0-.41-.102l.15-.601.778.194v.003c.116.029.236.056.359.084l.23-.925.564.14-.227.907c.151.035.304.07.452.107l.225-.901.563.14-.23.926c.71.244 1.23.611 1.128 1.294z" }))))
1019
1019
  },
@@ -1027,7 +1027,7 @@ const icons = {
1027
1027
  'card-dinersclub': {
1028
1028
  markup: () => (h("g", null,
1029
1029
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1030
- h("g", { class: "filled" },
1030
+ h("g", { class: "fill-primary" },
1031
1031
  h("path", { d: "M10.8 10.388v3.357a1.832 1.832 0 0 0 0-3.357zm-2.567 1.679c0 .751.454 1.395 1.1 1.678v-3.357c-.646.283-1.1.927-1.1 1.679z" }),
1032
1032
  h("path", { d: "M15.933 8.4h-5.866a3.667 3.667 0 1 0 0 7.333h5.866a3.667 3.667 0 1 0 0-7.333zM10.067 15a2.934 2.934 0 1 1 0-5.867 2.934 2.934 0 0 1 0 5.867z" }))))
1033
1033
  },
@@ -1042,7 +1042,7 @@ const icons = {
1042
1042
  'card-discover': {
1043
1043
  markup: () => (h("g", null,
1044
1044
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1045
- h("g", { class: "filled" },
1045
+ h("g", { class: "fill-primary" },
1046
1046
  h("path", { d: "M13.502 10.61c-.824 0-1.493.644-1.493 1.439 0 .845.64 1.476 1.493 1.476.832 0 1.488-.64 1.488-1.46 0-.815-.65-1.454-1.488-1.454zm-8.473.053h-.803v2.8h.798c.424 0 .73-.101 1-.324.318-.264.507-.662.507-1.075 0-.827-.617-1.4-1.502-1.4zm.638 2.103c-.173.155-.394.222-.748.222h-.146v-1.85h.146c.354 0 .566.063.748.226a.943.943 0 0 1 .301.696.96.96 0 0 1-.3.706zm1.116-2.103h.544v2.8h-.544zm1.88 1.073c-.328-.12-.424-.2-.424-.352 0-.176.171-.31.407-.31.164 0 .298.066.442.226l.284-.372a1.22 1.22 0 0 0-.822-.311c-.495 0-.873.344-.873.8 0 .387.176.583.688.77.214.074.323.125.378.16a.33.33 0 0 1 .164.288c0 .228-.18.395-.425.395-.26 0-.47-.13-.595-.374l-.352.341c.251.369.553.534.969.534.566 0 .966-.38.966-.92 0-.446-.186-.648-.807-.875zm.978.328c0 .823.646 1.46 1.478 1.46.235 0 .436-.045.683-.162v-.644c-.219.22-.41.307-.66.307-.549 0-.938-.398-.938-.965 0-.537.402-.961.915-.961.259 0 .457.091.683.315v-.644a1.403 1.403 0 0 0-.672-.17 1.47 1.47 0 0 0-1.489 1.464zm6.585.479l-.747-1.88h-.595l1.186 2.87h.293l1.21-2.87h-.591zm1.595.92h1.548v-.475h-1.002v-.755h.964v-.475h-.964v-.621h1.002v-.474h-1.548zm3.709-1.973c0-.525-.36-.827-.99-.827h-.81v2.8h.547v-1.126h.071l.754 1.126h.672l-.88-1.18c.41-.084.636-.366.636-.794zm-1.095.46h-.159v-.846h.168c.341 0 .524.143.524.416 0 .28-.183.43-.533.43z" }))))
1047
1047
  },
1048
1048
  'card-discover-color': {
@@ -1057,7 +1057,7 @@ const icons = {
1057
1057
  'card-googlepay': {
1058
1058
  markup: () => (h("g", null,
1059
1059
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1060
- h("g", { class: "filled" },
1060
+ h("g", { class: "fill-primary" },
1061
1061
  h("path", { d: "M9.883 13.533a.55.55 0 0 1-.55-.55V11.15a.55.55 0 0 1 1.1 0v1.833a.55.55 0 0 1-.55.55zm6.234 0a.55.55 0 0 1-.55-.55V11.15a.55.55 0 0 1 1.1 0v1.833a.55.55 0 0 1-.55.55zM10.8 10.6v4.033c0 .203.164.367.367.367h.366v.917a.55.55 0 0 0 1.1 0V15h.734v.917a.55.55 0 0 0 1.1 0V15h.366a.367.367 0 0 0 .367-.367V10.6h-4.4zm0-.367h4.4c0-.614-.252-1.168-.658-1.568l.585-.779a.367.367 0 1 0-.587-.44l-.6.8a2.187 2.187 0 0 0-1.88 0l-.6-.8a.367.367 0 0 0-.587.44l.585.78a2.193 2.193 0 0 0-.658 1.566z" }))))
1062
1062
  },
1063
1063
  'card-googlepay-color': {
@@ -1070,7 +1070,7 @@ const icons = {
1070
1070
  'card-jcb': {
1071
1071
  markup: () => (h("g", null,
1072
1072
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1073
- h("g", { class: "filled" },
1073
+ h("g", { class: "fill-primary" },
1074
1074
  h("path", { d: "M16.637 12.26h.897c.256 0 .403.137.445.321a.442.442 0 0 1 0 .196c-.043.187-.198.321-.43.321h-.912v-.838zm1.235-.949a.413.413 0 0 1 0 .179c-.048.217-.221.297-.445.297h-.79v-.773h.805c.253 0 .391.122.43.297zM19.673 7.3v8.103c0 .79-.64 1.43-1.43 1.43H15.86v-3.239h2.471c.537-.004 1.004-.277 1.004-.794a.678.678 0 0 0-.007-.099c-.054-.388-.42-.63-.904-.667v-.019c.483-.074.724-.382.724-.729a.661.661 0 0 0-.341-.592c-.267-.159-.57-.155-.843-.155H15.86V8.73c0-.79.64-1.43 1.43-1.43h2.383zM6.327 12.813V8.73c0-.79.64-1.43 1.43-1.43h2.383v8.103c0 .79-.638 1.43-1.428 1.43H6.327v-3.348c.58.16 1.98.338 2.804.024.518-.195.788-.565.788-1.126v-1.844H8.552v1.844c0 .372-.205.659-.57.753-.47.122-1.161-.084-1.655-.323zm4.766-1.843V8.73c0-.79.64-1.43 1.43-1.43h2.384v8.103c0 .79-.64 1.43-1.43 1.43h-2.384v-3.668c.38.326.916.45 1.41.496a6.292 6.292 0 0 0 2.067-.176v-.672c-.431.215-.968.408-1.576.347-.669-.078-1.002-.496-1.002-1.093 0-.628.37-1.03 1.017-1.095.52-.052 1.074.104 1.562.349v-.673a6.414 6.414 0 0 0-1.837-.19c-.57.027-1.209.14-1.64.511z" }))))
1075
1075
  },
1076
1076
  'card-jcb-color': {
@@ -1085,7 +1085,7 @@ const icons = {
1085
1085
  'card-maestro': {
1086
1086
  markup: () => (h("g", null,
1087
1087
  h("path", { d: "M22.533 20.133H3.467A1.47 1.47 0 0 1 2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466z", class: "stroke-primary" }),
1088
- h("path", { d: "M6.4 12.067c0 2.227 1.818 4.033 4.062 4.033a4.06 4.06 0 0 0 2.541-.89c.695.555 1.574.89 2.535.89 2.244 0 4.062-1.806 4.062-4.033 0-2.228-1.818-4.034-4.062-4.034-.961 0-1.843.333-2.538.888a4.06 4.06 0 0 0-2.538-.888C8.218 8.033 6.4 9.84 6.4 12.067zm1.015 0c0-1.668 1.367-3.025 3.047-3.025.899 0 1.706.39 2.264 1.008h-.701c-.095.162-.179.33-.25.504h1.32c.094.16.172.328.235.504h-1.72a3.939 3.939 0 0 0-.098.505h1.95c.028.164.046.332.046.504h-2.03c0 .17.014.338.034.504h1.95a2.85 2.85 0 0 1-.132.504h-1.72c.045.173.099.341.165.504h1.321c-.106.181-.23.35-.37.504h-.701c.08.138.17.27.266.396a3.04 3.04 0 0 1-1.83.613c-1.68 0-3.046-1.357-3.046-3.025z", class: "filled" })))
1088
+ h("path", { d: "M6.4 12.067c0 2.227 1.818 4.033 4.062 4.033a4.06 4.06 0 0 0 2.541-.89c.695.555 1.574.89 2.535.89 2.244 0 4.062-1.806 4.062-4.033 0-2.228-1.818-4.034-4.062-4.034-.961 0-1.843.333-2.538.888a4.06 4.06 0 0 0-2.538-.888C8.218 8.033 6.4 9.84 6.4 12.067zm1.015 0c0-1.668 1.367-3.025 3.047-3.025.899 0 1.706.39 2.264 1.008h-.701c-.095.162-.179.33-.25.504h1.32c.094.16.172.328.235.504h-1.72a3.939 3.939 0 0 0-.098.505h1.95c.028.164.046.332.046.504h-2.03c0 .17.014.338.034.504h1.95a2.85 2.85 0 0 1-.132.504h-1.72c.045.173.099.341.165.504h1.321c-.106.181-.23.35-.37.504h-.701c.08.138.17.27.266.396a3.04 3.04 0 0 1-1.83.613c-1.68 0-3.046-1.357-3.046-3.025z", class: "fill-primary" })))
1089
1089
  },
1090
1090
  'card-maestro-color': {
1091
1091
  markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
@@ -1099,7 +1099,7 @@ const icons = {
1099
1099
  'card-mastercard': {
1100
1100
  markup: () => (h("g", null,
1101
1101
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1102
- h("g", { class: "filled" },
1102
+ h("g", { class: "fill-primary" },
1103
1103
  h("path", { d: "M15.538 8.033A4.06 4.06 0 0 0 13 8.921a4.056 4.056 0 0 0-2.538-.888C8.218 8.033 6.4 9.84 6.4 12.067S8.218 16.1 10.462 16.1c.96 0 1.84-.335 2.535-.89.696.556 1.579.89 2.541.89 2.244 0 4.062-1.806 4.062-4.033 0-2.228-1.818-4.034-4.062-4.034zm0 7.059a3.04 3.04 0 0 1-1.83-.613 3.92 3.92 0 0 0 .267-.396h-.7a3.011 3.011 0 0 1-.37-.504h1.32c.067-.163.12-.331.165-.504h-1.72a3.014 3.014 0 0 1-.132-.504h1.95c.02-.166.035-.333.035-.504h-2.03c0-.172.018-.34.045-.505h1.95a4.003 4.003 0 0 0-.098-.504h-1.72c.063-.176.141-.344.234-.504h1.321a3.978 3.978 0 0 0-.25-.504h-.7a3.046 3.046 0 0 1 2.264-1.008c1.68 0 3.046 1.357 3.046 3.025s-1.367 3.025-3.047 3.025z" }))))
1104
1104
  },
1105
1105
  'card-mastercard-color': {
@@ -1114,7 +1114,7 @@ const icons = {
1114
1114
  'card-paypal': {
1115
1115
  markup: () => (h("g", null,
1116
1116
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1117
- h("g", { class: "filled" },
1117
+ h("g", { class: "fill-primary" },
1118
1118
  h("path", { d: "M15.886 9.867h-1.284a.179.179 0 0 0-.177.15l-.519 3.294c-.01.065.04.123.106.123h.659a.125.125 0 0 0 .123-.105l.147-.934a.178.178 0 0 1 .177-.15h.406c.846 0 1.334-.41 1.462-1.222.058-.354.002-.633-.164-.829-.182-.214-.506-.327-.936-.327zm.148 1.202c-.07.461-.422.461-.763.461h-.193l.136-.86a.107.107 0 0 1 .105-.09c.282 0 .53-.013.653.131.067.08.088.197.062.358zM6.725 9.867H5.441a.179.179 0 0 0-.177.15l-.519 3.294c-.01.065.04.123.106.123h.613a.179.179 0 0 0 .177-.15l.14-.889a.178.178 0 0 1 .176-.15h.406c.846 0 1.335-.41 1.462-1.222.058-.354.002-.633-.164-.829-.181-.214-.506-.327-.936-.327zm.149 1.202c-.07.461-.423.461-.763.461h-.194l.136-.86a.107.107 0 0 1 .106-.09h.088c.232 0 .451 0 .564.131.068.08.088.197.063.358zm3.69-.014H9.95a.107.107 0 0 0-.105.09l-.027.172c-.06-.086-.179-.32-.77-.32-.68 0-1.26.515-1.372 1.237-.06.36.024.705.228.945.188.22.456.313.775.313.548 0 .851-.352.851-.352l-.027.17c-.01.066.04.125.106.125h.554a.179.179 0 0 0 .176-.151l.333-2.105a.108.108 0 0 0-.107-.124zm-.857 1.197a.686.686 0 0 1-.694.587c-.179 0-.321-.057-.413-.166a.522.522 0 0 1-.096-.432.688.688 0 0 1 .689-.592c.174 0 .316.058.41.168a.53.53 0 0 1 .104.435zm10.018-1.197h-.615a.107.107 0 0 0-.105.09l-.028.172c-.06-.086-.178-.32-.769-.32-.68 0-1.26.515-1.373 1.237-.058.36.025.705.23.945.187.22.455.313.774.313.548 0 .851-.352.851-.352l-.027.17c-.01.066.04.125.105.125h.554a.179.179 0 0 0 .177-.151l.332-2.105a.108.108 0 0 0-.106-.124zm-.857 1.197a.686.686 0 0 1-.694.587c-.179 0-.322-.057-.413-.166a.522.522 0 0 1-.097-.432.688.688 0 0 1 .69-.592c.174 0 .316.058.41.168.094.11.13.265.104.435zm-5.028-1.197h-.618a.18.18 0 0 0-.148.078l-.853 1.256-.361-1.207a.178.178 0 0 0-.171-.127h-.609a.107.107 0 0 0-.101.141l.68 1.998-.64.904c-.05.07 0 .169.088.169h.617a.178.178 0 0 0 .147-.077l2.056-2.967a.107.107 0 0 0-.088-.168zm6.61-1.098l-.527 3.354c-.01.065.04.123.105.123h.53a.179.179 0 0 0 .177-.15l.52-3.294a.107.107 0 0 0-.106-.123h-.593a.107.107 0 0 0-.106.09z" }))))
1119
1119
  },
1120
1120
  'card-paypal-color': {
@@ -1130,7 +1130,7 @@ const icons = {
1130
1130
  'card-stripe': {
1131
1131
  markup: () => (h("g", null,
1132
1132
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1133
- h("path", { d: "M18.256 11.871c.029-.456.152-.67.386-.67.23 0 .35.218.366.67h-.752zm1.71.272c0-.51-.11-.913-.328-1.197-.222-.288-.555-.436-.98-.436-.867 0-1.406.642-1.406 1.67 0 .576.144 1.008.428 1.283.255.247.621.37 1.094.37.436 0 .84-.102 1.094-.27l-.11-.7c-.252.136-.544.21-.873.21-.197 0-.333-.041-.432-.128-.107-.09-.168-.239-.189-.448h1.69a7.1 7.1 0 0 0 .013-.354zm-4.08.69c-.082.157-.21.24-.357.24a.606.606 0 0 1-.276-.062v-1.522c.172-.181.329-.202.386-.202.26 0 .387.28.387.827 0 .313-.045.555-.14.72zm.848-1.973c-.181-.235-.432-.35-.753-.35-.296 0-.555.124-.798.383l-.053-.321h-.897v4.384l1.02-.169V13.76c.156.05.317.074.46.074.256 0 .626-.065.914-.378.275-.3.415-.765.415-1.378 0-.543-.103-.954-.308-1.217zm-3.927-.288h1.025v3.2h-1.025v-3.2zm.515-.317a.537.537 0 0 0 .534-.539.535.535 0 1 0-1.073 0c0 .296.238.539.539.539zm-.954.272c-.288 0-.519.151-.61.423l-.06-.378h-.893v3.2h1.02v-2.078c.127-.156.308-.212.555-.212.053 0 .111 0 .181.012v-.942a.815.815 0 0 0-.194-.025zm-1.957.801l.124-.757h-.652v-.918l-.876.144-.126.774-.308.05-.115.707h.422v1.484c0 .387.098.655.3.819.169.136.411.202.753.202.263 0 .423-.046.534-.075v-.801a1.403 1.403 0 0 1-.296.045c-.201 0-.288-.103-.288-.338v-1.337h.528v.001zm-2.922.449c-.3-.111-.465-.198-.465-.334 0-.115.095-.18.264-.18.308 0 .625.118.843.225l.124-.76a2.373 2.373 0 0 0-1.016-.219c-.346 0-.634.091-.84.26-.213.176-.324.432-.324.74 0 .56.341.798.896 1 .358.127.477.218.477.357 0 .136-.115.214-.325.214-.259 0-.686-.127-.966-.292l-.124.77c.239.135.683.275 1.144.275.366 0 .67-.086.876-.25.23-.182.349-.449.349-.794 0-.572-.35-.81-.913-1.012z", class: "filled" })))
1133
+ h("path", { d: "M18.256 11.871c.029-.456.152-.67.386-.67.23 0 .35.218.366.67h-.752zm1.71.272c0-.51-.11-.913-.328-1.197-.222-.288-.555-.436-.98-.436-.867 0-1.406.642-1.406 1.67 0 .576.144 1.008.428 1.283.255.247.621.37 1.094.37.436 0 .84-.102 1.094-.27l-.11-.7c-.252.136-.544.21-.873.21-.197 0-.333-.041-.432-.128-.107-.09-.168-.239-.189-.448h1.69a7.1 7.1 0 0 0 .013-.354zm-4.08.69c-.082.157-.21.24-.357.24a.606.606 0 0 1-.276-.062v-1.522c.172-.181.329-.202.386-.202.26 0 .387.28.387.827 0 .313-.045.555-.14.72zm.848-1.973c-.181-.235-.432-.35-.753-.35-.296 0-.555.124-.798.383l-.053-.321h-.897v4.384l1.02-.169V13.76c.156.05.317.074.46.074.256 0 .626-.065.914-.378.275-.3.415-.765.415-1.378 0-.543-.103-.954-.308-1.217zm-3.927-.288h1.025v3.2h-1.025v-3.2zm.515-.317a.537.537 0 0 0 .534-.539.535.535 0 1 0-1.073 0c0 .296.238.539.539.539zm-.954.272c-.288 0-.519.151-.61.423l-.06-.378h-.893v3.2h1.02v-2.078c.127-.156.308-.212.555-.212.053 0 .111 0 .181.012v-.942a.815.815 0 0 0-.194-.025zm-1.957.801l.124-.757h-.652v-.918l-.876.144-.126.774-.308.05-.115.707h.422v1.484c0 .387.098.655.3.819.169.136.411.202.753.202.263 0 .423-.046.534-.075v-.801a1.403 1.403 0 0 1-.296.045c-.201 0-.288-.103-.288-.338v-1.337h.528v.001zm-2.922.449c-.3-.111-.465-.198-.465-.334 0-.115.095-.18.264-.18.308 0 .625.118.843.225l.124-.76a2.373 2.373 0 0 0-1.016-.219c-.346 0-.634.091-.84.26-.213.176-.324.432-.324.74 0 .56.341.798.896 1 .358.127.477.218.477.357 0 .136-.115.214-.325.214-.259 0-.686-.127-.966-.292l-.124.77c.239.135.683.275 1.144.275.366 0 .67-.086.876-.25.23-.182.349-.449.349-.794 0-.572-.35-.81-.913-1.012z", class: "fill-primary" })))
1134
1134
  },
1135
1135
  'card-stripe-color': {
1136
1136
  markup: () => (h("g", { fill: "none", "fill-rule": "evenodd" },
@@ -1141,7 +1141,7 @@ const icons = {
1141
1141
  'card-visa': {
1142
1142
  markup: () => (h("g", null,
1143
1143
  h("path", { d: "M2 18.667v-13.2C2 4.66 2.66 4 3.467 4h19.066C23.34 4 24 4.66 24 5.467v13.2a1.47 1.47 0 0 1-1.467 1.466H3.467A1.47 1.47 0 0 1 2 18.667z", class: "stroke-primary" }),
1144
- h("g", { class: "filled" },
1144
+ h("g", { class: "fill-primary" },
1145
1145
  h("path", { d: "M10.88 14.204h1.162l.727-4.263h-1.162zm4.231-2.552c-.406-.197-.655-.329-.652-.528 0-.177.21-.367.665-.367.373-.006.673.07.974.213l.158-.924a3.001 3.001 0 0 0-1.042-.18c-1.148 0-1.957.579-1.963 1.408-.007.612.577.954 1.018 1.158.452.208.604.342.602.528-.003.286-.361.416-.695.416-.516 0-.776-.08-1.243-.291l-.164.954c.272.12.774.223 1.295.228 1.221 0 2.014-.572 2.023-1.457.004-.484-.305-.854-.976-1.158zm4.124-1.707h-.898c-.278 0-.486.076-.608.353l-1.726 3.907h1.22s.2-.526.245-.64l1.488.001c.035.15.141.639.141.639h1.078l-.94-4.26zm-1.433 2.747c.048-.123.523-1.34.617-1.598.157.735.004.022.348 1.598h-.965zM9.906 9.944l-1.138 2.907-.121-.59L8.24 10.3c-.07-.27-.275-.35-.527-.36H5.839l-.014.09c.455.11.863.27 1.22.467L8.078 14.2l1.23-.001 1.828-4.255h-1.23z" }))))
1146
1146
  },
1147
1147
  'card-visa-color': {
@@ -1913,7 +1913,7 @@ const icons = {
1913
1913
  h("path", { class: "stroke-secondary", d: "M7.5 5.143v4.716M9.857 7.5H5.143m4.125 9.233l-3.536 3.535m3.536.001l-3.536-3.537M20.857 7.5h-4.714m4.714 9.429h-4.714m4.714 3.143h-4.714" })))
1914
1914
  },
1915
1915
  medal: {
1916
- markup: () => (h("g", { "stroke-width": "1.5" },
1916
+ markup: () => (h("g", null,
1917
1917
  h("g", { class: "stroke-primary" },
1918
1918
  h("path", { d: "M8.931 12.63L4.233 3.233h5.6l3.733 7.467m4.636 1.929L22.9 3.233h-5.6L13.566 10.7" })),
1919
1919
  h("circle", { cx: "13.567", cy: "17.233", r: "6.533", class: "stroke-secondary" }),
@@ -2138,7 +2138,7 @@ const icons = {
2138
2138
  },
2139
2139
  pause: {
2140
2140
  markup: () => (h("g", null,
2141
- h("g", { "stroke-width": "1.5", class: "stroke-primary filled" },
2141
+ h("g", { class: "stroke-primary filled" },
2142
2142
  h("path", { d: "M5 3h5.517v19.31H5zm11 0h5.517v19.31H16z" }))))
2143
2143
  },
2144
2144
  paw: {
@@ -2349,7 +2349,7 @@ const icons = {
2349
2349
  h("circle", { class: "stroke-secondary filled", cx: "12.883", cy: "9.883", r: "2.933" }))))
2350
2350
  },
2351
2351
  ring: {
2352
- markup: () => (h("g", { "stroke-width": "1.5" },
2352
+ markup: () => (h("g", null,
2353
2353
  h("path", { d: "M13.167 7.9l-2.8-3.267.933-1.4h3.733l.934 1.4-2.8 3.267", class: "stroke-secondary filled" }),
2354
2354
  h("g", { class: "stroke-primary", transform: "translate(5.233 7.9)" },
2355
2355
  h("circle", { cx: "7.933", cy: "7.933", r: "7.933" }),
@@ -2403,7 +2403,7 @@ const icons = {
2403
2403
  h("path", { class: "stroke-secondary", d: "M13 24V2M3.17 13h19.66" })))
2404
2404
  },
2405
2405
  sign: {
2406
- markup: () => (h("g", { "stroke-width": "1.5" },
2406
+ markup: () => (h("g", null,
2407
2407
  h("g", { class: "stroke-primary" },
2408
2408
  h("path", { d: "M3 23.083h20.087M5.582 17.761L3.913 19.43M21.261 9.387l.913.913-4.565 4.565" })),
2409
2409
  h("path", { d: "M5.582 17.762a2.582 2.582 0 0 1 0-3.652L15.935 3.757a2.582 2.582 0 0 1 3.652 0 2.582 2.582 0 0 1 0 3.652L9.234 17.762a2.583 2.583 0 0 1-3.652 0z", class: "stroke-secondary filled" })))
@@ -2526,7 +2526,7 @@ const icons = {
2526
2526
  h("path", { d: "M3.5 11.5v2", class: "stroke-secondary" })))
2527
2527
  },
2528
2528
  target: {
2529
- markup: () => (h("g", { "stroke-width": "1.5" },
2529
+ markup: () => (h("g", null,
2530
2530
  h("g", { class: "stroke-primary", transform: "translate(3.477 6.34)" },
2531
2531
  h("path", { d: "M17.13 7.636a8.59 8.59 0 0 1-8.538 9.545A8.59 8.59 0 0 1 0 8.591 8.59 8.59 0 0 1 9.545.053" }),
2532
2532
  h("circle", { cx: "8.591", cy: "8.591", r: "4.773" })),
@@ -1,4 +1,5 @@
1
1
  import { Component, Prop, h, Element, Watch } from '@stencil/core';
2
+ import { createGuid } from 'src/utils';
2
3
  import icons from './icons';
3
4
  export class Q2Icon {
4
5
  get iconMarkup() {
@@ -14,22 +15,36 @@ export class Q2Icon {
14
15
  this.setCustomSVGAttrs();
15
16
  }
16
17
  setCustomSVGAttrs() {
17
- if (this.isCustom) {
18
- const innerSVG = this.hostElement.querySelector('svg');
19
- if (innerSVG) {
20
- innerSVG.setAttribute('aria-hidden', 'true');
21
- innerSVG.setAttribute('focusable', 'false');
22
- innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
23
- }
18
+ if (!this.isCustom)
19
+ return;
20
+ const innerSVG = this.hostElement.querySelector('svg');
21
+ if (!innerSVG)
22
+ return;
23
+ innerSVG.setAttribute('role', 'img');
24
+ innerSVG.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
25
+ const { label } = this;
26
+ if (label) {
27
+ const title = document.createElement('title');
28
+ const labelId = `label-${createGuid()}`;
29
+ title.id = labelId;
30
+ title.textContent = label;
31
+ innerSVG.appendChild(title);
32
+ innerSVG.setAttribute('aria-labelledby', labelId);
33
+ }
34
+ else {
35
+ innerSVG.setAttribute('aria-hidden', 'true');
24
36
  }
25
37
  }
26
38
  render() {
27
- return this.isCustom ? (h("slot", null)) : (h("svg", { viewBox: "0 0 26 26", focusable: "false", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" }, this.iconMarkup));
39
+ const { label } = this;
40
+ return this.isCustom ? (h("slot", null)) : (h("svg", { viewBox: "0 0 26 26", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": this.label ? undefined : 'true', role: "img", "aria-labelledby": label ? 'label' : undefined },
41
+ label && h("title", { id: "label" }, label),
42
+ this.iconMarkup));
28
43
  }
29
44
  static get is() { return "q2-icon"; }
30
45
  static get encapsulation() { return "shadow"; }
31
46
  static get originalStyleUrls() { return {
32
- "$": ["styles.css"]
47
+ "$": ["styles.scss"]
33
48
  }; }
34
49
  static get styleUrls() { return {
35
50
  "$": ["styles.css"]
@@ -51,6 +66,23 @@ export class Q2Icon {
51
66
  },
52
67
  "attribute": "type",
53
68
  "reflect": true
69
+ },
70
+ "label": {
71
+ "type": "string",
72
+ "mutable": false,
73
+ "complexType": {
74
+ "original": "string",
75
+ "resolved": "string",
76
+ "references": {}
77
+ },
78
+ "required": false,
79
+ "optional": false,
80
+ "docs": {
81
+ "tags": [],
82
+ "text": ""
83
+ },
84
+ "attribute": "label",
85
+ "reflect": true
54
86
  }
55
87
  }; }
56
88
  static get elementRef() { return "hostElement"; }
@@ -64,69 +64,76 @@ button {
64
64
  visibility: hidden;
65
65
  }
66
66
 
67
-
68
67
  :host {
69
- display: inline-block;
70
- height: var(--tct-icon-size, 24px);
71
- width: var(--tct-icon-size, 24px);
72
- position: relative;
73
- fill: none;
68
+ display: inline-block;
69
+ height: var(--tct-icon-size, 24px);
70
+ width: var(--tct-icon-size, 24px);
71
+ position: relative;
72
+ fill: none;
74
73
  }
75
74
 
76
75
  svg {
77
- display: block;
78
- position: absolute;
79
- top: 0;
80
- left: 0;
81
- stroke-width: var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));
82
- stroke-linecap: var(--tct-icon-cap, var(--t-icon-cap, round));
83
- stroke-linejoin: var(--tct-icon-cap, var(--t-icon-cap, round));
76
+ display: block;
77
+ position: absolute;
78
+ top: 0;
79
+ left: 0;
80
+ stroke-width: var(--tct-icon-stroke-width, var(--t-icon-stroke-width, 1.5));
81
+ stroke-linecap: var(--tct-icon-cap, var(--t-icon-cap, round));
82
+ stroke-linejoin: var(--tct-icon-cap, var(--t-icon-cap, round));
84
83
  }
85
84
 
86
85
  .stroke-primary {
87
- stroke: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)));
86
+ stroke: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)));
88
87
  }
89
88
 
90
89
  .stroke-secondary {
91
- stroke: var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)));
90
+ stroke: var(--tct-icon-stroke-secondary, var(--t-icon-stroke-secondary, var(--t-text, currentColor)));
92
91
  }
93
92
 
94
- .filled {
95
- fill: var(--tct-icon-fill, var(--t-icon-fill, none));
93
+ .fill-primary {
94
+ fill: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, var(--t-text, currentColor)));
96
95
  }
97
96
 
98
- .uniform {
99
- fill: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor));
100
- }
101
-
102
- :host([type='info']) {
103
- --tct-icon-stroke-primary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
104
- --tct-icon-stroke-secondary: var(--tct-stoplight-info, var(--const-stoplight-info, #0079c1));
105
- }
106
-
107
- :host([type='success']) {
108
- --tct-icon-stroke-primary: var(
109
- --tct-stoplight-success,
110
- var(--const-stoplight-success, #0e8a00)
111
- );
112
- --t-icon-stroke-secondary: var(
113
- --tct-stoplight-success,
114
- var(--const-stoplight-success, #0e8a00)
115
- );
116
- }
117
-
118
- :host([type='warning']) {
119
- --tct-icon-stroke-primary: var(
120
- --tct-stoplight-warning,
121
- var(--const-stoplight-warning, #f0b400)
122
- );
123
- --t-icon-stroke-secondary: var(
124
- --tct-stoplight-warning,
125
- var(--const-stoplight-warning, #f0b400)
126
- );
97
+ .filled {
98
+ fill: var(--tct-icon-fill, var(--t-icon-fill, none));
127
99
  }
128
100
 
129
- :host([type='error']) {
130
- --tct-icon-stroke-primary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
131
- --t-icon-stroke-secondary: var(--tct-stoplight-error, var(--const-stoplight-alert, #c30000));
132
- }
101
+ .uniform {
102
+ fill: var(--tct-icon-stroke-primary, var(--t-icon-stroke-primary, currentColor));
103
+ }
104
+
105
+ :host([type=info]) {
106
+ --tct-icon-stroke-primary: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);
107
+ --tct-icon-stroke-secondary: var-list(--tct-stoplight-info, --const-stoplight-info, #0079c1);
108
+ }
109
+
110
+ :host([type=success]) {
111
+ --tct-icon-stroke-primary: var-list(
112
+ --tct-stoplight-success,
113
+ --const-stoplight-success,
114
+ #0e8a00
115
+ );
116
+ --t-icon-stroke-secondary: var-list(
117
+ --tct-stoplight-success,
118
+ --const-stoplight-success,
119
+ #0e8a00
120
+ );
121
+ }
122
+
123
+ :host([type=warning]) {
124
+ --tct-icon-stroke-primary: var-list(
125
+ --tct-stoplight-warning,
126
+ --const-stoplight-warning,
127
+ #f0b400
128
+ );
129
+ --t-icon-stroke-secondary: var-list(
130
+ --tct-stoplight-warning,
131
+ --const-stoplight-warning,
132
+ #f0b400
133
+ );
134
+ }
135
+
136
+ :host([type=error]) {
137
+ --tct-icon-stroke-primary: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);
138
+ --t-icon-stroke-secondary: var-list(--tct-stoplight-error, --const-stoplight-alert, #c30000);
139
+ }
@@ -297,7 +297,10 @@ export class Q2Input {
297
297
  }
298
298
  pseudoInputDOM() {
299
299
  const showPlaceholder = !this.value && !!this.placeholder;
300
- return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
300
+ return (h("button", { class: "pseudo-input input-field", type: "button", id: this.inputId, "aria-describedby": this.inputDescribedBy, "aria-required": `${!this.optional}`, "aria-invalid": `${this.hasError}`, "aria-controls": (this.ariaControls && `${this.ariaControls}`) || undefined, "aria-owns": (this.ariaOwns && `${this.ariaOwns}`) || undefined, "aria-haspopup": (this.ariaHaspopup && `${this.ariaHaspopup}`) || undefined, "aria-expanded": (!!this.ariaExpanded && `${!!this.ariaExpanded}`) || undefined, "aria-activedescendant": this.ariaActivedescendant && `${this.ariaActivedescendant}`, "aria-label": `${this.value}, ${(this.label && loc(this.label)) || ''}${(this
301
+ .optional &&
302
+ loc('tecton.element.input.optional')) ||
303
+ ''}`, role: (this.role && `${this.role}`) || undefined, disabled: !!this.disabled, "test-id": "q2InputInnerClearButton" },
301
304
  h("span", { class: showPlaceholder ? 'placeholder-text' : '' }, showPlaceholder ? this.placeholder : this.value)));
302
305
  }
303
306
  calculateCursorPositionOnInput() {
@@ -332,7 +335,9 @@ export class Q2Input {
332
335
  input.setSelectionRange(valueLength, valueLength);
333
336
  }
334
337
  else {
335
- const newPosition = startingPosition + (valueLength - previousValueLength);
338
+ const difference = valueLength - previousValueLength;
339
+ // Never allow the cursor to move in reverse
340
+ const newPosition = startingPosition + (difference > 0 ? difference : 0);
336
341
  input.setSelectionRange(newPosition, newPosition);
337
342
  }
338
343
  }
@@ -1,28 +1,95 @@
1
- import { Component, Prop, h, Element } from '@stencil/core';
1
+ import { Component, Prop, h, Event, Element, Watch, Fragment } from '@stencil/core';
2
2
  export class Q2Option {
3
3
  constructor() {
4
+ this.role = 'option';
5
+ this.tabindex = '-1';
4
6
  this._multiSelectHidden = false;
5
- this.onOptionClick = (event) => {
7
+ this.onClick = (event) => {
6
8
  event.stopImmediatePropagation();
7
- const disabled = this.disabled || this.disabledGroup;
8
- !disabled && this.hostElement.dispatchEvent(new MouseEvent('click', { bubbles: true }));
9
+ const { disabled, disabledGroup } = this;
10
+ if (disabled || disabledGroup)
11
+ return;
12
+ this.click.emit();
9
13
  };
10
14
  }
15
+ connectedCallback() {
16
+ this.checkDisabledStatus();
17
+ this.checkSelectedStatus();
18
+ this.checkMultiSelectHiddenStatus();
19
+ }
20
+ checkDisabledStatus() {
21
+ const { disabled, disabledGroup, hostElement } = this;
22
+ const isDisabled = disabled || disabledGroup;
23
+ if (isDisabled)
24
+ hostElement.setAttribute('aria-disabled', 'true');
25
+ else
26
+ hostElement.removeAttribute('aria-disabled');
27
+ }
28
+ checkSelectedStatus() {
29
+ const { selected, hostElement } = this;
30
+ if (selected)
31
+ hostElement.setAttribute('aria-selected', 'true');
32
+ else
33
+ hostElement.removeAttribute('aria-selected');
34
+ }
35
+ checkMultiSelectHiddenStatus() {
36
+ const { _multiSelectHidden, hostElement } = this;
37
+ if (_multiSelectHidden)
38
+ hostElement.setAttribute('aria-hidden', 'true');
39
+ else
40
+ hostElement.removeAttribute('aria-hidden');
41
+ }
11
42
  render() {
12
- return (h("div", { role: "option", "aria-selected": `${this.selected}`, "aria-disabled": `${this.disabledGroup || this.disabled || false}`, id: this.optionId, hidden: this._multiSelectHidden || this.hidden || false, class: "q2-option-container", tabindex: "0", onClick: this.onOptionClick },
13
- h("div", { class: "q2-option-selection" }, this.selected ? (h("q2-icon", { type: "checkmark", class: "q2-option-selection-icon" })) : ('')),
14
- h("div", { class: "q2-option-content" },
43
+ return (h(Fragment, null,
44
+ this.selected && h("q2-icon", { type: "checkmark" }),
45
+ h("div", { class: "content", onClick: this.onClick },
15
46
  h("slot", null))));
16
47
  }
17
48
  static get is() { return "q2-option"; }
18
49
  static get encapsulation() { return "shadow"; }
19
50
  static get originalStyleUrls() { return {
20
- "$": ["styles.css"]
51
+ "$": ["styles.scss"]
21
52
  }; }
22
53
  static get styleUrls() { return {
23
54
  "$": ["styles.css"]
24
55
  }; }
25
56
  static get properties() { return {
57
+ "role": {
58
+ "type": "string",
59
+ "mutable": false,
60
+ "complexType": {
61
+ "original": "string",
62
+ "resolved": "string",
63
+ "references": {}
64
+ },
65
+ "required": false,
66
+ "optional": false,
67
+ "docs": {
68
+ "tags": [],
69
+ "text": ""
70
+ },
71
+ "attribute": "role",
72
+ "reflect": true,
73
+ "defaultValue": "'option'"
74
+ },
75
+ "tabindex": {
76
+ "type": "string",
77
+ "mutable": false,
78
+ "complexType": {
79
+ "original": "string",
80
+ "resolved": "string",
81
+ "references": {}
82
+ },
83
+ "required": false,
84
+ "optional": false,
85
+ "docs": {
86
+ "tags": [],
87
+ "text": ""
88
+ },
89
+ "attribute": "tabindex",
90
+ "reflect": true,
91
+ "defaultValue": "'-1'"
92
+ },
26
93
  "display": {
27
94
  "type": "string",
28
95
  "mutable": false,
@@ -195,5 +262,34 @@ export class Q2Option {
195
262
  "defaultValue": "false"
196
263
  }
197
264
  }; }
265
+ static get events() { return [{
266
+ "method": "click",
267
+ "name": "click",
268
+ "bubbles": true,
269
+ "cancelable": true,
270
+ "composed": true,
271
+ "docs": {
272
+ "tags": [],
273
+ "text": ""
274
+ },
275
+ "complexType": {
276
+ "original": "any",
277
+ "resolved": "any",
278
+ "references": {}
279
+ }
280
+ }]; }
198
281
  static get elementRef() { return "hostElement"; }
282
+ static get watchers() { return [{
283
+ "propName": "disabled",
284
+ "methodName": "checkDisabledStatus"
285
+ }, {
286
+ "propName": "disabledGroup",
287
+ "methodName": "checkDisabledStatus"
288
+ }, {
289
+ "propName": "selected",
290
+ "methodName": "checkSelectedStatus"
291
+ }, {
292
+ "propName": "_multiSelectHidden",
293
+ "methodName": "checkMultiSelectHiddenStatus"
294
+ }]; }
199
295
  }