@ui5/webcomponents-base 0.0.0-39bd3067f → 0.0.0-4034de059

package/dist/UI5ElementMetadata.js

@@ -1,173 +1,246 @@
-import DataType from "./types/DataType.js";
-import isDescendantOf from "./util/isDescendantOf.js";
-import { camelToKebabCase } from "./util/StringHelper.js";
-
+import { camelToKebabCase, kebabToCamelCase } from "./util/StringHelper.js";
+import { getSlottedNodes } from "./util/SlotsHelper.js";
+import { getEffectiveScopingSuffixForTag } from "./CustomElementsScopeUtils.js";
 /**
- *
  * @class
  * @public
  */
 class UI5ElementMetadata {
-	constructor(metadata) {
-		this.metadata = metadata;
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validatePropertyValue(value, propData) {
-		const isMultiple = propData.multiple;
-		if (isMultiple) {
-			return value.map(propValue => validateSingleProperty(propValue, propData));
-		}
-		return validateSingleProperty(value, propData);
-	}
-
-	/**
-	 * Only intended for use by UI5Element.js
-	 * @protected
-	 */
-	static validateSlotValue(value, slotData) {
-		return validateSingleSlot(value, slotData);
-	}
-
-	/**
-	 * Returns the tag of the UI5 Element
-	 * @public
-	 */
-	getTag() {
-		return this.metadata.tag;
-	}
-
-	/**
-	 * Determines whether a property should have an attribute counterpart
-	 * @public
-	 * @param propName
-	 * @returns {boolean}
-	 */
-	hasAttribute(propName) {
-		const propData = this.getProperties()[propName];
-		return propData.type !== Object && !propData.noAttribute;
-	}
-
-	/**
-	 * Returns an array with the properties of the UI5 Element (in camelCase)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getPropertiesList() {
-		return Object.keys(this.getProperties());
-	}
-
-	/**
-	 * Returns an array with the attributes of the UI5 Element (in kebab-case)
-	 * @public
-	 * @returns {string[]}
-	 */
-	getAttributesList() {
-		return this.getPropertiesList().filter(this.hasAttribute, this).map(camelToKebabCase);
-	}
-
-	/**
-	 * Returns an object with key-value pairs of slots and their metadata definitions
-	 * @public
-	 */
-	getSlots() {
-		return this.metadata.slots || {};
-	}
-
-	/**
-	 * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
-	 * @returns {boolean}
-	 */
-	canSlotText() {
-		const defaultSlot = this.getSlots().default;
-		return defaultSlot && defaultSlot.type === Node;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots
-	 * @public
-	 */
-	hasSlots() {
-		return !!Object.entries(this.getSlots()).length;
-	}
-
-	/**
-	 * Determines whether this UI5 Element supports any slots with "individualSlots: true"
-	 * @public
-	 */
-	hasIndividualSlots() {
-		return this.slotsAreManaged() && Object.entries(this.getSlots()).some(([_slotName, slotData]) => slotData.individualSlots);
-	}
-
-	/**
-	 * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed
-	 * @public
-	 */
-	slotsAreManaged() {
-		return !!this.metadata.managedSlots;
-	}
-
-	/**
-	 * Returns an object with key-value pairs of properties and their metadata definitions
-	 * @public
-	 */
-	getProperties() {
-		return this.metadata.properties || {};
-	}
-
-	/**
-	 * Returns an object with key-value pairs of events and their metadata definitions
-	 * @public
-	 */
-	getEvents() {
-		return this.metadata.events || {};
-	}
+    constructor(metadata) {
+        this.metadata = metadata;
+    }
+    getInitialState() {
+        if (Object.prototype.hasOwnProperty.call(this, "_initialState")) {
+            return this._initialState;
+        }
+        const initialState = {};
+        const slotsAreManaged = this.slotsAreManaged();
+        // Initialize slots
+        if (slotsAreManaged) {
+            const slots = this.getSlots();
+            for (const [slotName, slotData] of Object.entries(slots)) { // eslint-disable-line
+                const propertyName = slotData.propertyName || slotName;
+                initialState[propertyName] = [];
+                initialState[kebabToCamelCase(propertyName)] = initialState[propertyName];
+            }
+        }
+        this._initialState = initialState;
+        return initialState;
+    }
+    /**
+     * Validates the slot's value and returns it if correct
+     * or throws an exception if not.
+     * **Note:** Only intended for use by UI5Element.js
+     * @public
+     */
+    static validateSlotValue(value, slotData) {
+        return validateSingleSlot(value, slotData);
+    }
+    /**
+     * Returns the tag of the UI5 Element without the scope
+     * @public
+     */
+    getPureTag() {
+        return this.metadata.tag || "";
+    }
+    /**
+     * Returns the tag of the UI5 Element
+     * @public
+     */
+    getTag() {
+        const pureTag = this.metadata.tag;
+        if (!pureTag) {
+            return "";
+        }
+        const suffix = getEffectiveScopingSuffixForTag(pureTag);
+        if (!suffix) {
+            return pureTag;
+        }
+        return `${pureTag}-${suffix}`;
+    }
+    /**
+     * Determines whether a property should have an attribute counterpart
+     * @public
+     * @param propName
+     */
+    hasAttribute(propName) {
+        const propData = this.getProperties()[propName];
+        return propData.type !== Object && propData.type !== Array && !propData.noAttribute;
+    }
+    /**
+     * Returns an array with the properties of the UI5 Element (in camelCase)
+     * @public
+     */
+    getPropertiesList() {
+        return Object.keys(this.getProperties());
+    }
+    /**
+     * Returns an array with the attributes of the UI5 Element (in kebab-case)
+     * @public
+     */
+    getAttributesList() {
+        return this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase);
+    }
+    /**
+     * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text
+     */
+    canSlotText() {
+        return (this.getSlots().default)?.type === Node;
+    }
+    /**
+     * Determines whether this UI5 Element supports any slots
+     * @public
+     */
+    hasSlots() {
+        return !!Object.entries(this.getSlots()).length;
+    }
+    /**
+     * Determines whether this UI5 Element supports any slots with "individualSlots: true"
+     * @public
+     */
+    hasIndividualSlots() {
+        return this.slotsAreManaged() && Object.values(this.getSlots()).some(slotData => slotData.individualSlots);
+    }
+    /**
+     * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed
+     * @public
+     */
+    slotsAreManaged() {
+        return !!this.metadata.managedSlots;
+    }
+    /**
+     * Determines whether this control supports F6 fast navigation
+     * @public
+     */
+    supportsF6FastNavigation() {
+        return !!this.metadata.fastNavigation;
+    }
+    /**
+     * Returns an object with key-value pairs of properties and their metadata definitions
+     * @public
+     */
+    getProperties() {
+        if (!this.metadata.properties) {
+            this.metadata.properties = {};
+        }
+        return this.metadata.properties;
+    }
+    /**
+     * Returns an object with key-value pairs of events and their metadata definitions
+     * @public
+     */
+    getEvents() {
+        if (!this.metadata.events) {
+            this.metadata.events = {};
+        }
+        return this.metadata.events;
+    }
+    /**
+     * Returns an object with key-value pairs of slots and their metadata definitions
+     * @public
+     */
+    getSlots() {
+        if (!this.metadata.slots) {
+            this.metadata.slots = {};
+        }
+        return this.metadata.slots;
+    }
+    /**
+     * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)
+     */
+    isLanguageAware() {
+        return !!this.metadata.languageAware;
+    }
+    /**
+     * Determines whether this UI5 Element has any theme dependant carachteristics.
+     */
+    isThemeAware() {
+        return !!this.metadata.themeAware;
+    }
+    /**
+     * Determines whether this UI5 Element needs CLDR assets to be fetched to work correctly
+     */
+    needsCLDR() {
+        return !!this.metadata.cldr;
+    }
+    getShadowRootOptions() {
+        return this.metadata.shadowRootOptions || {};
+    }
+    /**
+     * Determines whether this UI5 Element has any theme dependant carachteristics.
+     */
+    isFormAssociated() {
+        return !!this.metadata.formAssociated;
+    }
+    /**
+     * Matches a changed entity (property/slot) with the given name against the "invalidateOnChildChange" configuration
+     * and determines whether this should cause and invalidation
+     *
+     * @param slotName the name of the slot in which a child was changed
+     * @param type the type of change in the child: "property" or "slot"
+     * @param name the name of the property/slot that changed
+     */
+    shouldInvalidateOnChildChange(slotName, type, name) {
+        const config = this.getSlots()[slotName].invalidateOnChildChange;
+        // invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component
+        if (config === undefined) {
+            return false;
+        }
+        // The simple format was used: invalidateOnChildChange: true/false;
+        if (typeof config === "boolean") {
+            return config;
+        }
+        // The complex format was used: invalidateOnChildChange: { properties, slots }
+        if (typeof config === "object") {
+            // A property was changed
+            if (type === "property") {
+                // The config object does not have a properties field
+                if (config.properties === undefined) {
+                    return false;
+                }
+                // The config object has the short format: properties: true/false
+                if (typeof config.properties === "boolean") {
+                    return config.properties;
+                }
+                // The config object has the complex format: properties: [...]
+                if (Array.isArray(config.properties)) {
+                    return config.properties.includes(name);
+                }
+                throw new Error("Wrong format for invalidateOnChildChange.properties: boolean or array is expected");
+            }
+            // A slot was changed
+            if (type === "slot") {
+                // The config object does not have a slots field
+                if (config.slots === undefined) {
+                    return false;
+                }
+                // The config object has the short format: slots: true/false
+                if (typeof config.slots === "boolean") {
+                    return config.slots;
+                }
+                // The config object has the complex format: slots: [...]
+                if (Array.isArray(config.slots)) {
+                    return config.slots.includes(name);
+                }
+                throw new Error("Wrong format for invalidateOnChildChange.slots: boolean or array is expected");
+            }
+        }
+        throw new Error("Wrong format for invalidateOnChildChange: boolean or object is expected");
+    }
+    getI18n() {
+        if (!this.metadata.i18n) {
+            this.metadata.i18n = {};
+        }
+        return this.metadata.i18n;
+    }
 }
-
-const validateSingleProperty = (value, propData) => {
-	const propertyType = propData.type;
-
-	if (propertyType === Boolean) {
-		return typeof value === "boolean" ? value : false;
-	}
-	if (propertyType === String) {
-		return (typeof value === "string" || typeof value === "undefined" || value === null) ? value : value.toString();
-	}
-	if (propertyType === Object) {
-		return typeof value === "object" ? value : propData.defaultValue;
-	}
-	if (isDescendantOf(propertyType, DataType)) {
-		return propertyType.isValid(value) ? value : propData.defaultValue;
-	}
-};
-
 const validateSingleSlot = (value, slotData) => {
-	if (value === null) {
-		return value;
-	}
-
-	const getSlottedNodes = el => {
-		const isTag = el instanceof HTMLElement;
-		const isSlot = isTag && el.localName === "slot";
-
-		if (isSlot) {
-			return el.assignedNodes({ flatten: true }).filter(item => item instanceof HTMLElement);
-		}
-
-		return [el];
-	};
-
-	const slottedNodes = getSlottedNodes(value);
-	slottedNodes.forEach(el => {
-		if (!(el instanceof slotData.type)) {
-			throw new Error(`${el} is not of type ${slotData.type}`);
-		}
-	});
-
-	return value;
+    value && getSlottedNodes(value).forEach(el => {
+        if (!(el instanceof slotData.type)) {
+            throw new Error(`The element is not of type ${slotData.type.toString()}`);
+        }
+    });
+    return value;
 };
-
 export default UI5ElementMetadata;
+//# sourceMappingURL=UI5ElementMetadata.js.map

package/dist/UI5ElementMetadata.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UI5ElementMetadata.js","sourceRoot":"","sources":["../src/UI5ElementMetadata.ts"],"names":[],"mappings":"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","sourcesContent":["import { camelToKebabCase, kebabToCamelCase } from \"./util/StringHelper.js\";\nimport { getSlottedNodes } from \"./util/SlotsHelper.js\";\nimport { getEffectiveScopingSuffixForTag } from \"./CustomElementsScopeUtils.js\";\nimport type UI5Element from \"./UI5Element.js\";\n\ntype SlotInvalidation = {\n\tproperties: boolean | Array<string>,\n\tslots: boolean | Array<string>,\n}\n\ntype Slot = {\n\ttype: typeof Node | typeof HTMLElement,\n\tdefault?: boolean,\n\tpropertyName?: string,\n\tindividualSlots?: boolean,\n\tinvalidateOnChildChange?: boolean | SlotInvalidation,\n};\n\ntype SlotValue = Node;\n\ntype Property = {\n\ttype?: BooleanConstructor | StringConstructor | ObjectConstructor | NumberConstructor | ArrayConstructor,\n\tnoAttribute?: boolean,\n\tconverter?: {\n\t\tfromAttribute(value: string | null, type: unknown): PropertyValue,\n\t\ttoAttribute(value: unknown, type: unknown): string | null,\n\t}\n}\n\ntype PropertyValue = boolean | number | string | object | undefined | null;\n\ntype EventData = Record<string, { detail?: Record<string, object>, cancelable?: boolean, bubbles?: boolean }>;\n\ntype I18nBundleAccessorValue = {\n\tbundleName: string,\n\ttarget: typeof UI5Element\n};\n\ntype I18nBundleAccessors = Record<string, I18nBundleAccessorValue>;\n\ntype Metadata = {\n\ttag?: string,\n\tmanagedSlots?: boolean,\n\tproperties?: Record<string, Property>,\n\tslots?: Record<string, Slot>,\n\tevents?: EventData,\n\tfastNavigation?: boolean,\n\tthemeAware?: boolean,\n\tlanguageAware?: boolean,\n\tcldr?: boolean,\n\tformAssociated?: boolean,\n\tshadowRootOptions?: Partial<ShadowRootInit>\n\tfeatures?: Array<string>\n\ti18n?: I18nBundleAccessors\n};\n\ntype State = Record<string, PropertyValue | Array<SlotValue>>;\n\n/**\n * @class\n * @public\n */\nclass UI5ElementMetadata {\n\tmetadata: Metadata;\n\t_initialState: State | undefined;\n\n\tconstructor(metadata: Metadata) {\n\t\tthis.metadata = metadata;\n\t}\n\n\tgetInitialState() {\n\t\tif (Object.prototype.hasOwnProperty.call(this, \"_initialState\")) {\n\t\t\treturn this._initialState!;\n\t\t}\n\t\tconst initialState: State = {};\n\t\tconst slotsAreManaged = this.slotsAreManaged();\n\n\t\t// Initialize slots\n\t\tif (slotsAreManaged) {\n\t\t\tconst slots = this.getSlots();\n\t\t\tfor (const [slotName, slotData] of Object.entries<Slot>(slots)) { // eslint-disable-line\n\t\t\t\tconst propertyName = slotData.propertyName || slotName;\n\t\t\t\tinitialState[propertyName] = [];\n\t\t\t\tinitialState[kebabToCamelCase(propertyName)] = initialState[propertyName];\n\t\t\t}\n\t\t}\n\n\t\tthis._initialState = initialState;\n\t\treturn initialState;\n\t}\n\n\t/**\n\t * Validates the slot's value and returns it if correct\n\t * or throws an exception if not.\n\t * **Note:** Only intended for use by UI5Element.js\n\t * @public\n\t */\n\tstatic validateSlotValue(value: Node, slotData: Slot): Node {\n\t\treturn validateSingleSlot(value, slotData);\n\t}\n\n\t/**\n\t * Returns the tag of the UI5 Element without the scope\n\t * @public\n\t */\n\tgetPureTag(): string {\n\t\treturn this.metadata.tag || \"\";\n\t}\n\n\t/**\n\t * Returns the tag of the UI5 Element\n\t * @public\n\t */\n\tgetTag(): string {\n\t\tconst pureTag = this.metadata.tag;\n\n\t\tif (!pureTag) {\n\t\t\treturn \"\";\n\t\t}\n\n\t\tconst suffix = getEffectiveScopingSuffixForTag(pureTag);\n\t\tif (!suffix) {\n\t\t\treturn pureTag;\n\t\t}\n\n\t\treturn `${pureTag}-${suffix}`;\n\t}\n\n\t/**\n\t * Determines whether a property should have an attribute counterpart\n\t * @public\n\t * @param propName\n\t */\n\thasAttribute(propName: string): boolean {\n\t\tconst propData = this.getProperties()[propName];\n\t\treturn propData.type !== Object && propData.type !== Array && !propData.noAttribute;\n\t}\n\n\t/**\n\t * Returns an array with the properties of the UI5 Element (in camelCase)\n\t * @public\n\t */\n\tgetPropertiesList(): Array<string> {\n\t\treturn Object.keys(this.getProperties());\n\t}\n\n\t/**\n\t * Returns an array with the attributes of the UI5 Element (in kebab-case)\n\t * @public\n\t */\n\tgetAttributesList(): Array<string> {\n\t\treturn this.getPropertiesList().filter(this.hasAttribute.bind(this)).map(camelToKebabCase);\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element has a default slot of type Node, therefore can slot text\n\t */\n\tcanSlotText() {\n\t\treturn (this.getSlots().default)?.type === Node;\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element supports any slots\n\t * @public\n\t */\n\thasSlots(): boolean {\n\t\treturn !!Object.entries(this.getSlots()).length;\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element supports any slots with \"individualSlots: true\"\n\t * @public\n\t */\n\thasIndividualSlots(): boolean {\n\t\treturn this.slotsAreManaged() && Object.values(this.getSlots()).some(slotData => slotData.individualSlots);\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element needs to invalidate if children are added/removed/changed\n\t * @public\n\t */\n\tslotsAreManaged(): boolean {\n\t\treturn !!this.metadata.managedSlots;\n\t}\n\n\t/**\n\t * Determines whether this control supports F6 fast navigation\n\t * @public\n\t */\n\tsupportsF6FastNavigation(): boolean {\n\t\treturn !!this.metadata.fastNavigation;\n\t}\n\n\t/**\n\t * Returns an object with key-value pairs of properties and their metadata definitions\n\t * @public\n\t */\n\tgetProperties(): Record<string, Property> {\n\t\tif (!this.metadata.properties) {\n\t\t\tthis.metadata.properties = {};\n\t\t}\n\t\treturn this.metadata.properties;\n\t}\n\n\t/**\n\t * Returns an object with key-value pairs of events and their metadata definitions\n\t * @public\n\t */\n\tgetEvents(): EventData {\n\t\tif (!this.metadata.events) {\n\t\t\tthis.metadata.events = {};\n\t\t}\n\t\treturn this.metadata.events;\n\t}\n\n\t/**\n\t * Returns an object with key-value pairs of slots and their metadata definitions\n\t * @public\n\t */\n\t getSlots(): Record<string, Slot> {\n\t\tif (!this.metadata.slots) {\n\t\t\tthis.metadata.slots = {};\n\t\t}\n\t\treturn this.metadata.slots;\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element has any translatable texts (needs to be invalidated upon language change)\n\t */\n\tisLanguageAware(): boolean {\n\t\treturn !!this.metadata.languageAware;\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element has any theme dependant carachteristics.\n\t */\n\t isThemeAware(): boolean {\n\t\treturn !!this.metadata.themeAware;\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element needs CLDR assets to be fetched to work correctly\n\t */\n\tneedsCLDR(): boolean {\n\t\treturn !!this.metadata.cldr;\n\t}\n\n\tgetShadowRootOptions(): Partial<ShadowRootInit> {\n\t\treturn this.metadata.shadowRootOptions || {};\n\t}\n\n\t/**\n\t * Determines whether this UI5 Element has any theme dependant carachteristics.\n\t */\n\t isFormAssociated(): boolean {\n\t\treturn !!this.metadata.formAssociated;\n\t}\n\n\t/**\n\t * Matches a changed entity (property/slot) with the given name against the \"invalidateOnChildChange\" configuration\n\t * and determines whether this should cause and invalidation\n\t *\n\t * @param slotName the name of the slot in which a child was changed\n\t * @param type the type of change in the child: \"property\" or \"slot\"\n\t * @param name the name of the property/slot that changed\n\t */\n\tshouldInvalidateOnChildChange(slotName: string, type: \"property\" | \"slot\", name: string): boolean {\n\t\tconst config = this.getSlots()[slotName].invalidateOnChildChange;\n\n\t\t// invalidateOnChildChange was not set in the slot metadata - by default child changes do not affect the component\n\t\tif (config === undefined) {\n\t\t\treturn false;\n\t\t}\n\n\t\t// The simple format was used: invalidateOnChildChange: true/false;\n\t\tif (typeof config === \"boolean\") {\n\t\t\treturn config;\n\t\t}\n\n\t\t// The complex format was used: invalidateOnChildChange: { properties, slots }\n\t\tif (typeof config === \"object\") {\n\t\t\t// A property was changed\n\t\t\tif (type === \"property\") {\n\t\t\t\t// The config object does not have a properties field\n\t\t\t\tif (config.properties === undefined) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t// The config object has the short format: properties: true/false\n\t\t\t\tif (typeof config.properties === \"boolean\") {\n\t\t\t\t\treturn config.properties;\n\t\t\t\t}\n\n\t\t\t\t// The config object has the complex format: properties: [...]\n\t\t\t\tif (Array.isArray(config.properties)) {\n\t\t\t\t\treturn config.properties.includes(name);\n\t\t\t\t}\n\n\t\t\t\tthrow new Error(\"Wrong format for invalidateOnChildChange.properties: boolean or array is expected\");\n\t\t\t}\n\n\t\t\t// A slot was changed\n\t\t\tif (type === \"slot\") {\n\t\t\t\t// The config object does not have a slots field\n\t\t\t\tif (config.slots === undefined) {\n\t\t\t\t\treturn false;\n\t\t\t\t}\n\n\t\t\t\t// The config object has the short format: slots: true/false\n\t\t\t\tif (typeof config.slots === \"boolean\") {\n\t\t\t\t\treturn config.slots;\n\t\t\t\t}\n\n\t\t\t\t// The config object has the complex format: slots: [...]\n\t\t\t\tif (Array.isArray(config.slots)) {\n\t\t\t\t\treturn config.slots.includes(name);\n\t\t\t\t}\n\n\t\t\t\tthrow new Error(\"Wrong format for invalidateOnChildChange.slots: boolean or array is expected\");\n\t\t\t}\n\t\t}\n\n\t\tthrow new Error(\"Wrong format for invalidateOnChildChange: boolean or object is expected\");\n\t}\n\n\tgetI18n(): I18nBundleAccessors {\n\t\tif (!this.metadata.i18n) {\n\t\t\tthis.metadata.i18n = {};\n\t\t}\n\t\treturn this.metadata.i18n;\n\t}\n}\n\nconst validateSingleSlot = (value: Node, slotData: Slot) => {\n\tvalue && getSlottedNodes(value).forEach(el => {\n\t\tif (!(el instanceof slotData.type)) {\n\t\t\tthrow new Error(`The element is not of type ${slotData.type.toString()}`);\n\t\t}\n\t});\n\n\treturn value;\n};\n\nexport default UI5ElementMetadata;\nexport type {\n\tProperty,\n\tPropertyValue,\n\tSlot,\n\tSlotValue,\n\tEventData,\n\tState,\n\tMetadata,\n};\n"]}

package/dist/animations/AnimationQueue.d.ts

@@ -0,0 +1,8 @@
+type TaskType = () => Promise<void>;
+declare class AnimationQueue {
+    static get tasks(): WeakMap<HTMLElement, TaskType[]>;
+    static enqueue(element: HTMLElement, task: TaskType): void;
+    static run(element: HTMLElement, task: TaskType): Promise<void>;
+    static push(element: HTMLElement, task: TaskType): void;
+}
+export default AnimationQueue;

package/dist/animations/AnimationQueue.js

@@ -1,42 +1,35 @@
 const tasks = new WeakMap();
-
 class AnimationQueue {
-	static get tasks() {
-		return tasks;
-	}
-
-	static enqueue(element, task) {
-		if (!tasks.has(element)) {
-			tasks.set(element, []);
-		}
-
-		tasks.get(element).push(task);
-	}
-
-	static run(element, task) {
-		if (!tasks.has(element)) {
-			tasks.set(element, []);
-		}
-
-		return task().then(() => {
-			const elementTasks = tasks.get(element);
-
-			if (elementTasks.length > 0) {
-				return AnimationQueue.run(element, elementTasks.shift());
-			}
-			tasks.delete(element);
-		});
-	}
-
-	static push(element, task) {
-		const elementTasks = tasks.get(element);
-
-		if (elementTasks) {
-			AnimationQueue.enqueue(element, task);
-		} else {
-			AnimationQueue.run(element, task);
-		}
-	}
+    static get tasks() {
+        return tasks;
+    }
+    static enqueue(element, task) {
+        if (!tasks.has(element)) {
+            tasks.set(element, []);
+        }
+        tasks.get(element).push(task);
+    }
+    static run(element, task) {
+        if (!tasks.has(element)) {
+            tasks.set(element, []);
+        }
+        return task().then(() => {
+            const elementTasks = tasks.get(element);
+            if (elementTasks.length > 0) {
+                return AnimationQueue.run(element, elementTasks.shift());
+            }
+            tasks.delete(element);
+        });
+    }
+    static push(element, task) {
+        const elementTasks = tasks.get(element);
+        if (elementTasks) {
+            AnimationQueue.enqueue(element, task);
+        }
+        else {
+            AnimationQueue.run(element, task);
+        }
+    }
 }
-
 export default AnimationQueue;
+//# sourceMappingURL=AnimationQueue.js.map

package/dist/animations/AnimationQueue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AnimationQueue.js","sourceRoot":"","sources":["../../src/animations/AnimationQueue.ts"],"names":[],"mappings":"AACA,MAAM,KAAK,GAAG,IAAI,OAAO,EAAgC,CAAC;AAE1D,MAAM,cAAc;IACnB,MAAM,KAAK,KAAK;QACf,OAAO,KAAK,CAAC;IACd,CAAC;IAED,MAAM,CAAC,OAAO,CAAC,OAAoB,EAAE,IAAc;QAClD,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACxB,CAAC;QAED,KAAK,CAAC,GAAG,CAAC,OAAO,CAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,CAAC,GAAG,CAAC,OAAoB,EAAE,IAAc;QAC9C,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,KAAK,CAAC,GAAG,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;QACxB,CAAC;QAED,OAAO,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE;YACvB,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;YAExC,IAAI,YAAa,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBAC9B,OAAO,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,YAAa,CAAC,KAAK,EAAG,CAAC,CAAC;YAC5D,CAAC;YACD,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;QACvB,CAAC,CAAC,CAAC;IACJ,CAAC;IAED,MAAM,CAAC,IAAI,CAAC,OAAoB,EAAE,IAAc;QAC/C,MAAM,YAAY,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;QAExC,IAAI,YAAY,EAAE,CAAC;YAClB,cAAc,CAAC,OAAO,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACvC,CAAC;aAAM,CAAC;YACP,cAAc,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;CACD;AAED,eAAe,cAAc,CAAC","sourcesContent":["type TaskType =\t() => Promise<void>;\nconst tasks = new WeakMap<HTMLElement, Array<TaskType>>();\n\nclass AnimationQueue {\n\tstatic get tasks() {\n\t\treturn tasks;\n\t}\n\n\tstatic enqueue(element: HTMLElement, task: TaskType) {\n\t\tif (!tasks.has(element)) {\n\t\t\ttasks.set(element, []);\n\t\t}\n\n\t\ttasks.get(element)!.push(task);\n\t}\n\n\tstatic run(element: HTMLElement, task: TaskType): Promise<void> {\n\t\tif (!tasks.has(element)) {\n\t\t\ttasks.set(element, []);\n\t\t}\n\n\t\treturn task().then(() => {\n\t\t\tconst elementTasks = tasks.get(element);\n\n\t\t\tif (elementTasks!.length > 0) {\n\t\t\t\treturn AnimationQueue.run(element, elementTasks!.shift()!);\n\t\t\t}\n\t\t\ttasks.delete(element);\n\t\t});\n\t}\n\n\tstatic push(element: HTMLElement, task: TaskType) {\n\t\tconst elementTasks = tasks.get(element);\n\n\t\tif (elementTasks) {\n\t\t\tAnimationQueue.enqueue(element, task);\n\t\t} else {\n\t\t\tAnimationQueue.run(element, task);\n\t\t}\n\t}\n}\n\nexport default AnimationQueue;\n"]}

package/dist/animations/animate.d.ts

@@ -0,0 +1,14 @@
+type AnimateOptions = {
+    beforeStart?: () => void;
+    duration: number;
+    element: HTMLElement;
+    advance: (p: number) => void;
+};
+declare const animate: (options: AnimateOptions) => {
+    promise: () => Promise<void | Error>;
+    stop: () => () => void;
+};
+declare const duration = 400;
+export { duration };
+export type { AnimateOptions };
+export default animate;

package/dist/animations/animate.js

@@ -1,53 +1,48 @@
 import AnimationQueue from "./AnimationQueue.js";
-import animationConfig from "./config.js";
-
-export default ({
-	beforeStart = animationConfig.identity,
-	duration = animationConfig.defaultDuration,
-	element = animationConfig.element,
-	progress: progressCallback = animationConfig.identity,
-}) => {
-	let start = null;
-	let stopped = false;
-	let animationFrame;
-	let stop;
-	let animate;
-
-	const promise = new Promise((resolve, reject) => {
-		animate = timestamp => {
-			start = start || timestamp;
-
-			const timeElapsed = timestamp - start;
-			const remaining = duration - timeElapsed;
-
-			if (timeElapsed <= duration) {
-				const progress = 1 - remaining / duration; // easing formula (currently linear)
-				progressCallback(progress);
-				animationFrame = !stopped && requestAnimationFrame(animate);
-			} else {
-				progressCallback(1);
-				resolve();
-			}
-		};
-
-		stop = () => {
-			stopped = true;
-			cancelAnimationFrame(animationFrame);
-			reject(new Error("animation stopped"));
-		};
-	}).catch(oReason => oReason);
-
-	AnimationQueue.push(element, () => {
-		beforeStart();
-		requestAnimationFrame(animate);
-
-		return new Promise(resolve => {
-			promise.then(() => resolve());
-		});
-	});
-
-	return {
-		promise: () => promise,
-		stop: () => stop,
-	};
+const animate = (options) => {
+    let start = null;
+    let stopped = false;
+    let animationFrame;
+    let stop;
+    let advanceAnimation;
+    const promise = new Promise((resolve, reject) => {
+        advanceAnimation = timestamp => {
+            start = start || timestamp;
+            const timeElapsed = timestamp - start;
+            const remaining = options.duration - timeElapsed;
+            if (timeElapsed <= options.duration) {
+                const currentAdvance = 1 - remaining / options.duration; // easing formula (currently linear)
+                options.advance(currentAdvance);
+                if (!stopped) {
+                    animationFrame = requestAnimationFrame(advanceAnimation);
+                }
+            }
+            else {
+                options.advance(1);
+                resolve();
+            }
+        };
+        stop = () => {
+            stopped = true;
+            cancelAnimationFrame(animationFrame);
+            reject(new Error("animation stopped"));
+        };
+    }).catch((reason) => reason);
+    AnimationQueue.push(options.element, () => {
+        if (typeof options.beforeStart === "function") {
+            options.beforeStart();
+        }
+        requestAnimationFrame(advanceAnimation);
+        return new Promise(resolve => {
+            promise.then(() => resolve());
+        });
+    });
+    return {
+        promise: () => promise,
+        stop: () => stop,
+    };
 };
+const duration = 400;
+export { duration };
+export default animate;
+//# sourceMappingURL=animate.js.map