@descope/web-components-ui 2.2.16 → 2.2.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "2.2.16",
+  "version": "2.2.18",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -50,10 +50,10 @@
     "webpack": "^5.79.0",
     "webpack-cli": "^6.0.0",
     "webpack-dev-server": "^5.0.0",
-    "rollup-replace-plugin": "2.2.16",
-    "test-drivers": "2.2.16",
-    "webpack-extract-font-loader": "2.2.16",
-    "webpack-replace-plugin": "2.2.16"
+    "rollup-replace-plugin": "2.2.18",
+    "test-drivers": "2.2.18",
+    "webpack-extract-font-loader": "2.2.18",
+    "webpack-replace-plugin": "2.2.18"
   },
   "dependencies": {
     "@vaadin/checkbox": "24.3.4",
@@ -77,30 +77,30 @@
     "libphonenumber-js": "^1.11.12",
     "lodash.debounce": "4.0.8",
     "lodash.merge": "4.6.2",
-    "@descope-ui/common": "2.2.16",
-    "@descope-ui/descope-address-field": "2.2.16",
-    "@descope-ui/descope-apps-list": "2.2.16",
-    "@descope-ui/descope-autocomplete-field": "2.2.16",
-    "@descope-ui/descope-avatar": "2.2.16",
-    "@descope-ui/descope-badge": "2.2.16",
-    "@descope-ui/descope-button": "2.2.16",
-    "@descope-ui/descope-collapsible-container": "2.2.16",
-    "@descope-ui/descope-combo-box": "2.2.16",
-    "@descope-ui/descope-enriched-text": "2.2.16",
-    "@descope-ui/descope-icon": "2.2.16",
-    "@descope-ui/descope-image": "2.2.16",
-    "@descope-ui/descope-link": "2.2.16",
-    "@descope-ui/descope-list": "2.2.16",
-    "@descope-ui/descope-list-item": "2.2.16",
-    "@descope-ui/descope-outbound-app-button": "2.2.16",
-    "@descope-ui/descope-outbound-apps": "2.2.16",
-    "@descope-ui/descope-password-strength": "2.2.16",
-    "@descope-ui/descope-recovery-codes": "2.2.16",
-    "@descope-ui/descope-text": "2.2.16",
-    "@descope-ui/descope-timer": "2.2.16",
-    "@descope-ui/descope-timer-button": "2.2.16",
-    "@descope-ui/descope-trusted-devices": "2.2.16",
-    "@descope-ui/descope-tooltip": "2.2.16"
+    "@descope-ui/common": "2.2.18",
+    "@descope-ui/descope-address-field": "2.2.18",
+    "@descope-ui/descope-apps-list": "2.2.18",
+    "@descope-ui/descope-autocomplete-field": "2.2.18",
+    "@descope-ui/descope-avatar": "2.2.18",
+    "@descope-ui/descope-badge": "2.2.18",
+    "@descope-ui/descope-button": "2.2.18",
+    "@descope-ui/descope-collapsible-container": "2.2.18",
+    "@descope-ui/descope-combo-box": "2.2.18",
+    "@descope-ui/descope-enriched-text": "2.2.18",
+    "@descope-ui/descope-icon": "2.2.18",
+    "@descope-ui/descope-image": "2.2.18",
+    "@descope-ui/descope-link": "2.2.18",
+    "@descope-ui/descope-list": "2.2.18",
+    "@descope-ui/descope-list-item": "2.2.18",
+    "@descope-ui/descope-outbound-app-button": "2.2.18",
+    "@descope-ui/descope-outbound-apps": "2.2.18",
+    "@descope-ui/descope-password-strength": "2.2.18",
+    "@descope-ui/descope-recovery-codes": "2.2.18",
+    "@descope-ui/descope-text": "2.2.18",
+    "@descope-ui/descope-timer": "2.2.18",
+    "@descope-ui/descope-timer-button": "2.2.18",
+    "@descope-ui/descope-trusted-devices": "2.2.18",
+    "@descope-ui/descope-tooltip": "2.2.18"
   },
   "overrides": {
     "@vaadin/avatar": "24.3.4",

package/src/components/descope-user-attribute/UserAttributeClass.js

@@ -2,12 +2,12 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
-import deleteIcon from './delete.svg';
-import editIcon from './edit.svg';
 import { TextClass } from '@descope-ui/descope-text/class';
 import { ButtonClass } from '@descope-ui/descope-button/class';
 import { BadgeClass } from '@descope-ui/descope-badge/class';
 import { injectStyle } from '@descope-ui/common/components-helpers';
+import deleteIcon from './delete.svg';
+import editIcon from './edit.svg';
 
 export const componentName = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
@@ -25,10 +25,10 @@ class RawUserAttribute extends createBaseClass({
           <div class="btn-wrapper">
             <descope-badge mode="default" bordered="true" size="xs"></descope-badge>
             <descope-button size="xs" data-id="edit-btn" square="true" variant="link" mode="primary">
-              <vaadin-icon src=${editIcon}></vaadin-icon>
+              <slot name="edit-icon"></slot>
             </descope-button>
             <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-              <vaadin-icon src=${deleteIcon}></vaadin-icon>
+              <slot name="delete-icon"></slot>
             </descope-button>
           </div>
         </div>
@@ -42,16 +42,18 @@ class RawUserAttribute extends createBaseClass({
           container-type: inline-size;
 				}
 
-        vaadin-icon {
-          color: currentcolor;
-        }
-
         .root {
           display: flex;
           width: 100%;
           height: 100%;
           align-items: center;
         }
+        
+        ::slotted(*) {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
 
         @container (max-width: 529px) {
           .root {
@@ -191,6 +193,22 @@ class RawUserAttribute extends createBaseClass({
     this.editButton.addEventListener('click', () =>
       this.dispatchEvent(new CustomEvent('edit-clicked', { bubbles: true, composed: true }))
     );
+
+    this.setDefaultChildren();
+  }
+
+  #addIcon(src, slotName) {
+    const icon = document.createElement('descope-icon');
+    icon.setAttribute('src', src);
+    icon.setAttribute('src-dark', src);
+    icon.setAttribute('slot', slotName);
+    this.appendChild(icon);
+  }
+
+  setDefaultChildren() {
+    if (this.children.length) return;
+    this.#addIcon(deleteIcon, 'delete-icon');
+    this.#addIcon(editIcon, 'edit-icon');
   }
 
   static get observedAttributes() {

package/src/components/descope-user-attribute/delete.svg

@@ -1,3 +1,3 @@
 <svg width="14" height="18" viewBox="0 0 14 18" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentcolor"/>
-</svg>
+  <path d="M1 16C1 17.1 1.9 18 3 18H11C12.1 18 13 17.1 13 16V4H1V16ZM3 6H11V16H3V6ZM10.5 1L9.5 0H4.5L3.5 1H0V3H14V1H10.5Z" fill="currentcolor"/>
+</svg>

package/src/components/descope-user-attribute/edit.svg

@@ -1,3 +1,3 @@
-<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z" fill="currentcolor"/>
+<svg width="18" height="18" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M10.0002 0.992149C10.0002 1.01615 10.0002 1.01615 10.0002 1.01615L8.22419 3.00815H2.99219C2.46419 3.00815 2.00819 3.44015 2.00819 3.99215V12.0082C2.00819 12.5362 2.44019 12.9922 2.99219 12.9922H5.53619C5.84819 13.0402 6.16019 13.0402 6.47219 12.9922H11.0082C11.5362 12.9922 11.9922 12.5602 11.9922 12.0082V7.78416L13.9362 5.62415L14.0082 5.67215V11.9842C14.0082 13.6642 12.6642 15.0082 11.0082 15.0082H3.01619C1.33619 15.0082 -0.0078125 13.6642 -0.0078125 11.9842V3.99215C-0.0078125 2.33615 1.33619 0.992149 3.01619 0.992149H10.0002ZM11.2722 2.62415L12.6162 4.11215L7.72019 9.68016C7.50419 9.92016 6.83219 10.2322 5.68019 10.6162C5.65619 10.6402 5.60819 10.6402 5.56019 10.6162C5.46419 10.5922 5.39219 10.4722 5.44019 10.3762C5.75219 9.24816 6.04019 8.55216 6.25619 8.31216L11.2722 2.62415ZM11.9202 1.85615L13.2882 0.320149C13.6482 -0.0878516 14.2722 -0.111852 14.6802 0.272149C15.0882 0.632149 15.1122 1.28015 14.7522 1.68815L13.2642 3.36815L11.9202 1.85615Z" fill="currentcolor"/>
 </svg>

package/src/components/descope-user-attribute/index.js

@@ -2,7 +2,7 @@ import { componentName, UserAttributeClass } from './UserAttributeClass';
 import '@descope-ui/descope-text';
 import '@descope-ui/descope-button';
 import '@descope-ui/descope-badge';
-import '@vaadin/icon';
+import '@descope-ui/descope-icon';
 
 customElements.define(componentName, UserAttributeClass);
 

package/src/components/descope-user-auth-method/UserAuthMethodClass.js

@@ -5,8 +5,8 @@ import { getComponentName } from '../../helpers/componentHelpers';
 import greenVIcon from './green-v.svg';
 import { TextClass } from '@descope-ui/descope-text/class';
 import { ButtonClass } from '@descope-ui/descope-button/class';
-import { BadgeClass } from '@descope-ui/descope-badge/class';
 import { IconClass } from '@descope-ui/descope-icon/class';
+import { BadgeClass } from '@descope-ui/descope-badge/class';
 import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('user-auth-method');