@blackbyte/sugar 1.0.0-beta.1

package/dist/js/dom/style/getKeyframesDeclarations.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @name            getKeyframesDeclarations
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get all the keyframes declarations from the passed rules
+ *
+ * @param       {string}            animationName       CSS animationName to search KeyFrameRule declarations for
+ * @param       {array}             rules               Array of CSSRules to search
+ * @return      {CSSKeyframeRule}                       Array of matching KeyFrameRules
+ *
+ * @todo      tests
+ *
+ * @snippet         getKeyframesDeclarations($1)
+ *
+ * @example  	js
+ * import { getKeyframesDeclarations } from '@blackbyte/sugar/dom';
+ * getKeyframesDeclarations('myCoolAnimation', [myCoolCssRules]);
+ *
+ * @see             https://github.com/marionebl/jogwheel/blob/main/source/library/get-keyframe-declarations.js
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getKeyframesDeclarations(animationName: any, rules: any): CSSKeyframeRule[];

package/dist/js/dom/style/getKeyframesDeclarations.js

@@ -0,0 +1,36 @@
+import __getCssDeclarations from './getCssDeclarations.js';
+/**
+ * @name            getKeyframesDeclarations
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get all the keyframes declarations from the passed rules
+ *
+ * @param       {string}            animationName       CSS animationName to search KeyFrameRule declarations for
+ * @param       {array}             rules               Array of CSSRules to search
+ * @return      {CSSKeyframeRule}                       Array of matching KeyFrameRules
+ *
+ * @todo      tests
+ *
+ * @snippet         getKeyframesDeclarations($1)
+ *
+ * @example  	js
+ * import { getKeyframesDeclarations } from '@blackbyte/sugar/dom';
+ * getKeyframesDeclarations('myCoolAnimation', [myCoolCssRules]);
+ *
+ * @see             https://github.com/marionebl/jogwheel/blob/main/source/library/get-keyframe-declarations.js
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getKeyframesDeclarations(animationName, rules) {
+    const keyframesNames = [];
+    return __getCssDeclarations('keyframes', rules, (rule) => {
+        if (keyframesNames.includes(rule.name))
+            return false;
+        keyframesNames.push(rule.name);
+        return rule.name === animationName;
+    });
+}
+//# sourceMappingURL=getKeyframesDeclarations.js.map

package/dist/js/dom/style/getKeyframesDeclarations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getKeyframesDeclarations.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getKeyframesDeclarations.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAE3D;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,wBAAwB,CAC9C,aAAa,EACb,KAAK;IAEL,MAAM,cAAc,GAAa,EAAE,CAAC;IACpC,OAAO,oBAAoB,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,IAAI,EAAE,EAAE;QACvD,IAAI,cAAc,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;YAAE,OAAO,KAAK,CAAC;QACrD,cAAc,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAC/B,OAAO,IAAI,CAAC,IAAI,KAAK,aAAa,CAAC;IACrC,CAAC,CAAC,CAAC;AACL,CAAC"}

package/dist/js/dom/style/getKeyframesFromStylesheets.d.ts

@@ -0,0 +1,13 @@
+import { TTransformedKeyframeDeclaration } from './transformKeyframesDeclarations.js';
+export type TKeyframe = {
+    delay?: number;
+    direction: 'normal' | 'reverse' | 'alternate' | 'alternate-reverse' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+    duration: number;
+    fillMode: 'none' | 'forwards' | 'backwards' | 'both' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+    iterationCount: 'infinite' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset' | number;
+    keyframes: TTransformedKeyframeDeclaration[];
+    name: string;
+    playState: 'paused' | 'running' | 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
+    timingFunction: string;
+};
+export default function getKeyframesFromStylesheets(animationName: any, styleSheets: any): TKeyframe[];

package/dist/js/dom/style/getKeyframesFromStylesheets.js

@@ -0,0 +1,23 @@
+import __getCssRulesFromStylesheet from './getCssRulesFromStylesheet.js';
+import __getKeyframesDeclarations from './getKeyframesDeclarations.js';
+import __transformKeyframeDeclaration from './transformKeyframesDeclarations.js';
+export default function getKeyframesFromStylesheets(animationName, styleSheets) {
+    // Collect CSSRules present in the document
+    const CSSRules = [].slice
+        .call(styleSheets)
+        .reduce((results, styleSheet) => [
+        ...results,
+        ...__getCssRulesFromStylesheet(styleSheet),
+    ], []);
+    // Filter CSSRules for KeyFrameRules
+    // @ts-ignore
+    return (__getKeyframesDeclarations(animationName, CSSRules)
+        // Transform KeyFrameRules to web animation compatible format
+        .map(__transformKeyframeDeclaration)
+        // Flatten mulitdimensional array of transformed keyframes
+        .reduce((results, declaration) => {
+        const amend = Array.isArray(declaration) ? declaration : [declaration];
+        return [...results, ...amend];
+    }, []));
+}
+//# sourceMappingURL=getKeyframesFromStylesheets.js.map

package/dist/js/dom/style/getKeyframesFromStylesheets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getKeyframesFromStylesheets.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getKeyframesFromStylesheets.ts"],"names":[],"mappings":"AAAA,OAAO,2BAA2B,MAAM,gCAAgC,CAAC;AAEzE,OAAO,0BAA0B,MAAM,+BAA+B,CAAC;AACvE,OAAO,8BAEN,MAAM,qCAAqC,CAAC;AA8C7C,MAAM,CAAC,OAAO,UAAU,2BAA2B,CACjD,aAAa,EACb,WAAW;IAEX,2CAA2C;IAC3C,MAAM,QAAQ,GAAG,EAAE,CAAC,KAAK;SACtB,IAAI,CAAC,WAAW,CAAC;SACjB,MAAM,CACL,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC;QACvB,GAAG,OAAO;QACV,GAAG,2BAA2B,CAAC,UAAU,CAAC;KAC3C,EACD,EAAE,CACH,CAAC;IAEJ,oCAAoC;IACpC,aAAa;IACb,OAAO,CACL,0BAA0B,CAAC,aAAa,EAAE,QAAQ,CAAC;QACjD,6DAA6D;SAC5D,GAAG,CAAC,8BAA8B,CAAC;QACpC,0DAA0D;SACzD,MAAM,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,EAAE;QAC/B,MAAM,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC;QACvE,OAAO,CAAC,GAAG,OAAO,EAAE,GAAG,KAAK,CAAC,CAAC;IAChC,CAAC,EAAE,EAAE,CAAC,CACT,CAAC;AACJ,CAAC"}

package/dist/js/dom/style/getRotateProperties.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @name        getRotateProperties
+ * @namespace   js.dom.style
+ * @type        Function
+ * @platform    js
+ * @status      stable
+ *
+ * Get a rotate properties of an HTMLElement
+ *
+ * @param 		{HTMLElement} 					$elm  		  The element to get the properties from
+ * @return 		{Object|undefined} 									The translate x,y and z properties
+ *
+ * @todo      tests
+ *
+ * @snippet         getRotateProperties($1)
+ *
+ * @example  	js
+ * import { getRotateProperties } from '@blackbyte/sugar/dom'
+ * const props = getRotateProperties(myCoolHTMLElement);
+ * // output format
+ * // {
+ * // 	x : 100,
+ * // 	y : 0,
+ * // 	z : 0
+ * // }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getRotateProperties($elm: HTMLElement): {
+    x: number;
+    y: number;
+    z: number;
+} | undefined;

package/dist/js/dom/style/getRotateProperties.js

@@ -0,0 +1,55 @@
+import * as rematrix from 'rematrix';
+/**
+ * @name        getRotateProperties
+ * @namespace   js.dom.style
+ * @type        Function
+ * @platform    js
+ * @status      stable
+ *
+ * Get a rotate properties of an HTMLElement
+ *
+ * @param 		{HTMLElement} 					$elm  		  The element to get the properties from
+ * @return 		{Object|undefined} 									The translate x,y and z properties
+ *
+ * @todo      tests
+ *
+ * @snippet         getRotateProperties($1)
+ *
+ * @example  	js
+ * import { getRotateProperties } from '@blackbyte/sugar/dom'
+ * const props = getRotateProperties(myCoolHTMLElement);
+ * // output format
+ * // {
+ * // 	x : 100,
+ * // 	y : 0,
+ * // 	z : 0
+ * // }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getRotateProperties($elm) {
+    if (!window.getComputedStyle)
+        return;
+    const style = getComputedStyle($elm);
+    const transform = style.transform ||
+        style.webkitTransform ||
+        // @ts-ignore
+        style.mozTransform ||
+        // @ts-ignore
+        style.msTransform;
+    if (!transform)
+        return {
+            x: 0,
+            y: 0,
+            z: 0,
+        };
+    const matrix = rematrix.fromString(transform).toString();
+    var values = matrix.split(','), pi = Math.PI, sinB = parseFloat(values[8]), b = Math.round((Math.asin(sinB) * 180) / pi), cosB = Math.cos((b * pi) / 180), matrixVal10 = parseFloat(values[9]), a = Math.round((Math.asin(-matrixVal10 / cosB) * 180) / pi), matrixVal1 = parseFloat(values[0]), c = Math.round((Math.acos(matrixVal1 / cosB) * 180) / pi) * -1;
+    return {
+        x: a,
+        y: b,
+        z: c,
+    };
+}
+//# sourceMappingURL=getRotateProperties.js.map

package/dist/js/dom/style/getRotateProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getRotateProperties.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getRotateProperties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAErC;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,MAAM,CAAC,OAAO,UAAU,mBAAmB,CAAC,IAAiB;IAO3D,IAAI,CAAC,MAAM,CAAC,gBAAgB;QAAE,OAAO;IACrC,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GACb,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,eAAe;QACrB,aAAa;QACb,KAAK,CAAC,YAAY;QAClB,aAAa;QACb,KAAK,CAAC,WAAW,CAAC;IACpB,IAAI,CAAC,SAAS;QACZ,OAAO;YACL,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;IAEJ,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;IACzD,IAAI,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAC5B,EAAE,GAAG,IAAI,CAAC,EAAE,EACZ,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAC5B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,EAC5C,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,EAC/B,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACnC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,EAC3D,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAClC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEjE,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;KACL,CAAC;AACJ,CAAC"}

package/dist/js/dom/style/getScaleProperty.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @name            getScaleProperty
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get a scale properties of an HTMLElement
+ *
+ * @param 		{HTMLElement} 					$elm  		      The element to get the properties from
+ * @return 		{Number}                                The scale property
+ *
+ * @todo      tests
+ *
+ * @snippet         getScaleProperty($1)
+ *
+ * @example  	js
+ * import { getScaleProperty } from '@blackbyte/sugar/dom'
+ * const props = getScaleProperty(myCoolHTMLElement);
+ * // output format
+ * // 2
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TGetScalePropertyResult = {
+    x: number;
+    y: number;
+    z: number;
+};
+export default function getScaleProperty($elm: HTMLElement): TGetScalePropertyResult | undefined;

package/dist/js/dom/style/getScaleProperty.js

@@ -0,0 +1,22 @@
+import * as rematrix from 'rematrix';
+export default function getScaleProperty($elm) {
+    if (!window.getComputedStyle)
+        return;
+    const style = getComputedStyle($elm);
+    const transform = style.transform ||
+        style.webkitTransform ||
+        // @ts-ignore
+        style.mozTransform ||
+        // @ts-ignore
+        style.msTransform;
+    if (!transform)
+        return;
+    const matrix = rematrix.fromString(transform).toString();
+    var values = matrix.split(','), pi = Math.PI, sinB = parseFloat(values[8]), b = Math.round((Math.asin(sinB) * 180) / pi), cosB = Math.cos((b * pi) / 180), matrixVal10 = parseFloat(values[9]), a = Math.round((Math.asin(-matrixVal10 / cosB) * 180) / pi), matrixVal1 = parseFloat(values[0]), c = Math.round((Math.acos(matrixVal1 / cosB) * 180) / pi);
+    return {
+        x: a,
+        y: b,
+        z: c,
+    };
+}
+//# sourceMappingURL=getScaleProperty.js.map

package/dist/js/dom/style/getScaleProperty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getScaleProperty.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getScaleProperty.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAkCrC,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,IAAiB;IAEjB,IAAI,CAAC,MAAM,CAAC,gBAAgB;QAAE,OAAO;IACrC,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GACb,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,eAAe;QACrB,aAAa;QACb,KAAK,CAAC,YAAY;QAClB,aAAa;QACb,KAAK,CAAC,WAAW,CAAC;IACpB,IAAI,CAAC,SAAS;QAAE,OAAO;IAEvB,MAAM,MAAM,GAAG,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,QAAQ,EAAE,CAAC;IACzD,IAAI,MAAM,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,EAC5B,EAAE,GAAG,IAAI,CAAC,EAAE,EACZ,IAAI,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAC5B,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,EAC5C,IAAI,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,GAAG,GAAG,CAAC,EAC/B,WAAW,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EACnC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,EAC3D,UAAU,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,EAClC,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,GAAG,GAAG,CAAC,GAAG,EAAE,CAAC,CAAC;IAE5D,OAAO;QACL,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;KACL,CAAC;AACJ,CAAC"}

package/dist/js/dom/style/getStyleProperty.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @name            getStyleProperty
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          beta
+ *
+ * Get a style property on the passed element through the computed style.
+ * This function try to store the actual style to not trigger more that 1 redraw
+ * each js execution loop.
+ *
+ * @param 		{HTMLElement} 					elm  		      The element to get style from
+ * @param 		{String} 						    property 	    The css property to get
+ * @return 		{Mixed} 									            The style value
+ *
+ * @todo      tests
+ *
+ * @snippet         getStyleProperty($1, $2)
+ *
+ * @example  	js
+ * import { getStyleProperty } from '@blackbyte/sugar/dom'
+ * const opacity = getStyleProperty(myCoolHTMLElement, 'opacity');
+ *
+ * @see 		https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getStyleProperty(elm: HTMLElement, property: string): any;

package/dist/js/dom/style/getStyleProperty.js

@@ -0,0 +1,43 @@
+import camelize from '../../../shared/string/camelize.js';
+import parse from '../../../shared/string/parse.js';
+/**
+ * @name            getStyleProperty
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          beta
+ *
+ * Get a style property on the passed element through the computed style.
+ * This function try to store the actual style to not trigger more that 1 redraw
+ * each js execution loop.
+ *
+ * @param 		{HTMLElement} 					elm  		      The element to get style from
+ * @param 		{String} 						    property 	    The css property to get
+ * @return 		{Mixed} 									            The style value
+ *
+ * @todo      tests
+ *
+ * @snippet         getStyleProperty($1, $2)
+ *
+ * @example  	js
+ * import { getStyleProperty } from '@blackbyte/sugar/dom'
+ * const opacity = getStyleProperty(myCoolHTMLElement, 'opacity');
+ *
+ * @see 		https://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export default function getStyleProperty(elm, property) {
+    if (!elm)
+        return;
+    const computed = window.getComputedStyle(elm);
+    const prefixes = ['', 'webkit-', 'moz-', 'ms-', 'o-', 'khtml-'];
+    for (let i = 0; i < prefixes.length; i++) {
+        const prefix = prefixes[i];
+        const value = computed[camelize(`${prefix}${property}`)];
+        if (value && value.trim() !== '')
+            return parse(value);
+    }
+    return null;
+}
+//# sourceMappingURL=getStyleProperty.js.map

package/dist/js/dom/style/getStyleProperty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getStyleProperty.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getStyleProperty.ts"],"names":[],"mappings":"AAAA,OAAO,QAAQ,MAAM,oCAAoC,CAAC;AAC1D,OAAO,KAAK,MAAM,iCAAiC,CAAC;AAEpD;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CACtC,GAAgB,EAChB,QAAgB;IAEhB,IAAI,CAAC,GAAG;QAAE,OAAO;IACjB,MAAM,QAAQ,GAAG,MAAM,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IAChE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;QACzC,MAAM,MAAM,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;QAC3B,MAAM,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,GAAG,MAAM,GAAG,QAAQ,EAAE,CAAC,CAAC,CAAC;QACzD,IAAI,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE;YAAE,OAAO,KAAK,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IACD,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/js/dom/style/getTransformProperties.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @name            getTransformProperties
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get a translate properties of an HTMLElement
+ *
+ * @param 		{HTMLElement} 					$elm  		The element to get the properties from
+ * @return 		{Object} 									        The translate x,y and z properties
+ *
+ * @todo      tests
+ *
+ * @snippet         getTransformProperties($1)
+ *
+ * @example  	js
+ * import { getTransformProperties } from '@blackbyte/sugar/dom'
+ * const props = getTransformProperties(myCoolHTMLElement);
+ * // output format
+ * // {
+ * // 	translateX : 100,
+ * // 	translateY : 0,
+ * // 	translateZ : 0,
+ * //   rotateX: 0,
+ * //   rotateY: 0,
+ * //   rotateZ: 0
+ * // }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TGetTransformPropertiesResult = {
+    translateX: number;
+    translateY: number;
+    translateZ: number;
+    rotateX: number;
+    rotateY: number;
+    rotateZ: number;
+};
+declare function getTransformProperties($elm: HTMLElement): TGetTransformPropertiesResult;
+export default getTransformProperties;

package/dist/js/dom/style/getTransformProperties.js

@@ -0,0 +1,16 @@
+import getRotateProperties from './getRotateProperties.js';
+import getTranslateProperties from './getTranslateProperties.js';
+function getTransformProperties($elm) {
+    var _a, _b, _c;
+    const rotates = getRotateProperties($elm), translates = getTranslateProperties($elm);
+    return {
+        translateX: translates.x,
+        translateY: translates.y,
+        translateZ: translates.z,
+        rotateX: (_a = rotates === null || rotates === void 0 ? void 0 : rotates.x) !== null && _a !== void 0 ? _a : 0,
+        rotateY: (_b = rotates === null || rotates === void 0 ? void 0 : rotates.y) !== null && _b !== void 0 ? _b : 0,
+        rotateZ: (_c = rotates === null || rotates === void 0 ? void 0 : rotates.z) !== null && _c !== void 0 ? _c : 0,
+    };
+}
+export default getTransformProperties;
+//# sourceMappingURL=getTransformProperties.js.map

package/dist/js/dom/style/getTransformProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTransformProperties.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getTransformProperties.ts"],"names":[],"mappings":"AAAA,OAAO,mBAAmB,MAAM,0BAA0B,CAAC;AAC3D,OAAO,sBAAsB,MAAM,6BAA6B,CAAC;AA4CjE,SAAS,sBAAsB,CAC7B,IAAiB;;IAEjB,MAAM,OAAO,GAAG,mBAAmB,CAAC,IAAI,CAAC,EACvC,UAAU,GAAG,sBAAsB,CAAC,IAAI,CAAC,CAAC;IAE5C,OAAO;QACL,UAAU,EAAE,UAAU,CAAC,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC,CAAC;QACxB,UAAU,EAAE,UAAU,CAAC,CAAC;QACxB,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,CAAC,mCAAI,CAAC;QACxB,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,CAAC,mCAAI,CAAC;QACxB,OAAO,EAAE,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,CAAC,mCAAI,CAAC;KACzB,CAAC;AACJ,CAAC;AACD,eAAe,sBAAsB,CAAC"}

package/dist/js/dom/style/getTransitionProperties.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @name            getTransitionProperties
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get the css transition properties from an HTMLElement in an object format
+ *
+ * @param 		{HTMLElement} 					elm  		The element to get the properties from
+ * @return 		{Object} 									      The transition properties
+ *
+ * @todo      tests
+ *
+ * @snippet         getTransitionProperties($1)
+ *
+ * @example  	js
+ * import { getTransitionProperties } from '@blackbyte/sugar/dom'
+ * const props = getTransitionProperties(myCoolHTMLElement);
+ * // output format
+ * // {
+ * // 	property : ['all'],
+ * // 	duration : [200],
+ * // 	delay : [0],
+ * // 	timingFunction : ['linear'],
+ * // 	totalDuration : 200
+ * // }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TGetTransitionPropertiesResult = {
+    transitions: TGetTransitionPropertiesObject[];
+    totalDuration: number;
+};
+export type TGetTransitionPropertiesObject = {
+    property: string;
+    duration: number;
+    delay: number;
+    timingFunction: string;
+};
+declare function getTransitionProperties(elm: HTMLElement): TGetTransitionPropertiesResult;
+export default getTransitionProperties;

package/dist/js/dom/style/getTransitionProperties.js

@@ -0,0 +1,46 @@
+import convertTime from '../../../shared/datetime/convertTime.js';
+import getStyleProperty from './getStyleProperty.js';
+function splitIfNeeded(what, separator) {
+    var _a;
+    if ((_a = what.includes) === null || _a === void 0 ? void 0 : _a.call(what, separator)) {
+        return what.split(separator).map((item) => item.trim());
+    }
+    return [what];
+}
+function getTransitionProperties(elm) {
+    // get the transition properties
+    const property = getStyleProperty(elm, 'transition-property');
+    const duration = getStyleProperty(elm, 'transition-duration') || 0;
+    const timingFunction = getStyleProperty(elm, 'transition-timing-function');
+    const delay = getStyleProperty(elm, 'transition-delay');
+    // return the transition object
+    const props = {
+        properties: splitIfNeeded(property, ','),
+        durations: splitIfNeeded(duration, ',').map((value) => convertTime(value, 'ms')),
+        delays: splitIfNeeded(delay, ',').map((value) => convertTime(value, 'ms')),
+        timingFunctions: splitIfNeeded(timingFunction, ','),
+    };
+    const result = {
+        transitions: [],
+        totalDuration: 0,
+    };
+    for (let [i, property] of props.properties) {
+        result.transitions.push({
+            property,
+            duration: props.durations[i],
+            timingFunction: props.timingFunctions[i],
+            delay: props.delays[i],
+        });
+    }
+    let i = 0;
+    const delays = [0].concat(props.delays);
+    [0].concat(props.durations).forEach((val) => {
+        if (val + delays[i] > result.totalDuration) {
+            result.totalDuration = val + delays[i];
+        }
+        i++;
+    });
+    return result;
+}
+export default getTransitionProperties;
+//# sourceMappingURL=getTransitionProperties.js.map

package/dist/js/dom/style/getTransitionProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTransitionProperties.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getTransitionProperties.ts"],"names":[],"mappings":"AAAA,OAAO,WAAW,MAAM,yCAAyC,CAAC;AAClE,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AA8CrD,SAAS,aAAa,CAAC,IAAI,EAAE,SAAS;;IACpC,IAAI,MAAA,IAAI,CAAC,QAAQ,qDAAG,SAAS,CAAC,EAAE,CAAC;QAC/B,OAAO,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;IAC1D,CAAC;IACD,OAAO,CAAC,IAAI,CAAC,CAAC;AAChB,CAAC;AAED,SAAS,uBAAuB,CAC9B,GAAgB;IAEhB,gCAAgC;IAChC,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,EAAE,qBAAqB,CAAC,CAAC;IAC9D,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,EAAE,qBAAqB,CAAC,IAAI,CAAC,CAAC;IACnE,MAAM,cAAc,GAAG,gBAAgB,CAAC,GAAG,EAAE,4BAA4B,CAAC,CAAC;IAC3E,MAAM,KAAK,GAAG,gBAAgB,CAAC,GAAG,EAAE,kBAAkB,CAAC,CAAC;IAExD,+BAA+B;IAC/B,MAAM,KAAK,GAAG;QACZ,UAAU,EAAE,aAAa,CAAC,QAAQ,EAAE,GAAG,CAAC;QACxC,SAAS,EAAE,aAAa,CAAC,QAAQ,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CACpD,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CACzB;QACD,MAAM,EAAE,aAAa,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,WAAW,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;QAC1E,eAAe,EAAE,aAAa,CAAC,cAAc,EAAE,GAAG,CAAC;KACpD,CAAC;IAEF,MAAM,MAAM,GAAmC;QAC7C,WAAW,EAAE,EAAE;QACf,aAAa,EAAE,CAAC;KACjB,CAAC;IAEF,KAAK,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,IAAI,KAAK,CAAC,UAAU,EAAE,CAAC;QAC3C,MAAM,CAAC,WAAW,CAAC,IAAI,CAAC;YACtB,QAAQ;YACR,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC;YAC5B,cAAc,EAAE,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC;YACxC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;SACvB,CAAC,CAAC;IACL,CAAC;IAED,IAAI,CAAC,GAAG,CAAC,CAAC;IACV,MAAM,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,EAAE;QAC1C,IAAI,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,aAAa,EAAE,CAAC;YAC3C,MAAM,CAAC,aAAa,GAAG,GAAG,GAAG,MAAM,CAAC,CAAC,CAAC,CAAC;QACzC,CAAC;QACD,CAAC,EAAE,CAAC;IACN,CAAC,CAAC,CAAC;IACH,OAAO,MAAM,CAAC;AAChB,CAAC;AACD,eAAe,uBAAuB,CAAC"}

package/dist/js/dom/style/getTranslateProperties.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @name            getTranslateProperties
+ * @namespace       js.dom.style
+ * @type            Function
+ * @platform        js
+ * @status          stable
+ *
+ * Get a translate properties of an HTMLElement
+ *
+ * @param 		{HTMLElement} 					$elm  		The element to get the properties from
+ * @return 		{Object} 									        The translate x,y and z properties
+ *
+ * @todo      tests
+ *
+ * @snippet         getTranslateProperties($1)
+ *
+ * @example  	js
+ * import { getTranslateProperties } from '@blackbyte/sugar/dom'
+ * const props = getTranslateProperties(myCoolHTMLElement);
+ * // output format
+ * // {
+ * // 	x : 100,
+ * // 	y : 0,
+ * // 	z : 0
+ * // }
+ *
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TGetTranslatePropertiesResult = {
+    x: number;
+    y: number;
+    z: number;
+};
+export default function getTranslateProperties($elm: HTMLElement): TGetTranslatePropertiesResult;

package/dist/js/dom/style/getTranslateProperties.js

@@ -0,0 +1,29 @@
+import * as rematrix from 'rematrix';
+export default function getTranslateProperties($elm) {
+    if (!window.getComputedStyle)
+        return {
+            x: 0,
+            y: 0,
+            z: 0,
+        };
+    const style = getComputedStyle($elm);
+    const transform = style.transform ||
+        style.webkitTransform ||
+        // @ts-ignore
+        style.mozTransform ||
+        // @ts-ignore
+        style.msTransform;
+    if (!transform)
+        return {
+            x: 0,
+            y: 0,
+            z: 0,
+        };
+    const matrix3d = rematrix.fromString(transform);
+    return {
+        x: matrix3d[12],
+        y: matrix3d[13],
+        z: matrix3d[14],
+    };
+}
+//# sourceMappingURL=getTranslateProperties.js.map

package/dist/js/dom/style/getTranslateProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getTranslateProperties.js","sourceRoot":"","sources":["../../../../src/js/dom/style/getTranslateProperties.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,UAAU,CAAC;AAsCrC,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAC5C,IAAiB;IAEjB,IAAI,CAAC,MAAM,CAAC,gBAAgB;QAC1B,OAAO;YACL,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;IACJ,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,SAAS,GACb,KAAK,CAAC,SAAS;QACf,KAAK,CAAC,eAAe;QACrB,aAAa;QACb,KAAK,CAAC,YAAY;QAClB,aAAa;QACb,KAAK,CAAC,WAAW,CAAC;IACpB,IAAI,CAAC,SAAS;QACZ,OAAO;YACL,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;YACJ,CAAC,EAAE,CAAC;SACL,CAAC;IAEJ,MAAM,QAAQ,GAAG,QAAQ,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC;IAChD,OAAO;QACL,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC;QACf,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC;QACf,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC;KAChB,CAAC;AACJ,CAAC"}

package/dist/js/dom/style/transformKeyframesDeclarations.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @name                transformKeyframesDeclarations
+ * @namespace           js.dom.style
+ * @type                Function
+ * @platform            js
+ * @status              beta
+ *
+ * Transforms KeyFrameRule to array of web animation compatible keyframes
+ *
+ * @param               {Object}              keyFrameRule                KeyFrameRule to transform
+ * @return              {Array}                                           Array of webanimation keyframes
+ *
+ * @snippet         transformKeyframesDeclarations($1)
+ *
+ * @todo      tests
+ *
+ * @example  	js
+ * import { transformKeyframesDeclarations } from '@blackbyte/sugar/dom';
+ *
+ * @see             https://github.com/marionebl/jogwheel/blob/main/source/library/transform-keyframe-declaration.js
+ * @since           1.0.0
+ * @author         Olivier Bossel <olivier.bossel@gmail.com> (https://blackbyte.space)
+ */
+export type TTransformedKeyframeDeclaration = {
+    percentage: number;
+    offset: number;
+    rules: Record<string, any>;
+};
+export default function transformKeyframeDeclaration(keyFrameRule: any): TTransformedKeyframeDeclaration[];

package/dist/js/dom/style/transformKeyframesDeclarations.js

@@ -0,0 +1,28 @@
+import parseKeyframeKey from '../../../shared/css/parse/parseKeyframeKey.js';
+import removeVendorPrefix from '../../../shared/css/rule/removeVendorPrefix.js';
+import camelCase from '../../../shared/string/camelCase.js';
+import getDefinedStyles from './getDefinedStyles.js';
+function normalizePropertyName(propertyName) {
+    return camelCase(removeVendorPrefix(propertyName));
+}
+export default function transformKeyframeDeclaration(keyFrameRule) {
+    // Convert keyFrame.keyText to integers holding percentage of keyframe
+    const percentages = parseKeyframeKey(keyFrameRule.keyText);
+    const style = getDefinedStyles(keyFrameRule.style);
+    // Normalize to unprefixed styles
+    const normalizedStyles = Object.keys(style).reduce((result, propertyName) => {
+        const name = normalizePropertyName(propertyName);
+        result[name] = style[propertyName];
+        return result;
+    }, {});
+    return percentages.map((percentage) => {
+        return {
+            percentage,
+            // Convert percentage to fraction of 1 for webanimation compat
+            offset: percentage / 100,
+            // Mixin with extracted keyframe styling
+            rules: normalizedStyles,
+        };
+    });
+}
+//# sourceMappingURL=transformKeyframesDeclarations.js.map

package/dist/js/dom/style/transformKeyframesDeclarations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"transformKeyframesDeclarations.js","sourceRoot":"","sources":["../../../../src/js/dom/style/transformKeyframesDeclarations.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAgB,MAAM,+CAA+C,CAAC;AAC7E,OAAO,kBAAkB,MAAM,gDAAgD,CAAC;AAChF,OAAO,SAAS,MAAM,qCAAqC,CAAC;AAC5D,OAAO,gBAAgB,MAAM,uBAAuB,CAAC;AAgCrD,SAAS,qBAAqB,CAAC,YAAY;IACzC,OAAO,SAAS,CAAC,kBAAkB,CAAC,YAAY,CAAC,CAAC,CAAC;AACrD,CAAC;AAED,MAAM,CAAC,OAAO,UAAU,4BAA4B,CAClD,YAAY;IAEZ,sEAAsE;IACtE,MAAM,WAAW,GAAG,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;IAC3D,MAAM,KAAK,GAAG,gBAAgB,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IAEnD,iCAAiC;IACjC,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,YAAY,EAAE,EAAE;QAC1E,MAAM,IAAI,GAAG,qBAAqB,CAAC,YAAY,CAAC,CAAC;QACjD,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC;QACnC,OAAO,MAAM,CAAC;IAChB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,EAAE;QACpC,OAAO;YACL,UAAU;YACV,8DAA8D;YAC9D,MAAM,EAAE,UAAU,GAAG,GAAG;YACxB,wCAAwC;YACxC,KAAK,EAAE,gBAAgB;SACxB,CAAC;IACJ,CAAC,CAAC,CAAC;AACL,CAAC"}