@imposium-hub/components 1.54.2 → 1.54.3

package/dist/cjs/components/advanced-number-field/AdvancedNumberField.d.ts

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface IAdvancedNumberFieldProps {
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: number;
+    tooltip?: IToolTipConfig | string;
+    width?: string | number;
+    onChange?(e: any): void;
+    info?: string;
+    labelPosition?: string;
+    min?: number;
+    max?: number;
+}
+interface IAdvancedNumberFieldState {
+    error: boolean;
+    value: number;
+}
+declare class AdvancedNumberField extends React.PureComponent<IAdvancedNumberFieldProps, IAdvancedNumberFieldState> {
+    private inputRef;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    private validate;
+    private onChange;
+    private incrementValue;
+    private decrementValue;
+    private onSelectFocus;
+    private onSelectBlur;
+    private handleLabelDrag;
+    render(): JSX.Element;
+}
+export default AdvancedNumberField;

package/dist/cjs/components/advanced-number-field/AdvancedNumberField.js

@@ -0,0 +1,153 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var FieldWrapper_1 = __importDefault(require("../field-wrapper/FieldWrapper"));
+var AdvancedNumberField = /** @class */ (function (_super) {
+    __extends(AdvancedNumberField, _super);
+    function AdvancedNumberField(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            error: false,
+            value: _this.props.value
+        };
+        _this.inputRef = React.createRef();
+        return _this;
+    }
+    AdvancedNumberField.prototype.componentDidMount = function () {
+        this.setState({
+            error: false,
+            value: this.props.value
+        });
+    };
+    AdvancedNumberField.prototype.componentDidUpdate = function (prevProps) {
+        if (prevProps.value !== this.props.value) {
+            this.setState({
+                error: false,
+                value: this.props.value
+            });
+        }
+    };
+    AdvancedNumberField.prototype.validate = function (e, btnValue) {
+        var _a = this.props, max = _a.max, min = _a.min;
+        var val = e !== null ? e.target.value : btnValue;
+        this.setState({ value: val });
+        if (min || max) {
+            if (val < min || val > max) {
+                this.setState({ error: true });
+            }
+            else {
+                this.setState({ error: false });
+                this.onChange(val);
+            }
+        }
+        else {
+            this.onChange(val);
+        }
+    };
+    AdvancedNumberField.prototype.onChange = function (value) {
+        var val = value;
+        if (val === '') {
+            val = null;
+        }
+        else {
+            val = parseFloat(val);
+        }
+        this.props.onChange(val);
+    };
+    AdvancedNumberField.prototype.incrementValue = function () {
+        var value = this.state.value;
+        this.validate(null, value + 1);
+    };
+    AdvancedNumberField.prototype.decrementValue = function () {
+        var value = this.state.value;
+        this.validate(null, value - 1);
+    };
+    AdvancedNumberField.prototype.onSelectFocus = function () {
+        // if (this.props.value && this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, this.props.value.toString().length);
+        // }
+    };
+    AdvancedNumberField.prototype.onSelectBlur = function () {
+        // if (this.inputRef.current) {
+        //     this.inputRef.current.setSelectionRange(0, 0);
+        // }
+    };
+    AdvancedNumberField.prototype.handleLabelDrag = function (v) {
+        var newVal = this.props.value + v;
+        this.props.onChange(newVal);
+    };
+    AdvancedNumberField.prototype.render = function () {
+        var _this = this;
+        var error = null;
+        var _a = this.props, label = _a.label, placeholder = _a.placeholder, width = _a.width, readOnly = _a.readOnly, buttons = _a.buttons, tooltip = _a.tooltip, info = _a.info, labelPosition = _a.labelPosition, min = _a.min, max = _a.max;
+        var value = this.state.value;
+        if (value === null) {
+            value = '';
+        }
+        if (this.state.error) {
+            if (min && !max) {
+                error = "Value must be greater than or equal to ".concat(min, ".");
+            }
+            else if (!min && max) {
+                error = "Value must be less than or equal to ".concat(max, ".");
+            }
+            else if (min && max) {
+                error = "Value must be between ".concat(min, " and ").concat(max, ".");
+            }
+        }
+        else {
+            error = info;
+        }
+        return (React.createElement(FieldWrapper_1.default, { customClass: "advanced-number-field ".concat(this.state.error ? 'invalid' : ''), 
+            // draggableValue = {true}
+            // onDrag = {(v)=>this.handleLabelDrag(v)}
+            label: label, tooltip: tooltip, buttons: buttons, info: error, labelPosition: labelPosition, width: width },
+            React.createElement("input", { type: 'button', value: '-', className: 'button-minus', onClick: function () { return _this.decrementValue(); } }),
+            React.createElement("input", { ref: this.inputRef, type: 'number', pattern: '/^-?(0|[1-9]\\d*)(\\.\\d+)?$/', placeholder: placeholder, value: value, readOnly: readOnly, min: min, max: max, onFocus: function () { return _this.onSelectFocus(); }, onBlur: function () { return _this.onSelectBlur(); }, onChange: function (e) { return _this.validate(e); } }),
+            React.createElement("input", { type: 'button', value: '+', className: 'button-plus', onClick: function () { return _this.incrementValue(); } })));
+    };
+    return AdvancedNumberField;
+}(React.PureComponent));
+exports.default = AdvancedNumberField;
+//# sourceMappingURL=AdvancedNumberField.js.map

package/dist/cjs/components/advanced-number-field/AdvancedNumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AdvancedNumberField.js","sourceRoot":"","sources":["../../../../src/components/advanced-number-field/AdvancedNumberField.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/font-picker/FontPicker.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import FontManager from './font-manager/FontManager';
+import { Category, Font, Script, Variant } from './font-manager/types';
+interface IFontPickerProps {
+    apiKey: string;
+    activeFontFamily: string;
+    onChange: (font: string) => void;
+    families: string[];
+    categories: Category[];
+    scripts: Script[];
+    variants: Variant[];
+    filter: (font: Font) => boolean;
+    limit: number;
+    defaultFonts: any;
+    customFonts?: any;
+}
+interface IFontPickerState {
+    expanded: boolean;
+    fonts: any;
+}
+export default class FontPicker extends React.PureComponent<IFontPickerProps, IFontPickerState> {
+    fontManager: FontManager;
+    static defaultProps: {
+        activeFontFamily: string;
+        families: string[];
+        categories: Category[];
+        scripts: Script[];
+        variants: Variant[];
+        filter: (font: Font) => boolean;
+        limit: number;
+    };
+    constructor(props: any);
+    componentDidUpdate: (prevProps: any) => void;
+    private onClose;
+    private onSelection;
+    private setActiveFontFamily;
+    private generateFontList;
+    private toggleExpanded;
+    render: () => JSX.Element;
+}
+export {};

package/dist/cjs/components/font-picker/FontPicker.js

@@ -0,0 +1,173 @@
+"use strict";
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var FontManager_1 = __importDefault(require("./font-manager/FontManager"));
+var types_1 = require("./font-manager/types");
+var constants_1 = require("./font-manager/constants");
+var fontStyle_1 = require("./font-manager/fontStyle");
+var FontPicker = /** @class */ (function (_super) {
+    __extends(FontPicker, _super);
+    function FontPicker(props) {
+        var _this = _super.call(this, props) || this;
+        _this.componentDidUpdate = function (prevProps) {
+            var _a = _this.props, activeFontFamily = _a.activeFontFamily, onChange = _a.onChange, customFonts = _a.customFonts, defaultFonts = _a.defaultFonts;
+            if (prevProps.customFonts !== customFonts) {
+                _this.fontManager
+                    .init()
+                    .then(function (fontMap) {
+                    var googleFonts = Array.from(fontMap.values()).filter(function (f) { return f.files; });
+                    var updateDefaultFonts = defaultFonts.map(function (f) { return googleFonts.find(function (o) { return o.family === f.family; }) || f; });
+                    var uniqueFontFamilies = new Set();
+                    var uniqueFonts = updateDefaultFonts.filter(function (e) {
+                        var isDup = uniqueFontFamilies.has(e.family);
+                        uniqueFontFamilies.add(e.family);
+                        if (!isDup) {
+                            return true;
+                        }
+                        return false;
+                    });
+                    _this.setState({ fonts: uniqueFonts }, function () {
+                        return (0, fontStyle_1.createFontStyleSheets)(defaultFonts, uniqueFonts, customFonts);
+                    });
+                })
+                    .catch(function (err) {
+                    console.error('Error trying to fetch the list of available fonts');
+                    console.error(err);
+                });
+            }
+            if (activeFontFamily !== prevProps.activeFontFamily) {
+                _this.setActiveFontFamily(activeFontFamily);
+            }
+            if (onChange !== prevProps.onChange) {
+                _this.fontManager.setOnChange(onChange);
+            }
+        };
+        _this.onClose = function (e) {
+            var targetEl = e.target;
+            var fontPickerEl = document.getElementById("font-picker");
+            while (true) {
+                if (targetEl === fontPickerEl) {
+                    return;
+                }
+                if (targetEl.parentNode) {
+                    targetEl = targetEl.parentNode;
+                }
+                else {
+                    _this.toggleExpanded();
+                    return;
+                }
+            }
+        };
+        _this.onSelection = function (e) {
+            var activeFontFamily = e.target.textContent;
+            if (!activeFontFamily) {
+                throw Error("Missing font family in clicked font button");
+            }
+            _this.setActiveFontFamily(activeFontFamily);
+            _this.toggleExpanded();
+        };
+        _this.setActiveFontFamily = function (activeFontFamily) {
+            _this.fontManager.setActiveFont(activeFontFamily);
+        };
+        _this.generateFontList = function () {
+            var _a = _this.props, activeFontFamily = _a.activeFontFamily, families = _a.families;
+            return (React.createElement("ul", { className: 'font-list' }, families.map(function (font) {
+                var isActive = font === activeFontFamily;
+                return (React.createElement("li", { key: font, className: 'font-list-item' },
+                    React.createElement("button", { type: 'button', id: "font-button-".concat(font), className: "font-button ".concat(isActive ? 'active-font' : ''), onClick: _this.onSelection, onKeyDown: _this.onSelection, style: { fontFamily: font } }, font)));
+            })));
+        };
+        _this.toggleExpanded = function () {
+            var expanded = _this.state.expanded;
+            if (expanded) {
+                _this.setState({
+                    expanded: false
+                });
+                document.removeEventListener('click', function () { return _this.onClose; });
+            }
+            else {
+                _this.setState({
+                    expanded: true
+                });
+                document.addEventListener('click', function () { return _this.onClose; });
+            }
+        };
+        _this.render = function () {
+            var activeFontFamily = _this.props.activeFontFamily;
+            var expanded = _this.state.expanded;
+            return (React.createElement("div", { id: "font-picker", className: expanded ? 'expanded' : '' },
+                React.createElement("button", { type: 'button', className: 'dropdown-button', onClick: _this.toggleExpanded, onKeyDown: _this.toggleExpanded },
+                    React.createElement("p", { className: 'dropdown-font-family' }, activeFontFamily),
+                    React.createElement("p", { className: 'dropdown-icon finished' })),
+                _this.generateFontList()));
+        };
+        var _a = _this.props, apiKey = _a.apiKey, activeFontFamily = _a.activeFontFamily, families = _a.families, categories = _a.categories, scripts = _a.scripts, variants = _a.variants, filter = _a.filter, limit = _a.limit, onChange = _a.onChange;
+        _this.state = {
+            expanded: false,
+            fonts: null
+        };
+        var options = {
+            families: families,
+            categories: categories,
+            scripts: scripts,
+            variants: variants,
+            filter: filter,
+            limit: limit
+        };
+        _this.fontManager = new FontManager_1.default(apiKey, activeFontFamily, options, onChange);
+        return _this;
+    }
+    FontPicker.defaultProps = {
+        activeFontFamily: constants_1.FONT_FAMILY_DEFAULT,
+        families: types_1.OPTIONS_DEFAULTS.families,
+        categories: types_1.OPTIONS_DEFAULTS.categories,
+        scripts: types_1.OPTIONS_DEFAULTS.scripts,
+        variants: types_1.OPTIONS_DEFAULTS.variants,
+        filter: types_1.OPTIONS_DEFAULTS.filter,
+        limit: types_1.OPTIONS_DEFAULTS.limit
+    };
+    return FontPicker;
+}(React.PureComponent));
+exports.default = FontPicker;
+//# sourceMappingURL=FontPicker.js.map

package/dist/cjs/components/font-picker/FontPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FontPicker.js","sourceRoot":"","sources":["../../../../src/components/font-picker/FontPicker.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/font-picker/font-manager/FontManager.d.ts

@@ -0,0 +1,26 @@
+import { FontList, Options } from './types';
+export default class FontManager {
+    private readonly apiKey;
+    private readonly options;
+    private onChange;
+    private fonts;
+    constructor(apiKey: string, defaultFamily: string, { families, categories, scripts, variants, filter, limit }: Options, onChange: (font: string) => void);
+    /**
+     * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
+     * save them to the font map
+     */
+    init(): Promise<FontList>;
+    private getFontList;
+    /**
+     * Add a new font to the font map and download its preview characters
+     */
+    private addFont;
+    /**
+     * Set the specified font as the active font and download it
+     */
+    setActiveFont(fontFamily: string): void;
+    /**
+     * Update the onChange function (executed when changing the active font)
+     */
+    setOnChange(onChange: (font: string) => void): void;
+}

package/dist/cjs/components/font-picker/font-manager/FontManager.js

@@ -0,0 +1,209 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    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) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (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 };
+    }
+};
+var __rest = (this && this.__rest) || function (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;
+};
+var __values = (this && this.__values) || function(o) {
+    var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
+    if (m) return m.call(o);
+    if (o && typeof o.length === "number") return {
+        next: function () {
+            if (o && i >= o.length) o = void 0;
+            return { value: o && o[i++], done: !o };
+        }
+    };
+    throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var types_1 = require("./types");
+var constants_1 = require("./constants");
+var utils_1 = require("./utils");
+var FontManager = /** @class */ (function () {
+    function FontManager(apiKey, defaultFamily, _a, onChange) {
+        if (defaultFamily === void 0) { defaultFamily = constants_1.FONT_FAMILY_DEFAULT; }
+        var _b = _a.families, families = _b === void 0 ? types_1.OPTIONS_DEFAULTS.families : _b, _c = _a.categories, categories = _c === void 0 ? types_1.OPTIONS_DEFAULTS.categories : _c, _d = _a.scripts, scripts = _d === void 0 ? types_1.OPTIONS_DEFAULTS.scripts : _d, _e = _a.variants, variants = _e === void 0 ? types_1.OPTIONS_DEFAULTS.variants : _e, _f = _a.filter, filter = _f === void 0 ? types_1.OPTIONS_DEFAULTS.filter : _f, _g = _a.limit, limit = _g === void 0 ? types_1.OPTIONS_DEFAULTS.limit : _g;
+        this.fonts = new Map();
+        // Save parameters as class variables
+        this.apiKey = apiKey;
+        this.options = {
+            families: families,
+            categories: categories,
+            scripts: scripts,
+            variants: variants,
+            filter: filter,
+            limit: limit
+        };
+        this.onChange = onChange;
+        // Download default font and add it to the empty font list
+        this.addFont(defaultFamily);
+        this.setActiveFont(defaultFamily);
+    }
+    /**
+     * Fetch list of all fonts from Google Fonts API, filter it according to the class parameters and
+     * save them to the font map
+     */
+    FontManager.prototype.init = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var fonts, _loop_1, this_1, fonts_1, fonts_1_1, font, state_1;
+            var e_1, _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0: return [4 /*yield*/, this.getFontList(this.apiKey)];
+                    case 1:
+                        fonts = _b.sent();
+                        _loop_1 = function (font) {
+                            // const font = fonts[i];
+                            // Exit once specified limit of number of fonts is reached
+                            if (this_1.fonts.size >= this_1.options.limit) {
+                                return "break";
+                            }
+                            if (
+                            // Skip default font if it is also contained in the list
+                            !this_1.fonts.has(font.family) &&
+                                // `families` parameter: Only keep fonts whose names are included in the provided array
+                                (this_1.options.families.length === 0 ||
+                                    this_1.options.families.includes(font.family)) &&
+                                // `categories` parameter: only keep fonts in categories from the provided array
+                                (this_1.options.categories.length === 0 ||
+                                    this_1.options.categories.includes(font.category)) &&
+                                // `scripts` parameter: Only keep fonts which are available in all specified scripts
+                                this_1.options.scripts.every(function (script) { return font.scripts.includes(script); }) &&
+                                // `variants` parameter: Only keep fonts which contain all specified variants
+                                this_1.options.variants.every(function (variant) {
+                                    return font.variants.includes(variant);
+                                }) &&
+                                // `filter` parameter: Only keep fonts for which the `filter` function evaluates to `true`
+                                this_1.options.filter(font) === true) {
+                                // Font fulfils all requirements: Add it to font map
+                                this_1.fonts.set(font.family, font);
+                            }
+                        };
+                        this_1 = this;
+                        try {
+                            // Save desired fonts in the font map
+                            for (fonts_1 = __values(fonts), fonts_1_1 = fonts_1.next(); !fonts_1_1.done; fonts_1_1 = fonts_1.next()) {
+                                font = fonts_1_1.value;
+                                state_1 = _loop_1(font);
+                                if (state_1 === "break")
+                                    break;
+                            }
+                        }
+                        catch (e_1_1) { e_1 = { error: e_1_1 }; }
+                        finally {
+                            try {
+                                if (fonts_1_1 && !fonts_1_1.done && (_a = fonts_1.return)) _a.call(fonts_1);
+                            }
+                            finally { if (e_1) throw e_1.error; }
+                        }
+                        return [2 /*return*/, this.fonts];
+                }
+            });
+        });
+    };
+    FontManager.prototype.getFontList = function (apiKey) {
+        return __awaiter(this, void 0, void 0, function () {
+            var url, response, fontsOriginal;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        url = new URL(constants_1.LIST_BASE_URL);
+                        url.searchParams.append('sort', 'popularity');
+                        url.searchParams.append('key', apiKey);
+                        return [4 /*yield*/, (0, utils_1.get)(url.href)];
+                    case 1:
+                        response = _a.sent();
+                        fontsOriginal = JSON.parse(response).items;
+                        return [2 /*return*/, fontsOriginal.map(function (fontOriginal) {
+                                var family = fontOriginal.family, subsets = fontOriginal.subsets, others = __rest(fontOriginal, ["family", "subsets"]);
+                                return __assign(__assign({}, others), { family: family, id: (0, utils_1.getFontId)(family), scripts: subsets });
+                            })];
+                }
+            });
+        });
+    };
+    /**
+     * Add a new font to the font map and download its preview characters
+     */
+    FontManager.prototype.addFont = function (fontFamily) {
+        var font = {
+            family: fontFamily,
+            id: (0, utils_1.getFontId)(fontFamily),
+            variants: [],
+            category: 'display',
+            scripts: []
+        };
+        this.fonts.set(fontFamily, font);
+    };
+    /**
+     * Set the specified font as the active font and download it
+     */
+    FontManager.prototype.setActiveFont = function (fontFamily) {
+        var runOnChange = fontFamily !== 'Font not found';
+        if (runOnChange) {
+            this.onChange(fontFamily);
+        }
+    };
+    /**
+     * Update the onChange function (executed when changing the active font)
+     */
+    FontManager.prototype.setOnChange = function (onChange) {
+        this.onChange = onChange;
+    };
+    return FontManager;
+}());
+exports.default = FontManager;
+//# sourceMappingURL=FontManager.js.map