@apexcura/ui-components 0.0.14-Beta38 → 0.0.14-Beta39

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 -1
  3. package/dist/index.d.ts +1 -1
  4. package/dist/index.js +57 -12
  5. package/dist/index.mjs +57 -12
  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
@@ -85,7 +85,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
85
85
 
86
86
  declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
87
87
 
88
- declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
88
+ declare const ButtonElement: (props: any) => React$1.JSX.Element;
89
89
 
90
90
  declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
91
91
 
package/dist/index.d.ts CHANGED
@@ -85,7 +85,7 @@ declare const SingleSelectElement: (props: ElementType) => React$1.JSX.Element;
85
85
 
86
86
  declare const MultipleSelectElement: (props: ElementType) => React$1.JSX.Element;
87
87
 
88
- declare const ButtonElement: (props: ElementType) => React$1.JSX.Element;
88
+ declare const ButtonElement: (props: any) => React$1.JSX.Element;
89
89
 
90
90
  declare const AddMoreTable: (props: ElementType) => React$1.JSX.Element;
91
91
 
package/dist/index.js CHANGED
@@ -378,32 +378,77 @@ var MultipleSelectElement = (props) => {
378
378
  var import_react11 = __toESM(require("react"));
379
379
  var ButtonElement = (props) => {
380
380
  const [svgContent, setSvgContent] = (0, import_react11.useState)(null);
381
+ const [hoverColor, setHoverColor] = (0, import_react11.useState)(null);
381
382
  (0, import_react11.useEffect)(() => {
382
383
  if (props.icon) {
383
384
  fetch(props.icon).then((response) => response.text()).then((data) => {
384
- const parser = new DOMParser();
385
- const svgDocument = parser.parseFromString(data, "image/svg+xml");
386
- const pathElement = svgDocument.querySelector("path");
387
- if (pathElement) {
388
- pathElement.setAttribute("fill", props.iconsClassName || "#A3A3A3");
385
+ const tempDiv = document.createElement("div");
386
+ tempDiv.innerHTML = data;
387
+ const svgElement = tempDiv.querySelector("svg");
388
+ if (svgElement) {
389
+ const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
390
+ const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
391
+ if (textColorClass) {
392
+ const tempSpan = document.createElement("span");
393
+ tempSpan.className = textColorClass;
394
+ document.body.appendChild(tempSpan);
395
+ const computedColor = getComputedStyle(tempSpan).color;
396
+ document.body.removeChild(tempSpan);
397
+ const paths = svgElement.querySelectorAll("path");
398
+ paths.forEach((path) => path.setAttribute("fill", computedColor));
399
+ }
400
+ if (hoverColorClass) {
401
+ const tempSpan = document.createElement("span");
402
+ tempSpan.className = hoverColorClass.replace("hover:", "");
403
+ document.body.appendChild(tempSpan);
404
+ const computedHoverColor = getComputedStyle(tempSpan).color;
405
+ document.body.removeChild(tempSpan);
406
+ setHoverColor(computedHoverColor);
407
+ }
408
+ svgElement.setAttribute(
409
+ "class",
410
+ `${props.className ? props.className : ""}`
411
+ );
412
+ setSvgContent(tempDiv.innerHTML);
389
413
  }
390
- const modifiedSvg = new XMLSerializer().serializeToString(svgDocument);
391
- setSvgContent(modifiedSvg);
392
414
  }).catch((error) => console.error("Error fetching SVG:", error));
393
415
  }
394
- }, [props.icon]);
416
+ }, [props.icon, props.className]);
417
+ const handleMouseEnter = () => {
418
+ if (hoverColor && svgContent) {
419
+ const tempDiv = document.createElement("div");
420
+ tempDiv.innerHTML = svgContent;
421
+ const svgElement = tempDiv.querySelector("svg");
422
+ const paths = svgElement?.querySelectorAll("path");
423
+ paths?.forEach((path) => path.setAttribute("fill", hoverColor));
424
+ setSvgContent(tempDiv.innerHTML);
425
+ }
426
+ };
427
+ const handleMouseLeave = () => {
428
+ if (svgContent) {
429
+ const tempDiv = document.createElement("div");
430
+ tempDiv.innerHTML = svgContent;
431
+ const svgElement = tempDiv.querySelector("svg");
432
+ const paths = svgElement?.querySelectorAll("path");
433
+ paths?.forEach((path) => path.removeAttribute("fill"));
434
+ setSvgContent(tempDiv.innerHTML);
435
+ }
436
+ };
395
437
  return /* @__PURE__ */ import_react11.default.createElement(
396
438
  "button",
397
439
  {
398
440
  onClick: () => props.onClick && props.onClick(),
399
- className: `${props.className ? props.className : ""}`
441
+ className: `${props.className ? props.className : ""}`,
442
+ onMouseEnter: handleMouseEnter,
443
+ onMouseLeave: handleMouseLeave
400
444
  },
401
- svgContent ? /* @__PURE__ */ import_react11.default.createElement(
445
+ svgContent && /* @__PURE__ */ import_react11.default.createElement(
402
446
  "span",
403
447
  {
448
+ className: "svg-container",
404
449
  dangerouslySetInnerHTML: { __html: svgContent }
405
450
  }
406
- ) : props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon }),
451
+ ),
407
452
  props.label
408
453
  );
409
454
  };
@@ -818,7 +863,7 @@ var DateRangePickerElement = (props) => {
818
863
  // src/Components/Image.tsx
819
864
  var import_react23 = __toESM(require("react"));
820
865
  var Image = (props) => {
821
- return /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" }));
866
+ return /* @__PURE__ */ import_react23.default.createElement("img", { className: props.className, src: props.img, alt: "image" });
822
867
  };
823
868
 
824
869
  // src/Components/SingleCheckbox.tsx
package/dist/index.mjs CHANGED
@@ -319,32 +319,77 @@ var MultipleSelectElement = (props) => {
319
319
  import React11, { useEffect, useState as useState4 } from "react";
320
320
  var ButtonElement = (props) => {
321
321
  const [svgContent, setSvgContent] = useState4(null);
322
+ const [hoverColor, setHoverColor] = useState4(null);
322
323
  useEffect(() => {
323
324
  if (props.icon) {
324
325
  fetch(props.icon).then((response) => response.text()).then((data) => {
325
- const parser = new DOMParser();
326
- const svgDocument = parser.parseFromString(data, "image/svg+xml");
327
- const pathElement = svgDocument.querySelector("path");
328
- if (pathElement) {
329
- pathElement.setAttribute("fill", props.iconsClassName || "#A3A3A3");
326
+ const tempDiv = document.createElement("div");
327
+ tempDiv.innerHTML = data;
328
+ const svgElement = tempDiv.querySelector("svg");
329
+ if (svgElement) {
330
+ const textColorClass = props.className.match(/text-[\w-]+/g)?.[0];
331
+ const hoverColorClass = props.className.match(/hover:text-[\w-]+/g)?.[0];
332
+ if (textColorClass) {
333
+ const tempSpan = document.createElement("span");
334
+ tempSpan.className = textColorClass;
335
+ document.body.appendChild(tempSpan);
336
+ const computedColor = getComputedStyle(tempSpan).color;
337
+ document.body.removeChild(tempSpan);
338
+ const paths = svgElement.querySelectorAll("path");
339
+ paths.forEach((path) => path.setAttribute("fill", computedColor));
340
+ }
341
+ if (hoverColorClass) {
342
+ const tempSpan = document.createElement("span");
343
+ tempSpan.className = hoverColorClass.replace("hover:", "");
344
+ document.body.appendChild(tempSpan);
345
+ const computedHoverColor = getComputedStyle(tempSpan).color;
346
+ document.body.removeChild(tempSpan);
347
+ setHoverColor(computedHoverColor);
348
+ }
349
+ svgElement.setAttribute(
350
+ "class",
351
+ `${props.className ? props.className : ""}`
352
+ );
353
+ setSvgContent(tempDiv.innerHTML);
330
354
  }
331
- const modifiedSvg = new XMLSerializer().serializeToString(svgDocument);
332
- setSvgContent(modifiedSvg);
333
355
  }).catch((error) => console.error("Error fetching SVG:", error));
334
356
  }
335
- }, [props.icon]);
357
+ }, [props.icon, props.className]);
358
+ const handleMouseEnter = () => {
359
+ if (hoverColor && svgContent) {
360
+ const tempDiv = document.createElement("div");
361
+ tempDiv.innerHTML = svgContent;
362
+ const svgElement = tempDiv.querySelector("svg");
363
+ const paths = svgElement?.querySelectorAll("path");
364
+ paths?.forEach((path) => path.setAttribute("fill", hoverColor));
365
+ setSvgContent(tempDiv.innerHTML);
366
+ }
367
+ };
368
+ const handleMouseLeave = () => {
369
+ if (svgContent) {
370
+ const tempDiv = document.createElement("div");
371
+ tempDiv.innerHTML = svgContent;
372
+ const svgElement = tempDiv.querySelector("svg");
373
+ const paths = svgElement?.querySelectorAll("path");
374
+ paths?.forEach((path) => path.removeAttribute("fill"));
375
+ setSvgContent(tempDiv.innerHTML);
376
+ }
377
+ };
336
378
  return /* @__PURE__ */ React11.createElement(
337
379
  "button",
338
380
  {
339
381
  onClick: () => props.onClick && props.onClick(),
340
- className: `${props.className ? props.className : ""}`
382
+ className: `${props.className ? props.className : ""}`,
383
+ onMouseEnter: handleMouseEnter,
384
+ onMouseLeave: handleMouseLeave
341
385
  },
342
- svgContent ? /* @__PURE__ */ React11.createElement(
386
+ svgContent && /* @__PURE__ */ React11.createElement(
343
387
  "span",
344
388
  {
389
+ className: "svg-container",
345
390
  dangerouslySetInnerHTML: { __html: svgContent }
346
391
  }
347
- ) : props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon }),
392
+ ),
348
393
  props.label
349
394
  );
350
395
  };
@@ -759,7 +804,7 @@ var DateRangePickerElement = (props) => {
759
804
  // src/Components/Image.tsx
760
805
  import React23 from "react";
761
806
  var Image = (props) => {
762
- return /* @__PURE__ */ React23.createElement("div", null, /* @__PURE__ */ React23.createElement("img", { className: props.className, src: props.img, alt: "image" }));
807
+ return /* @__PURE__ */ React23.createElement("img", { className: props.className, src: props.img, alt: "image" });
763
808
  };
764
809
 
765
810
  // src/Components/SingleCheckbox.tsx
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@apexcura/ui-components",
3
- "version": "0.0.14-Beta38",
3
+ "version": "0.0.14-Beta39",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",