@descope/web-components-ui 1.102.0 → 1.103.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();
         }
       }
@@ -24040,8 +24039,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 +24053,10 @@ class RawRecoveryCodes extends createBaseClass({
   componentName,
   baseSelector: ':host > div',
 }) {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
   constructor() {
     super();
 
@@ -24068,6 +24069,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 +24097,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 +24125,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 +24146,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 +24184,7 @@ const RecoveryCodesClass = compose(
   createDynamicDataMixin$1({
     itemRenderer,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
-    sortFn: sortData
+    targetSelector: '.list'
   }),
   draggableMixin,
   componentNameValidationMixin,