{"version":3,"file":"FontPicker.js","sources":["../../node_modules/@samuelmeuli/font-manager/dist/index.es.js","../../src/FontPicker.ts"],"sourcesContent":["/*! *****************************************************************************\r\nCopyright (c) Microsoft Corporation. All rights reserved.\r\nLicensed under the Apache License, Version 2.0 (the \"License\"); you may not use\r\nthis file except in compliance with the License. You may obtain a copy of the\r\nLicense at http://www.apache.org/licenses/LICENSE-2.0\r\n\r\nTHIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY\r\nKIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED\r\nWARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,\r\nMERCHANTABLITY OR NON-INFRINGEMENT.\r\n\r\nSee the Apache Version 2.0 License for specific language governing permissions\r\nand limitations under the License.\r\n***************************************************************************** */\r\n\r\nvar __assign = function() {\r\n __assign = Object.assign || function __assign(t) {\r\n for (var s, i = 1, n = arguments.length; i < n; i++) {\r\n s = arguments[i];\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];\r\n }\r\n return t;\r\n };\r\n return __assign.apply(this, arguments);\r\n};\r\n\r\nfunction __rest(s, e) {\r\n var t = {};\r\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\r\n t[p] = s[p];\r\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\r\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\r\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\r\n t[p[i]] = s[p[i]];\r\n }\r\n return t;\r\n}\r\n\r\nfunction __awaiter(thisArg, _arguments, P, generator) {\r\n return new (P || (P = Promise))(function (resolve, reject) {\r\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\r\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\r\n function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }\r\n step((generator = generator.apply(thisArg, _arguments || [])).next());\r\n });\r\n}\r\n\r\nfunction __generator(thisArg, body) {\r\n var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;\r\n return g = { next: verb(0), \"throw\": verb(1), \"return\": verb(2) }, typeof Symbol === \"function\" && (g[Symbol.iterator] = function() { return this; }), g;\r\n function verb(n) { return function (v) { return step([n, v]); }; }\r\n function step(op) {\r\n if (f) throw new TypeError(\"Generator is already executing.\");\r\n while (_) try {\r\n 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;\r\n if (y = 0, t) op = [op[0] & 2, t.value];\r\n switch (op[0]) {\r\n case 0: case 1: t = op; break;\r\n case 4: _.label++; return { value: op[1], done: false };\r\n case 5: _.label++; y = op[1]; op = [0]; continue;\r\n case 7: op = _.ops.pop(); _.trys.pop(); continue;\r\n default:\r\n if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }\r\n if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }\r\n if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }\r\n if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }\r\n if (t[2]) _.ops.pop();\r\n _.trys.pop(); continue;\r\n }\r\n op = body.call(thisArg, _);\r\n } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }\r\n if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };\r\n }\r\n}\n\nfunction styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nvar 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}\";\nstyleInject(css);\n\nfunction getFontId(fontFamily) {\n return fontFamily.replace(/\\s+/g, \"-\").toLowerCase();\n}\nfunction validatePickerId(pickerId) {\n if (pickerId.match(/[^0-9a-z]/i)) {\n throw Error(\"The `pickerId` parameter may only contain letters and digits\");\n }\n}\n\nfunction get(url) {\n return new Promise(function (resolve, reject) {\n var request = new XMLHttpRequest();\n request.overrideMimeType(\"application/json\");\n request.open(\"GET\", url, true);\n request.onreadystatechange = function () {\n if (request.readyState === 4) {\n if (request.status !== 200) {\n reject(new Error(\"Response has status code \" + request.status));\n }\n else {\n resolve(request.responseText);\n }\n }\n };\n request.send();\n });\n}\n\nvar LIST_BASE_URL = \"https://www.googleapis.com/webfonts/v1/webfonts\";\nfunction getFontList(apiKey) {\n return __awaiter(this, void 0, void 0, function () {\n var url, response, json, fontsOriginal;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n url = new URL(LIST_BASE_URL);\n url.searchParams.append(\"sort\", \"popularity\");\n url.searchParams.append(\"key\", apiKey);\n return [4, get(url.href)];\n case 1:\n response = _a.sent();\n json = JSON.parse(response);\n fontsOriginal = json.items;\n return [2, fontsOriginal.map(function (fontOriginal) {\n var family = fontOriginal.family, subsets = fontOriginal.subsets, others = __rest(fontOriginal, [\"family\", \"subsets\"]);\n return __assign(__assign({}, others), { family: family, id: getFontId(family), scripts: subsets });\n })];\n }\n });\n });\n}\n\nvar previewFontsStylesheet = document.createElement(\"style\");\ndocument.head.appendChild(previewFontsStylesheet);\nfunction applyFontPreview(previewFont, selectorSuffix) {\n var fontId = getFontId(previewFont.family);\n 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\";\n previewFontsStylesheet.appendChild(document.createTextNode(style));\n}\nfunction getActiveFontStylesheet(selectorSuffix) {\n var stylesheetId = \"active-font-\" + selectorSuffix;\n var activeFontStylesheet = document.getElementById(stylesheetId);\n if (!activeFontStylesheet) {\n activeFontStylesheet = document.createElement(\"style\");\n activeFontStylesheet.id = stylesheetId;\n document.head.appendChild(activeFontStylesheet);\n }\n return activeFontStylesheet;\n}\nfunction applyActiveFont(activeFont, previousFontFamily, selectorSuffix) {\n var style = \"\\n\\t\\t.apply-font\" + selectorSuffix + \" {\\n\\t\\t\\tfont-family: \\\"\" + activeFont.family + \"\\\"\" + (previousFontFamily ? \", \\\"\" + previousFontFamily + \"\\\"\" : \"\") + \";\\n\\t\\t}\\n\\t\";\n var activeFontStylesheet = getActiveFontStylesheet(selectorSuffix);\n activeFontStylesheet.innerHTML = style;\n}\n\nvar PREVIEW_ATTRIBUTE_NAME = \"data-is-preview\";\nfunction getStylesheetId(fontId) {\n return \"font-\" + fontId;\n}\nfunction stylesheetExists(fontId, isPreview) {\n var stylesheetNode = document.getElementById(getStylesheetId(fontId));\n if (isPreview === null || isPreview === undefined) {\n return stylesheetNode !== null;\n }\n return (stylesheetNode !== null &&\n stylesheetNode.getAttribute(PREVIEW_ATTRIBUTE_NAME) === isPreview.toString());\n}\nfunction createStylesheet(fontId, isPreview) {\n var stylesheetNode = document.createElement(\"style\");\n stylesheetNode.id = getStylesheetId(fontId);\n stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());\n document.head.appendChild(stylesheetNode);\n}\nfunction fillStylesheet(fontId, styles) {\n var stylesheetId = getStylesheetId(fontId);\n var stylesheetNode = document.getElementById(stylesheetId);\n if (stylesheetNode) {\n stylesheetNode.textContent = styles;\n }\n else {\n console.error(\"Could not fill stylesheet: Stylesheet with ID \\\"\" + stylesheetId + \"\\\" not found\");\n }\n}\nfunction setStylesheetType(fontId, isPreview) {\n var stylesheetId = getStylesheetId(fontId);\n var stylesheetNode = document.getElementById(stylesheetId);\n if (stylesheetNode) {\n stylesheetNode.setAttribute(PREVIEW_ATTRIBUTE_NAME, isPreview.toString());\n }\n else {\n console.error(\"Could not change stylesheet type: Stylesheet with ID \\\"\" + stylesheetId + \"\\\" not found\");\n }\n}\n\nfunction getMatches(regex, str) {\n var matches = [];\n var match;\n do {\n match = regex.exec(str);\n if (match) {\n matches.push(match[1]);\n }\n } while (match);\n return matches;\n}\n\nvar FONT_FACE_REGEX = /@font-face {([\\s\\S]*?)}/gm;\nvar FONT_FAMILY_REGEX = /font-family: ['\"](.*?)['\"]/gm;\nfunction extractFontStyles(allFontStyles) {\n var rules = getMatches(FONT_FACE_REGEX, allFontStyles);\n var fontStyles = {};\n rules.forEach(function (rule) {\n var fontFamily = getMatches(FONT_FAMILY_REGEX, rule)[0];\n var fontId = getFontId(fontFamily);\n if (!(fontId in fontStyles)) {\n fontStyles[fontId] = \"\";\n }\n fontStyles[fontId] += \"@font-face {\\n\" + rule + \"\\n}\\n\\n\";\n });\n return fontStyles;\n}\n\nvar FONT_BASE_URL = \"https://fonts.googleapis.com/css\";\nfunction getStylesheet(fonts, scripts, variants, previewsOnly) {\n return __awaiter(this, void 0, void 0, function () {\n var url, variantsStr, familiesStr, familyNamesConcat, downloadChars;\n return __generator(this, function (_a) {\n url = new URL(FONT_BASE_URL);\n variantsStr = variants.join(\",\");\n familiesStr = fonts.map(function (font) { return font.family + \":\" + variantsStr; });\n url.searchParams.append(\"family\", familiesStr.join(\"|\"));\n url.searchParams.append(\"subset\", scripts.join(\",\"));\n if (previewsOnly) {\n familyNamesConcat = fonts.map(function (font) { return font.family; }).join(\"\");\n downloadChars = familyNamesConcat\n .split(\"\")\n .filter(function (char, pos, self) { return self.indexOf(char) === pos; })\n .join(\"\");\n url.searchParams.append(\"text\", downloadChars);\n }\n url.searchParams.append(\"font-display\", \"swap\");\n return [2, get(url.href)];\n });\n });\n}\n\nfunction loadFontPreviews(fonts, scripts, variants, selectorSuffix) {\n return __awaiter(this, void 0, void 0, function () {\n var fontsArray, fontsToFetch, response, fontStyles;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n fontsArray = Array.from(fonts.values());\n fontsToFetch = fontsArray\n .map(function (font) { return font.id; })\n .filter(function (fontId) { return !stylesheetExists(fontId); });\n fontsToFetch.forEach(function (fontId) { return createStylesheet(fontId, true); });\n return [4, getStylesheet(fontsArray, scripts, variants, true)];\n case 1:\n response = _a.sent();\n fontStyles = extractFontStyles(response);\n fontsArray.forEach(function (font) {\n applyFontPreview(font, selectorSuffix);\n if (fontsToFetch.includes(font.id)) {\n if (!(font.id in fontStyles)) {\n console.error(\"Missing styles for font \\\"\" + font.family + \"\\\" (fontId \\\"\" + font.id + \"\\\") in Google Fonts response\");\n return;\n }\n fillStylesheet(font.id, fontStyles[font.id]);\n }\n });\n return [2];\n }\n });\n });\n}\nfunction loadActiveFont(font, previousFontFamily, scripts, variants, selectorSuffix) {\n return __awaiter(this, void 0, void 0, function () {\n var fontStyle;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0:\n if (!stylesheetExists(font.id, false)) return [3, 1];\n applyActiveFont(font, previousFontFamily, selectorSuffix);\n return [3, 3];\n case 1:\n if (stylesheetExists(font.id, true)) {\n setStylesheetType(font.id, false);\n }\n else {\n createStylesheet(font.id, false);\n }\n return [4, getStylesheet([font], scripts, variants, false)];\n case 2:\n fontStyle = _a.sent();\n applyActiveFont(font, previousFontFamily, selectorSuffix);\n fillStylesheet(font.id, fontStyle);\n _a.label = 3;\n case 3: return [2];\n }\n });\n });\n}\n\nvar FONT_FAMILY_DEFAULT = \"Open Sans\";\nvar OPTIONS_DEFAULTS = {\n pickerId: \"\",\n families: [],\n categories: [],\n scripts: [\"latin\"],\n variants: [\"regular\"],\n filter: function () { return true; },\n limit: 50,\n sort: \"alphabet\",\n};\n\nvar FontManager = (function () {\n function FontManager(apiKey, defaultFamily, _a, onChange) {\n if (defaultFamily === void 0) { defaultFamily = FONT_FAMILY_DEFAULT; }\n 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;\n if (onChange === void 0) { onChange = function () { }; }\n this.fonts = new Map();\n validatePickerId(pickerId);\n this.selectorSuffix = pickerId ? \"-\" + pickerId : \"\";\n this.apiKey = apiKey;\n this.options = {\n pickerId: pickerId,\n families: families,\n categories: categories,\n scripts: scripts,\n variants: variants,\n filter: filter,\n limit: limit,\n sort: sort,\n };\n this.onChange = onChange;\n this.addFont(defaultFamily, false);\n this.setActiveFont(defaultFamily, false);\n }\n FontManager.prototype.init = function () {\n return __awaiter(this, void 0, void 0, function () {\n var fonts, _loop_1, this_1, i, state_1, fontsToLoad;\n return __generator(this, function (_a) {\n switch (_a.label) {\n case 0: return [4, getFontList(this.apiKey)];\n case 1:\n fonts = _a.sent();\n _loop_1 = function (i) {\n var font = fonts[i];\n if (this_1.fonts.size >= this_1.options.limit) {\n return \"break\";\n }\n if (!this_1.fonts.has(font.family) &&\n (this_1.options.families.length === 0 || this_1.options.families.includes(font.family)) &&\n (this_1.options.categories.length === 0 || this_1.options.categories.includes(font.category)) &&\n this_1.options.scripts.every(function (script) { return font.scripts.includes(script); }) &&\n this_1.options.variants.every(function (variant) { return font.variants.includes(variant); }) &&\n this_1.options.filter(font) === true) {\n this_1.fonts.set(font.family, font);\n }\n };\n this_1 = this;\n for (i = 0; i < fonts.length; i += 1) {\n state_1 = _loop_1(i);\n if (state_1 === \"break\")\n break;\n }\n fontsToLoad = new Map(this.fonts);\n fontsToLoad[\"delete\"](this.activeFontFamily);\n loadFontPreviews(fontsToLoad, this.options.scripts, this.options.variants, this.selectorSuffix);\n return [2, this.fonts];\n }\n });\n });\n };\n FontManager.prototype.getFonts = function () {\n return this.fonts;\n };\n FontManager.prototype.addFont = function (fontFamily, downloadPreview) {\n if (downloadPreview === void 0) { downloadPreview = true; }\n var font = {\n family: fontFamily,\n id: getFontId(fontFamily),\n };\n this.fonts.set(fontFamily, font);\n if (downloadPreview) {\n var fontMap = new Map();\n fontMap.set(fontFamily, font);\n loadFontPreviews(fontMap, this.options.scripts, this.options.variants, this.selectorSuffix);\n }\n };\n FontManager.prototype.removeFont = function (fontFamily) {\n this.fonts[\"delete\"](fontFamily);\n };\n FontManager.prototype.getActiveFont = function () {\n var activeFont = this.fonts.get(this.activeFontFamily);\n if (!activeFont) {\n throw Error(\"Cannot get active font: \\\"\" + this.activeFontFamily + \"\\\" is not in the font list\");\n }\n else {\n return activeFont;\n }\n };\n FontManager.prototype.setActiveFont = function (fontFamily, runOnChange) {\n var _this = this;\n if (runOnChange === void 0) { runOnChange = true; }\n var previousFontFamily = this.activeFontFamily;\n var activeFont = this.fonts.get(fontFamily);\n if (!activeFont) {\n throw Error(\"Cannot update active font: \\\"\" + fontFamily + \"\\\" is not in the font list\");\n }\n this.activeFontFamily = fontFamily;\n loadActiveFont(activeFont, previousFontFamily, this.options.scripts, this.options.variants, this.selectorSuffix).then(function () {\n if (runOnChange) {\n _this.onChange(activeFont);\n }\n });\n };\n FontManager.prototype.setOnChange = function (onChange) {\n this.onChange = onChange;\n };\n return FontManager;\n}());\n\nexport { FONT_FAMILY_DEFAULT, FontManager, OPTIONS_DEFAULTS, getFontId };\n","import {\n\tFont,\n\tFONT_FAMILY_DEFAULT,\n\tFontList,\n\tFontManager,\n\tgetFontId,\n\tOptions,\n\tOPTIONS_DEFAULTS,\n\tSortOption,\n} from \"@samuelmeuli/font-manager\";\n\n/**\n * Font picker user interface\n */\nexport default class FontPicker {\n\t// Button in the font list which contains and highlights the currently active font\n\tprivate activeFontButton: HTMLButtonElement;\n\n\t//
element in the dropdownButton containing the name of the currently active font\n\tprivate dropdownFamily: HTMLParagraphElement;\n\n\t// State of the font picker (expanded or collapsed)\n\tprivate expanded = false;\n\n\t// Instance of the FontManager class used for managing, downloading and applying fonts\n\tprivate fontManager: FontManager;\n\n\t//