[
  {
    "path": "Apps/Empty/readme.md",
    "content": "# Empty\n"
  },
  {
    "path": "Apps/Simon/readme.md",
    "content": "# Simon, the game\nThis is a Power Apps version of the famous Simon game from Hasbro.\n\n![Simon](images/Simon_HOME.png)\n"
  },
  {
    "path": "Apps/SimpleThemeApp/readme.md",
    "content": "# SimpleThemeApp\nThis app allows you to customize **live** your Power Apps application's default theme colors, fonts, sizes, etc. throuhg an integrated SimpleTheme component.\n\n## Notes\nFurther details and instructions will come soon...\n\n## HISTORY changes\n**v1.0** [ 19-nov-2020 ]\n- Initial publish\n"
  },
  {
    "path": "Components/AutoWidthLabelGenerator/readme.md",
    "content": "# AutoWidthLabelGenerator component\nThis component will generate the necessary Power Apps code to have your applications' labels **Width** adapt automatically to their content, whatever the font, the font weight or the font size.\n\n![AutoWidthLabelGenerator](images/AutoWidthLabelGenerator.png)\n\nThis little trick will allow you, at last, to have good-looking breadcrumbs with nice icons in-between each level moving along with the length of each level's text. It will also allow you to have tabs in any language where your buttons will stick together and expand whatever the language.\n\n![AutoWidthLabelGenerator](images/AutoWidthLabelGenerator-sample.png)\n\nHere is how the label auto-sizes itself directly inside the Power Apps Studio:\n\n![AutoWidthLabelGenerator](images/AutoWidthLabelDemo1.gif)\n\n## Component properties\nThis component doesn't have any properties as it is standalone and can be used right away.\n\n## Important notes\n- The component will be best viewed in a native **tablet form factor** application with a **1366x768 resolution**.\n- The component holds a huge collection of about 11,000 items. So it is recommanded that you use it separatly in a **brand new application** or add it to your existing app and remove it as soon as you're done with it. This way, the performance of you app will not be affected.\n- It works for **buttons** as well :)\n\n## How it works\nThe component holds an **internal collection** with the unitary width of each of the 255 characters in the latin ASCII table (well in fact from 32 to 255). And this for each Power Apps font and each font weight. A label's **Width** property in your app will have a small formula that will use a portion of this collection to calulate the size of the label's **Text** property. The portion of collection that will be needed in your app will be inserted in its **OnStart** event. Its content will depend on the fonts and font-weights you plan to use within your app's labels. Then just placing a little formula into your label's **Width** property will do the trick.\n- The component needs to initialize a few things before it can start. So, first of all, click on the **INITIALIZE** button.\n- Once loaded, the component will pretty much tell you what to do.\n- Start by choosing the fonts and font-weights you plan to use in your application's labels.\n- You will probably not use the entire 255 characters inside your labels, so you can choose smaller groups of characters using the **Char set** combo box (you can view what are the characters in each set by clicking on the \"i\" icon just over the combo box).\n- The component will then generate for your the code to declare the collection with the characters' sizes. Just put that code in the **OnStart** event of your app and run it to load the collection in memory.\n- Then copy/paste the small formula at step 3 into your app's labels **Width** property.\n- Et voilààà...\n\n## Updates\n- **09-13-2020**: replaced the *lblMyLabel* with the the *Self* operator, thus simplifying step 3 where one will just need to paste the formula\n- **05-20-2019**: fixed the **ShowLabel** property that was not effective + added new **LineCapRound** property\n"
  },
  {
    "path": "Components/BubbleHelper/readme.md",
    "content": "# BubbleHelper component\nThis component will allow you to add chaining bubbles in your PowerApps applications to help your users understand how your app works.\n\n![BubbleHelper](images/BubbleHelper.png)\n\nThe design of the bubble can be adjusted through many properties, and events are there to allow you to manage the chaining of your bubble's steps. A **BubbleSteps** component comes with the main **BubbleHelper** component to help you set up the steps which your bubble will go through.\n\nThese components are provided within a small application that allows you to understand and test the various properties of the **BubbleHelper** component:\n\n![BubbleHelperAppConfiguratorScreen](images/BubbleHelper_app_Configurator_screen.png)\n\nIt will also list for you all the instructions on how to use it and set it up in your own Power Apps applications:\n\n![BubbleHelperAppHowToScreen](images/BubbleHelper_app_HowTo_screen.png)\n\nThis applications comes with two languages: English (EN) and French (FR). If you wish to add a new language to the app, please do not hesitate to contact me on LinkedIn: https://www.linkedin.com/in/egallis.\n\n## **BubbleHelper** component properties\nHere are the properties available to configure the **BubbleHelper** component:\n### Input\n- **Title** (text) = bubble title\n- **Text** (text) = content of the bubble\n- **TextAlign** (text) = bubble's content alignment (use the native **Align** enumeration to set this property's value; default is **Align.Left**)\n- **ShowStep** (boolean) = displays an \"X/Y\" label over the title to show what's the current step (X) over the total number of steps (Y) (default is **True**)\n- **Step** (number) = current step value (default is **1**)\n- **MaxSteps** (number) = total number of steps\n- **Size** (number) = font size (this value has an effect on all elements containing text in the bubble, not only the text itself but also: the title, the steps and the buttons)\n- **Color** (text) = hex color for all text elements inside the bubble (steps, title and text)\n- **FillColor** (text) = hex color for the bubble's content\n- **BorderColor** (text) = hex color for the bubble's border\n- **BorderThickness** (number) = thickness of the bubble's border\n- **Radius** (number) = radius for all 4 corners of the bubble\n- **Padding** (number) = space (in pixels) between the bubble's border and its content\n- **ShowShadow** (boolean) = if enabled, displays a drop shadow for the bubble\n- **Shadow** (record) = settings for the drop shadow\n  - **OffsetX** (number) = horizontal offset for the shadow (a positive value shows a shadow on the right hand-side of the bubble, a negative value on the left hand-side) (default value is **3**)\n  - **OffsetY** (number) = vertical offset for the shadow (a positive value shows a shadow on the bottom-side of the bubble, a negative value on the top-side)  (default value is **3**)\n  - **Color** (text) = hex color for the drop shadow  (default value is **#000000AA**)\n  - **Blur** (number) = a value to set how much the shadow is blurry (the highest the value, the bluriest the shadow)  (default value is **3**)\n  - **Opacity** (decimal) = between 0 and 1, sets how much the shadow is dense  (default value is **0.4**)\n- **PointerSize** (number) = in pixels, the size of the bubble's pointer (default is **20**)\n- **PointerLocation** (text) = specifies on which side of the bubble the pointer should be rendered (use the component's **PointerLocationEnum** output property to set its value) (default is **Self.PointerLocationEnum.Left**)\n- **PointerPosition** (number) = in percentage to the corresponding bubble's side size where the pointer is displayed, the pointer's position (value must be specified between **0** and **100**)\n- **ShowClose** (boolean) = shows or hide the 'X' icon in the upper right corner of the bubble used to close the bubble; clicking this icon triggers the **OnClose** event\n- **ShowNext** (boolean) = shows or hide the button used to go the next step within the chaining steps provided by the **BubbleSteps** component (default is **True**)\n- **NextText** (text) = label for the next step button (default is **Next**)\n- **NextWidth** (number) = width for the next step button (default is **100**)\n- **ShowPrevious** (boolean) = shows or hide the button used to go the previous step within the chaining steps provided by the **BubbleSteps** component (default is **False**)\n- **PreviousText** (text) = label for the previous step button (default is **Previous**)\n- **PreviousWidth** (number) = width for the previous step button (default is **130**)\n### Events\n- **OnClose** = triggered when the user clicks on the 'X' icon displayed in the upper right corner of the bubble\n- **OnNext** = triggered when the user clicks on the 'Next' button\n- **OnPrevious** = triggered when the user clicks on the 'Previous' button\n### Output\n- **PointerLocationEnum** (record) = use this enumeration to set the value of the **PointerLocation** property\n- **_XXXXXX** = all output properties starting with an underscore character are FOR INTERNAL USE ONLY\n\n## **BubbleSteps** component properties\nHere are **BubbleSteps**' component properties available for you to setup the steps for a **BubbleHelper**:\n### Input\n- **Steps** (table) = within various records, define the values for the **BubbleHelper** component that will change at each step\n- **ActiveStep** (number) = number of the current active step (value must be lower than the **MaxSteps** property value of the **BubbleHelper** component)\n### Output\n- **outStep** (record) = record from the **Steps** property at index **ActiveStep**, thus holding the **BubbleHelper**'s properties values for the current active step\n\n__Note:__ you can decide for yourself which of the **BubbleHelper** properties will change between steps by redefining the **Steps** property default value/structure within the **BubbleSteps** component definition.\n\n## How to install it?\n- Download the app [here](BubbleHelper.zip)\n- Go to https://make.powerapps.com\n- Click on **Applications** in the left menu\n- Click the **Import canvas app** button\n- Select the downloaded app using the **Upload** button\n- Click the **Import** button\n- Wait for the import to finish\n- You're all done!\n\nPlay or edit the app to see how to use and setup these components within your app.\n\nEnjoy! 😊"
  },
  {
    "path": "Components/CircleProgressBar/readme.md",
    "content": "# CircleProgressBar component\nThis component is a configurable circle progress bar.\n\n## Component properties\nHere are the properties available to configure the progress bar:\n### Input\n- **Max** (number) = maximum value (default is **100**)\n- **Value** (number) = actual progress value (default is **50**)\n- **ShowLabel** (boolean) = shows/hides the label in the center (default is **True**)\n- **LabelSize** (number) = font size for the label in the center (default is **20**)\n- **BarBgR, BarBgG, BarBgB** (numbers) = red, green and blue components for the color of the background progress circle (the grey one on the capture above)\n- **BarR, BarG, BarB** (numbers) = red, green and blue components for the color of the actual progress circle (the cyan one on the capture above)\n- **BarBgWidth** (number) = width for the background progress circle\n- **BarWidth** (number) = width for the actual progress circle\n- **LineCapRound** (boolean) = if True, the line cap for drawing the circles is 'round', otherwise it's 'square' (default is **True**)\n- **ValueMode** (text) = how to display the value within the circle: X/Y or as a percentage value (use the **ValueModeEnum** output property as an enumeration to set the value)\n- **PercentageDecimals** (number) = determines how many decimals are shown for the percentage value (only applicable if **ValueMode** is set to *ValueModeEnum.Percentage*)\n### Output\n- **ValueModeEnum** (record) = use this enumeration to set the value of the **ValueMode** property (*MaxValue* shows the value as X/Y; *Percentage* shows the value as a percentage value, using the **PercentageDecimals** property to set how many decimals should be displayed)\n\n### Examples\nSet the **LineCapRound** property of the component to **False** if you want your progress bar look like this:\n![CircleProgressBar-square](images/CircleProgressBar-square.png)\n\n### Updates\n- **20-may-2019**: fixed the **ShowLabel** property that was not effective + added new **LineCapRound** property\n- **11-may-2020**: added the **ValueMode**, **PercentageDecimals** and **ValueModeEnum** properties to allow different display modes for the value\n- **03-may-2022**: fixed division-by-zero error message showing up from time to times\n"
  },
  {
    "path": "Components/ControlAnimator/readme.md",
    "content": "# ControlAnimator component\nThis component implements the ease-in and ease-out animations that are often met in web site or mobile applications.\n\nHere are a few examples of animations that you can obtain using the component:\n\n![HamburgerMenuAnimation](images/ControlAnimatorSampleHamburger.gif)\n\n![PopupAnimation](images/ControlAnimatorSamplePopup.gif)\n\n## Notes\nCredits for the various math functions to calculate the ease-in and ease-out values: *Robert Penner* on http://www.gizma.com/easing/\n\nThe component globally generates **floating point numbers** that range from a **start value** to an **end value** within a certain number of **steps**. These numbers are generated using the ease-in and ease-out animation math functions provided by *Robert Penner* on his site.\n\nGenerally speaking, here is what 'ease-in' and 'ease-out' mean:\n- **Ease-In**: starts slowly from the **start value** and accelerates until it reaches the **end value**\n\n![EaseInAnimation](images/ControlAnimatorEaseIn.gif)\n\n- **Ease-Out**: starts at max speed from the **start value** and deccelerates until it stops at the **end value**\n\n![EaseOutAnimation](images/ControlAnimatorEaseOut.gif)\n\n- **Ease-In/Out**: starts slowly from the **start value** and accelerates until it reaches **half-way** and then deccelerates until it stops at the **end value**\n\n![EaseInOutAnimation](images/ControlAnimatorEaseInOut.gif)\n\nThe following animations are available:\n- **SimpleLinear** (no acceleration)\n- **CubicEasingIn** (cubic acceleration)\n- **CubicEasingOut** (cubic decceleration)\n- **CubicEasingInOut** (cubic acceleration/decceleration)\n- **QuadraticEasingIn** (quadratic acceleration)\n- **QuadraticEasingOut** (quadratic decceleration)\n- **QuadraticEasingInOut** (quadratic acceleration/decceleration)\n- **QuarticEasingIn** (quartic acceleration)\n- **QuarticEasingOut** (quartic decceleration)\n- **QuarticEasingInOut** (quartic acceleration/decceleration)\n- **QuinticEasingIn** (quintic acceleration)\n- **QuinticEasingOut** (quintic decceleration)\n- **QuinticEasingInOut** (quintic acceleration/decceleration)\n- **ExponentialEasingIn** (exponential acceleration)\n- **ExponentialEasingOut** (exponential decceleration)\n- **ExponentialEasingInOut** (exponential acceleration/decceleration)\n- **SinusoidalEasingIn** (sinusoidal acceleration)\n- **SinusoidalEasingOut** (sinusoidal decceleration)\n- **SinusoidalEasingInOut** (sinusoidal acceleration/decceleration)\n- **CircularEasingIn** (circular acceleration)\n- **CircularEasingOut** (circular decceleration)\n- **CircularEasingInOut** (circular acceleration/decceleration)\n\nGlobally speaking, animation 'speeds-up' when used in the following order: **Cubic** > **Quadratic** > **Quartic** > **Quintic**.\n\n## Properties\nHere are the properties available to configure the animation:\n### Input\n- **StartValue** (number) = starting value\n- **EndValue** (number) = ending value\n- **Steps** (number) = number of steps between **StartValue** and **EndValue**\n- **StepWaitTime** (number) = in milliseconds, time to wait between each step of the animation\n- **AnimationType** (text) = animation function you wish to use (use the output property **AnimationTypeEnum** to set the value)\n- **Animate** (boolean) = when true, starts the 'animation' by generating the resulting values between **StartValue** and **EndValue**\n- **Reverse** (boolean) = when true, animation starts from **EndValue** and proceeds to **StartValue**\n- **Reset** (boolean) = when true, resets the output value to the **StartValue** (if **Reverse** is *false*) or to the **EndValue** (if **Reverse** is *true*)\n\n### Output\n- **Value** (number) = generated number between **StartValue** and **EndValue**, using the math ease-in, ease-out function according to the value in **AnimationType**\n- **AnimationTypeEnum** (record) = enumeration of all availables animations (use it to set the **AnimationType** input property of the component)\n\n## Files\n- **ControlAnimator.msapp**: the component (use the *Import component* option from the *Custom* menu of the *Insert* tab directly within the Power Apps Studio to add the component to your app)\n- **ControlAnimatorApp.zip**: an application to test the component and check-out how each animation looks like (use the *Import canvas app* button in the Power Apps *Apps* menu to install it on your tenant)\n\n![ControlAnimatorApp](images/ControlAnimator.png)\n\n## HISTORY changes\n**v1.0** [ 08-jun-2020 ]\n- Initial publish"
  },
  {
    "path": "Components/EasingAnimation/readme.md",
    "content": "# EasingAnimation component\nThis component allows you to animate your Power Apps canvas controls to give life to your applications. Many animations are provided within the component. One instance of the component allows you to procdure **3 different animations simultaneously**.\n\n![EasingAnimation](images/EasingAnimation.png)\n\nThis component is provided within a small application that allows you to preview and test the various animations that come with the **EasingAnimation** component:\n\n![EasingAnimationDemoHome](images/EasingAnimationDemoHome.png)\n\nClicking on animation will let you play around with that animation:\n\n![EasingAnimationDemoTestPreview](images/EasingAnimationDemoTestPreview.png)\n\nAfter enabling the __Animation preview__ toggle, clicking the __SHOW CODE__ button will show you how to setup the properties of the control you want to animate as well as the hidden **EasingAnimation** component:\n\n![EasingAnimationDemoTestCode](images/EasingAnimationDemoTestCode.png)\n\n## **EasingAnimation** component properties\nHere are the properties available to configure the **EasingAnimation** component:\n### Input\n- **Animation1** (record) = first animation settings\n  - **AnimationType** (text) = name of the animation you want to use (use the **AnimationTypeEnum** output property)\n  - **Start** (number) = starting pixel position of the control you want to animate\n  - **End** (number) = ending pixel position of the control you want to animate\n  - **Steps** (number) = number of steps to go from **Start** to **End**\n  - **StepWait** (number) = number of milliseconds between each step\n- **StartAnimation1** (boolean) = change its value to trigger the animation\n- **ResetAnimation1** (boolean) = change its value to reset the animation\n- **Animation2** (record) = second animation settings\n  - **AnimationType** (text) = name of the animation you want to use (use the **AnimationTypeEnum** output property)\n  - **Start** (number) = starting pixel position of the control you want to animate\n  - **End** (number) = ending pixel position of the control you want to animate\n  - **Steps** (number) = number of steps to go from **Start** to **End**\n  - **StepWait** (number) = number of milliseconds between each step\n- **StartAnimation2** (boolean) = change its value to trigger the second animation\n- **ResetAnimation2** (boolean) = change its value to reset the second animation\n- **Animation3** (record) = third animation settings\n  - **AnimationType** (text) = name of the animation you want to use (use the **AnimationTypeEnum** output property)\n  - **Start** (number) = starting pixel position of the control you want to animate\n  - **End** (number) = ending pixel position of the control you want to animate\n  - **Steps** (number) = number of steps to go from **Start** to **End**\n  - **StepWait** (number) = number of milliseconds between each step\n- **StartAnimation3** (boolean) = change its value to trigger the third animation\n- **ResetAnimation3** (boolean) = change its value to reset the third animation\n### Output\n- **AnimationTypeEnum** (record) = list of all animation names that are provided by the component (use it to set the **AnimationType** property for each animation)\n- **Value1** (number) = output value for the first animation\n- **Value2** (number) = output value for the second animation\n- **Value3** (number) = output value for the third animation\n- **CalcHeight** = FOR INTERNAL USE ONLY\n### Events\n- **OnAnimation1End** = triggered when the first animation ends\n- **OnAnimation2End** = triggered when the second animation ends\n- **OnAnimation3End** = triggered when the third animation ends\n\n__Note:__ always reset an animation before starting it!!!\n__Note2:__ within a visible instance of the component on a screen you can preview each animation selecting it through the combo box and clicking the replay icon 😉\n\n## How to install it?\n- Download the app [here](EasingAnimation.zip)\n- Go to https://make.powerapps.com\n- Click on **Applications** in the left menu\n- Click the **Import canvas app** button\n- Select the downloaded app using the **Upload** button\n- Click the **Import** button\n- Wait for the import to finish\n- You're all done!\n\nPlay or edit the app to see how to use and setup the component within your app.\n\nEnjoy! 😊"
  },
  {
    "path": "Components/FormFactorSelector/readme.md",
    "content": "# FormFactorSelector component\nThis component allows you to change the form factor of your app's screen while you're within the Power Apps Studio. The sizes for the various form factors can be set through a single property of the component.\n\n## How do I use it ?\nHere are the instructions on how to best use this component inside the Power Apps Studio:\n- **Import** the component into your app\n- **Add** the component to the screen of your app that you want to test with different form factors\n- **Set** its **X** coordinate to _Parent.Width - Self.Width_\n- **Set** its **Y** coordinate to _-Self.Height_ (don't forget the '-' sign here)\n- **Set** your screen's **Width** property to: _myFormFactorSelector.ScreenWidth_ (_myFormFactorSelector_ being the component's name you previously added to your screen)\n- **Set** your screen's **Height** property to: _myFormFactorSelector.ScreenHeight_\n\nYou're good to go. Simply click on a form factor icon to change your screen's size (you don't need to press the ALT key to make it work 😉).\nClick on the already active icon to rotate the screen 90° and simulate the landscape orientation for your screen.\n\n## Properties\nHere are the properties available to configure the component:\n### Input\n- **Default** (text) = default form factor (use the component's output enumeration **FormFactorEnum** to set the value)\n- **Sizes** (record) = screen sizes for each form factor\n### Output\n- **FormFactorEnum** (record) = enumeration of available form factors\n- **ScreenWidth** (number) = screen width value for the selected form factor\n- **ScreenHeight** (number) = screen height for the selected form factor\n- **Selected** (text) = selected form factor (taken from the **FormFactorEnum** enumeration)\n### Events\n- **OnChange** = triggered every time the form factor changes by clicking on an icon\n\n## How does it look ?\nHere is a capture of how the component looks like and how it works:\n\n![ComponentCapture](images/FormFactorSelector.gif)\n\n## HISTORY changes\n**v1.0** [ 28-mar-2022 ]\n- Initial version\n\n** v1.1** [ 11-apr-2022]\n- Added OnChange event"
  },
  {
    "path": "Components/IbanChecker/readme.md",
    "content": "# IbanChecker component\nThis component will allow you to check if an IBAN (International Banking Account Number) number is correct (the algorithm can be found here: https://en.wikipedia.org/wiki/International_Bank_Account_Number).\n\nOnce it has been added to your app, the component will just show you a set of toggles that indicate which checks passed (*true*) and which failed (*false*). The **IBAN check** toggle is the one indicating if the whole IBAN number is correct:\n\n![IbanChecker](images/IbanChecker.png)\n\nUsing the compact mode (see **CompactMode** input property below), you can ask the component to just display an icon showing the result of the check:\n\n![IbanChecker](images/CompactMode.png)\n\nSupported countries are (along with their IBAN country code):\n- Albania, AL\n- Algeria, DZ\n- Andorra, AD\n- Angola, AO\n- Austria, AT\n- Azerbaijan, AZ\n- Bahrain, BH\n- Belarus, BY\n- Belgium, BE\n- Benin, BJ\n- Bosnia and Herzegovina, BA\n- Brazil, BR\n- Bulgaria, BG\n- Burkina Faso, BF\n- Burundi, BI\n- Cameroon, CM\n- Cape Verde, CV\n- Chad, TD\n- Comoros, KM\n- Congo, CG\n- Costa Rica, CR\n- Croatia, HR\n- Cyprus, CY\n- Czech Republic, CZ\n- Denmark, DK\n- Dominican Republic, DO\n- East Timor, TL\n- El Salvador, SV\n- Egypt, EG\n- Estonia, EE\n- Faroe Islands, FO\n- Finland, FI\n- France, FR\n- Gabon, GA\n- Georgia, GE\n- Germany, DE\n- Gibraltar, GI\n- Greece, GR\n- Greenland, GL\n- Guatemala, GT\n- Honduras, HN\n- Hungary, HU\n- Iceland, IS\n- Iran, IR\n- Iraq, IQ\n- Ireland, IE\n- Israel, IL\n- Italy, IT\n- Ivory Coast, CI\n- Jordan, JO\n- Kazakhstan, KZ\n- Kosovo, XK\n- Kuwait, KW\n- Latvia, LV\n- Lebanon, LB\n- Liechtenstein, LI\n- Lithuania, LT\n- Luxembourg, LU\n- Madagascar, MG\n- Mali, ML\n- Malta, MT\n- Mauritania, MR\n- Mauritius, MU\n- Moldova, MD\n- Monaco, MC\n- Montenegro, ME\n- Morocco, MA\n- Mozambique, MZ\n- Netherlands, NL\n- Nicaragua, NI\n- Niger, NE\n- North Macedonia, MK\n- Norway, NO\n- Pakistan, PK\n- Palestinian territories, PS\n- Poland, PL\n- Portugal, PT\n- Qatar, QA\n- Romania, RO\n- Saint Lucia, LC\n- San Marino, SM\n- Sao Tome and Principe, ST\n- Saudi Arabia, SA\n- Senegal, SN\n- Serbia, RS\n- Seychelles, SC\n- Slovakia, SK\n- Slovenia, SI\n- Spain, ES\n- Sweden, SE\n- Switzerland, CH\n- Togo, TG\n- Tunisia, TN\n- Turkey, TR\n- Ukraine, UA\n- United Arab Emirates, AE\n- United Kingdom, GB\n- Vatican City, VA\n- Virgin Islands, British, VG\n\n## Component properties\nHere are the properties available to configure and use the component:\n### Input\n- **IBAN** (text) = the IBAN number\n- **CompactMode** (boolean) = only shows a red cross icon or a green check icon depending on the IBAN verification result\n- **ErrorMessages** (record) = list of messages to show as a tooltip when hovering the icon in **CompactMode**\n### Output\n- **IBANCheck** (boolean) = *true* if the IBAN number is correct\n- **CountryCheck** (boolean) = *true* if the IBAN number's country is supported by the component\n- **KeyCheck** (boolean) = *true* if the IBAN number key is correct (key value must be between 2 and 98)\n- **LengthCheck** (boolean) = *true* if the IBAN number lenght is correct (varies according to the country)\n\nThe following other output parameters are for INTERNAL USE only:\n\n- **CleanIBAN** (text) = IBAN number without spaces and dashes\n- **CountryValue** (text) = IBAN number country code value\n- **KeyValue** (text) = key portion of the IBAN number\n- **BBANValue** (text) = the basic part of the IBAN number\n- **RearrangedIBAN** (text) = rearranged IBAN number for calculating the IBAN number check value\n- **IntergerIBAN** (text) = IBAN number converted to an integer value for calculation of the check value\n- **IBANLenghts** (table) = IBAN number length for each supported country\n\n## Important notes\n- Make sure that the IBAN number that is being checked is compatible with the list of countries supported by the component (see above).\n\n## How to use it\n- Add the component to your app's screen where there is an text input field to enter an IBAN number\n- Set the component's **IBAN** input parameter to the text input field's **Text** property\n- If the **IBANCheck** output parameter of the component is *true*, the IBAN number is correct\n- When an IBAN number is incorect (**IBANCheck**=*false*), you can use the **CountryCheck**, **KeyCheck** and **LengthCheck** output parameters to determine what is wrong (if it's *false*, that's where the problem lies)\n- Hide the component if you just want to use the **IBANCheck** output property to verify the validity of an IBAN number\n\n## HISTORY changes\n**v0.1** [ 14-sept-2020 ]\n- Initial publish\n\n**v0.2** [ 18-sept-2020 ]\n- Fixed an issue where very large IBAN numbers wouldn't check out correctly\n- Added 2 new countries: SV & ST\n- Added a compact mode view\n- Rebranded the component\n"
  },
  {
    "path": "Components/MetroVerticalProgressBar/readme.md",
    "content": "# MetroVerticalProgressBar component\nThis component is a configurable metro-like progress bar. Each step is like a metro station... :P\n\n## Component properties\nHere are the properties available to configure the progress bar:\n### Input\n- **Items** (table) = list of steps (each step has an id, a label and a visibility boolean)\n- **Colors** (record) = the colors for the bar background, circles, labels, in each state (ToDo, Active, Done) and for the step circles border\n- **BarWidth** (number) = in pixels, the width for the background bar\n- **BarInnerMargin** (number) = in pixels, the inner margin between the bar and the steps circles\n- **BarAutoHeight** (boolean) = if True, adjusts the height of the background bar to the visible steps, otherwise it has the same height as the component's\n- **CirclePadding** (number) = in pixels, the padding between the steps circles\n- **CircleBorderThickness** (number) = in pixels, the border thickness for the step circles\n- **Size** (number) = font size for the steps labels\n- **LabelPaddingLeft** (number) = in pixels, the left padding for the steps labels\n- **ActiveStep** (number) = id of the current active step (must fit one of the ids in the **Items** property, otherwise no step is active)\n- **AllowStepSelection** (boolean) = if True, triggers the **OnSelect** event toggle (see below) when a step is clicked\n### Output\n- **OnSelect** (boolean) = switches from False to True every time a step is clicked (if the **AllowStepSelection** is True): connect it to a hidden toggle control in your application to handle the click of a step\n- **SelectedStep** (number) = id of the step that was clicked\n- **ReservedHeight** (number) = in pixels, the calculated height needed by the component to display all the steps correctly (by design inside the component, it feeds the component's height; if you change the height of the component manually you will loose the automatic sizing of the component; to make it automatic again, feed the **Height** property of the component with its own **ReservedHeight** property)\n\n## Example\nHere is how your progress bar can look:\\\n![MetroVerticalProgressBar-Example1](images/MetroVerticalProgressBar_ex1.png)\n\n## Notes\n### Why ActiveStep and SelectedStep?\nSeparating the current active step from the selected step when a user clicks on a step allows you to put some code in-between. Meaning, when a user clicks on a step, you can do some checks *before* you actually set that step as active.\\\nTo do so, just add a hidden toggle on your screen, set its **Default** property to the **OnSelect** output property from the component and in the **OnCheck** event of the toggle put your code to do the checks you want. Then at the end of your code, set a variable to change the **ActiveStep** of the progress bar to the **SelectedStep** value.\n\n## History\n- **20-feb-2020**: first release\n"
  },
  {
    "path": "Components/OfficeUIFabricIconGenerator/readme.md",
    "content": "# OfficeUIFabricIconGenerator component\nThis component allows one to generate the SVG code for an icon picked among the whole list of the Office UI Fabric Icons (which can be [found here](https://uifabricicons.azurewebsites.net/)). This SVG code can then be used in an *Image* control in any Power Apps application.\n\n## How do I use it ?\nHere are the instructions on how to use this component:\n- **Import** the application on your tenant\n- **Play** the application\n- **Select** an icon, set its rotation angle and its color\n- **Copy** to the clipboard the SVG code in the *Icon image data* field's blue box\n- **Go** to your application's screen where you wish to use this icon\n- **Add** a new *Image* control to your screen\n- In the **Image** property of your *Image* control, **paste** the code your have in your clipboard\n\n## How does it look ?\nHere is a capture of how the component looks:\n\n![ComponentCapture](images/OfficeUIFabricIconGenerator.png)\n\n## HISTORY changes\n**v1.0** [ 11-nov-2019 ]\n- Initial version\n\n**v1.1**  [ 19-nov-2019 ]\n- Added icons count right next to the search box\n- Added icon names below icons\n- Fixed number of icon columns showed when resizing component\n- Added icon rotation\n- Added icon color hint\n- Replace icons scroll bar with paging buttons\n- Fixed larger icons width\n\n**v2.0** [ 13-mar-2022 ]\n- Added latest official icons: now 2254 icons!\n- Removed component MSAPP file as the application should be used instead\n- Updated use instructions above on this page\n- Removed notes above on this page\n- Updated capture"
  },
  {
    "path": "Components/PowerSpinner/readme.md",
    "content": "# PowerSpinner component\nThis component will to add a spinner to your Power Apps applications.\n\n![PowerSpinner samples](images/PowerSpinnerSamples.gif)\n\nAdditionnaly you will also find an MSAPP Power Apps application file that will allow you to play around with the various spinners offered by the component:\n\n![PowerSpinner app demo](images/PowerSpinnerAppDemo.gif)\n\n## Component properties\nHere are the properties available to configure the component:\n### Input\n- **Spinner** (record) = the actual spinner displayed by the component (use the **SpinnerType** record output property to set its value)\n- **SpinnerSettings** (record) = settings for all available spinners\n### Output\n- **SpinnerType** (record) = enumeration of available spinners (use it to set the current spinner in the **Spinner** input property)\n- **SpinnerCode** (text) = code for the currently selected spinner to be placed in the **Image** property of an image control to place the spinner inside your app with a single image control\n\n## How to use it\nWith this component, you can add a spinner to your Power Apps application using two different techniques:\n1. Import the component into your app, set the **Spinner** and **SpinnerSettigs** properties as you wish and place you spinner wherever you want on your screen\n2. Launch the PowerSpinner App and then:\n    - Select the desired spinner\n    - Play with it settings until it suits your needs\n    - Toggle the _Preview/Code_ toggle to **Code**\n    - Copy the code from the text input control\n    - Add an image control to your app\n    - Paste the code in the image control's **Image** property\n    - ...et voilàaaa!\n\n## Updates\n- **12-16-2022**: initial release\n\n"
  },
  {
    "path": "Components/ProgressBar/readme.md",
    "content": "# ProgressBar component\nThis component alows you to add a linear horizontal progress bar to your Power Apps canvas applications.\nMany properties allow you to customize the progress bar to your needs:\n\n![ProgressBarSamples](images/ProgressBarProperties.png)\n\n## Properties\nHere are the properties available to configure the progress bar:\n### Input\n- **MaxValue** (number) = maximum value of the progress bar\n- **Value** (number) = current value of the progress bar\n- **Percentage** (boolean) = if True, shows a percentage value in the middle of the progress bar, else shows XXX / YYY (XXX being the current value and YYY the max value)\n- **CustomText** (text) = a text replacing the percentage or the XXX / YYY label shown in the center of the progress bar\n- **Rounded** (boolean) = if True, renders a progress bar with rounded edges, otherwise the progress bar is rectangular\n- **Padding** (number) = number of pixels between the background and the progress bar itself\n- **BackgroundColor** (color) = color for the background of the progress bar\n- **ForegroundColor** (color) = color for the progress bar itself\n- **TextColor** (color) = color for the label at the center of the progress bar showing the percentage, the XXX / YYY or the custom text\n- **MiddleTextColor** (color) = color of that label once the value of the progress bar has reached half of its max value\n- **Size** (number) = font size for the label shown at the center of the progress bar\n- **ShowText** (boolean) = shows or hide the label shown at the center of the progress bar\n\n## Examples\nUsing all these properties can allow you to add progress bars with various looks to your applications...\n\n![ProgressBarSamples](images/ProgressBarSamples.gif)\n\n## HISTORY changes\n**v1.0** [ 26-aug-2021 ]\n- Initial publish"
  },
  {
    "path": "Components/ShadowBox/readme.md",
    "content": "# ShadowBox component\nThis component shows a rectangle with a configurable drop shadow and colouring edge.\n\n## Notes\n### Align the shadow with your controls (v1.1)\nUse the **MarginLeft**, **MarginRight**, **MarginTop** and **MarginBottom** output parameters to fit your shadow easily to your desired control.\nFor instance, let's say you have a control called *cmpColorPicker* to which you'd like to apply a shadow:\n- Add the component to your screen, name it *cmpMyShadowBox* and set its position and size as follow:\n```\n    o cmpMyShadowBox.X = cmpColorPicker.X - cmpMyShadowBox.MarginLeft\n    o cmpMyShadowBox.Y = cmpColorPicker.Y - cmpMyShadowBox.MarginTop\n    o cmpMyShadowBox.Width = cmpColorPicker.Width + cmpMyShadowBox.MarginLeft + cmpMyShadowBox.MarginRight\n    o cmpMyShadowBox.Height = cmpColorPicker.Height + cmpMyShadowBox.MarginTop + cmpMyShadowBox.MarginBottom\n```\n### Setting the edge position (v2.0)\nLet's say you've added the component in your app and that you've named it *cmpMyShadowBox*. To set its edge position, simply set its **Position** option inside its **Edge** input parameter like this:\n```\n    cmpMyShadowBox.Edge.Position = cmpMyShadowBox.EdgePositionEnum.Left\n```\n### Making a full circle shadow (v2.0)\nSetting the **Radius** option from the **Box** input property to a large value (actually greater than half the height of the box) will allow you to produce a full-circle shadow (assuming your box is square). For instance, it can be done this way:\n```\n    o cmpMyShadowBox.Width = Self.Height\n    o cmpMyShadowBox.Box.Radius = Self.Height\n```\n**IMPORTANT**: when rouding the corners of the box, the edge cannot be displayed. The edge can be visible only if *Box.Radius = 0*.\n\n## Properties\nHere are the properties available to configure the box:\n### Input\n- **Shadow** (record) = set of parameters defining the shadow's look\n    - *OffsetX* (number) = horizontal position of the shadow (positive: to the right; negative: to the left)\n    - *OffsetY* (number) = vertical position of the shadow (positive: to the bottom; negative: to the top)\n    - *Color* (text) = color for the shadow (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n    - *Blur* (number) = integer value to specify how much the shadow should be blurred\n    - *Opacity* (number) = value between 0 and 1 to specify the shadow opacity (0 is transparent, 1 is opaque)\n- **Box** (record) = set of parameters defining the box's look\n    - *Fill* (text) = fill color for the inner box (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n    - *Opacity* (number) = value between 0 and 1 to specify the inner box fill color opacity (0 is transparent, 1 is opaque)\n    - *BorderThickness* (number) = width value for the inner box border (in pixels)\n    - *BorderColor* (text) = color for the inner box border (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n    - *Radius* (number) = radius (in pixels) to round the box's corners\n- **Edge** (record) = set of parameters defining the edge's look\n    - *Position* (text) = position of the colouring edge (to be defined using the **EdgePositionEnum** output parameter of the component)\n    - *Width* (number) = width of the colouring edge (in pixels)\n    - *Color* (text) = color for the colouring edge (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n    - *Padding* (number) = padding between the inner box border and the colouring edge (in pixels)\n- **ShowEdge** (boolean) = displays a colouring edge inside the box\n### Output\n- **MarginLeft** (number) = distance between the left border of the component and the left border of the inner box\n- **MarginRight** (number) = distance between the right border of the component and the right border of the inner box\n- **MarginTop** (number) = distance between the top border of the component and the top border of the inner box\n- **MarginBottom** (number) = distance between the bottom border of the component and the bottom border of the inner box\n- **EdgePositionEnum** (record) = enumeration of the various edge positions allowed: left, top, right, bottom\n\n## Examples\nDrop shadow placed behind a text input box:\n\n![TextInputDropShadow](images/TextBoxDropShadow.gif)\n\nNice visual cards where some text and icon controls have been placed in front of the shadow box:\n\n![VisualCard1](images/ShadowBoxVisualCard1.png)\n\n![VisualCard2](images/ShadowBoxVisualCard2.png)\n\nShadows for buttons:\n\n![VisualCard3](images/ShadowBoxVisualCard3.png)\n\n![RoundedShadowBox](images/RoundedShadowBox.png)\n\nPlaying with the **Radius** option of the **Box** parameter, you can easily produce a perfect circle shadow:\n\n![CircleShadowBox](images/CircleShadowBox.png)\n\n## HISTORY changes\n**v1.0** [ 10-oct-2019 ]\n- Initial publish\n\n**v1.1**  [ 01-dec-2019 ]\n- Added margins output parameters\n\n**v2.0**  [ 20-sep-2021 ]\n- Regrouping of input parameters\n- Added rounded corner radius\n- Added enumeration for edge positionning"
  },
  {
    "path": "Components/ShadowCircle/readme.md",
    "content": "# ShadowCircle component\nThis component allows you to create a circle with a drop shadow and an inner solid or gradient fill color.\n\n## Notes\nPlease note that the radius of the circle cannot be set manually through a parameter but is automatically calculated by the component according the shadow parameters: shadow offset, shadow blur and shadow radius.\n\n## Properties\nHere are the properties available to configure the circle:\n### Input\n- **SolidFill** (string) = fill color for the circle (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n- **FillOpacity** (number) = value between 0 and 1 to specify the circle fill color opacity (0 is transparent, 1 is opaque)\n- **ShadowOffsetX** (number) = horizontal position of the shadow (positive: to the right; negative: to the left)\n- **ShadowOffsetY** (number) = vertical position of the shadow (positive: to the bottom; negative: to the top)\n- **ShadowRadius** (number) = radius in pixels for the circle's shadow\n- **ShadowBlur** (number) = integer value to specify how much the shadow should be blurred\n- **ShadowColor** (string) = color for the shadow (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n- **ShadowOpacity** (number) = value between 0 and 1 to specify the shadow opacity (0 is transparent, 1 is opaque)\n- **CircleBorderWidth** (number) = thickness for the circle's border\n- **CircleBorderColor** (string) = color for the circle's border (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n- **GradientFill** (boolean) = activates a gradient fill for the circle\n- **GradientX** (number) = X position of the gradient's center\n- **GradientY** (number) = Y position of the gradient's center\n- **GradientRadius** (number) = radius in pixels for the gradient\n- **GradientStartColor** (string) = starting color for the gradient (center) (color can be: color name, #rrggbb or rgb(rr,gg,bb)) \n- **GradientEndColor** (string) = ending color for the gradient (edges) (color can be: color name, #rrggbb or rgb(rr,gg,bb))\n- **GradientStartColorOpacity** (number) = value between 0 and 1 to specify the gradient's starting color opacity (0 is transparent, 1 is opaque)\n- **GradientEndColorOpacity** (number) = value between 0 and 1 to specify the gradient's ending color opacity (0 is transparent, 1 is opaque)\n- **Debug** (boolean) = activates debug mode for the component -> displays some information about calculated values inside the component\n### Output\n- **MarginX** (number) = distance between the left/right border of the component and the circle's edge (border's thickness is not considered)\n- **MarginY** (number) = distance between the top/bottom border of the component and the circle's edge (border's thickness is not considered)\n- **Radius** (number) = circle's radius in pixels (calculated by the component)\n\n## Examples\nUsing all these properties you can create various circles with their drop shadows and gradient fill color:\n\n![ShadowCircle samples](images/ShadowCircle.png)\n\n## HISTORY changes\n**v1.0** [ 30-dec-2019 ]\n- Initial publish\n"
  },
  {
    "path": "Components/ToggleSet/readme.md",
    "content": "# ToggleSet component\nThis component allows you to add a fully customizable togglet set to your applications.\n\n## Notes\n- The size of the toggle set items adjusts automatically to the width and height of the component.\n- To make sure the component pre-selects some items when your app screen is shown, be sure to have their *Selected* column set to *True* and call the **Reset()** function inside the *OnVisible* event of your screen\n\n## Properties\nHere are the properties available to configure the component:\n### Input\n- **AllowNoSelection** (boolean) = if only one item is selected, allows the user to unselect it, thus having no items selected at all\n- **BorderColor** (color) = color for the borders of the toggle set (as well as for the vertical separating lines between items)\n- **BorderThickness** (number) = border thickness of the component\n- **Color** (color) = text color for non-selected items\n- **DisabledColor** (color) = text color for disabled items\n- **DisabledFill** (color) = item fill color for disabled items\n- **FontWeight** (color) = font weight for the item labels\n- **Items** (table) = list of items for the toggle set (columns are: *Id*, *Value*, *Disabled*, *Size*, *Selected*)\n- **ItemFill** (color) = fill color for non-selected items\n- **MaxSelectedItems** (number) = maximum number of items that can be selected (only if *SelectMultiple* is *True*, then value should be between 2 and number of items in *Items*)\n- **Radius** (number) = in pixels, radius for the left and right corners of the component\n- **SelectedBorderColor** (color) = border color of selected items\n- **SelectedColor** (color) = text color for selected items\n- **SelectedFill** (color) = fill color for selected items\n- **SelectMultiple** (boolean) = allows the selection of multiple items\n- **Size** (number) = default font size for the item labels\n\n### Output\n- **SelectedItems** (table) = list of selected items (same structure as the *Items* input parameter)\n- **OnChange** (boolean) = toggles to *True* when the items selection changes\n\n## Examples\nUsing all these properties you can create various toggle sets like this:\n\n![ToggleSet samples](images/ToggleSet.png)\n\n## HISTORY changes\n**v1.0** [ 24-mar-2020 ]\n- Initial publish\n**v1.1** [ 25-mar-2020]\n- Removed *Reset* parameter (use **Reset()** function instead)\n- Added *MaxSelectedItems* parameter\n"
  },
  {
    "path": "Components/UltimateColorPicker/readme.md",
    "content": "# UltimateColorPicker component\nThis color picker component will automatically calculate a palette of light and dark shades based on a list of main colors you will provide.\n\n![UltimateColorPicker](images/UltimateColorPicker.png)\n\n## How to use it\nPlease follow these instructions:\n- Insert the component on a screen in your app\n- Set the list of main colors in the **MainColors** input parameter of the component (check out the default sample values)\n- If needed, set the default selected color value using the **DefaultColor** input parameter (use format *#rrggbbaa*)\n- Customize the size of the squares and their padding using the **ColorSquareSize** and **ColorSquaresPadding** input parameters\n- DO NOT RESIZE the component manually; it's automatic\n- Once the user has chosen his color, check out the **SelectedButton** output parameter to see if he pressed *OK* or *CANCEL*\n- Chosen color is in one of the output color parameters (see below)\n\n## Features\nHere is the list of features provided with this color picker:\n- Customizable title\n- Set title's visibility\n- Set author's link visibility\n- Set component's version number label visibility\n- Customizable main colors (center row in the palette)\n- Automatic light and dark shades palette based on main colors\n- Greyscales dedicated shades palette\n- Customizable color square size and padding between squares\n- Customizable selected color background (usefull when alpha < 1)\n- Active color in color picker palette is pin-pointed by a bullet point\n- Selected color can be set in Hex mode or in RGB mode\n- RGB color and alpha values can be set using sliders or with the keyboard\n- Output of selected color in multiple formats: Power Apps color, Hex, RGBA separated values, \"RGBA(r,g,b,a)\" string\n- *COMING SOON* - Customizable number of shades for the palette\n- *COMING SOON* - Responsive component\n\n## Properties\nHere are the properties available to configure the color picker:\n### Input\n- **DefaultColor** (color) = default selected color (in the form #rrggbb)\n- **Title** (string) = title for the component\n- **TitleColor** (color) = text color for the component's title and version number\n- **HideAuthor** (boolean) = hides the author displayed in the component's title bar\n- **HideVersion** (boolean) = hides the version number displayed in the component's title bar\n- **ShowTitle** (boolean) = shows or hides the component's title\n- **MainColors** (table) = main colors list in the form: *Table({Value: \"#rrggbb\"},{Value: \"#rrggbb\"},...)*\n- **ShadesCount** (number) = number of shades in the palette (*COMING SOON*)\n- **ColorSquareSize** (number) = size, in pixels, for the palette color squares\n- **ColorSquaresPadding** (number) = padding between the palette color squares\n- **SelectedColorBg** (color) = color for the background behind the selected color square\n### Output\n- **SelectedColor** (color) = picked color value in Power Apps color format\n- **Red** (number) = red value for the picked color\n- **Green** (number) = green value for the picked color\n- **Blue** (number) = blue value for the picked color\n- **SelectedAlpha** (number) = alpha value for the picked color\n- **SelectedRGB** (string) = picked color in RGBA string format: *RGBA(&lt;r&gt;,&lt;g&gt;,&lt;b&gt;,&lt;a&gt;,)*\n- **SelectedHex** (string) = picked color in Hex format: *#rrggbbaa*\n- **SelectedButton** (string) = button clicked (value can be: *OK* or *CANCEL*)\n- **ReservedWidth** (number) = *RESERVED FOR INTERNAL USE ONLY*\n- **ReservedHeight** (number) = *RESERVED FOR INTERNAL USE ONLY*\n\n## HISTORY changes\n**v1.0** [ 29-nov-2019 ]\n- Initial publish\n\n**v1.1**  [ 01-dec-2019 ]\n- Added greyscale palette\n- Fixed component auto-size\n- Fixed positionning of some controls\n- Grouped controls inside containers\n- Prefixed hex output with \"#\"\n- Added *TitleColor* input parameter to set component's title bar text color\n- Added author link + *HideAuthor* input parameter to hide author\n- Added version label + *HideVersion* input parameter to hide version number\n"
  },
  {
    "path": "README.md",
    "content": "# Components\n## Easing Animation\nThis component allows you to animate controls within your Power Apps applications. The component provides **30 different animations** that you can apply to your controls.\n\n![EasingAnimation sample](Components/EasingAnimation/images/EasingAnimation.png)\n\n[Click here for details](Components/EasingAnimation/readme.md).\n\nLink to download the small app containing the component: [Download here](Components/EasingAnimation/EasingAnimation.zip).\n\n## Bubble Helper\nThis component will help you chain help bubbles within your canvas Power Apps applications to help your users understand how the screens of your apps work. The main **BubbleHelper** component comes with a **BubbleSteps** component where you will be able to configure the steps your bubbles will go through.\nBoth these components are provided within a small app that will teach you how to set them up inside your own apps.\n\n![BubbleHelper sample](Components/BubbleHelper/images/BubbleHelper.png)\n\n[Click here for details](Components/BubbleHelper/readme.md).\n\nLink to download the small app containing the 2 components: [Download here](Components/BubbleHelper/BubbleHelper.zip).\n\n## Power Spinner\nThis component allows you to add custom spinners to your Power Apps applications. You will also find an application that lets you play with the various spinners and get the code to place in an image control in your app.\n\n![PowerSpinner samples](Components/PowerSpinner/images/PowerSpinnerSamples.gif)\n\n[Click here for details](Components/PowerSpinner/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/PowerSpinner/PowerSpinnerComponent.msapp).\n\nLink to download the application MSAPP file: [Download here](Components/PowerSpinner/PowerSpinnerApp.msapp).\n\n## Form Factor Selector\nThis component allows you to change your app's screen form factor within the Power Apps Studio.\n\n![FormFactorSelector](Components/FormFactorSelector/images/FormFactorSelector.gif)\n\n[Click here for details](Components/FormFactorSelector/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/FormFactorSelector/FormFactorSelector.msapp).\n\n## Progress Bar\nThis component is a fully customizable progress bar.\n\n![ProgressBar](Components/ProgressBar/images/ProgressBarSamples.gif)\n\n[Click here for details](Components/ProgressBar/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/ProgressBar/ProgressBar.msapp).\n\n## IBAN Checker\nThis component will allow you to check if an IBAN number is correct.\n\n![IBANChecker](Components/IbanChecker/images/IbanChecker.png)\n\n[Click here for details](Components/IbanChecker/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/IbanChecker/IBANChecker.msapp).\n\n## Control Animator\nThis component will allow you to animate your controls within your Power Apps canvas applications.\n\n![ControlAnimator](Components/ControlAnimator/images/ControlAnimatorSampleHamburger.gif)\n\n[Click here for details](Components/ControlAnimator/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/AutoWidthLabelGenerator/AutoWidthLabelGenerator.msapp).\n\n## Auto Width Label Generator\nThis component will provide you with a solution to make your Power Apps label controls adapt their width to their content.\n\n![AutoWidthLabelGenerator](Components/AutoWidthLabelGenerator/images/AutoWidthLabelGenerator.png)\n\n[Click here for details](Components/AutoWidthLabelGenerator/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/AutoWidthLabelGenerator/AutoWidthLabelGenerator.msapp).\n\n## Toggle Set\nThis component lets you create and customize a set of items that can be toggled:\n\n![ToggleSet](Components/ToggleSet/images/ToggleSet.png)\n\n[Click here for details](Components/ToggleSet/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/ToggleSet/ToggleSet.msapp).\n\n## Metro Vertical Progress Bar\nThis component is a fully customizable progress bar with a metro/stations like look:\n\n![MetroVerticalProgressBar-Example1](Components/MetroVerticalProgressBar/images/MetroVerticalProgressBar_ex1.png)\n\n[Click here for details](Components/MetroVerticalProgressBar/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/MetroVerticalProgressBar/MetroVerticalProgressBar.msapp).\n\n## Shadow Circle\nThis component allows you to create a circle with its configurable drop shadow, inner solid or gradient color fill:\n\n![ShadowCircle](Components/ShadowCircle/images/ShadowCircle.png)\n\n[Click here for details](Components/ShadowCircle/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/ShadowCircle/ShadowCircle.msapp).\n\n## Ultimate Color Picker\nThis highly customizable color picker will show a wide range of palette colors based on main colors (middle row) you provide.\n\n![UltimateColorPicker](Components/UltimateColorPicker/images/UltimateColorPicker.png)\n\n[Click here for details](Components/UltimateColorPicker/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/UltimateColorPicker/UltimateColorPicker.msapp).\n\n## Office UI Fabric Icon Generator\nThis component allows one to generate the SVG code for an icon picked among the whole list of the Office UI Fabric Icons (which can be [found here](https://uifabricicons.azurewebsites.net/)). This SVG code can then be used in an *Image* control in any Power Apps application.\n\n![OfficeUIFabricIconGenerator](Components/OfficeUIFabricIconGenerator/images/OfficeUIFabricIconGenerator.png)\n\n[Click here for details](Components/OfficeUIFabricIconGenerator/readme.md).\n\nLink to download the component MSAPP file: [Download here](Components/OfficeUIFabricIconGenerator/OfficeUIFabricIconGenerator.msapp).\n\n## Shadow Box\nThis component shows a [rounded] rectangle with a configurable drop shadow and colouring:\n\n![ShadowBoxSamples](Components/ShadowBox/images/ShadowBoxSamples.png)\n\n[Click here for details](Components/ShadowBox/readme.md) and other nice examples.\n\nLink to download the component MSAPP file: [Download here](Components/ShadowBox/ShadowBox.msapp).\n\n## Circle Progress Bar\nThis component is a configurable circle progress bar:\n\n![CircleProgressBar](Components/CircleProgressBar/images/CircleProgressBar.png)\n\n[Click here for details](Components/CircleProgressBar/readme.md)\n\nLink to download the component MSAPP file: [Download here](Components/CircleProgressBar/CircleProgressBar.msapp)."
  },
  {
    "path": "_config.yml",
    "content": "theme: jekyll-theme-cayman"
  }
]