@lukso/web-components 1.177.0 → 1.178.0

package/dist/shared/tools/accessibility-checker.js

@@ -0,0 +1,186 @@
+let axe = null;
+function mapAxeViolationToAccessibilityViolation(axeViolation) {
+  return {
+    id: axeViolation.id,
+    impact: axeViolation.impact,
+    description: axeViolation.description,
+    help: axeViolation.help,
+    helpUrl: axeViolation.helpUrl,
+    nodes: axeViolation.nodes?.map((node) => ({
+      html: node.html,
+      target: node.target,
+      failureSummary: node.failureSummary
+    })) || []
+  };
+}
+async function checkAccessibility(element) {
+  if (!element) {
+    return {
+      violations: [],
+      hasViolations: false,
+      violationCount: 0
+    };
+  }
+  try {
+    if (!axe) {
+      try {
+        axe = await import('axe-core');
+      } catch {
+        console.warn("axe-core not available, skipping accessibility check");
+        return {
+          violations: [],
+          hasViolations: false,
+          violationCount: 0
+        };
+      }
+    }
+    const results = await axe.run(element, {
+      resultTypes: ["violations"],
+      tags: ["wcag2a", "wcag2aa", "wcag21aa", "best-practice"],
+      rules: {
+        "color-contrast": { enabled: true },
+        "color-contrast-enhanced": { enabled: true },
+        "image-alt": { enabled: true },
+        "button-name": { enabled: true },
+        "link-name": { enabled: true },
+        label: { enabled: true },
+        "form-field-multiple-labels": { enabled: true }
+      }
+    });
+    const violations = results.violations.map(
+      mapAxeViolationToAccessibilityViolation
+    );
+    return {
+      violations,
+      hasViolations: violations.length > 0,
+      violationCount: violations.length
+    };
+  } catch (error) {
+    console.warn("Accessibility checking failed:", error);
+    return {
+      violations: [],
+      hasViolations: false,
+      violationCount: 0
+    };
+  }
+}
+const getViolationSummary = (violations) => {
+  const summary = {
+    critical: 0,
+    serious: 0,
+    moderate: 0,
+    minor: 0,
+    total: violations.length
+  };
+  violations.forEach((violation) => {
+    if (violation.impact) {
+      summary[violation.impact]++;
+    }
+  });
+  return summary;
+};
+function getImpactStyling(impact) {
+  switch (impact) {
+    case "critical":
+      return {
+        colorClass: "text-red-600",
+        borderClass: "border-red-600",
+        label: "Critical"
+      };
+    case "serious":
+      return {
+        colorClass: "text-orange-600",
+        borderClass: "border-orange-600",
+        label: "Serious"
+      };
+    case "moderate":
+      return {
+        colorClass: "text-yellow-600",
+        borderClass: "border-yellow-600",
+        label: "Moderate"
+      };
+    case "minor":
+      return {
+        colorClass: "text-green-600",
+        borderClass: "border-green-600",
+        label: "Minor"
+      };
+    default:
+      return {
+        colorClass: "text-gray-500",
+        borderClass: "border-gray-500",
+        label: "Info"
+      };
+  }
+}
+const formatViolationsForTooltip = (violations) => {
+  if (violations.length === 0) {
+    return `
+      <div class="text-center text-green-600 font-semibold">
+        No accessibility violations found!
+      </div>
+    `;
+  }
+  const summary = getViolationSummary(violations);
+  let tooltip = `
+    <div class="max-w-sm leading-relaxed p-1">
+      <div class="font-bold text-sm mb-1">
+        Accessibility Issues Found
+      </div>
+  `;
+  tooltip += `
+      <div class="mb-2">
+        <div class="flex gap-3 flex-wrap">
+    `;
+  if (summary.critical > 0) {
+    tooltip += `<span class="text-red-600">🚨 ${summary.critical} Critical</span>`;
+  }
+  if (summary.serious > 0) {
+    tooltip += `<span class="text-orange-600">⚠️ ${summary.serious} Serious</span>`;
+  }
+  if (summary.moderate > 0) {
+    tooltip += `<span class="text-yellow-600">⚡ ${summary.moderate} Moderate</span>`;
+  }
+  if (summary.minor > 0) {
+    tooltip += `<span class="text-green-600">💡 ${summary.minor} Minor</span>`;
+  }
+  tooltip += `
+        </div>
+      </div>
+    `;
+  const sortedViolations = violations.sort((a, b) => {
+    const impactOrder = { critical: 0, serious: 1, moderate: 2, minor: 3 };
+    const aOrder = impactOrder[a.impact] ?? 4;
+    const bOrder = impactOrder[b.impact] ?? 4;
+    return aOrder - bOrder;
+  });
+  tooltip += `<div class="space-y-3">`;
+  sortedViolations.forEach((violation) => {
+    const impactStyling = getImpactStyling(violation.impact);
+    tooltip += `
+      <div class="p-2 bg-white border-l-4 ${impactStyling.borderClass} rounded">
+        <div class="flex items-center gap-1.5 mb-1.5">
+          <strong class="text-gray-800 text-xs leading-tight">${violation.help}</strong>
+        </div>
+
+        <div class="flex items-center gap-1.5 mb-1">
+          <span class="text-xs ${impactStyling.colorClass} font-semibold">
+            ${impactStyling.label}
+          </span>
+          <span class="text-xs text-gray-400">•</span>
+          <span class="text-xs text-gray-500">
+            ${violation.nodes?.length || 0} element${(violation.nodes?.length || 0) !== 1 ? "s" : ""} affected
+          </span>
+        </div>
+      </div>
+    `;
+  });
+  tooltip += `
+    </div>
+    <div class="text-10 text-gray-500 mt-2">Check out the <a target="_blank" class="underline" href="https://www.w3.org/TR/WCAG21/">WCAG</a> guidelines why this is important.</div>
+    </div>
+  `;
+  return tooltip.trim();
+};
+
+export { checkAccessibility, formatViolationsForTooltip, getViolationSummary };

package/dist/shared/tools/background-gradient.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const viem = require('viem');
+
+const backgroundGradient = (address) => {
+  let gradientStart = "#24354210";
+  let gradientEnd = "#24354220";
+  const opacity = "80";
+  if (address && viem.isAddress(address)) {
+    gradientStart = `#${address.slice(2, 8)}${opacity}`;
+    gradientEnd = `#${address.slice(36, 42)}${opacity}`;
+  }
+  return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
+};
+
+exports.backgroundGradient = backgroundGradient;

package/dist/shared/tools/background-gradient.js

@@ -0,0 +1,14 @@
+import { isAddress } from 'viem';
+
+const backgroundGradient = (address) => {
+  let gradientStart = "#24354210";
+  let gradientEnd = "#24354220";
+  const opacity = "80";
+  if (address && isAddress(address)) {
+    gradientStart = `#${address.slice(2, 8)}${opacity}`;
+    gradientEnd = `#${address.slice(36, 42)}${opacity}`;
+  }
+  return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
+};
+
+export { backgroundGradient };

package/dist/shared/tools/cn.cjs

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const tailwindMerge = require('tailwind-merge');
+const clsx = require('clsx');
+const tailwindConfig = require('../../tailwind-config.cjs');
+
+const customTwMerge = tailwindMerge.extendTailwindMerge({
+  extend: {
+    theme: {
+      color: Object.entries(tailwindConfig.colorPalette).reduce((acc, currentVal) => {
+        const colors = Object.keys(currentVal[1]).map(
+          (c) => `${currentVal[0]}-${c}`
+        );
+        return acc.concat(colors);
+      }, [])
+    },
+    classGroups: {
+      shadow: [{ shadow: Object.keys(tailwindConfig.boxShadows).map((s) => `${s}`) }],
+      "font-size": [{ text: Object.keys(tailwindConfig.fontSizes) }],
+      "font-weight": [{ font: Object.keys(tailwindConfig.fontWeights) }],
+      rounded: [{ rounded: Object.keys(tailwindConfig.borderRadius) }],
+      scale: [{ scale: Object.keys(tailwindConfig.scales) }],
+      h: [{ h: Object.keys(tailwindConfig.heights) }],
+      leading: [{ leading: Object.keys(tailwindConfig.lineHeights) }]
+    }
+  }
+});
+const cn = (...inputs) => {
+  return customTwMerge(clsx.clsx(inputs));
+};
+
+exports.cn = cn;

package/dist/shared/tools/cn.js

@@ -0,0 +1,30 @@
+import { extendTailwindMerge } from 'tailwind-merge';
+import { clsx } from 'clsx';
+import { lineHeights, heights, scales, borderRadius, fontWeights, fontSizes, boxShadows, colorPalette } from '../../tailwind-config.js';
+
+const customTwMerge = extendTailwindMerge({
+  extend: {
+    theme: {
+      color: Object.entries(colorPalette).reduce((acc, currentVal) => {
+        const colors = Object.keys(currentVal[1]).map(
+          (c) => `${currentVal[0]}-${c}`
+        );
+        return acc.concat(colors);
+      }, [])
+    },
+    classGroups: {
+      shadow: [{ shadow: Object.keys(boxShadows).map((s) => `${s}`) }],
+      "font-size": [{ text: Object.keys(fontSizes) }],
+      "font-weight": [{ font: Object.keys(fontWeights) }],
+      rounded: [{ rounded: Object.keys(borderRadius) }],
+      scale: [{ scale: Object.keys(scales) }],
+      h: [{ h: Object.keys(heights) }],
+      leading: [{ leading: Object.keys(lineHeights) }]
+    }
+  }
+});
+const cn = (...inputs) => {
+  return customTwMerge(clsx(inputs));
+};
+
+export { cn };

package/dist/shared/tools/debounceFunction.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const debounceFunction = (func, timeout = 100) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (typeof func === "function") {
+        func.apply(void 0, args);
+      }
+    }, timeout);
+  };
+};
+
+exports.debounceFunction = debounceFunction;

package/dist/shared/tools/debounceFunction.js

@@ -0,0 +1,13 @@
+const debounceFunction = (func, timeout = 100) => {
+  let timer;
+  return (...args) => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      if (typeof func === "function") {
+        func.apply(void 0, args);
+      }
+    }, timeout);
+  };
+};
+
+export { debounceFunction };

package/dist/shared/tools/hsl-color-map.cjs

@@ -0,0 +1,16 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const tinycolor = require('tinycolor2');
+
+const hslColorMap = (h, s, l) => {
+  const colors = {};
+  for (let i = 0; i < l.length; i++) {
+    const lightness = l[i];
+    colors[lightness] = tinycolor({ h, s, l: lightness }).toHexString();
+  }
+  return colors;
+};
+
+exports.hslColorMap = hslColorMap;

package/dist/shared/tools/hsl-color-map.js

@@ -0,0 +1,12 @@
+import tinycolor from 'tinycolor2';
+
+const hslColorMap = (h, s, l) => {
+  const colors = {};
+  for (let i = 0; i < l.length; i++) {
+    const lightness = l[i];
+    colors[lightness] = tinycolor({ h, s, l: lightness }).toHexString();
+  }
+  return colors;
+};
+
+export { hslColorMap };

package/dist/shared/tools/slice-address.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
+  if (!address || typeof address !== "string") {
+    return "";
+  }
+  let sliceAddress2 = "";
+  const effectiveEndSliceBy = endSliceBy || startSliceBy;
+  if (address.length < startSliceBy + effectiveEndSliceBy) {
+    return address;
+  }
+  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(
+    -effectiveEndSliceBy
+  )}` : address;
+  return sliceAddress2;
+};
+
+exports.sliceAddress = sliceAddress;

package/dist/shared/tools/slice-address.js

@@ -0,0 +1,16 @@
+const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
+  if (!address || typeof address !== "string") {
+    return "";
+  }
+  let sliceAddress2 = "";
+  const effectiveEndSliceBy = endSliceBy || startSliceBy;
+  if (address.length < startSliceBy + effectiveEndSliceBy) {
+    return address;
+  }
+  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(
+    -effectiveEndSliceBy
+  )}` : address;
+  return sliceAddress2;
+};
+
+export { sliceAddress };

package/dist/shared/tools/uniq-id.cjs

@@ -0,0 +1,10 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+exports.uniqId = uniqId;

package/dist/shared/tools/uniq-id.js

@@ -0,0 +1,6 @@
+const uniqId = () => {
+  const s4 = () => ((1 + Math.random()) * 65536 | 0).toString(16).substring(1);
+  return `${s4() + s4()}-${s4()}-${s4()}-${s4()}-${s4()}${s4()}${s4()}`;
+};
+
+export { uniqId };