@descope-ui/descope-recovery-codes 0.0.1 → 0.0.2

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.0.2](https://github.com/descope/web-components-ui/compare/@descope-ui/descope-recovery-codes-0.0.1...@descope-ui/descope-recovery-codes-0.0.2) (2025-06-30)
+
+### Dependency Updates
+
+* `@descope-ui/common` updated to version `0.0.16`
+* `@descope-ui/theme-globals` updated to version `0.0.16`
+* `@descope-ui/descope-text` updated to version `0.0.16`
 ## 0.0.1 (2025-06-29)
 
 ### Dependency Updates

package/e2e/descope-recovery-codes.spec.ts

@@ -7,6 +7,7 @@ const componentAttributes = {
   mode: ['primary', 'secondary', 'success', 'error'],
   'text-align': ['left', 'center', 'right'],
   'full-width': ['false', 'true'],
+  'readonly': ['false', 'true'],
   itemsSource: ['attr', 'prop'],
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope-ui/descope-recovery-codes",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "exports": {
     ".": {
       "import": "./src/component/index.js"
@@ -20,9 +20,9 @@
   "dependencies": {
     "@vaadin/icon": "24.3.4",
     "@vaadin/icons": "24.3.4",
-    "@descope-ui/common": "0.0.15",
-    "@descope-ui/theme-globals": "0.0.15",
-    "@descope-ui/descope-text": "0.0.15"
+    "@descope-ui/common": "0.0.16",
+    "@descope-ui/theme-globals": "0.0.16",
+    "@descope-ui/descope-text": "0.0.16"
   },
   "publishConfig": {
     "link-workspace-packages": false

package/src/component/RecoveryCodesClass.js

@@ -11,7 +11,6 @@ import {
   injectStyle,
 } from '@descope-ui/common/components-helpers';
 import { createBaseClass } from '@descope-ui/common/base-classes';
-import { sortData } from './helpers';
 import { TextClass } from '@descope-ui/descope-text/class';
 
 export const componentName = getComponentName('recovery-codes');
@@ -28,6 +27,10 @@ class RawRecoveryCodes extends createBaseClass({
   componentName,
   baseSelector: ':host > div',
 }) {
+  static get observedAttributes() {
+    return ['readonly'];
+  }
+
   constructor() {
     super();
 
@@ -40,6 +43,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 {
@@ -64,14 +71,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,
@@ -89,9 +99,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));
 
@@ -113,6 +120,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');
+      }
+    }
+  }
 }
 
 export const RecoveryCodesClass = compose(
@@ -137,8 +158,7 @@ export const RecoveryCodesClass = compose(
   createDynamicDataMixin({
     itemRenderer,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list',
-    sortFn: sortData
+    targetSelector: '.list'
   }),
   draggableMixin,
   componentNameValidationMixin,

package/stories/descope-recovery-codes.stories.js

@@ -5,6 +5,7 @@ import {
   fullWidthControl,
   typographyVariantControl,
   directionControl,
+  readOnlyControl,
 } from '@descope-ui/common/sb-controls';
 
 const serializedData = [
@@ -26,6 +27,7 @@ const Template = ({
   'text-align': textAlign,
   'full-width': fullWidth,
   direction,
+  readonly,
 }) => `
     <descope-recovery-codes
       data='${(itemsSource === 'attr' && serializedData) || ''}'
@@ -33,6 +35,7 @@ const Template = ({
       variant="${variant || ''}"
       full-width="${fullWidth || false}"
       text-align="${textAlign}"
+      readonly="${readonly || false}"
       st-host-direction="${direction ?? ''}"
     ></descope-recovery-codes>
   `;
@@ -68,6 +71,7 @@ export default {
     ...fullWidthControl,
     ...typographyVariantControl,
     ...directionControl,
+    ...readOnlyControl,
     itemsSource: {
       name: 'Where to take the items from',
       control: {

package/src/component/helpers.js

@@ -1 +0,0 @@
-export const sortData = (a, b) => a.value.localeCompare(b.value)