@descope/web-components-ui 2.2.16 → 2.2.17

package/dist/index.esm.js

@@ -16671,10 +16671,6 @@ customElements.define(componentName$x, MappingItem);
 
 customElements.define(componentName$y, MappingsFieldClass);
 
-var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
-
-var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
-
 const componentName$w = getComponentName$1('badge');
 
 class RawBadge extends createBaseClass$1({
@@ -16741,6 +16737,10 @@ const BadgeClass = compose$1(
   componentNameValidationMixin$1,
 )(RawBadge);
 
+var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMSAxNkMxIDE3LjEgMS45IDE4IDMgMThIMTFDMTIuMSAxOCAxMyAxNy4xIDEzIDE2VjRIMVYxNlpNMyA2SDExVjE2SDNWNlpNMTAuNSAxTDkuNSAwSDQuNUwzLjUgMUgwVjNIMTRWMUgxMC41WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPg==";
+
+var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNMTAuMDAwMiAwLjk5MjE0OUMxMC4wMDAyIDEuMDE2MTUgMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNUw4LjIyNDE5IDMuMDA4MTVIMi45OTIxOUMyLjQ2NDE5IDMuMDA4MTUgMi4wMDgxOSAzLjQ0MDE1IDIuMDA4MTkgMy45OTIxNVYxMi4wMDgyQzIuMDA4MTkgMTIuNTM2MiAyLjQ0MDE5IDEyLjk5MjIgMi45OTIxOSAxMi45OTIySDUuNTM2MTlDNS44NDgxOSAxMy4wNDAyIDYuMTYwMTkgMTMuMDQwMiA2LjQ3MjE5IDEyLjk5MjJIMTEuMDA4MkMxMS41MzYyIDEyLjk5MjIgMTEuOTkyMiAxMi41NjAyIDExLjk5MjIgMTIuMDA4MlY3Ljc4NDE2TDEzLjkzNjIgNS42MjQxNUwxNC4wMDgyIDUuNjcyMTVWMTEuOTg0MkMxNC4wMDgyIDEzLjY2NDIgMTIuNjY0MiAxNS4wMDgyIDExLjAwODIgMTUuMDA4MkgzLjAxNjE5QzEuMzM2MTkgMTUuMDA4MiAtMC4wMDc4MTI1IDEzLjY2NDIgLTAuMDA3ODEyNSAxMS45ODQyVjMuOTkyMTVDLTAuMDA3ODEyNSAyLjMzNjE1IDEuMzM2MTkgMC45OTIxNDkgMy4wMTYxOSAwLjk5MjE0OUgxMC4wMDAyWk0xMS4yNzIyIDIuNjI0MTVMMTIuNjE2MiA0LjExMjE1TDcuNzIwMTkgOS42ODAxNkM3LjUwNDE5IDkuOTIwMTYgNi44MzIxOSAxMC4yMzIyIDUuNjgwMTkgMTAuNjE2MkM1LjY1NjE5IDEwLjY0MDIgNS42MDgxOSAxMC42NDAyIDUuNTYwMTkgMTAuNjE2MkM1LjQ2NDE5IDEwLjU5MjIgNS4zOTIxOSAxMC40NzIyIDUuNDQwMTkgMTAuMzc2MkM1Ljc1MjE5IDkuMjQ4MTYgNi4wNDAxOSA4LjU1MjE2IDYuMjU2MTkgOC4zMTIxNkwxMS4yNzIyIDIuNjI0MTVaTTExLjkyMDIgMS44NTYxNUwxMy4yODgyIDAuMzIwMTQ5QzEzLjY0ODIgLTAuMDg3ODUxNiAxNC4yNzIyIC0wLjExMTg1MiAxNC42ODAyIDAuMjcyMTQ5QzE1LjA4ODIgMC42MzIxNDkgMTUuMTEyMiAxLjI4MDE1IDE0Ljc1MjIgMS42ODgxNUwxMy4yNjQyIDMuMzY4MTVMMTEuOTIwMiAxLjg1NjE1WiIgZmlsbD0iY3VycmVudGNvbG9yIi8+Cjwvc3ZnPgo=";
+
 const componentName$v = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
   componentName: componentName$v,
@@ -16757,10 +16757,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>
@@ -16774,16 +16774,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 {
@@ -16923,6 +16925,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() {
@@ -16998,6 +17016,10 @@ const UserAttributeClass = compose(
 
 customElements.define(componentName$w, BadgeClass);
 
+customElements.define(componentName$1b, ImageClass);
+
+customElements.define(componentName$1a, IconClass);
+
 customElements.define(componentName$v, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
@@ -18308,10 +18330,6 @@ const ThirdPartyAppLogoClass = compose(
   componentNameValidationMixin
 )(RawThirdPartyAppLogoClass);
 
-customElements.define(componentName$1b, ImageClass);
-
-customElements.define(componentName$1a, IconClass);
-
 customElements.define(componentName$m, ThirdPartyAppLogoClass);
 
 const componentName$l = getComponentName('security-questions-setup');
@@ -24949,7 +24967,6 @@ class RawRecoveryCodes extends createBaseClass$1({
   init() {
     super.init();
 
-
     this.icon.addEventListener('click', this.onCopy.bind(this));
 
     forwardAttrs$1(this, this.iconWrapper, { includeAttrs: ['variant', 'mode'] });
@@ -24974,7 +24991,7 @@ class RawRecoveryCodes extends createBaseClass$1({
   onReadOnly(isReadOnly) {
     this.icon.classList.toggle('readonly', isReadOnly);
   }
- 
+
   attributeChangedCallback(attrName, oldValue, newValue) {
     super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
@@ -24995,20 +25012,20 @@ const RecoveryCodesClass = compose$1(
         { selector: () => ':host', property: 'direction' },
         {
           selector: () => TextClass.componentName,
-          property: TextClass.cssVarList.hostDirection
+          property: TextClass.cssVarList.hostDirection,
         },
       ],
       textAlign: { selector: () => '.list', property: 'align-items' },
       iconColor: { selector: () => 'vaadin-icon', property: 'color' },
       iconSize: { selector: () => 'vaadin-icon', property: 'font-size' },
       iconGap: { selector: () => '.wrapper', property: 'gap' },
-      bulletGap: { selector: () => 'descope-text span', property: 'gap' }
+      bulletGap: { selector: () => 'descope-text span', property: 'gap' },
     },
   }),
   createDynamicDataMixin$1({
     itemRenderer: itemRenderer$2,
     rerenderAttrsList: ['variant', 'mode'],
-    targetSelector: '.list'
+    targetSelector: '.list',
   }),
   draggableMixin$1,
   componentNameValidationMixin$1,