@zanichelli/albe-web-components 7.3.3 → 7.3.4

package/dist/collection/utils/storybook-utils.js

@@ -1,51 +1,51 @@
-/**
- * Get all root CSS properties.
- * @returns {string[]}
- */
-function getRootCssProperties() {
-  return [...document.styleSheets]
-    .map((sheet) => [...sheet.cssRules])
-    .flat()
-    .filter((rule) => rule.selectorText === ":root")
-    .map((rule) => Object.values(rule.style || {}))
-    .flat()
-    .filter(Boolean);
-}
-
-/**
- * Get Design System color tokens.
- * Can be used in components stories controls:
- * @example ```
- * argTypes={{
- *  "--z-component--background-color": {
- *    control: { type: "select" },
- *    options: getColorTokens(),
- *  }
- * }}```
- *
- * and then in the component tag
- *
- * ```<z-component .style="--z-component--background-color: var(${args["--z-component--background-color"]})" />```
- * @returns {string[]}
- */
-export function getColorTokens() {
-  const availableColorGroups = ["red", "green", "blue", "yellow", "gray", "avatar", "color"];
-
-  const colorTokens = getRootCssProperties()?.filter((token) =>
-    availableColorGroups.some((group) => token.startsWith(`--${group}`))
-  );
-
-  // remove duplicates
-  return [...new Set(colorTokens)];
-}
-
-/**
- * Get Design System themes tokens.
- * @returns {string[]}
- */
-export function getThemesColorTokens() {
-  const colorTokens = getRootCssProperties()?.filter((token) => token.startsWith(`--color`));
-
-  // remove duplicates
-  return [...new Set(colorTokens)];
-}
+/**
+ * Get all root CSS properties.
+ * @returns {string[]}
+ */
+function getRootCssProperties() {
+  return [...document.styleSheets]
+    .map((sheet) => [...sheet.cssRules])
+    .flat()
+    .filter((rule) => rule.selectorText === ":root")
+    .map((rule) => Object.values(rule.style || {}))
+    .flat()
+    .filter(Boolean);
+}
+
+/**
+ * Get Design System color tokens.
+ * Can be used in components stories controls:
+ * @example ```
+ * argTypes={{
+ *  "--z-component--background-color": {
+ *    control: { type: "select" },
+ *    options: getColorTokens(),
+ *  }
+ * }}```
+ *
+ * and then in the component tag
+ *
+ * ```<z-component .style="--z-component--background-color: var(${args["--z-component--background-color"]})" />```
+ * @returns {string[]}
+ */
+export function getColorTokens() {
+  const availableColorGroups = ["red", "green", "blue", "yellow", "gray", "avatar", "color"];
+
+  const colorTokens = getRootCssProperties()?.filter((token) =>
+    availableColorGroups.some((group) => token.startsWith(`--${group}`))
+  );
+
+  // remove duplicates
+  return [...new Set(colorTokens)];
+}
+
+/**
+ * Get Design System themes tokens.
+ * @returns {string[]}
+ */
+export function getThemesColorTokens() {
+  const colorTokens = getRootCssProperties()?.filter((token) => token.startsWith(`--color`));
+
+  // remove duplicates
+  return [...new Set(colorTokens)];
+}

package/dist/collection/utils/utils.js

@@ -1,113 +1,113 @@
-import { KeyboardCode, Device } from "../beans/index";
-import { mobileBreakpoint, tabletBreakpoint } from "../constants/breakpoints";
-export function format(first, middle, last) {
-  return (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "");
-}
-/**
- * Return boolean value for passed value if a boolean corresponding value is found
- * Return passed value otherwise
- */
-export function boolean(value) {
-  switch (value) {
-    case true:
-    case "true":
-    case 1:
-    case "1":
-    case "on":
-    case "yes":
-      return true;
-    case false:
-    case "false":
-    case 0:
-    case "0":
-    case "off":
-    case "no":
-      return false;
-    default:
-      return value;
-  }
-}
-export function retrieveAsset(assetName) {
-  return assetName && "assets/images/png/" + assetName;
-}
-export function randomId() {
-  return Math.random().toString(36).replace("0.", "");
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function handleKeyboardSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function handleEnterKeydSubmit(ev, callback, ...args) {
-  if (ev.code === KeyboardCode.ENTER) {
-    ev.preventDefault();
-    callback(...args);
-  }
-}
-export function getClickedElement(elem = null) {
-  if (!elem) {
-    elem = document.activeElement;
-  }
-  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
-    elem = elem.shadowRoot.activeElement;
-    return getClickedElement(elem);
-  }
-  return elem;
-}
-export function getElementTree(elem, tree = []) {
-  tree.push(elem);
-  if (elem.parentElement) {
-    elem = elem.parentElement;
-    return getElementTree(elem, tree);
-  }
-  else if (elem.parentNode && elem.parentNode.host) {
-    elem = elem.parentNode.host;
-    return getElementTree(elem, tree);
-  }
-  return tree;
-}
-export function getSiblings(elem) {
-  const siblings = [];
-  if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {
-    return siblings;
-  }
-  elem.parentNode.childNodes.forEach((child) => {
-    if (child.nodeType === 1 && child !== elem) {
-      siblings.push(child);
-    }
-  });
-  return siblings;
-}
-export function getDevice() {
-  switch (true) {
-    case window.innerWidth <= mobileBreakpoint:
-      return Device.MOBILE;
-    case window.innerWidth <= tabletBreakpoint:
-      return Device.TABLET;
-    default:
-      return Device.DESKTOP;
-  }
-}
-export function convertJson(data) {
-  try {
-    return JSON.parse(data);
-  }
-  catch (_a) {
-    return false;
-  }
-}
-export function colorFromId(id) {
-  const prefix = "avatar-C"; // prefix for color vars name
-  const colorsCount = 19; // available colors
-  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
-  let color = Math.ceil(colorsCount * (seed % 1));
-  // if result of mc is 0
-  // es.: 3895229
-  if (color === 0) {
-    color = 1;
-  }
-  return `${prefix}${color.toString().padStart(2, "0")}`;
-}
+import { KeyboardCode, Device } from "../beans/index";
+import { mobileBreakpoint, tabletBreakpoint } from "../constants/breakpoints";
+export function format(first, middle, last) {
+  return (first || "") + (middle ? ` ${middle}` : "") + (last ? ` ${last}` : "");
+}
+/**
+ * Return boolean value for passed value if a boolean corresponding value is found
+ * Return passed value otherwise
+ */
+export function boolean(value) {
+  switch (value) {
+    case true:
+    case "true":
+    case 1:
+    case "1":
+    case "on":
+    case "yes":
+      return true;
+    case false:
+    case "false":
+    case 0:
+    case "0":
+    case "off":
+    case "no":
+      return false;
+    default:
+      return value;
+  }
+}
+export function retrieveAsset(assetName) {
+  return assetName && "assets/images/png/" + assetName;
+}
+export function randomId() {
+  return Math.random().toString(36).replace("0.", "");
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function handleKeyboardSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER || ev.code === KeyboardCode.SPACE) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function handleEnterKeydSubmit(ev, callback, ...args) {
+  if (ev.code === KeyboardCode.ENTER) {
+    ev.preventDefault();
+    callback(...args);
+  }
+}
+export function getClickedElement(elem = null) {
+  if (!elem) {
+    elem = document.activeElement;
+  }
+  if (elem && elem.shadowRoot && elem.shadowRoot.activeElement) {
+    elem = elem.shadowRoot.activeElement;
+    return getClickedElement(elem);
+  }
+  return elem;
+}
+export function getElementTree(elem, tree = []) {
+  tree.push(elem);
+  if (elem.parentElement) {
+    elem = elem.parentElement;
+    return getElementTree(elem, tree);
+  }
+  else if (elem.parentNode && elem.parentNode.host) {
+    elem = elem.parentNode.host;
+    return getElementTree(elem, tree);
+  }
+  return tree;
+}
+export function getSiblings(elem) {
+  const siblings = [];
+  if (!elem || !elem.parentNode || !elem.parentNode.childNodes) {
+    return siblings;
+  }
+  elem.parentNode.childNodes.forEach((child) => {
+    if (child.nodeType === 1 && child !== elem) {
+      siblings.push(child);
+    }
+  });
+  return siblings;
+}
+export function getDevice() {
+  switch (true) {
+    case window.innerWidth <= mobileBreakpoint:
+      return Device.MOBILE;
+    case window.innerWidth <= tabletBreakpoint:
+      return Device.TABLET;
+    default:
+      return Device.DESKTOP;
+  }
+}
+export function convertJson(data) {
+  try {
+    return JSON.parse(data);
+  }
+  catch (_a) {
+    return false;
+  }
+}
+export function colorFromId(id) {
+  const prefix = "avatar-C"; // prefix for color vars name
+  const colorsCount = 19; // available colors
+  const seed = Math.ceil(2 ** 31 - 1) * parseFloat(`0.${id}`);
+  let color = Math.ceil(colorsCount * (seed % 1));
+  // if result of mc is 0
+  // es.: 3895229
+  if (color === 0) {
+    color = 1;
+  }
+  return `${prefix}${color.toString().padStart(2, "0")}`;
+}

package/dist/esm/{breakpoints-c386984e.js → breakpoints-14432d05.js}

@@ -1,4 +1,4 @@
-const mobileBreakpoint = 767;
+const mobileBreakpoint = 767;
 const tabletBreakpoint = 1023;
 
 export { mobileBreakpoint as m, tabletBreakpoint as t };