@descope/web-components-ui 1.102.0 → 1.104.0

package/dist/index.esm.js

@@ -4462,7 +4462,6 @@ const createDynamicDataMixin$1 =
     slotName,
     rerenderAttrsList = [],
     targetSelector,
-    sortFn
   }) =>
   (superclass) =>
     class DynamicDataMixinClass extends superclass {
@@ -4502,7 +4501,7 @@ const createDynamicDataMixin$1 =
 
       set data(value) {
         if (this.#validateSchema(value)) {
-          this.#data = sortFn ? value.sort(sortFn) : value;
+          this.#data = value;
           this.#renderItems();
         }
       }
@@ -19027,6 +19026,13 @@ const colors$2 = genColors({
     highlight: '#fef1f1',
     contrast: '#ffffff',
   },
+  warning: {
+    main: '#c45512',
+    dark: '#a24309',
+    light: '#ff985a',
+    highlight: '#fdf0e5',
+    contrast: '#ffffff',
+  },
 });
 
 const fonts$1 = {
@@ -19204,6 +19210,13 @@ const colors$1 = genColors$1({
     highlight: '#fef1f1',
     contrast: '#ffffff',
   },
+  warning: {
+    main: '#c45512',
+    dark: '#a24309',
+    light: '#ff985a',
+    highlight: '#fdf0e5',
+    contrast: '#ffffff',
+  },
 });
 
 const fonts = {
@@ -20221,9 +20234,21 @@ const text$1 = {
     error: {
       [vars$O.textColor]: globalRefs$A.colors.error.main,
     },
+    'error-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.error.dark,
+    },
     success: {
       [vars$O.textColor]: globalRefs$A.colors.success.main,
     },
+    'success-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.success.dark,
+    },
+    warning: {
+      [vars$O.textColor]: globalRefs$A.colors.warning.main,
+    },
+    'warning-dark': {
+      [vars$O.textColor]: globalRefs$A.colors.warning.dark,
+    },
   },
 
   textAlign: {
@@ -24040,8 +24065,6 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const sortData = (a, b) => a.value.localeCompare(b.value);
-
 const componentName = getComponentName('recovery-codes');
 
 const itemRenderer = ({ value }, _, ref) => {
@@ -24056,6 +24079,10 @@ class RawRecoveryCodes extends createBaseClass({
   componentName,
   baseSelector: ':host > div',
 }) {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
   constructor() {
     super();
 
@@ -24068,6 +24095,10 @@ class RawRecoveryCodes extends createBaseClass({
       </div>
     `;
 
+    this.list = this.shadowRoot.querySelector('.list');
+    this.icon = this.shadowRoot.querySelector('.icon');
+    this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper');
+
     injectStyle(
       `
       :host {
@@ -24092,14 +24123,17 @@ class RawRecoveryCodes extends createBaseClass({
         content: '\\02022';
         transform: translateY(-0.06em);
       }
-      vaadin-icon {
+      .icon-wrapper {
+        align-self: flex-start;
+      }
+      .icon {
         cursor: pointer;
       }
-      .copied {
+      .icon.copied {
         cursor: initial;
       }
-      .icon-wrapper {
-        align-self: flex-start;
+      .icon.readonly {
+        pointer-events: none;
       }
     `,
       this,
@@ -24117,9 +24151,6 @@ class RawRecoveryCodes extends createBaseClass({
   init() {
     super.init();
 
-    this.list = this.shadowRoot.querySelector('.list');
-    this.icon = this.shadowRoot.querySelector('.icon');
-    this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper');
 
     this.icon.addEventListener('click', this.onCopy.bind(this));
 
@@ -24141,6 +24172,20 @@ class RawRecoveryCodes extends createBaseClass({
       this.icon.classList.remove('copied');
     }, 5000);
   }
+
+  onReadOnly(isReadOnly) {
+    this.icon.classList.toggle('readonly', isReadOnly);
+  }
+ 
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (newValue !== oldValue) {
+      if (attrName === 'readonly') {
+        this.onReadOnly(newValue === 'true');
+      }
+    }
+  }
 }
 
 const RecoveryCodesClass = compose(
@@ -24165,8 +24210,7 @@ const RecoveryCodesClass = compose(
   createDynamicDataMixin$1({
     itemRenderer,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
-    sortFn: sortData
+    targetSelector: '.list'
   }),
   draggableMixin,
   componentNameValidationMixin,
@@ -24314,6 +24358,13 @@ const colors = {
     highlight: '#4a0603',
     contrast: '#000000',
   },
+  warning: {
+    main: '#EF7A33',
+    dark: '#FF985A',
+    light: '#FF6304',
+    highlight: '#C45512',
+    contrast: '#000000',
+  },
 };
 
 const darkTheme = merge({}, defaultTheme, {