@apexcura/ui-components 0.0.14-Beta37 → 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 +58 -8
  5. package/dist/index.mjs +58 -8
  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,27 +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
- let modifiedData = data.replace(/<svg/g, `<svg class="${props.iconsClassName || ""}"`);
385
- setSvgContent(modifiedData);
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);
413
+ }
386
414
  }).catch((error) => console.error("Error fetching SVG:", error));
387
415
  }
388
- }, [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
+ };
389
437
  return /* @__PURE__ */ import_react11.default.createElement(
390
438
  "button",
391
439
  {
392
440
  onClick: () => props.onClick && props.onClick(),
393
- className: `${props.className ? props.className : ""}`
441
+ className: `${props.className ? props.className : ""}`,
442
+ onMouseEnter: handleMouseEnter,
443
+ onMouseLeave: handleMouseLeave
394
444
  },
395
- svgContent ? /* @__PURE__ */ import_react11.default.createElement(
445
+ svgContent && /* @__PURE__ */ import_react11.default.createElement(
396
446
  "span",
397
447
  {
398
- className: props.iconsClassName,
448
+ className: "svg-container",
399
449
  dangerouslySetInnerHTML: { __html: svgContent }
400
450
  }
401
- ) : props.icon && /* @__PURE__ */ import_react11.default.createElement("img", { className: props.iconsClassName, src: props.icon }),
451
+ ),
402
452
  props.label
403
453
  );
404
454
  };
@@ -813,7 +863,7 @@ var DateRangePickerElement = (props) => {
813
863
  // src/Components/Image.tsx
814
864
  var import_react23 = __toESM(require("react"));
815
865
  var Image = (props) => {
816
- 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" });
817
867
  };
818
868
 
819
869
  // src/Components/SingleCheckbox.tsx
package/dist/index.mjs CHANGED
@@ -319,27 +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
- let modifiedData = data.replace(/<svg/g, `<svg class="${props.iconsClassName || ""}"`);
326
- setSvgContent(modifiedData);
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);
354
+ }
327
355
  }).catch((error) => console.error("Error fetching SVG:", error));
328
356
  }
329
- }, [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
+ };
330
378
  return /* @__PURE__ */ React11.createElement(
331
379
  "button",
332
380
  {
333
381
  onClick: () => props.onClick && props.onClick(),
334
- className: `${props.className ? props.className : ""}`
382
+ className: `${props.className ? props.className : ""}`,
383
+ onMouseEnter: handleMouseEnter,
384
+ onMouseLeave: handleMouseLeave
335
385
  },
336
- svgContent ? /* @__PURE__ */ React11.createElement(
386
+ svgContent && /* @__PURE__ */ React11.createElement(
337
387
  "span",
338
388
  {
339
- className: props.iconsClassName,
389
+ className: "svg-container",
340
390
  dangerouslySetInnerHTML: { __html: svgContent }
341
391
  }
342
- ) : props.icon && /* @__PURE__ */ React11.createElement("img", { className: props.iconsClassName, src: props.icon }),
392
+ ),
343
393
  props.label
344
394
  );
345
395
  };
@@ -754,7 +804,7 @@ var DateRangePickerElement = (props) => {
754
804
  // src/Components/Image.tsx
755
805
  import React23 from "react";
756
806
  var Image = (props) => {
757
- 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" });
758
808
  };
759
809
 
760
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-Beta37",
3
+ "version": "0.0.14-Beta39",
4
4
  "description": "Apex cura React components library",
5
5
  "keywords": [
6
6
  "apex cura",