@mgdis/mg-components 6.9.0 → 6.10.0

package/dist/collection/utils/events.utils.js

@@ -0,0 +1,22 @@
+/**
+ * Keyboard keys
+ */
+export const Keys = {
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    DOWN: 'Down',
+    UP: 'Up',
+    LEFT: 'Left',
+    RIGHT: 'Right',
+    ARROWDOWN: 'ArrowDown',
+    ARROWUP: 'ArrowUp',
+    ARROWRIGHT: 'ArrowRight',
+    ARROWLEFT: 'ArrowLeft',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Esc',
+    ESCAPE: 'Escape',
+    NUMPADENTER: 'NumpadEnter',
+    SPACE: 'Space',
+};
+//# sourceMappingURL=events.utils.js.map

package/dist/collection/utils/events.utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.utils.js","sourceRoot":"","sources":["../../src/utils/events.utils.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,IAAI,GAAyC;IACxD,GAAG,EAAE,KAAK;IACV,KAAK,EAAE,OAAO;IACd,IAAI,EAAE,MAAM;IACZ,EAAE,EAAE,IAAI;IACR,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE,SAAS;IAClB,UAAU,EAAE,YAAY;IACxB,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,MAAM;IACZ,GAAG,EAAE,KAAK;IACV,GAAG,EAAE,KAAK;IACV,MAAM,EAAE,QAAQ;IAChB,WAAW,EAAE,aAAa;IAC1B,KAAK,EAAE,OAAO;CACf,CAAC","sourcesContent":["/**\n * Keyboard keys\n */\nexport const Keys: Record<string, KeyboardEvent['key']> = {\n  TAB: 'Tab',\n  ENTER: 'Enter',\n  DOWN: 'Down',\n  UP: 'Up',\n  LEFT: 'Left',\n  RIGHT: 'Right',\n  ARROWDOWN: 'ArrowDown',\n  ARROWUP: 'ArrowUp',\n  ARROWRIGHT: 'ArrowRight',\n  ARROWLEFT: 'ArrowLeft',\n  HOME: 'Home',\n  END: 'End',\n  ESC: 'Esc',\n  ESCAPE: 'Escape',\n  NUMPADENTER: 'NumpadEnter',\n  SPACE: 'Space',\n};\n"]}

package/dist/collection/utils/floating-ui.utils.js

@@ -19,12 +19,56 @@ export const placements = [
     'left-start',
     'left-end',
 ];
+// Alignments constants
+export const alignments = ['start', null, 'end'];
 /**
  * FloatingUI Placement type guard
  * @param placement - value to check
  * @returns truthy if placement is valid
  */
 export const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes('auto')).includes(placement);
-// Alignments constants
-export const alignments = ['start', null, 'end'];
+/**
+ * Round value by device pixel ratio
+ * @param value - value to round
+ * @returns rounded value
+ */
+const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+/**
+ * Get translation for tooltip
+ * @param x - x-axis value
+ * @param y - y-axis value
+ * @returns translation string
+ */
+export const getTransformation = (x, y) => {
+    const tooltipX = isNaN(x) ? 0 : roundByDPR(x);
+    const tooltipY = isNaN(y) ? 0 : roundByDPR(y);
+    // No translation needed
+    if (tooltipX === 0 && tooltipY === 0)
+        return '';
+    // Only one axis needs translation
+    if (tooltipX === 0)
+        return `translateY(${tooltipY}px)`;
+    if (tooltipY === 0)
+        return `translateX(${tooltipX}px)`;
+    // Both axes need translation
+    return `translate(${tooltipX}px,${tooltipY}px)`;
+};
+// https://floating-ui.com/docs/arrow
+// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
+// Due to this, either x or y will be undefined, depending on the side of placement.
+// The above code uses `isNaN` to check for null and undefined simultaneously.
+// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
+export const numberToPx = (number) => {
+    if (number !== null && !isNaN(number)) {
+        if (number === 0)
+            return '0';
+        else
+            return `${number}px`;
+    }
+    else
+        return '';
+};
 //# sourceMappingURL=floating-ui.utils.js.map

package/dist/collection/utils/floating-ui.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"floating-ui.utils.js","sourceRoot":"","sources":["../../src/utils/floating-ui.utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,KAAK;IACR,MAAM;IACN,YAAY;IACZ,UAAU;IACV,WAAW;IACX,SAAS;IACT,cAAc;IACd,YAAY;IACZ,aAAa;IACb,WAAW;IACX,YAAY;IACZ,UAAU;CACF,CAAC;AAOX;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAA0B,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAE5I,uBAAuB;AACvB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC","sourcesContent":["import { type Placement } from '@floating-ui/dom';\n\n/**\n * List of all possibles sides\n */\nexport const sides = ['top', 'right', 'bottom', 'left'] as const;\n\n/**\n * List of all possibles placements\n */\nexport const placements = [\n  ...sides,\n  'auto',\n  'auto-start',\n  'auto-end',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'right-start',\n  'right-end',\n  'left-start',\n  'left-end',\n] as const;\n\n/**\n * Define placement type\n */\nexport type ExtendedPlacement = Placement | (typeof placements)[number];\n\n/**\n * FloatingUI Placement type guard\n * @param placement - value to check\n * @returns truthy if placement is valid\n */\nexport const isFloatingUIPlacement = (placement): placement is Placement => placements.filter(p => !p.includes('auto')).includes(placement);\n\n// Alignments constants\nexport const alignments = ['start', null, 'end'] as const;\n"]}
+{"version":3,"file":"floating-ui.utils.js","sourceRoot":"","sources":["../../src/utils/floating-ui.utils.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,CAAU,CAAC;AAEjE;;GAEG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,GAAG,KAAK;IACR,MAAM;IACN,YAAY;IACZ,UAAU;IACV,WAAW;IACX,SAAS;IACT,cAAc;IACd,YAAY;IACZ,aAAa;IACb,WAAW;IACX,YAAY;IACZ,UAAU;CACF,CAAC;AAOX,uBAAuB;AACvB,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAO,EAAE,IAAI,EAAE,KAAK,CAAU,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,SAAS,EAA0B,EAAE,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC;AAE5I;;;;GAIG;AACH,MAAM,UAAU,GAAG,CAAC,KAAa,EAAE,EAAE;IACnC,MAAM,GAAG,GAAG,MAAM,CAAC,gBAAgB,IAAI,CAAC,CAAC;IACzC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC;AACvC,CAAC,CAAC;AAEF;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,CAAS,EAAE,CAAS,EAAU,EAAE;IAChE,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAC9C,MAAM,QAAQ,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IAE9C,wBAAwB;IACxB,IAAI,QAAQ,KAAK,CAAC,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO,EAAE,CAAC;IAEhD,kCAAkC;IAClC,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO,cAAc,QAAQ,KAAK,CAAC;IACvD,IAAI,QAAQ,KAAK,CAAC;QAAE,OAAO,cAAc,QAAQ,KAAK,CAAC;IAEvD,6BAA6B;IAC7B,OAAO,aAAa,QAAQ,MAAM,QAAQ,KAAK,CAAC;AAClD,CAAC,CAAC;AAEF,qCAAqC;AACrC,gHAAgH;AAChH,oFAAoF;AACpF,8EAA8E;AAC9E,8EAA8E;AAC9E,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,MAAc,EAAU,EAAE;IACnD,IAAI,MAAM,KAAK,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,EAAE,CAAC;QACtC,IAAI,MAAM,KAAK,CAAC;YAAE,OAAO,GAAG,CAAC;;YACxB,OAAO,GAAG,MAAM,IAAI,CAAC;IAC5B,CAAC;;QAAM,OAAO,EAAE,CAAC;AACnB,CAAC,CAAC","sourcesContent":["import { type Placement } from '@floating-ui/dom';\n\n/**\n * List of all possibles sides\n */\nexport const sides = ['top', 'right', 'bottom', 'left'] as const;\n\n/**\n * List of all possibles placements\n */\nexport const placements = [\n  ...sides,\n  'auto',\n  'auto-start',\n  'auto-end',\n  'top-start',\n  'top-end',\n  'bottom-start',\n  'bottom-end',\n  'right-start',\n  'right-end',\n  'left-start',\n  'left-end',\n] as const;\n\n/**\n * Define placement type\n */\nexport type ExtendedPlacement = Placement | (typeof placements)[number];\n\n// Alignments constants\nexport const alignments = ['start', null, 'end'] as const;\n\n/**\n * FloatingUI Placement type guard\n * @param placement - value to check\n * @returns truthy if placement is valid\n */\nexport const isFloatingUIPlacement = (placement): placement is Placement => placements.filter(p => !p.includes('auto')).includes(placement);\n\n/**\n * Round value by device pixel ratio\n * @param value - value to round\n * @returns rounded value\n */\nconst roundByDPR = (value: number) => {\n  const dpr = window.devicePixelRatio || 1;\n  return Math.round(value * dpr) / dpr;\n};\n\n/**\n * Get translation for tooltip\n * @param x - x-axis value\n * @param y - y-axis value\n * @returns translation string\n */\nexport const getTransformation = (x: number, y: number): string => {\n  const tooltipX = isNaN(x) ? 0 : roundByDPR(x);\n  const tooltipY = isNaN(y) ? 0 : roundByDPR(y);\n\n  // No translation needed\n  if (tooltipX === 0 && tooltipY === 0) return '';\n\n  // Only one axis needs translation\n  if (tooltipX === 0) return `translateY(${tooltipY}px)`;\n  if (tooltipY === 0) return `translateX(${tooltipX}px)`;\n\n  // Both axes need translation\n  return `translate(${tooltipX}px,${tooltipY}px)`;\n};\n\n// https://floating-ui.com/docs/arrow\n// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.\n// Due to this, either x or y will be undefined, depending on the side of placement.\n// The above code uses `isNaN` to check for null and undefined simultaneously.\n// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!\nexport const numberToPx = (number: number): string => {\n  if (number !== null && !isNaN(number)) {\n    if (number === 0) return '0';\n    else return `${number}px`;\n  } else return '';\n};\n"]}

package/dist/components/events.utils.js

@@ -0,0 +1,26 @@
+/**
+ * Keyboard keys
+ */
+const Keys = {
+    TAB: 'Tab',
+    ENTER: 'Enter',
+    DOWN: 'Down',
+    UP: 'Up',
+    LEFT: 'Left',
+    RIGHT: 'Right',
+    ARROWDOWN: 'ArrowDown',
+    ARROWUP: 'ArrowUp',
+    ARROWRIGHT: 'ArrowRight',
+    ARROWLEFT: 'ArrowLeft',
+    HOME: 'Home',
+    END: 'End',
+    ESC: 'Esc',
+    ESCAPE: 'Escape',
+    NUMPADENTER: 'NumpadEnter',
+    SPACE: 'Space',
+};
+
+export { Keys as K };
+//# sourceMappingURL=events.utils.js.map
+
+//# sourceMappingURL=events.utils.js.map

package/dist/components/events.utils.js.map

@@ -0,0 +1 @@
+{"file":"events.utils.js","mappings":"AAAA;;AAEG;AACU,MAAA,IAAI,GAAyC;AACxD,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,EAAE,EAAE,IAAI;AACR,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,OAAO;AACd,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,OAAO,EAAE,SAAS;AAClB,IAAA,UAAU,EAAE,YAAY;AACxB,IAAA,SAAS,EAAE,WAAW;AACtB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,GAAG,EAAE,KAAK;AACV,IAAA,MAAM,EAAE,QAAQ;AAChB,IAAA,WAAW,EAAE,aAAa;AAC1B,IAAA,KAAK,EAAE,OAAO;;;;;","names":[],"sources":["src/utils/events.utils.ts"],"sourcesContent":["/**\n * Keyboard keys\n */\nexport const Keys: Record<string, KeyboardEvent['key']> = {\n  TAB: 'Tab',\n  ENTER: 'Enter',\n  DOWN: 'Down',\n  UP: 'Up',\n  LEFT: 'Left',\n  RIGHT: 'Right',\n  ARROWDOWN: 'ArrowDown',\n  ARROWUP: 'ArrowUp',\n  ARROWRIGHT: 'ArrowRight',\n  ARROWLEFT: 'ArrowLeft',\n  HOME: 'Home',\n  END: 'End',\n  ESC: 'Esc',\n  ESCAPE: 'Escape',\n  NUMPADENTER: 'NumpadEnter',\n  SPACE: 'Space',\n};\n"],"version":3}

package/dist/components/floating-ui.utils.js

@@ -1662,16 +1662,60 @@ const placements = [
     'left-start',
     'left-end',
 ];
+// Alignments constants
+const alignments = ['start', null, 'end'];
 /**
  * FloatingUI Placement type guard
  * @param placement - value to check
  * @returns truthy if placement is valid
  */
 const isFloatingUIPlacement = (placement) => placements.filter(p => !p.includes('auto')).includes(placement);
-// Alignments constants
-const alignments = ['start', null, 'end'];
+/**
+ * Round value by device pixel ratio
+ * @param value - value to round
+ * @returns rounded value
+ */
+const roundByDPR = (value) => {
+    const dpr = window.devicePixelRatio || 1;
+    return Math.round(value * dpr) / dpr;
+};
+/**
+ * Get translation for tooltip
+ * @param x - x-axis value
+ * @param y - y-axis value
+ * @returns translation string
+ */
+const getTransformation = (x, y) => {
+    const tooltipX = isNaN(x) ? 0 : roundByDPR(x);
+    const tooltipY = isNaN(y) ? 0 : roundByDPR(y);
+    // No translation needed
+    if (tooltipX === 0 && tooltipY === 0)
+        return '';
+    // Only one axis needs translation
+    if (tooltipX === 0)
+        return `translateY(${tooltipY}px)`;
+    if (tooltipY === 0)
+        return `translateX(${tooltipX}px)`;
+    // Both axes need translation
+    return `translate(${tooltipX}px,${tooltipY}px)`;
+};
+// https://floating-ui.com/docs/arrow
+// Unlike the floating element, which has both coordinates defined at all times, the arrow only has one defined.
+// Due to this, either x or y will be undefined, depending on the side of placement.
+// The above code uses `isNaN` to check for null and undefined simultaneously.
+// Don't remove `isNaN`, because either value can be falsy (0), causing a bug!
+const numberToPx = (number) => {
+    if (number !== null && !isNaN(number)) {
+        if (number === 0)
+            return '0';
+        else
+            return `${number}px`;
+    }
+    else
+        return '';
+};
 
-export { alignments as a, autoUpdate as b, computePosition as c, shift as d, arrow as e, flip as f, isFloatingUIPlacement as i, limitShift as l, offset as o, sides as s };
+export { alignments as a, autoUpdate as b, computePosition as c, shift as d, arrow as e, flip as f, getTransformation as g, isFloatingUIPlacement as i, limitShift as l, numberToPx as n, offset as o, sides as s };
 //# sourceMappingURL=floating-ui.utils.js.map
 
 //# sourceMappingURL=floating-ui.utils.js.map