@descope-ui/common 0.0.17 → 0.1.0

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.1.0](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.18...@descope-ui/common-0.1.0) (2025-09-02)
+
+
+### Features
+
+* Trusted Devices ([#697](https://github.com/descope/web-components-ui/issues/697)) ([fb2f0eb](https://github.com/descope/web-components-ui/commit/fb2f0eb6773ed624354ed9f0b97d713bb8b10fce))
+
+## [0.0.18](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.17...@descope-ui/common-0.0.18) (2025-07-21)
+
 ## [0.0.17](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.16...@descope-ui/common-0.0.17) (2025-07-15)
 
 ## [0.0.16](https://github.com/descope/web-components-ui/compare/@descope-ui/common-0.0.15...@descope-ui/common-0.0.16) (2025-06-30)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/common",
-  "version": "0.0.17",
+  "version": "0.1.0",
   "dependencies": {
     "element-internals-polyfill": "^1.3.9",
     "color": "^4.2.3",

package/src/componentsHelpers/index.js

@@ -1,13 +1,17 @@
 import { kebabCaseJoin } from '../utils';
 import { DESCOPE_PREFIX } from '../constants';
 
-export const observeAttributes = (ele, callback, { excludeAttrs = [], includeAttrs = [] }) => {
+export const observeAttributes = (
+  ele,
+  callback,
+  { excludeAttrs = [], includeAttrs = [] },
+) => {
   // sync all attrs on init
   const filteredAttrs = Array.from(ele.attributes)
     .filter(
       (attr) =>
         !excludeAttrs.includes(attr.name) &&
-        (!includeAttrs.length || includeAttrs.includes(attr.name))
+        (!includeAttrs.length || includeAttrs.includes(attr.name)),
     )
     .map((attr) => attr.name);
 
@@ -40,24 +44,28 @@ export const observeChildren = (ele, callback) => {
     });
   });
 
-  observer.observe(ele, { childList: true, characterData: true, subtree: true });
+  observer.observe(ele, {
+    childList: true,
+    characterData: true,
+    subtree: true,
+  });
 };
 
 const createSyncAttrsCb =
   (srcEle, targetEle, mapAttrs = {}) =>
-    (attrNames) => {
-      attrNames.forEach((attrName) => {
-        const targetAttrName = mapAttrs[attrName] || attrName;
-        const srcAttrVal = srcEle.getAttribute(attrName);
-        if (srcAttrVal !== null) {
-          if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
-            targetEle.setAttribute(targetAttrName, srcAttrVal);
-          }
-        } else {
-          targetEle.removeAttribute(targetAttrName);
+  (attrNames) => {
+    attrNames.forEach((attrName) => {
+      const targetAttrName = mapAttrs[attrName] || attrName;
+      const srcAttrVal = srcEle.getAttribute(attrName);
+      if (srcAttrVal !== null) {
+        if (targetEle.getAttribute(targetAttrName) !== srcAttrVal) {
+          targetEle.setAttribute(targetAttrName, srcAttrVal);
         }
-      });
-    };
+      } else {
+        targetEle.removeAttribute(targetAttrName);
+      }
+    });
+  };
 
 export const syncAttrs = (ele1, ele2, options) => {
   observeAttributes(ele1, createSyncAttrsCb(ele1, ele2), options);
@@ -69,7 +77,11 @@ export const getComponentName = (name) => kebabCaseJoin(DESCOPE_PREFIX, name);
 export const getCssVarName = (...args) => `--${kebabCaseJoin(...args)}`;
 
 export const forwardAttrs = (source, dest, options = {}) => {
-  observeAttributes(source, createSyncAttrsCb(source, dest, options.mapAttrs), options);
+  observeAttributes(
+    source,
+    createSyncAttrsCb(source, dest, options.mapAttrs),
+    options,
+  );
 };
 
 export const forwardProps = (src, target, props = []) => {
@@ -88,14 +100,13 @@ export const forwardProps = (src, target, props = []) => {
           },
         },
       }),
-    {}
+    {},
   );
 
   Object.defineProperties(target, config);
 };
 
 export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
-
   let style;
   try {
     style = new CSSStyleSheet();
@@ -109,14 +120,14 @@ export const injectStyle = (cssString, ref, { prepend = false } = {}) => {
     style.replaceSync(cssString);
   }
   if (_ref) {
-    const adoptedStyleSheets = [...(_ref.adoptedStyleSheets || [])]
+    const adoptedStyleSheets = [...(_ref.adoptedStyleSheets || [])];
     adoptedStyleSheets[prepend ? 'unshift' : 'push'](style);
 
     _ref.adoptedStyleSheets = adoptedStyleSheets;
   }
 
   return style;
-}
+};
 
 // we should mimic the CSSStyleSheet API for the fns we are using
 class CSSStyleSheetMock {
@@ -127,7 +138,7 @@ class CSSStyleSheetMock {
     this.ref = ref?.shadowRoot || ref;
 
     if (!this.ref) {
-      return
+      return;
     }
 
     if (prepend) {
@@ -146,4 +157,13 @@ class CSSStyleSheetMock {
   }
 }
 
-const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) => new CSSStyleSheetMock(cssString, ref, { prepend });
+const generateStyleTagFallback = (cssString, ref, { prepend = false } = {}) =>
+  new CSSStyleSheetMock(cssString, ref, { prepend });
+
+export const limitAbbreviation = (str, limit = 2) =>
+  str
+    .trim()
+    .split(' ')
+    .splice(0, limit)
+    .map((s) => s[0]?.toUpperCase())
+    .join('');

package/src/componentsMixins/mixins/createDynamicDataMixin.js

@@ -32,6 +32,7 @@ export const createDynamicDataMixin =
     slotName,
     rerenderAttrsList = [],
     targetSelector,
+    sortFn = (data) => data,
   }) =>
   (superclass) =>
     class DynamicDataMixinClass extends superclass {
@@ -62,7 +63,8 @@ export const createDynamicDataMixin =
 
       #renderItems() {
         this.#removeOldItems();
-        this.data.forEach((item, index) => {
+        const items = sortFn ? this.data.sort(sortFn) : this.data;
+        items.forEach((item, index) => {
           const content = getTemplateContent(itemRenderer(item, index, this));
           if (!this.#targetEle) return;
           this.#targetEle.appendChild(content?.cloneNode(true));

package/src/componentsMixins/mixins/index.js

@@ -14,3 +14,4 @@ export { externalInputMixin } from './externalInputMixin';
 export { componentsContextMixin } from './componentsContextMixin';
 export { connectorMixin } from './connectorMixin';
 export { createDynamicDataMixin } from './createDynamicDataMixin';
+export { activeableMixin } from './activeableMixin';