@apexcura/ui-components 0.0.14-Beta45 → 0.0.14-Beta47

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.css +3 -0
  2. package/dist/index.d.mts +1 -0
  3. package/dist/index.d.ts +1 -0
  4. package/dist/index.js +36 -22
  5. package/dist/index.mjs +36 -22
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -375,6 +375,9 @@ video {
375
375
  .italic {
376
376
  font-style: italic;
377
377
  }
378
+ .text-\[\\w-\] {
379
+ color: w-;
380
+ }
378
381
  .text-black {
379
382
  --tw-text-opacity: 1;
380
383
  color: rgb(0 0 0 / var(--tw-text-opacity));
package/dist/index.d.mts CHANGED
@@ -60,6 +60,7 @@ type ElementType = {
60
60
  containerClassName?: string;
61
61
  selectBefore?: any[];
62
62
  selectAfter?: any[];
63
+ isSVGStylesOverride?: boolean;
63
64
  };
64
65
 
65
66
  declare const TextElement: (props: ElementType) => React$1.JSX.Element;
package/dist/index.d.ts CHANGED
@@ -60,6 +60,7 @@ type ElementType = {
60
60
  containerClassName?: string;
61
61
  selectBefore?: any[];
62
62
  selectAfter?: any[];
63
+ isSVGStylesOverride?: boolean;
63
64
  };
64
65
 
65
66
  declare const TextElement: (props: ElementType) => React$1.JSX.Element;
package/dist/index.js CHANGED
@@ -379,7 +379,6 @@ var import_react11 = __toESM(require("react"));
379
379
  var ButtonElement = (props) => {
380
380
  const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
381
381
  const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
382
- console.log(hoverColor);
383
382
  (0, import_react11.useEffect)(() => {
384
383
  if (props.icon) {
385
384
  fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -387,6 +386,27 @@ var ButtonElement = (props) => {
387
386
  tempDiv.innerHTML = data;
388
387
  const svgElement = tempDiv.querySelector("svg");
389
388
  if (svgElement) {
389
+ if (props.svgoverride) {
390
+ const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
391
+ const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
392
+ if (textColorClass) {
393
+ const tempSpan = document.createElement("span");
394
+ tempSpan.className = textColorClass;
395
+ document.body.appendChild(tempSpan);
396
+ const computedColor = getComputedStyle(tempSpan).color;
397
+ document.body.removeChild(tempSpan);
398
+ const paths = svgElement.querySelectorAll("path");
399
+ paths.forEach((path) => path.setAttribute("fill", computedColor));
400
+ }
401
+ if (hoverColorClass) {
402
+ const tempSpan = document.createElement("span");
403
+ tempSpan.className = hoverColorClass.replace("hover:", "");
404
+ document.body.appendChild(tempSpan);
405
+ const computedHoverColor = getComputedStyle(tempSpan).color;
406
+ document.body.removeChild(tempSpan);
407
+ setHoverColor(computedHoverColor);
408
+ }
409
+ }
390
410
  svgElement.setAttribute(
391
411
  "class",
392
412
  `${props.className ? props.className : ""}`
@@ -395,31 +415,25 @@ var ButtonElement = (props) => {
395
415
  }
396
416
  }).catch((error) => console.error("Error fetching SVG:", error));
397
417
  }
398
- }, [props.icon, props.className]);
418
+ }, [props.icon, props.className, props.svgoverride]);
399
419
  const handleMouseEnter = () => {
400
- if (props.hoverFillColor) {
401
- setHoverColor(props.hoverFillColor);
420
+ if (props.svgoverride && hoverColor && svgContent) {
421
+ const tempDiv = document.createElement("div");
422
+ tempDiv.innerHTML = svgContent;
423
+ const svgElement = tempDiv.querySelector("svg");
424
+ const paths = svgElement?.querySelectorAll("path");
425
+ paths?.forEach((path) => path.setAttribute("fill", hoverColor));
426
+ setSvgContent(tempDiv.innerHTML);
402
427
  }
403
428
  };
404
429
  const handleMouseLeave = () => {
405
- if (svgContent) {
406
- setHoverColor(null);
407
- setSvgContent((prevSvgContent) => {
408
- if (!prevSvgContent) return null;
409
- const tempDiv = document.createElement("div");
410
- tempDiv.innerHTML = prevSvgContent;
411
- const svgElement = tempDiv.querySelector("svg");
412
- const paths = svgElement?.querySelectorAll("path");
413
- paths?.forEach((path) => {
414
- const fillValue = path.getAttribute("data-original-fill");
415
- if (fillValue) {
416
- path.setAttribute("fill", fillValue);
417
- } else {
418
- path.removeAttribute("fill");
419
- }
420
- });
421
- return tempDiv.innerHTML;
422
- });
430
+ if (props.svgoverride && svgContent) {
431
+ const tempDiv = document.createElement("div");
432
+ tempDiv.innerHTML = svgContent;
433
+ const svgElement = tempDiv.querySelector("svg");
434
+ const paths = svgElement?.querySelectorAll("path");
435
+ paths?.forEach((path) => path.removeAttribute("fill"));
436
+ setSvgContent(tempDiv.innerHTML);
423
437
  }
424
438
  };
425
439
  return /* @__PURE__ */ import_react11.default.createElement(
package/dist/index.mjs CHANGED
@@ -320,7 +320,6 @@ import React11, { useEffect, useState as useState4 } from "react";
320
320
  var ButtonElement = (props) => {
321
321
  const [svgContent, setSvgContent] = useState4(null);
322
322
  const [hoverColor, setHoverColor] = useState4(null);
323
- console.log(hoverColor);
324
323
  useEffect(() => {
325
324
  if (props.icon) {
326
325
  fetch(props.icon).then((response) => response.text()).then((data) => {
@@ -328,6 +327,27 @@ var ButtonElement = (props) => {
328
327
  tempDiv.innerHTML = data;
329
328
  const svgElement = tempDiv.querySelector("svg");
330
329
  if (svgElement) {
330
+ if (props.svgoverride) {
331
+ const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
332
+ const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
333
+ if (textColorClass) {
334
+ const tempSpan = document.createElement("span");
335
+ tempSpan.className = textColorClass;
336
+ document.body.appendChild(tempSpan);
337
+ const computedColor = getComputedStyle(tempSpan).color;
338
+ document.body.removeChild(tempSpan);
339
+ const paths = svgElement.querySelectorAll("path");
340
+ paths.forEach((path) => path.setAttribute("fill", computedColor));
341
+ }
342
+ if (hoverColorClass) {
343
+ const tempSpan = document.createElement("span");
344
+ tempSpan.className = hoverColorClass.replace("hover:", "");
345
+ document.body.appendChild(tempSpan);
346
+ const computedHoverColor = getComputedStyle(tempSpan).color;
347
+ document.body.removeChild(tempSpan);
348
+ setHoverColor(computedHoverColor);
349
+ }
350
+ }
331
351
  svgElement.setAttribute(
332
352
  "class",
333
353
  `${props.className ? props.className : ""}`
@@ -336,31 +356,25 @@ var ButtonElement = (props) => {
336
356
  }
337
357
  }).catch((error) => console.error("Error fetching SVG:", error));
338
358
  }
339
- }, [props.icon, props.className]);
359
+ }, [props.icon, props.className, props.svgoverride]);
340
360
  const handleMouseEnter = () => {
341
- if (props.hoverFillColor) {
342
- setHoverColor(props.hoverFillColor);
361
+ if (props.svgoverride && hoverColor && svgContent) {
362
+ const tempDiv = document.createElement("div");
363
+ tempDiv.innerHTML = svgContent;
364
+ const svgElement = tempDiv.querySelector("svg");
365
+ const paths = svgElement?.querySelectorAll("path");
366
+ paths?.forEach((path) => path.setAttribute("fill", hoverColor));
367
+ setSvgContent(tempDiv.innerHTML);
343
368
  }
344
369
  };
345
370
  const handleMouseLeave = () => {
346
- if (svgContent) {
347
- setHoverColor(null);
348
- setSvgContent((prevSvgContent) => {
349
- if (!prevSvgContent) return null;
350
- const tempDiv = document.createElement("div");
351
- tempDiv.innerHTML = prevSvgContent;
352
- const svgElement = tempDiv.querySelector("svg");
353
- const paths = svgElement?.querySelectorAll("path");
354
- paths?.forEach((path) => {
355
- const fillValue = path.getAttribute("data-original-fill");
356
- if (fillValue) {
357
- path.setAttribute("fill", fillValue);
358
- } else {
359
- path.removeAttribute("fill");
360
- }
361
- });
362
- return tempDiv.innerHTML;
363
- });
371
+ if (props.svgoverride && svgContent) {
372
+ const tempDiv = document.createElement("div");
373
+ tempDiv.innerHTML = svgContent;
374
+ const svgElement = tempDiv.querySelector("svg");
375
+ const paths = svgElement?.querySelectorAll("path");
376
+ paths?.forEach((path) => path.removeAttribute("fill"));
377
+ setSvgContent(tempDiv.innerHTML);
364
378
  }
365
379
  };
366
380
  return /* @__PURE__ */ React11.createElement(
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta45",
3
+ "version": "0.0.14-Beta47",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",