Move code to the top

Add few things

Jellyfin.Plugin.SkinManager/Configuration/PluginConfiguration.cs

@@ -1,14 +1,18 @@
 using MediaBrowser.Model.Plugins;
+using System;
+using System.Collections.Generic;
 
 namespace Jellyfin.Plugin.SkinManager.Configuration
 {
     public class PluginConfiguration : BasePluginConfiguration
     {
-        public string selectedCss { get; set; }
+        public string selectedSkin { get; set; }
+        public string[] options { get; set; }
 
         public PluginConfiguration()
         {
-            selectedCss = "";
+            selectedSkin = "";
+            options = Array.Empty<String>();
         }
     }
 }

Jellyfin.Plugin.SkinManager/Jellyfin.Plugin.SkinManager.csproj

@@ -3,8 +3,8 @@
   <PropertyGroup>
     <TargetFramework>netstandard2.1</TargetFramework>
     <IsPackable>true</IsPackable>
-    <AssemblyVersion>1.4.0</AssemblyVersion>
-    <FileVersion>1.4.0</FileVersion>
+    <AssemblyVersion>1.5.0</AssemblyVersion>
+    <FileVersion>1.5.0</FileVersion>
     <Authors />
     <Company />
   </PropertyGroup>

install.bat

@@ -0,0 +1,3 @@
+This will not work if you have installed jellyfin to a custom location
+dotnet publish --configuration Release --output bin
+move bin\Jellyfin.Plugin.SkinManager.dll C:\ProgramData\Jellyfin\Server\plugins\SkinManager

skins-2.0.json

@@ -5,7 +5,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"Default, stock, Jellyfin.",
         "css": ""
       }
     ]
@@ -16,7 +16,7 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
         "css": "@import url(https://prayag17.github.io/JellyFlix/default.css);"
       }
     ]
@@ -27,33 +27,33 @@
     "versions": [
       {
         "name": "Default",
-        "description": "Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css);"
+        "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
       },
       {
-        "name": "Improve performance",
-        "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "No rounded corners",
-        "description": "In fact, squares off every rounded corner JF ever had.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css');"
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
       },
       {
-        "name": "Accent color preset - blue",
-        "description": "Restores some of the default Jellyfin blue accenting",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+        "name": "Accent color - purple",
+        "description": "Uses a purple shade, also suited for Jellyfin.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css');"
       },
       {
-        "name": "Accent color preset - purple",
-        "description": "Purple Accents",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); );"
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       },
       {
-        "name": "Restore bottom bar style episode progress",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "name": "Accent color - purple - sharp",
+        "description": "Uses a purple shade, also suited for Jellyfin. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Monochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfpurple_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
@@ -63,20 +63,46 @@
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
-        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css);"
+        "description": "This theme aims to be more colorful and minimalistic. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+      },
+      {
+        "name": "Sharp corners",
+        "description": "No rounded corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); :root {--rounding: 0px;}"
+      },
+      {
+        "name": "Accent color - blue",
+        "description": "Uses the default blue color for accents.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css');"
+      },
+      {
+        "name": "Accent color - blue - sharp",
+        "description": "Uses the default blue color for accents. Sharp corners.",
+        "css": "@import url(https://ctalvio.github.io/Kaleidochromic/default_style.css); @import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css'); @import url('https://ctalvio.github.io/Monochromic/jfblue_style.css'); :root {--rounding: 0px;}"
       }
     ]
   },
+  {
+    "name": "Novachromic",
+    "author": "EdgeMentality",
+    "versions":[
+          {
+            "name": "Default",
+            "description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
+			"css" : "@import url('https://ctalvio.github.io/Novachromic/default_style.css');"          
+          }
+		]
+	},
   {
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "versions": [
       {
         "name": "Default",
-		"description":"Default Skin",
+	"description":"A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
         "css": "@import url('https://prayag17.github.io/JellySkin/default.css');"
       }
     ]
   }
-]
+]

skins-3.0.json

@@ -4,257 +4,456 @@
     "author": "Jellyfin",
     "description": "Default, stock, Jellyfin.",
     "defaultCss": "",
-    "options": [],
-    "preview": {
-      "home": "",
-      "title": ""
-    }
+    "previews": [
+      {
+        "name": "Login Page",
+        "url": ""
+      },
+      {
+        "name": "Home/Index Page",
+        "url": ""
+      },
+      {
+        "name": "Library Page",
+        "url": ""
+      },
+      {
+        "name": "Title page",
+        "url": ""
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
+    ]
   },
   {
     "name": "JellyFlix",
     "author": "prayagprajapati17",
     "description": "A theme that aims to replicate the red and black look of Netflix. Theme is by prayag17.",
     "defaultCss": "@import url(https://prayag17.github.io/JellyFlix/default.css);",
-    "options": [],
-    "preview": {
-      "home": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true",
-      "title": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TitlePage.png?raw=true"
-    }
+    "previews": [
+      {
+        "name": "Login Page",
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LoginMan.png?raw=true"
+      },
+      {
+        "name": "Home/Index Page",
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/Home.png?raw=true"
+      },
+      {
+        "name": "Library Page",
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/LibPage.png?raw=true"
+      },
+      {
+        "name": "Title page",
+        "url": "https://github.com/prayag17/JellyFlix/raw/main/Public%20Ver%201/TV-TitlePage.png?raw=true"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": []
+      }
+    ]
   },
   {
     "name": "Monochromic",
     "author": "EdgeMentality",
     "description": "This theme aims to be minimalistic and somewhat muted in color. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
     "defaultCss": "@import url('https://ctalvio.github.io/Monochromic/default_style.css');",
-    "options": [
+    "previews": [
       {
-        "type": "checkBox",
-        "name": "Improve performance",
-        "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "name": "Login Page",
+        "url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Monochromic/login.jpg?raw=true"
       },
       {
-        "type": "checkBox",
-        "name": "No rounded corners",
-        "description": "In fact, squares off every rounded corner JF ever had.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css'); "
+        "name": "Home/Index Page",
+        "url": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true"
       },
       {
-        "type": "checkBox",
-        "name": "Restore bottom bar style episode progress",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "name": "Library Page",
+        "url": "https://raw.githubusercontent.com/danieladov/jellyfin-plugin-skin-manager/master/src/img/Monochromic/Lib.jpg"
       },
       {
-        "type": "number",
-        "name": "Modify rounding",
-        "description": "Amount of rounding. Zero is none.",
-        "css": ":root {--rounding: $px;}",
-        "default": "5"
-      },
-      {
-        "type": "colorPicker",
-        "name": "Accent color",
-        "description": "Choose a custom accent color to use with the theme.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
-        "default": ""
+        "name": "Title page",
+        "url": "https://github.com/CTalvio/Monochromic/raw/master/screenshots/2.png"
       }
     ],
-    "preview": {
-      "home": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/1.png?raw=true",
-      "title": "https://github.com/CTalvio/Monochromic/blob/master/screenshots/2.png?raw=true"
-    }
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "checkBox",
+            "name": "Improve performance",
+            "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect. I may switch to this method being the default.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+          },
+          {
+            "type": "checkBox",
+            "name": "No rounded corners",
+            "description": "In fact, squares off every rounded corner JF ever had.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/sharp_style.css'); "
+          },
+          {
+            "type": "checkBox",
+            "name": "Restore bottom bar style episode progress",
+            "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "5"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/customcolor_style.css');:root {--accent: $;}",
+            "default": ""
+          }
+        ]
+      }
+    ]
   },
   {
     "name": "Kaleidochromic",
-    "author": "EdgeMentality",
+    "author": "Casper Talvio",
     "description": "This theme aims to be more colorful and minimalistic. Add-ons and custom accent colors are possible, but not entirely supported by this plug-in. Visit the github of the theme for more information.",
     "defaultCss": "@import url('https://ctalvio.github.io/Kaleidochromic/default_style.css');",
-    "options": [
+    "previews": [
       {
-        "type": "checkBox",
-        "name": "Improve performance",
-        "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+        "name": "Login Page",
+        "url": "https://github.com/danieladov/jellyfin-plugin-skin-manager/blob/master/src/img/Kaleidochromic/Login.jpg?raw=true"
       },
       {
-        "type": "checkBox",
-        "name": "Restore bottom bar style episode progress",
-        "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
-        "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+        "name": "Home/Index Page",
+        "url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/6.png"
       },
       {
-        "type": "number",
-        "name": "Modify rounding",
-        "description": "Amount of rounding. Zero is none.",
-        "css": ":root {--rounding: $px;}",
-        "default": "12"
+        "name": "Library Page",
+        "url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/5.png"
       },
       {
-        "type": "colorPicker",
-        "name": "Accent color",
-        "description": "Choose a custom accent color to use with the theme.",
-        "css": ":root {--accent: $;}",
-        "default": "#6279cd"
+        "name": "Title page",
+        "url": "https://github.com/CTalvio/Kaleidochromic/raw/main/screenshots/1.png"
       }
     ],
-    "preview": {
-      "home": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/6.png?raw=true",
-      "title": "https://github.com/CTalvio/Kaleidochromic/blob/main/screenshots/1.png?raw=true"
-    }
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "checkBox",
+            "name": "Improve performance",
+            "description": "The theme uses mask-image to fade out items below the top bar as you scroll. This works well on most reasonable hardware but struggles on some phones and especially smart TVs. This switches to a method without using mask-image, but foregoes the fade-out effect.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/improve-performance_style.css');"
+          },
+          {
+            "type": "checkBox",
+            "name": "Restore bottom bar style episode progress",
+            "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "12"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": ":root {--accent: $;}",
+            "default": "#6279cd"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "Novachromic",
+    "author": "EdgeMentality",
+    "description": "Novachromic is essentially Monochromic, but with another layer of overrides on top.",
+    "defaultCss": "@import url('https://ctalvio.github.io/Novachromic/default_style.css');",
+    "previews": [
+
+      {
+        "name": "Home/Index Page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/one.png"
+      },
+      {
+        "name": "Library Page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/six.png"
+      },
+      {
+        "name": "Title page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/four.png"
+      },
+      {
+        "name": "Dashboard page",
+        "url": "https://github.com/CTalvio/Novachromic/raw/main/screenshots/two.png"
+      }
+    ],
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "checkBox",
+            "name": "Restore bottom bar style episode progress",
+            "description": "Don't like my transparent view progress overlay? Use this to go back to the old style.",
+            "css": "@import url('https://ctalvio.github.io/Monochromic/bottom-progress_style.css');"
+          },
+          {
+            "type": "number",
+            "name": "Modify rounding",
+            "description": "Amount of rounding. Zero is none.",
+            "css": ":root {--rounding: $px;}",
+            "default": "12"
+          },
+          {
+            "type": "colorPicker",
+            "name": "Accent color",
+            "description": "Choose a custom accent color to use with the theme.",
+            "css": ":root {--accent: $;}",
+            "default": "#ffffff"
+          }
+        ]
+      }
+    ]
   },
   {
     "name": "JellySkin",
     "author": "prayagprajapati17",
     "description": "A very bright and colorful look using lots of drop shadows. Theme is by prayag17.",
     "defaultCss": "@import url('https://prayag17.github.io/JellySkin/default.css');",
-    "options": [
+    "previews": [
       {
-        "type": "checkBox",
-        "name": "Sea Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/seaGradient.css');"
+        "name": "Login Page",
+        "url": "https://prayag17.github.io/JellySkin/img/login.jpg"
       },
       {
-        "type": "checkBox",
-        "name": "Sunset Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/sunsetGradient.css');"
+        "name": "Home/Index Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Home.jpg"
       },
       {
-        "type": "checkBox",
-        "name": "Night Sky Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/nightSkyGradient.css');"
+        "name": "Library Page",
+        "url": "https://prayag17.github.io/JellySkin/img/Movies.jpg"
       },
       {
-        "type": "checkBox",
-        "name": "Morning Gradient",
-        "description": "changes the Jellyfin themed Hover gradient",
-        "css": "@import url('https://prayag17.github.io/JellySkin/morningGradient.css');"
+        "name": "Title page",
+        "url": "https://prayag17.github.io/JellySkin/img/Title%20Page-Movie.jpg"
       }
     ],
-    "preview": {
-      "home": "https://github.com/prayag17/JellySkin/raw/master/Version%204/Home.png?raw=true",
-      "title": "https://github.com/prayag17/JellySkin/raw/master/Version%204/title%202.png?raw=true"
-    }
+    "categories": [
+      {
+        "name": "Default",
+        "options": [
+          {
+            "type": "selector",
+            "name": "Gradient",
+            "description": "Changes the Jellyfin themed Hover gradient",
+            "css": "@import url('https://prayag17.github.io/JellySkin/$.css');",
+            "selections": [
+              {
+                "name": "Default",
+                "value": ""
+              },
+              {
+                "name": "Sea Gradient",
+                "value": "seaGradient"
+              },
+              {
+                "name": "Sunset Gradient",
+                "value": "sunsetGradient"
+              },
+              {
+                "name": "Night Sky Gradient",
+                "value": "nightSkyGradient"
+              },
+              {
+                "name": "Morning Gradient",
+                "value": "morningGradient"
+              }
+            ]
+          },
+          {
+            "type":"checkBox",
+            "name":"Theme Logo",
+            "description":"Styles title page in such a way in which logos are used instead of Names.",
+            "css":"@import url('https://prayag17.github.io/JellySkin/Logo.css');"
+          }
+        ]
+      }
+    ]
   },
   {
     "name": "Custom",
     "author": "you",
     "description": "customize the look of jellyfin by your needs",
-    "defaultCss": "",
-    "options": [
+    "defaultCss": "/*Custom*/",
+    "categories": [
       {
-        "type": "selector",
-        "name": "Change Font",
-        "description": "Change the default fonts",
-        "css": "html {font-family: $,sans-serif ;  } body,h1,h2,h3 { font-family:$ ,sans-serif;} @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,800;1,900&display=swap');",
-        "selections": [
+        "name": "Fonts",
+        "options": [
           {
-            "name": "Noto Sans"
+            "type": "googleFonts",
+			"css": "/*googleFonts*/"
           },
           {
-            "name": "Times New Roman"
-          },
-          {
-            "name": "Arial"
-          },
-          {
-            "name": "Helvetica"
-          },
-          {
-            "name": "Times"
-          },
-          {
-            "name": "Courier New"
-          },
-          {
-            "name": "Verdana"
-          },
-          {
-            "name": "Courier"
-          },
-          {
-            "name": "Arial Narrow"
-          },
-          {
-            "name": "Candara"
-          },
-          {
-            "name": "Poppins"
+            "type": "number",
+            "name": "Title Font Size",
+            "description": "Change the size of the font used at titles.",
+            "step": "0.1",
+            "css": "h1 {font-size: $em;}",
+            "default": "1.8"
           }
         ]
       },
       {
-        "type": "number",
-        "name": "Title Font Size",
-        "description": "Change the size of the font used at titles.",
-        "step": "0.1",
-        "css": "h1 {font-size: $em;}",
-        "default": "1.8"
+        "name": "Home/Dashboard Page",
+        "options": [
+          {
+            "type": "checkBox",
+            "name": "Enlarge Tab Buttons",
+            "description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
+            "css": ".headerTabs.sectionTabs {text-size-adjust: 110%;  font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
+          }
+        ]
       },
       {
-        "type": "colorPicker",
-        "mode": "rgba",
-        "name": "Accent color",
-        "description": "Choose a custom accent color to use with the theme.",
-        "css": ".countIndicator {background: rgba($,0.8);}.playedIndicator, .innerCardFooter /*Accenting*/.button-flat:hover {background: rgba($,0.25);}.paper-icon-button-light:hover {  background-color: rgba($,0.25) !important;}.subtitleappearance-preview {  background: linear-gradient(140deg,rgba($),#111) !important;}.navMenuOption-selected, .selectionCommandsPanel {    background: rgba($, 0.8) !important;}.raised,.fab,a[data-role='button'] {  background: rgba($, 0.8) !important;\ttransition: all 0.2s !important;} /*Glow accent*/ .raised.homeLibraryButton {box-shadow: 0px 0px 5px rgba($, 0) !important; border: solid 1px rgba($,0) !important;}.cardOverlayContainer:hover,.dialog,..raised.homeLibraryButton:hover {  box-shadow: 0px 0px 5px rgb($) !important;  border: solid 1px rgba($,0.6) !important;}.cardOverlayContainer {  border: solid 1px rgba($,0.0) !important;}"
-      },
-      {
-        "type": "colorPicker",
-        "mode": "hex",
-        "name": "Console Panel Color",
-        "description": "Modifies the color of the left menu panel.",
-        "css": ".mainDrawer-scrollContainer { color: $; }",
-        "default": "#ffffff"
-      },
-      {
-        "type": "checkBox",
-        "name": "Enlarge Tab Buttons",
-        "description": "Enlarges the tab buttons, suggested, genres, etc. By default they are really tiny, especially on mobile.",
-        "css": ".headerTabs.sectionTabs {text-size-adjust: 110%;  font-size: 110%;}.pageTitle {margin-top: auto; margin-bottom: auto;}.emby-tab-button {padding: 1.75em 1.7em;}"
-      },
-      {
-        "type": "checkBox",
-        "name": "Stylized Episode Previews",
-        "description": "The episode previews in season view are sized based on horizontal resolution. This leads to a lot of wasted space on the episode summary and a high vertical page, which requires a lot of scrolling. This code reduces the height of episode entries, which solves both problems.",
-        "css": "/* Size episode preview images in a more compact way */.listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px; margin: 0;}"
-      },
-      {
-        "type": "colorPicker",
-        "mode": "hex",
-        "name": "Custom Background Color",
-        "description": "Change background color.",
-        "css": ".backgroundContainer, .dialog, html { background-color: $;}",
-        "default": "#000000"
-      },
-      {
-        "type": "colorPicker",
-        "mode": "hex",
-        "name": "Right Header Color",
-        "description": "This modifies the colors of the cast, search and user buttons in the top right.",
-        "css": ".headerRight { color: $; }",
-        "default": "#ffffff"
-      },
-      {
-        "type": "number",
-        "name": "Border Radius",
-        "description": "Change the roundness of text box and more default is zero",
-        "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/border-radius.css'); :root{--rounding: $px;}",
-        "default": "0"
-      },
-      {
-        "type": "number",
-        "name": "Backdrop Blur",
-        "description": "adds blur to the backdrop images default is zero",
-        "css": "@import url('https://prayag17.github.io/jellyfin-plugin-skin-manager/src/bgBlur.css'); :root{--bgblur: blur($px)}",
-        "default": "0"
+        "name": "Miscellaneous",
+        "options": [
+          {
+            "type": "selector",
+            "name": "Poster card hover effect",
+            "description": "Changes the hover effect on Movie/TV show/Music poster card.",
+            "css": "",
+            "selections": [
+              {
+                "name": "Scale in and out",
+                "css": "/*Dynamic Poster effect-option1*/.cardBox-bottompadded{margin-bottom; 1em !important;}.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s;}.card:hover .cardBox{transform: scale(1.1);}"
+              },
+              {
+                "name": "Pop up and down",
+                "css": "/*Dynamic Poster effect-option2*/.itemsContainer>.card>.cardBox {margin: 1em;background: rgba(0,0,0,0.5);transition: transform .2s, box-shadow .2s;}.card:hover .cardBox{transform: translatey(-5px);box-shadow: 0px 5px 10px black;}"
+              },
+              {
+                "name": "Poster Image in and out",
+                "css": "/*Dynamic Poster effect-option3*/.card:hover .cardImageContainer{filter:background-size: 120%} .cardImageContainer{background-size: 105%;transition: all .2s;}"
+              },
+              {
+                "name": "Poster Image blur",
+                "css": "/*Dynamic Poster effect-option4*/.card:hover .cardImageContainer{filter: blur(2px);} .cardImageContainer{transition: all .2s;}"
+              }
+            ]
+          },
+          {
+            "type": "checkBox",
+            "name": "Minimal Actor's card",
+            "description": "display actor's cards in minimal and compact way",
+            "css": "/*Actors*/.card[data-type=Actor] .cardBox {background: none;position: relative;}.card[data-type=Actor] .cardScalable {height: 0;overflow: hidden;padding-top: 100%;border-radius: var(--rounding);}.card[data-type=Actor] .cardText {position: absolute;background: transparent !important;}.card[data-type=Actor] .cardImageContainer::after {content: '';background: linear-gradient(360deg, rgba(0,0,0,0.75), transparent 70%);width: 100%;bottom: 0;position: absolute;padding-top: 100%;}.card[data-type=Actor].cardText-secondary {bottom: 0%;width: -webkit-fill-available;border-radius: 0px 0px 10px 10px;height: 22px;}.card[data-type=Actor] .cardText-first {bottom: 23.5px;width: -webkit-fill-available;height: 22px;}.layout-mobile .card[data-type=Actor] .cardText-first {color: white !important;}.card[data-type=Actor] .cardScalable {overflow: hidden;border-radius: var(--rounding);height: 3rem;}.card[data-type=Actor] .cardOverlayButton-br {position: absolute;bottom: 23% !important;right: 0 !important;}.card[data-type=Actor] .cardPadder {background: none;}.card[data-type=Actor] .cardImageIcon {bottom: 41%;position: absolute;left: 50%;transform: translateX(-50%);}"
+          },
+          {
+            "type": "selector",
+            "name": "Episode View",
+            "description": "Theme episode list",
+            "selections": [
+              {
+                "name": "Card",
+                "css": " #itemDetailPage .vertical-list {display: grid;grid-template-columns: 30% 30% 30%;padding: 0 6px !important;height: fit-content;justify-content: space-evenly;-webkit-box-orient: horizontal;-webkit-box-direction: normal;margin: -6px;width: calc(100% - 6px);}.listItem-withContentWrapper:hover .listItemImageButton.itemAction.paper-icon-button-light {opacity: 100%;}@media (max-width: 901px){#itemDetailPage .vertical-list {grid-template-columns: 30% 30%;}}.listItem-withContentWrapper {transition: none;height: fit-content;max-width: 100%;margin: 6px;border-radius: var(--rounding);overflow: hidden;padding: 0;overflow: hidden;}.listItem-withContentWrapper:hover{background: transparent;}.listItem-content {height: 100%;}.listItem-content {display: -webkit-flex;display: flex;-webkit-align-items: center;align-items: center;width: 100%;display: grid;grid-template-columns: 100%;}.listItemImage.listItemImage-large.itemAction.lazy {height: 14rem;width: 100%;padding: 0 !important;margin: 0 !important;top: 0;left: 0;}.layout-mobile #itemDetailPage .vertical-list {grid-template-columns: 100%;}.secondary.listItem-overview.listItemBodyText {height: fit-content;}.layout-mobile .listItem-bottomoverview {padding: 0 10px;}.listItemBody.itemAction {padding: 0 5px;}.listItemImageButton.itemAction.paper-icon-button-light {opacity: 0;color: var(--accent);transition: all .2s;}.layout-mobile .listItemImageButton.itemAction.paper-icon-button-light{opacity: 100% !important;}"
+              },
+              {
+                "name": "Compact List",
+                "css": ".listItemImage.listItemImage-large.itemAction.lazy {height: 110px;}.listItem-content {height: 115px;}.secondary.listItem-overview.listItemBodyText {height: 61px;margin: 0;}"
+              }
+            ]
+          },
+          {
+            "type": "checkBox",
+            "name": "Blur episode thumbnail",
+            "description": "Blur episode thumbnail to prevent spoiler. Note: Doesn't in browser's that dont support backdrop-filter, i.e firefox(can be enabled though), opera and more(unknown).",
+            "css": " .nextUpSection.verticalSection.detailVerticalSection>div>div>div>div.cardScalable>button {filter: blur(10px);}div.listItem>div>div>button:nth-child(1) {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}div.listItem>div>div>button:nth-child(1):hover {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button {transition: none !important;border-radius: 0px;height: 100%;width: 100%;backdrop-filter: blur(10px);}#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast>button:hover {border-radius: 0px;height: 85%;width: 85%;backdrop-filter: blur(20px);}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#childrenContent>div>div>div>div.listItemImage.listItemImage-large.itemAction.lazy.non-blurhashable.lazy-image-fadein-fast {filter: blur(10px);}}@supports not ( (backdrop-filter: blur(10px)) or (--webkit-backdrop-filter: blur(10px))) {#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable {background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;filter: blur(10px);}}#itemDetailPage>div.detailPageWrapperContainer>div.detailPageSecondaryContainer>div.detailPageContent>div.verticalSection.detailVerticalSection.moreFromSeasonSection.emby-scroller-container>div.padded-top-focusscale.padded-bottom-focusscale.emby-scroller>.itemsContainer>.card.overflowBackdropCard.card-hoverable.card-withuserdata>div>.cardScalable>button {border-radius: 0px;height: 0%;width: 0%;background: rgba(0, 0, 0, .5);filter: blur(10px);transition: none !important;backdrop-filter: blur(10px);}.cardScalable{overflow: hidden;}"
+          },
+          {
+            "type": "checkBox",
+            "name": "Blur Dialog Background",
+            "description": "Blur Menu and dialog background. Note: Works in Chrome and Edge only, functionalty can be enable, click on help button for info.",
+            "css": ".mainDrawer {background: transparent;backdrop-filter: blur(20px);}"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Button text color",
+            "description": "change button's text color.",
+            "css": ".raised{color: $;}",
+            "default": "#ffffff"
+          },
+          {
+            "type": "colorPicker",
+            "mode":"hex",
+            "name": "Button background color",
+            "description": "change background color of button.",
+            "css": ".raised{background-color: $;}",
+            "default": "#303030"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Idle button color-foreground",
+            "description": "This modifies the color of buttons like cast and search.",
+            "css": ".paper-icon-button-light{color: $; transititon: all .2s;}",
+            "default": "#ffffff"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Idle button color-background",
+            "description": "This modifies the background color of buttons like cast and search.",
+            "css": ".paper-icon-button-light{background-color: $ !important; transition: all .2s;}",
+            "default": "#00FFFFFF"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Hover button color-foreground",
+            "description": "This modifies the color of buttons like cast and search when your cursor is on it.",
+            "css": ".paper-icon-button-light:hover{color: $ !important;}",
+            "default": "#00a4dc"
+          },
+          {
+            "type": "colorPicker",
+            "mode": "hex",
+            "name": "Hover button color-background",
+            "description": "This modifies the background color of buttons like cast and search when your cursor is on it.",
+            "css": ".paper-icon-button-light:hover{background-color: $ !important;}",
+            "default": "#00a4dc"
+          },
+          {
+            "type": "number",
+            "name": "Border Radius",
+            "description": "Change the rounding",
+            "css": "*,*::before,*::after{border-radius: $ !important;}",
+            "default": "0"
+          },
+          {
+            "type": "blurSlider",
+            "name": "Backdrop Blur",
+            "description": "adds blur to the backdrop images default is zero",
+            "css": ":root{--bgblur: blur($px)}.backdropImage {filter: var(--bgblur);}.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,0);}",
+            "default": "0"
+          }
+        ]
       }
-    ],
-    "preview": {
-      "home": "",
-      "title": ""
-    }
+    ]
   }
 ]

src/html/about.html

@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <title>Skin Manager-About</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/" class="link text"><li class="selected">About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body">
+    <div class="About">
+      <div class="inner">
+        <h1>About Skin Manager</h1>
+        <div class="description">
+          <p>
+            This plugin is used to create custom skins and also give you (the user) few great community Skins. You can add more skins by clicking on the "Request a Skin" button.
+          </p>
+        </div>
+      </div>
+      <div class="contributorsCont">
+        <fieldset>
+          <h3>Contributors</h3>
+          <p>The people who have helped in the development of this plugin are listed below</p>
+          <div class="cont">
+            <a href="https://github.com/danieladov" class="contributorsLink">
+              <div class="contibutorsNames" style="background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/29411250?s=400&v=4);">
+                <div class="top">
+                  <h3>Daniel Álvarez</h3>
+                </div>@danieladov
+                <p class="description">
+                  He is the creator of 3 Plugins for Jellyfin, namely- Merge Songs, Theme Music and Skin Manager
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars1.githubusercontent.com/u/55829513?s=460&u=3f232a3900ade07490ae8bdadd62ec5d0e9e4ecf&v=4);">
+                <div class="top">
+                  <h3>Prayag Prajapati</h3>
+                </div>@prayag17
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins, namely- JellySkin and JellyFlix. He has helped in creating the "Custom" option in this plugin.
+                </p>
+              </div>
+            </a>
+            <a href="https://github.com/prayag17" class="contributorsLink">
+              <div class="contibutorsNames" style="margin-left: 3em;background:linear-gradient(180deg, #c4c4c4ab, #c4c4c4ab), url(https://avatars2.githubusercontent.com/u/4365015?s=400&v=4);">
+                <div class="top">
+                  <h3>Casper Talvio</h3>
+                </div>@CTalvio
+                <p class="description">
+                  He is the creator of 2 jellyfin Skins namely- Monochromic and Kaleidochromic.
+                </p>
+              </div>
+            </a>
+          </div>
+        </fieldset>
+      </div>
+    </div>
+  </body>
+  </html>

src/html/help.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Skin Manager-Help</title>
+  <link rel="stylesheet" href="style.css">
+  <link rel="icon" href="https://jellyfin.org/favicon.ico">
+</head>
+<body>
+  <div class="header" align="center">
+    <div class="innerHeader nav">
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager" class="link text"><li>See on Github</li></a>
+      <a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link text"><li>Request a skin</li></a>
+      <a href="https://prayag17.github.io/jellyfin-plugin-skin-manager/src/html/about.html#" class="link text"><li>About</li></a>
+      <a href="https://jellyfin.org" class="logo link"><li><img src="https://jellyfin.org/images/banner-dark.svg" style="size: 1em;height: 50px;max-width: 80%;float: right;z-index: 1;"></li></a>
+    </div>
+  </div>
+  <div class="body" style="color: #3a3a3a !important;">
+    <div class="skinRequest">
+      <fieldset>
+        <h1>How To request a new Skin</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>Open this<a href="https://github.com/danieladov/jellyfin-plugin-skin-manager/issues" class="link" style="color: #3a3a3a !important; text-decoration: underline;"> link </a>or click the "Request a Skin" option present in the header</li>
+            <li>Then Create a New Issue with title- <code>Skin Request:</code> Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+      <fieldset>
+        <h1>How to enable bluring of background fo dialogs and episode previes for Firefox</h1>
+        <div class="internal">
+          <h3>Steps</h3>
+          <br>
+          <ul>
+            <li>go to <a href="about:config"> about:config </a>in firefox and click on "Accept the Risk and Continue".</li>
+            <li>Search for <code>layout.css.backdrop-filter.enabled</code> and change false to true.</li>
+            <li>Search for <code>gfx.webrender.all</code> and change it to true. Done!</li>
+          </ul>
+        </div>
+      </fieldset>
+    </div>
+  </div>
+</div>
+</body>
+</html>

src/html/style.css

@@ -0,0 +1,107 @@
+body{
+  margin: 0;
+  font-family: Arial;
+}
+.body {
+  margin: 2em;
+}
+.header {
+  height: 80px;
+  width: 100%;
+  background: #101010;
+  display: block;
+  top: 0;
+  position: sticky;
+}
+.innerHeader {
+  height: 100%;
+  margin: 0 1.5em;
+  display: block;
+}
+
+.nav a{
+  display: table;
+  height: 100%;
+  float: right;
+  padding: 0px 10px !important;
+}
+.nav a li {
+  vertical-align: middle;
+  display: table-cell;
+}
+fieldset {
+  border-radius: 15px;
+  background: #dadada;
+  border: none;
+  padding: 1em;
+  margin-top: 2em;
+}
+.link{
+  text-decoration: none;
+  color: white;
+}
+a.logo.link {
+  float: left;
+}
+.About {
+  margin: 2em;
+}
+.inner {
+  background: #c4c4c4;
+  padding: 1em;
+  border-radius: 15px;
+  color: #3a3a3a;
+}
+a {
+  text-decoration: none;
+  color: black;
+}
+.cont {
+  display: flex;
+}
+.contibutorsNames {
+  padding: 1em;
+  border-radius: 15px;
+  width: fit-content;
+  max-width: 10em;
+  min-width: 10em;
+  flex-wrap: wrap;
+  height: fit-content;
+  transition: all .2s;
+  max-height: 20em;
+  min-height: 15em;
+  background-size: cover !important;
+}
+.contibutorsNames:hover {
+  box-shadow: 0 3px 5px 0px #6e6e6e;
+  transform: translateY(-2px);
+}
+.contributorsLink {
+  color: #3a3a3a !important;
+}
+.text li {
+  color: #9a9a9a;
+  transition: color .25s, border .25s;
+  border-bottom: 5px solid rgba(0,0,0,0);
+}
+.text li:hover {
+  color: white !important;
+  border-bottom-color: #00a4dc !important;
+}
+.selected {
+  color: white !important;
+  border-bottom-color: #aa5cc3 !important;
+}
+img.userImg {
+  width: 50%;
+  border-radius: 15px;
+}
+code {
+  display: block !important;
+  width: fit-content;
+  background: #585858;
+  color: white;
+  padding: .5rem;
+  border-radius: 5.5px;
+  border: .5px solid #999999;
+}

src/js/FontPicker.js

@@ -0,0 +1,641 @@
+(function (global, factory) {
+  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+  typeof define === 'function' && define.amd ? define(factory) :
+  (global = global || self, global.FontPicker = factory());
+}(this, (function () { 'use strict';
+
+  /*! *****************************************************************************
+  Copyright (c) Microsoft Corporation. All rights reserved.
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+  this file except in compliance with the License. You may obtain a copy of the
+  License at http://www.apache.org/licenses/LICENSE-2.0
+
+  THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+  KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+  WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+  MERCHANTABLITY OR NON-INFRINGEMENT.
+
+  See the Apache Version 2.0 License for specific language governing permissions
+  and limitations under the License.
+  ***************************************************************************** */
+
+  var __assign = function() {
+      __assign = Object.assign || function __assign(t) {
+          for (var s, i = 1, n = arguments.length; i < n; i++) {
+              s = arguments[i];
+              for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+          }
+          return t;
+      };
+      return __assign.apply(this, arguments);
+  };
+
+  function __rest(s, e) {
+      var t = {};
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+          t[p] = s[p];
+      if (s != null && typeof Object.getOwnPropertySymbols === "function")
+          for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+              if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                  t[p[i]] = s[p[i]];
+          }
+      return t;
+  }
+
+  function __awaiter(thisArg, _arguments, P, generator) {
+      return new (P || (P = Promise))(function (resolve, reject) {
+          function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+          function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+          function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
+          step((generator = generator.apply(thisArg, _arguments || [])).next());
+      });
+  }
+
+  function __generator(thisArg, body) {
+      var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+      return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+      function verb(n) { return function (v) { return step([n, v]); }; }
+      function step(op) {
+          if (f) throw new TypeError("Generator is already executing.");
+          while (_) try {
+              if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+              if (y = 0, t) op = [op[0] & 2, t.value];
+              switch (op[0]) {
+                  case 0: case 1: t = op; break;
+                  case 4: _.label++; return { value: op[1], done: false };
+                  case 5: _.label++; y = op[1]; op = [0]; continue;
+                  case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                  default:
+                      if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                      if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                      if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                      if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                      if (t[2]) _.ops.pop();
+                      _.trys.pop(); continue;
+              }
+              op = body.call(thisArg, _);
+          } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+          if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+      }
+  }
+
+  function styleInject(css, ref) {
+    if ( ref === void 0 ) ref = {};
+    var insertAt = ref.insertAt;
+
+    if (!css || typeof document === 'undefined') { return; }
+
+    var head = document.head || document.getElementsByTagName('head')[0];
+    var style = document.createElement('style');
+    style.type = 'text/css';
+
+    if (insertAt === 'top') {
+      if (head.firstChild) {
+        head.insertBefore(style, head.firstChild);
+      } else {
+        head.appendChild(style);
+      }
+    } else {
+      head.appendChild(style);
+    }
+
+    if (style.styleSheet) {
+      style.styleSheet.cssText = css;
+    } else {
+      style.appendChild(document.createTextNode(css));
+    }
+  }
+
+  var css = "@charset \"UTF-8\";\ndiv[id^=font-picker] {\n  position: relative;\n  display: inline-block;\n  width: 200px;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\ndiv[id^=font-picker] * {\n  box-sizing: border-box;\n}\ndiv[id^=font-picker] p {\n  margin: 0;\n  padding: 0;\n}\ndiv[id^=font-picker] button {\n  color: inherit;\n  font-size: inherit;\n  background: none;\n  border: 0;\n  outline: none;\n  cursor: pointer;\n}\ndiv[id^=font-picker] .dropdown-button {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  height: 35px;\n  padding: 0 10px;\n  background: #cbcbcb;\n}\ndiv[id^=font-picker] .dropdown-button:hover, div[id^=font-picker] .dropdown-button:focus {\n  background: #bebebe;\n}\ndiv[id^=font-picker] .dropdown-button .dropdown-font-name {\n  overflow: hidden;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] .dropdown-icon {\n  margin-left: 10px;\n}\n@-webkit-keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@keyframes spinner {\n  to {\n    transform: rotate(360deg);\n  }\n}\ndiv[id^=font-picker] .dropdown-icon.loading::before {\n  display: block;\n  width: 10px;\n  height: 10px;\n  border: 2px solid #b2b2b2;\n  border-top-color: #000000;\n  border-radius: 50%;\n  -webkit-animation: spinner 0.6s linear infinite;\n          animation: spinner 0.6s linear infinite;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.finished::before {\n  display: block;\n  width: 0;\n  height: 0;\n  margin: 0 2px;\n  border-top: 6px solid #000000;\n  border-right: 5px solid transparent;\n  border-left: 5px solid transparent;\n  transition: transform 0.3s;\n  content: \"\";\n}\ndiv[id^=font-picker] .dropdown-icon.error::before {\n  content: \"⚠\";\n}\ndiv[id^=font-picker].expanded .dropdown-icon.finished::before {\n  transform: rotate(-180deg);\n}\ndiv[id^=font-picker].expanded ul {\n  max-height: 200px;\n}\ndiv[id^=font-picker] ul {\n  position: absolute;\n  z-index: 1;\n  width: 100%;\n  max-height: 0;\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: auto;\n  background: #eaeaea;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n  transition: 0.3s;\n  -webkit-overflow-scrolling: touch;\n}\ndiv[id^=font-picker] ul li {\n  height: 35px;\n  list-style: none;\n}\ndiv[id^=font-picker] ul li button {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0 10px;\n  white-space: nowrap;\n}\ndiv[id^=font-picker] ul li button:hover, div[id^=font-picker] ul li button:focus {\n  background: #dddddd;\n}\ndiv[id^=font-picker] ul li button.active-font {\n  background: #d1d1d1;\n}";
+  styleInject(css);
+
+  function getFontId(fontFamily) {
+      return fontFamily.replace(/\s+/g, "-").toLowerCase();
+  }
+  function validatePickerId(pickerId) {
+      if (pickerId.match(/[^0-9a-z]/i)) {
+          throw Error("The `pickerId` parameter may only contain letters and digits");
+      }
+  }
+
+  function get(url) {
+      return new Promise(function (resolve, reject) {
+          var request = new XMLHttpRequest();
+          request.overrideMimeType("application/json");
+          request.open("GET", url, true);
+          request.onreadystatechange = function () {
+              if (request.readyState === 4) {
+                  if (request.status !== 200) {
+                      reject(new Error("Response has status code " + request.status));
+                  }
+                  else {
+                      resolve(request.responseText);
+                  }
+              }
+          };
+          request.send();
+      });
+  }
+
+  var LIST_BASE_URL = "https://www.googleapis.com/webfonts/v1/webfonts";
+  function getFontList(apiKey) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, response, json, fontsOriginal;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      url = new URL(LIST_BASE_URL);
+                      url.searchParams.append("sort", "popularity");
+                      url.searchParams.append("key", apiKey);
+                      return [4, get(url.href)];
+                  case 1:
+                      response = _a.sent();
+                      json = JSON.parse(response);
+                      fontsOriginal = json.items;
+                      return [2, fontsOriginal.map(function (fontOriginal) {
+                              var family = fontOriginal.family, subsets = fontOriginal.subsets, others = __rest(fontOriginal, ["family", "subsets"]);
+                              return __assign(__assign({}, others), { family: family, id: getFontId(family), scripts: subsets });
+                          })];
+              }
+          });
+      });
+  }
+
+  var previewFontsStylesheet = document.createElement("style");
+  document.head.appendChild(previewFontsStylesheet);
+  function applyFontPreview(previewFont, selectorSuffix) {
+      var fontId = getFontId(previewFont.family);
+      var style = "\n\t\t\t#font-button-" + fontId + selectorSuffix + " {\n\t\t\t\tfont-family: \"" + previewFont.family + "\";\n\t\t\t}\n\t\t";
+      previewFontsStylesheet.appendChild(document.createTextNode(style));
+  }
+  function getActiveFontStylesheet(selectorSuffix) {
+      var stylesheetId = "active-font-" + selectorSuffix;
+      var activeFontStylesheet = document.getElementById(stylesheetId);
+      if (!activeFontStylesheet) {
+          activeFontStylesheet = document.createElement("style");
+          activeFontStylesheet.id = stylesheetId;
+          document.head.appendChild(activeFontStylesheet);
+      }
+      return activeFontStylesheet;
+  }
+  function applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {
+      var style = "\n\t\t.apply-font" + selectorSuffix + " {\n\t\t\tfont-family: \"" + activeFont.family + "\"" + (previousFontFamily ? ", \"" + previousFontFamily + "\"" : "") + ";\n\t\t}\n\t";
+      var activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);
+      activeFontStylesheet.innerHTML = style;
+  }
+
+  var PREVIEW_ATTRIBUTE_NAME = "data-is-preview";
+  function getStylesheetId(fontId) {
+      return "font-" + fontId;
+  }
+  function stylesheetExists(fontId, isPreview) {
+      var stylesheetNode = document.getElementById(getStylesheetId(fontId));
+      if (isPreview === null || isPreview === undefined) {
+          return stylesheetNode !== null;
+      }
+      return (stylesheetNode !== null &&
+          stylesheetNode.getAttribute(PREVIEW_ATTRIBUTE_NAME) === isPreview.toString());
+  }
+  function createStylesheet(fontId, isPreview) {
+      var stylesheetNode = document.createElement("style");
+      stylesheetNode.id = getStylesheetId(fontId);
+      stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      document.head.appendChild(stylesheetNode);
+  }
+  function fillStylesheet(fontId, styles) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.textContent = styles;
+      }
+      else {
+          console.error("Could not fill stylesheet: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+  function setStylesheetType(fontId, isPreview) {
+      var stylesheetId = getStylesheetId(fontId);
+      var stylesheetNode = document.getElementById(stylesheetId);
+      if (stylesheetNode) {
+          stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());
+      }
+      else {
+          console.error("Could not change stylesheet type: Stylesheet with ID \"" + stylesheetId + "\" not found");
+      }
+  }
+
+  function getMatches(regex, str) {
+      var matches = [];
+      var match;
+      do {
+          match = regex.exec(str);
+          if (match) {
+              matches.push(match[1]);
+          }
+      } while (match);
+      return matches;
+  }
+
+  var FONT_FACE_REGEX = /@font-face {([\s\S]*?)}/gm;
+  var FONT_FAMILY_REGEX = /font-family: ['"](.*?)['"]/gm;
+  function extractFontStyles(allFontStyles) {
+      var rules = getMatches(FONT_FACE_REGEX, allFontStyles);
+      var fontStyles = {};
+      rules.forEach(function (rule) {
+          var fontFamily = getMatches(FONT_FAMILY_REGEX, rule)[0];
+          var fontId = getFontId(fontFamily);
+          if (!(fontId in fontStyles)) {
+              fontStyles[fontId] = "";
+          }
+          fontStyles[fontId] += "@font-face {\n" + rule + "\n}\n\n";
+      });
+      return fontStyles;
+  }
+
+  var FONT_BASE_URL = "https://fonts.googleapis.com/css";
+  function getStylesheet(fonts, scripts, variants, previewsOnly) {
+      return __awaiter(this, void 0, void 0, function () {
+          var url, variantsStr, familiesStr, familyNamesConcat, downloadChars;
+          return __generator(this, function (_a) {
+              url = new URL(FONT_BASE_URL);
+              variantsStr = variants.join(",");
+              familiesStr = fonts.map(function (font) { return font.family + ":" + variantsStr; });
+              url.searchParams.append("family", familiesStr.join("|"));
+              url.searchParams.append("subset", scripts.join(","));
+              if (previewsOnly) {
+                  familyNamesConcat = fonts.map(function (font) { return font.family; }).join("");
+                  downloadChars = familyNamesConcat
+                      .split("")
+                      .filter(function (char, pos, self) { return self.indexOf(char) === pos; })
+                      .join("");
+                  url.searchParams.append("text", downloadChars);
+              }
+              url.searchParams.append("font-display", "swap");
+              return [2, get(url.href)];
+          });
+      });
+  }
+
+  function loadFontPreviews(fonts, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontsArray, fontsToFetch, response, fontStyles;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      fontsArray = Array.from(fonts.values());
+                      fontsToFetch = fontsArray
+                          .map(function (font) { return font.id; })
+                          .filter(function (fontId) { return !stylesheetExists(fontId); });
+                      fontsToFetch.forEach(function (fontId) { return createStylesheet(fontId, true); });
+                      return [4, getStylesheet(fontsArray, scripts, variants, true)];
+                  case 1:
+                      response = _a.sent();
+                      fontStyles = extractFontStyles(response);
+                      fontsArray.forEach(function (font) {
+                          applyFontPreview(font, selectorSuffix);
+                          if (fontsToFetch.includes(font.id)) {
+                              if (!(font.id in fontStyles)) {
+                                  console.error("Missing styles for font \"" + font.family + "\" (fontId \"" + font.id + "\") in Google Fonts response");
+                                  return;
+                              }
+                              fillStylesheet(font.id, fontStyles[font.id]);
+                          }
+                      });
+                      return [2];
+              }
+          });
+      });
+  }
+  function loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {
+      return __awaiter(this, void 0, void 0, function () {
+          var fontStyle;
+          return __generator(this, function (_a) {
+              switch (_a.label) {
+                  case 0:
+                      if (!stylesheetExists(font.id, false)) return [3, 1];
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      return [3, 3];
+                  case 1:
+                      if (stylesheetExists(font.id, true)) {
+                          setStylesheetType(font.id, false);
+                      }
+                      else {
+                          createStylesheet(font.id, false);
+                      }
+                      return [4, getStylesheet([font], scripts, variants, false)];
+                  case 2:
+                      fontStyle = _a.sent();
+                      applyActiveFont(font, previousFontFamily, selectorSuffix);
+                      fillStylesheet(font.id, fontStyle);
+                      _a.label = 3;
+                  case 3: return [2];
+              }
+          });
+      });
+  }
+
+  var FONT_FAMILY_DEFAULT = "Open Sans";
+  var OPTIONS_DEFAULTS = {
+      pickerId: "",
+      families: [],
+      categories: [],
+      scripts: ["latin"],
+      variants: ["regular"],
+      filter: function () { return true; },
+      limit: 50,
+      sort: "alphabet",
+  };
+
+  var FontManager = (function () {
+      function FontManager(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.fonts = new Map();
+          validatePickerId(pickerId);
+          this.selectorSuffix = pickerId ? "-" + pickerId : "";
+          this.apiKey = apiKey;
+          this.options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.onChange = onChange;
+          this.addFont(defaultFamily, false);
+          this.setActiveFont(defaultFamily, false);
+      }
+      FontManager.prototype.init = function () {
+          return __awaiter(this, void 0, void 0, function () {
+              var fonts, _loop_1, this_1, i, state_1, fontsToLoad;
+              return __generator(this, function (_a) {
+                  switch (_a.label) {
+                      case 0: return [4, getFontList(this.apiKey)];
+                      case 1:
+                          fonts = _a.sent();
+                          _loop_1 = function (i) {
+                              var font = fonts[i];
+                              if (this_1.fonts.size >= this_1.options.limit) {
+                                  return "break";
+                              }
+                              if (!this_1.fonts.has(font.family) &&
+                                  (this_1.options.families.length === 0 || this_1.options.families.includes(font.family)) &&
+                                  (this_1.options.categories.length === 0 || this_1.options.categories.includes(font.category)) &&
+                                  this_1.options.scripts.every(function (script) { return font.scripts.includes(script); }) &&
+                                  this_1.options.variants.every(function (variant) { return font.variants.includes(variant); }) &&
+                                  this_1.options.filter(font) === true) {
+                                  this_1.fonts.set(font.family, font);
+                              }
+                          };
+                          this_1 = this;
+                          for (i = 0; i < fonts.length; i += 1) {
+                              state_1 = _loop_1(i);
+                              if (state_1 === "break")
+                                  break;
+                          }
+                          fontsToLoad = new Map(this.fonts);
+                          fontsToLoad["delete"](this.activeFontFamily);
+                          loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);
+                          return [2, this.fonts];
+                  }
+              });
+          });
+      };
+      FontManager.prototype.getFonts = function () {
+          return this.fonts;
+      };
+      FontManager.prototype.addFont = function (fontFamily, downloadPreview) {
+          if (downloadPreview === void 0) { downloadPreview = true; }
+          var font = {
+              family: fontFamily,
+              id: getFontId(fontFamily),
+          };
+          this.fonts.set(fontFamily, font);
+          if (downloadPreview) {
+              var fontMap = new Map();
+              fontMap.set(fontFamily, font);
+              loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);
+          }
+      };
+      FontManager.prototype.removeFont = function (fontFamily) {
+          this.fonts["delete"](fontFamily);
+      };
+      FontManager.prototype.getActiveFont = function () {
+          var activeFont = this.fonts.get(this.activeFontFamily);
+          if (!activeFont) {
+              throw Error("Cannot get active font: \"" + this.activeFontFamily + "\" is not in the font list");
+          }
+          else {
+              return activeFont;
+          }
+      };
+      FontManager.prototype.setActiveFont = function (fontFamily, runOnChange) {
+          var _this = this;
+          if (runOnChange === void 0) { runOnChange = true; }
+          var previousFontFamily = this.activeFontFamily;
+          var activeFont = this.fonts.get(fontFamily);
+          if (!activeFont) {
+              throw Error("Cannot update active font: \"" + fontFamily + "\" is not in the font list");
+          }
+          this.activeFontFamily = fontFamily;
+          loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () {
+              if (runOnChange) {
+                  _this.onChange(activeFont);
+              }
+          });
+      };
+      FontManager.prototype.setOnChange = function (onChange) {
+          this.onChange = onChange;
+      };
+      return FontManager;
+  }());
+
+  var FontPicker = (function () {
+      function FontPicker(apiKey, defaultFamily, _a, onChange) {
+          if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }
+          var _b = _a.pickerId, pickerId = _b === void 0 ? OPTIONS_DEFAULTS.pickerId : _b, _c = _a.families, families = _c === void 0 ? OPTIONS_DEFAULTS.families : _c, _d = _a.categories, categories = _d === void 0 ? OPTIONS_DEFAULTS.categories : _d, _e = _a.scripts, scripts = _e === void 0 ? OPTIONS_DEFAULTS.scripts : _e, _f = _a.variants, variants = _f === void 0 ? OPTIONS_DEFAULTS.variants : _f, _g = _a.filter, filter = _g === void 0 ? OPTIONS_DEFAULTS.filter : _g, _h = _a.limit, limit = _h === void 0 ? OPTIONS_DEFAULTS.limit : _h, _j = _a.sort, sort = _j === void 0 ? OPTIONS_DEFAULTS.sort : _j;
+          if (onChange === void 0) { onChange = function () { }; }
+          this.expanded = false;
+          this.closeEventListener = this.closeEventListener.bind(this);
+          this.toggleExpanded = this.toggleExpanded.bind(this);
+          var options = {
+              pickerId: pickerId,
+              families: families,
+              categories: categories,
+              scripts: scripts,
+              variants: variants,
+              filter: filter,
+              limit: limit,
+              sort: sort,
+          };
+          this.fontManager = new FontManager(apiKey, defaultFamily, options, onChange);
+          this.generateUI(sort);
+      }
+      FontPicker.prototype.generateUI = function (sort) {
+          var _this = this;
+          var selectorSuffix = this.fontManager.selectorSuffix;
+          var pickerId = "font-picker" + selectorSuffix;
+          this.fontPickerDiv = document.getElementById(pickerId);
+          if (!this.fontPickerDiv) {
+              throw Error("Missing div with id=\"" + pickerId + "\"");
+          }
+          var dropdownButton = document.createElement("button");
+          dropdownButton.classList.add("dropdown-button");
+          dropdownButton.onclick = this.toggleExpanded;
+          dropdownButton.onkeypress = this.toggleExpanded;
+          dropdownButton.type = "button";
+          this.fontPickerDiv.appendChild(dropdownButton);
+          this.dropdownFamily = document.createElement("p");
+          this.dropdownFamily.textContent = this.fontManager.getActiveFont().family;
+          this.dropdownFamily.classList.add("dropdown-font-family");
+          dropdownButton.appendChild(this.dropdownFamily);
+          var dropdownIcon = document.createElement("p");
+          dropdownIcon.classList.add("dropdown-icon", "loading");
+          dropdownButton.appendChild(dropdownIcon);
+          this.fontManager
+              .init()
+              .then(function (fontMap) {
+              var fonts = Array.from(fontMap.values());
+              if (sort === "alphabet") {
+                  fonts.sort(function (font1, font2) {
+                      return font1.family.localeCompare(font2.family);
+                  });
+              }
+              _this.generateFontList(fonts);
+              dropdownIcon.classList.replace("loading", "finished");
+          })["catch"](function (err) {
+              dropdownIcon.classList.replace("loading", "error");
+              console.error("Error trying to fetch the list of available fonts");
+              console.error(err);
+          });
+      };
+      FontPicker.prototype.generateFontList = function (fonts) {
+          var _this = this;
+          this.ul = document.createElement("ul");
+          this.ul.classList.add("font-list");
+          fonts.forEach(function (font) {
+              _this.addFontLi(font);
+          });
+          this.fontPickerDiv.appendChild(this.ul);
+          var activeFontFamily = this.fontManager.getActiveFont().family;
+          var activeFontId = getFontId(activeFontFamily);
+          var fontButtonId = "font-button-" + activeFontId + this.fontManager.selectorSuffix;
+          this.activeFontButton = document.getElementById(fontButtonId);
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("Could not find font button with ID (" + fontButtonId + ")");
+          }
+      };
+      FontPicker.prototype.addFontLi = function (font, listIndex) {
+          var _this = this;
+          var fontId = getFontId(font.family);
+          var li = document.createElement("li");
+          li.classList.add("font-list-item");
+          var fontButton = document.createElement("button");
+          fontButton.type = "button";
+          fontButton.id = "font-button-" + fontId + this.fontManager.selectorSuffix;
+          fontButton.classList.add("font-button");
+          fontButton.textContent = font.family;
+          var onActivate = function () {
+              _this.toggleExpanded();
+              _this.setActiveFont(font.family);
+          };
+          fontButton.onclick = onActivate;
+          fontButton.onkeypress = onActivate;
+          li.appendChild(fontButton);
+          if (listIndex) {
+              this.ul.insertBefore(li, this.ul.children[listIndex]);
+          }
+          else {
+              this.ul.appendChild(li);
+          }
+      };
+      FontPicker.prototype.closeEventListener = function (e) {
+          var targetEl = e.target;
+          var fontPickerEl = document.getElementById("font-picker" + this.fontManager.selectorSuffix);
+          while (true) {
+              if (targetEl === fontPickerEl) {
+                  return;
+              }
+              if (targetEl.parentNode) {
+                  targetEl = targetEl.parentNode;
+              }
+              else {
+                  this.toggleExpanded();
+                  return;
+              }
+          }
+      };
+      FontPicker.prototype.toggleExpanded = function () {
+          if (this.expanded) {
+              this.expanded = false;
+              this.fontPickerDiv.classList.remove("expanded");
+              document.removeEventListener("click", this.closeEventListener);
+          }
+          else {
+              this.expanded = true;
+              this.fontPickerDiv.classList.add("expanded");
+              document.addEventListener("click", this.closeEventListener);
+          }
+      };
+      FontPicker.prototype.getFonts = function () {
+          return this.fontManager.getFonts();
+      };
+      FontPicker.prototype.addFont = function (fontFamily, index) {
+          if (Array.from(this.fontManager.getFonts().keys()).includes(fontFamily)) {
+              throw Error("Did not add font to font picker: Font family \"" + fontFamily + "\" is already in the list");
+          }
+          this.fontManager.addFont(fontFamily, true);
+          var font = this.fontManager.getFonts().get(fontFamily);
+          if (font) {
+              this.addFontLi(font, index);
+          }
+          else {
+              console.error("Font \"" + fontFamily + "\" is missing in font list");
+          }
+      };
+      FontPicker.prototype.removeFont = function (fontFamily) {
+          this.fontManager.removeFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          var fontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+          if (fontButton) {
+              var fontLi = fontButton.parentElement;
+              fontButton.remove();
+              if (fontLi) {
+                  fontLi.remove();
+              }
+          }
+          else {
+              throw Error("Could not remove font from font picker: Font family \"" + fontFamily + "\" is not in the list");
+          }
+      };
+      FontPicker.prototype.getActiveFont = function () {
+          return this.fontManager.getActiveFont();
+      };
+      FontPicker.prototype.setActiveFont = function (fontFamily) {
+          this.fontManager.setActiveFont(fontFamily);
+          var fontId = getFontId(fontFamily);
+          this.dropdownFamily.textContent = fontFamily;
+          if (this.activeFontButton) {
+              this.activeFontButton.classList.remove("active-font");
+              this.activeFontButton = document.getElementById("font-button-" + fontId + this.fontManager.selectorSuffix);
+              this.activeFontButton.classList.add("active-font");
+          }
+          else {
+              console.error("`activeFontButton` is undefined");
+          }
+      };
+      FontPicker.prototype.setOnChange = function (onChange) {
+          this.fontManager.setOnChange(onChange);
+      };
+      return FontPicker;
+  }());
+
+  return FontPicker;
+
+})));