@duetds/components 4.32.0 → 4.34.0

package/lib/collection/utils/token-utils.js

@@ -2,24 +2,77 @@
  * Built with Duet Design System
  */
 import * as tokens from "@duetds/tokens";
-const MATCH_DASH_CASE = /-([a-z])/g;
-function replaceDashCase(g) {
-  return g[1].toUpperCase();
+const allowedThemes = ["turva"];
+const MATCH_CAPITAL_CASE = /[A-Z]/g;
+export function isCamelCase(str) {
+  const camel = MATCH_CAPITAL_CASE.test(str);
+  const barredString = !str.includes("_") && !str.includes("-") && !str.includes(" ");
+  return camel && barredString;
 }
-function convertToCamelCase(string) {
-  return string.replace(MATCH_DASH_CASE, replaceDashCase);
+export function isDashCase(str) {
+  const dash = str.includes("-");
+  const barredString = str.includes(" ") || str.includes("_");
+  const barredStartingString = str.charAt(0) === "-";
+  return dash && !barredString && !barredStartingString;
 }
-export function convertToColorName(name) {
-  if (name.indexOf("color-") === -1 && name.indexOf("-") !== -1) {
-    return convertToCamelCase(`color-${name}`);
+export function capitalize(str = "") {
+  return `${str.charAt(0).toUpperCase()}${str.slice(1)}`;
+}
+function lowerCaseFirst(str = "") {
+  return `${str.charAt(0).toLowerCase()}${str.slice(1)}`;
+}
+export function camelize(str = "") {
+  const arr = str.split("-");
+  //loop through each element of the array and capitalize the first letter.'
+  arr.forEach((string, index) => {
+    arr[index] = capitalize(string);
+  });
+  return arr.join("");
+}
+export function getTheme(theme = "") {
+  if (allowedThemes.includes(theme.toLowerCase())) {
+    return theme.toLowerCase();
+  }
+  return "";
+}
+function hasColor(str = "") {
+  return str.indexOf("Color") === 0 || str.indexOf("color") === 0;
+}
+function addColor(str = "") {
+  if (str && !isDashCase(str) && !hasColor(str)) {
+    return `color${capitalize(str)}`;
+  }
+  return str;
+}
+function addTheme(str, theme) {
+  const hasTheme = getTheme(theme).length;
+  if (hasTheme && str.indexOf(theme) === -1) {
+    return `${str}${capitalize(theme)}`;
+  }
+  return str;
+}
+export function getColorByName(name, theme = "") {
+  if (!name) {
+    return undefined;
   }
-  if (name.indexOf("color") === -1) {
-    return convertToCamelCase(`color${name.charAt(0).toUpperCase()}${name.slice(1)}`);
+  const defaultColor = convertToColorName(name);
+  const themedColor = convertToColorName(name, theme);
+  // lets just try to get the color first to save some cycles
+  let resolvedToken = tokens[themedColor];
+  if (!resolvedToken) {
+    resolvedToken = tokens[defaultColor];
   }
-  return convertToCamelCase(name);
+  return resolvedToken;
 }
-export function getColorByName(name) {
-  if (name) {
-    return tokens[convertToColorName(name)];
+export function convertToColorName(name = "", theme = "") {
+  let colorResolution = name;
+  const dash = isDashCase(name);
+  if (dash) {
+    colorResolution = camelize(colorResolution);
   }
+  colorResolution = addColor(colorResolution);
+  colorResolution = addTheme(colorResolution, theme);
+  // takes care of the case where colorPrimaryDark ends up with ColorPrimaryDark
+  colorResolution = lowerCaseFirst(colorResolution);
+  return colorResolution;
 }

package/lib/collection/utils/watch-options.js

@@ -1,19 +1,41 @@
 /*!
  * Built with Duet Design System
  */
-export const watchForOptions = (containerEl, tagName, onChange) => {
+const watchFor = (containerEl, tagName, onChange, changeHandler, options = {
+  childList: true,
+  subtree: true,
+}) => {
   let mutation;
   if (typeof MutationObserver !== "undefined") {
     mutation = new MutationObserver(mutationList => {
-      onChange(getSelectedOption(mutationList, tagName));
-    });
-    mutation.observe(containerEl, {
-      childList: true,
-      subtree: true,
+      onChange(changeHandler(mutationList, tagName));
     });
+    mutation.observe(containerEl, options);
   }
   return mutation;
 };
+export const watchForOptions = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getSelectedOption);
+};
+export const watchForElement = (containerEl, tagName, onChange) => {
+  return watchFor(containerEl, tagName, onChange, getElementItem, {
+    childList: true,
+    subtree: true,
+  });
+};
+const getElementItem = (mutationList) => {
+  let addedNode = false;
+  let removedNode = false;
+  mutationList.forEach(mut => {
+    if (mut.addedNodes.length) {
+      addedNode = true;
+    }
+    if (mut.removedNodes.length) {
+      removedNode = true;
+    }
+  });
+  return { addedNode, removedNode, mutationList };
+};
 const getSelectedOption = (mutationList, tagName) => {
   let newOption;
   mutationList.forEach(mut => {
@@ -31,3 +53,10 @@ export const findCheckedOption = (el, tagName) => {
   const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
   return options.find((o) => o.checked === true);
 };
+export const findErrorItems = (el, tagName) => {
+  if (el.nodeType !== 1) {
+    return undefined;
+  }
+  const options = el.tagName === tagName.toUpperCase() ? [el] : Array.from(el.querySelectorAll(tagName));
+  return options.find((o) => o.checked === true);
+};

package/lib/custom-elements-bundle/index.d.ts

@@ -74,6 +74,24 @@ export const DuetDivider: {
   new (): DuetDivider;
 };
 
+interface DuetEditableTable extends Components.DuetEditableTable, HTMLElement {}
+export const DuetEditableTable: {
+  prototype: DuetEditableTable;
+  new (): DuetEditableTable;
+};
+
+interface DuetEditableTableButton extends Components.DuetEditableTableButton, HTMLElement {}
+export const DuetEditableTableButton: {
+  prototype: DuetEditableTableButton;
+  new (): DuetEditableTableButton;
+};
+
+interface DuetEditableTableItem extends Components.DuetEditableTableItem, HTMLElement {}
+export const DuetEditableTableItem: {
+  prototype: DuetEditableTableItem;
+  new (): DuetEditableTableItem;
+};
+
 interface DuetEmptyState extends Components.DuetEmptyState, HTMLElement {}
 export const DuetEmptyState: {
   prototype: DuetEmptyState;
@@ -200,6 +218,12 @@ export const DuetParagraph: {
   new (): DuetParagraph;
 };
 
+interface DuetProgress extends Components.DuetProgress, HTMLElement {}
+export const DuetProgress: {
+  prototype: DuetProgress;
+  new (): DuetProgress;
+};
+
 interface DuetRadio extends Components.DuetRadio, HTMLElement {}
 export const DuetRadio: {
   prototype: DuetRadio;
@@ -290,6 +314,18 @@ export const DuetTray: {
   new (): DuetTray;
 };
 
+interface DuetUpload extends Components.DuetUpload, HTMLElement {}
+export const DuetUpload: {
+  prototype: DuetUpload;
+  new (): DuetUpload;
+};
+
+interface DuetUploadAriaStatus extends Components.DuetUploadAriaStatus, HTMLElement {}
+export const DuetUploadAriaStatus: {
+  prototype: DuetUploadAriaStatus;
+  new (): DuetUploadAriaStatus;
+};
+
 interface DuetVisuallyHidden extends Components.DuetVisuallyHidden, HTMLElement {}
 export const DuetVisuallyHidden: {
   prototype: DuetVisuallyHidden;