@descope/web-components-ui 1.101.0 → 1.103.0

package/dist/cjs/index.cjs.js

@@ -2632,7 +2632,6 @@ const createDynamicDataMixin$1 =
     slotName,
     rerenderAttrsList = [],
     targetSelector,
-    sortFn
   }) =>
   (superclass) =>
     class DynamicDataMixinClass extends superclass {
@@ -2672,7 +2671,7 @@ const createDynamicDataMixin$1 =
 
       set data(value) {
         if (this.#validateSchema(value)) {
-          this.#data = sortFn ? value.sort(sortFn) : value;
+          this.#data = value;
           this.#renderItems();
         }
       }
@@ -21325,8 +21324,6 @@ var collapsibleContainer$1 = /*#__PURE__*/Object.freeze({
   vars: vars$2
 });
 
-const sortData = (a, b) => a.value.localeCompare(b.value);
-
 const componentName$2 = getComponentName('recovery-codes');
 
 const itemRenderer = ({ value }, _, ref) => {
@@ -21341,6 +21338,10 @@ class RawRecoveryCodes extends createBaseClass$1({
   componentName: componentName$2,
   baseSelector: ':host > div',
 }) {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
   constructor() {
     super();
 
@@ -21353,6 +21354,10 @@ class RawRecoveryCodes extends createBaseClass$1({
       </div>
     `;
 
+    this.list = this.shadowRoot.querySelector('.list');
+    this.icon = this.shadowRoot.querySelector('.icon');
+    this.iconWrapper = this.shadowRoot.querySelector('.icon-wrapper');
+
     injectStyle(
       `
       :host {
@@ -21377,14 +21382,17 @@ class RawRecoveryCodes extends createBaseClass$1({
         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,
@@ -21402,9 +21410,6 @@ class RawRecoveryCodes extends createBaseClass$1({
   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));
 
@@ -21426,6 +21431,20 @@ class RawRecoveryCodes extends createBaseClass$1({
       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(
@@ -21450,8 +21469,7 @@ const RecoveryCodesClass = compose(
   createDynamicDataMixin$1({
     itemRenderer,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
-    sortFn: sortData
+    targetSelector: '.list'
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,