add icon, bug fix (#41)

Co-authored-by: sabrefoxx <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
     "name": "reloadly-ui",
-    "version": "0.0.1-beta.43",
+    "version": "0.0.1-beta.44",
     "description": "Angular UI library",
     "repository": {
         "type": "git",

src/lib/components/svg/svg.component.html

@@ -213,6 +213,14 @@
             <path fill-rule="evenodd" clip-rule="evenodd"
                   d="m 9.7618366,20.189145 0.3417444,3.645273 c 0.614855,0.09713 1.245253,0.14764 1.887448,0.14764 0.642194,0 1.272593,-0.05051 1.887448,-0.14764 l 0.341744,-3.645273 c 0.704173,-0.191107 1.372014,-0.470348 1.9909,-0.825432 l 2.819091,2.335852 c 1.023884,-0.743743 1.92561,-1.645469 2.669353,-2.669353 l -2.335852,-2.819091 c 0.355084,-0.618886 0.634325,-1.286727 0.825432,-1.9909 l 3.645273,-0.341744 c 0.09713,-0.614855 0.14764,-1.245254 0.14764,-1.887448 0,-0.642195 -0.05051,-1.272593 -0.14764,-1.887448 L 20.189145,9.7618366 C 19.998038,9.0576634 19.718797,8.3898231 19.363713,7.7709211 L 21.699565,4.9518752 C 20.955822,3.9279313 20.054096,3.0261909 19.030212,2.2824923 L 16.211121,4.6182848 C 15.592235,4.2632754 14.924394,3.9839444 14.220221,3.7929273 L 13.878477,0.1476974 C 13.263622,0.05048313 12.633223,0 11.991029,0 11.348834,0 10.718436,0.05048313 10.103581,0.1476974 L 9.7618366,3.7929273 C 9.0576634,3.9839444 8.3898231,4.2632754 7.7709211,4.6182848 L 4.9518752,2.2824923 C 3.9279313,3.0261909 3.0261909,3.9279313 2.2824923,4.9518752 L 4.6182848,7.7709211 C 4.2632754,8.3898231 3.9839444,9.0576634 3.7929273,9.7618366 L 0.1476974,10.103581 C 0.05048313,10.718436 0,11.348834 0,11.991029 c 0,0.642194 0.05048313,1.272593 0.1476974,1.887448 l 3.6452299,0.341744 c 0.1910171,0.704173 0.4703481,1.372014 0.8253575,1.9909 l -2.3357925,2.819091 c 0.7436986,1.023884 1.645439,1.92561 2.6693829,2.669353 l 2.8190459,-2.335852 c 0.618902,0.355084 1.2867423,0.634325 1.9909155,0.825432 z m 6.7258284,-8.198116 c 0,2.483417 -2.013219,4.496636 -4.496636,4.496636 -2.4834172,0 -4.496636,-2.013219 -4.496636,-4.496636 0,-2.4834172 2.0132188,-4.496636 4.496636,-4.496636 2.483417,0 4.496636,2.0132188 4.496636,4.496636 z" />
         </symbol>
+        <symbol viewBox="0 0 24 24" id="change">
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="M 16.52144,8.386125 V 4.19814 c 2.735499,1.59186 4.478617,4.533375 4.478617,7.79118 0,4.02258 -2.640851,7.51833 -6.425535,8.63913 -0.79437,0.23535 -1.247782,1.07055 -1.012736,1.8657 0.235046,0.795 1.069555,1.2489 1.863925,1.0137 C 20.478066,22.01145 24,17.3493 24,11.98932 24,8.474445 22.477379,5.234985 19.963726,3.00267 h 1.936164 c 0.828434,0 1.499972,-0.672165 1.499972,-1.501335 C 23.399862,0.672171 22.728324,0 21.89989,0 H 15.021469 C 14.637521,0 14.253648,0.14657685 13.960748,0.439731 13.667864,0.732885 13.521422,1.11711 13.521422,1.501335 v 6.88479 c 0,0.82917 0.671567,1.501335 1.500047,1.501335 0.828284,0 1.499971,-0.672165 1.499971,-1.501335 z"
+                  fill="currentColor" />
+            <path fill-rule="evenodd" clip-rule="evenodd"
+                  d="m 7.4785749,15.6138 v 4.188 C 4.7429561,18.21 2.9999438,15.2685 2.9999438,12.01068 c 0,-4.02255 2.6407305,-7.5183 6.4254746,-8.639205 C 10.219789,3.136215 10.6732,2.300955 10.438154,1.505865 10.203109,0.710781 9.3685995,0.2569515 8.5742444,0.492213 3.521889,1.988535 0,6.65076 0,12.01068 0,15.5256 1.5226065,18.765 4.0362594,20.9973 H 2.0999907 c -0.8284045,0 -1.49996594,0.67215 -1.49996594,1.50135 0,0.8292 0.67156144,1.50135 1.49996594,1.50135 h 6.8785561 c 0.3838728,0 0.7677606,-0.14655 1.0606452,-0.4398 0.292884,-0.2931 0.439327,-0.67725 0.439327,-1.06155 V 15.6138 c 0,-0.829095 -0.6715527,-1.50126 -1.4999722,-1.50126 -0.8284045,0 -1.4999719,0.672165 -1.4999719,1.50126 z"
+                  fill="currentColor" />
+        </symbol>
         <symbol viewBox="0 0 24 24" id="wallet">
             <path fill-rule="evenodd" clip-rule="evenodd"
                   d="M 20.993272,4.505607 H 3.7561677 c -0.4139003,0 -0.7494393,0.335539 -0.7494393,0.7494393 v 1.4988786 c 0,0.4139003 0.335539,0.7494393 0.7494393,0.7494393 H 22.49215 c 0.827831,0 1.498879,0.6710779 1.498879,1.4988786 V 19.494393 c 0,1.655661 -1.342096,2.997757 -2.997757,2.997757 H 3.0067284 c -1.6556163,0 -2.9977572,-1.342096 -2.9977572,-2.997757 V 4.505607 c 0,-1.6556163 1.3421409,-2.9977572 2.9977572,-2.9977572 H 20.993272 c 0.82783,0 1.498878,0.6710704 1.498878,1.4988786 0,0.8278007 -0.671048,1.4988786 -1.498878,1.4988786 z m -2.997758,8.993272 c -0.82783,0 -1.498878,0.671063 -1.498878,1.498878 0,0.827816 0.671048,1.498879 1.498878,1.498879 h 1.498879 c 0.827831,0 1.498879,-0.671063 1.498879,-1.498879 0,-0.827815 -0.671048,-1.498878 -1.498879,-1.498878 z" />

src/lib/form/range-slider/range-slider.component.ts

@@ -160,12 +160,14 @@ export class RangeSliderComponent implements OnInit, AfterViewInit, OnChanges, O
 
     private moveSlider(percentage: number): void {
         percentage = this.clamp(percentage);
+        void this.range?.nativeElement.offsetWidth; // important for DOM reflow recalculation
         this.window?.requestAnimationFrame(() => {
             // @TODO sometimes, the browser calculates wrong client/offset-Width for range.nativeElement
             // which is different from the value visible and calculated in dev tools inspect, even after a long time has elapsed
             // this could be because of flex grow. This can cause the knob to go beyond the slider when the page is first loaded.
             // don't forget to update slider.clientWidth on line 156 to offsetWidth if you'll be using offsetWidth
             const sliderWidth = this.range?.nativeElement.clientWidth - this.knob?.nativeElement.clientWidth;
+            // @TODO check if void this.range?.nativeElement.offsetWidth; above fixes the issue
             let x = Math.round((percentage / 100) * sliderWidth);
             x = this.clamp(x, 0, sliderWidth);
             if (this.knob?.nativeElement) this.knob.nativeElement.style.left = x + 'px';