@descope/web-components-ui 1.31.0 → 1.33.0

package/src/components/descope-modal/ModalClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import {
@@ -58,7 +59,14 @@ const customMixin = (superclass) =>
 
       overlay._attachOverlay = () => {
         overlay.bringToFront();
-        this.baseElement.setAttribute('style', 'display:flex!important;');
+        injectStyle(
+          `
+          :host {
+            display: flex!important;
+          }
+          `,
+          this.baseElement
+        );
       };
       overlay._detachOverlay = () => {
         this.baseElement.style.display = 'none';
@@ -95,7 +103,7 @@ export const ModalClass = compose(
     },
     forward: {
       include: false,
-      attributes: ['opened'],
+      attributes: ['opened', 'style'],
     },
   }),
   draggableMixin,
@@ -105,8 +113,12 @@ export const ModalClass = compose(
   createProxy({
     slots: [''],
     wrappedEleName: 'vaadin-dialog',
-    style: () => ``,
-    excludeAttrsSync: ['tabindex', 'opened'],
+    style: () => `
+      vaaadin-dialog {
+        display: flex!important;
+      }
+    `,
+    excludeAttrsSync: ['tabindex', 'opened', 'style'],
     componentName,
   })
 );

package/src/components/descope-new-password/NewPasswordClass.js

@@ -208,7 +208,7 @@ export const NewPasswordClass = compose(
       margin-top: 8px;
       display: flex;
     }
-    descope-policy-validation.hidden {
+    .hidden {
       display: none;
     }
 		`,

package/src/components/descope-new-password/descope-new-password-internal/NewPasswordInternal.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, observeAttributes } from '../../../helpers/componentHelpers';
 import { NewPasswordClass } from '../NewPasswordClass';
@@ -64,11 +65,11 @@ class NewPasswordInternal extends BaseInputClass {
   }
 
   onHasConfirmChange(hasConfirm) {
-    this.confirmInput.style.display = hasConfirm ? '' : 'none';
+    this.confirmInput.classList.toggle('hidden', !hasConfirm);
   }
 
   onHasValidationChange(hasValidation) {
-    this.policyPanel.style.display = hasValidation ? '' : 'none';
+    this.policyPanel.classList.toggle('hidden', !hasValidation);
   }
 
   get hasValidation() {
@@ -163,8 +164,8 @@ class NewPasswordInternal extends BaseInputClass {
   // indicator in case the root component is required
   handleIndicatorStyle() {
     this.inputs.forEach((input) => {
-      const styleTag = document.createElement('style');
-      styleTag.innerHTML = `
+      injectStyle(
+        `
 				:host ::part(required-indicator)::after {
 					content: var(${NewPasswordClass.cssVarList.inputsRequiredIndicator});
           width: 1em;
@@ -173,8 +174,9 @@ class NewPasswordInternal extends BaseInputClass {
         :host ::part(required-indicator) {
           display: inline-flex;
         }
-				`;
-      input?.shadowRoot.appendChild(styleTag);
+				`,
+        input
+      );
     });
   }
 

package/src/components/descope-passcode/PasscodeClass.js

@@ -15,6 +15,7 @@ import {
   resetInputLabelPosition,
   resetInputFieldDefaultWidth,
 } from '../../helpers/themeHelpers/resetHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('passcode');
 
@@ -32,6 +33,32 @@ const customMixin = (superclass) =>
 
     init() {
       super.init?.();
+
+      injectStyle(
+        `
+        .wrapper {
+          display: flex;
+          width: 100%;
+          justify-content: space-between;
+          direction: ltr;
+          position: relative;
+        }
+
+        descope-text-field {
+          direction: ltr;
+        }
+
+        .loader-container {
+          display: none;
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+        }
+          `,
+        this
+      );
+
       const template = document.createElement('template');
 
       template.innerHTML = `
@@ -55,7 +82,7 @@ const customMixin = (superclass) =>
       super.attributeChangedCallback?.(attrName, oldValue, newValue);
 
       if (attrName === 'digits') {
-        this.style.setProperty('--passcode-digits-count', newValue);
+        this.style['--passcode-digits-count'] = newValue;
       }
     }
   };

package/src/components/descope-passcode/descope-passcode-internal/PasscodeInternal.js

@@ -2,7 +2,15 @@
 import debounce from 'lodash.debounce';
 import { createBaseInputClass } from '../../../baseClasses/createBaseInputClass';
 import { forwardAttrs, getComponentName } from '../../../helpers/componentHelpers';
-import { sanitizeStr, focusElement, createInputMaskStyle, toggleMaskVisibility } from './helpers';
+import {
+  sanitizeStr,
+  focusElement,
+  toggleMaskVisibility,
+  INPUT_MASK_FALLBACK_PROP,
+  INPUT_MASK_TEXT_PROP,
+  INPUT_MASK_DISPLAY_PROP,
+} from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('passcode-internal');
 
@@ -32,27 +40,6 @@ class PasscodeInternal extends BaseInputClass {
 		<div class="loader-container">
       <descope-loader-radial size="xs" mode="primary"></descope-loader-radial>
     </div>
-		<style>
-			.wrapper {
-				display: flex;
-				width: 100%;
-				justify-content: space-between;
-        direction: ltr;
-        position: relative;
-			}
-
-      descope-text-field {
-        direction: ltr;
-      }
-
-      .loader-container {
-        display: none;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-      }
-		</style>
 		`;
 
     this.wrapperEle = this.querySelector('.wrapper');
@@ -164,7 +151,23 @@ class PasscodeInternal extends BaseInputClass {
 
   initInputs() {
     this.inputs.forEach((input) => {
-      input.shadowRoot.appendChild(createInputMaskStyle());
+      // During debounced input we hide the value with a mask.
+      // This allows us to hide the multiple population of the first input
+      // in case of an automated input (e.g. Safari OTP Autofill or paste).
+      injectStyle(
+        `
+        vaadin-text-field::part(input-field)::before {
+          ${INPUT_MASK_FALLBACK_PROP}: '';
+          content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));
+          position: absolute;
+          width: 100%;
+          height: 100%;
+          display: var(${INPUT_MASK_DISPLAY_PROP}, none);
+          align-items: center;
+          justify-content: center;
+        }`,
+        input
+      );
 
       const handleParseInput = (val) => {
         this.parseInputValue(input, val);

package/src/components/descope-passcode/descope-passcode-internal/helpers.js

@@ -1,6 +1,6 @@
-const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
-const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
-const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';
+export const INPUT_MASK_TEXT_PROP = '--descope-input-mask-content';
+export const INPUT_MASK_DISPLAY_PROP = '--descope-input-mask-display';
+export const INPUT_MASK_FALLBACK_PROP = '--descope-input-mask-fallback';
 
 export const focusElement = (ele) => {
   ele?.focus();
@@ -11,25 +11,6 @@ export const sanitizeStr = (str) => {
   return str.replace(/\D/g, '') || '';
 };
 
-// During debounced input we hide the value with a mask.
-// This allows us to hide the multiple population of the first input
-// in case of an automated input (e.g. Safari OTP Autofill or paste).
-export const createInputMaskStyle = () => {
-  const ele = document.createElement('style');
-  ele.id = 'input-mask';
-  ele.innerHTML = `vaadin-text-field::part(input-field)::before {
-    ${INPUT_MASK_FALLBACK_PROP}: '';
-    content: var(${INPUT_MASK_TEXT_PROP}, var(${INPUT_MASK_FALLBACK_PROP}));
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    display: var(${INPUT_MASK_DISPLAY_PROP}, none);
-    align-items: center;
-    justify-content: center;
-  }`;
-  return ele;
-};
-
 export const toggleMaskVisibility = (input, value) => {
   if (value) {
     input.style.setProperty(INPUT_MASK_TEXT_PROP, `"${value}"`);

package/src/components/descope-policy-validation/PolicyValidationClass.js

@@ -4,6 +4,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import { interpolateString } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('policy-validation');
 
@@ -30,7 +31,10 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
       <div class="label"></div>
       <ul></ul>
     </div>
-    <style>
+		`;
+
+    injectStyle(
+      `
       :host > div {
         width: 100%;
         display: flex;
@@ -61,8 +65,9 @@ class RawPolicyValidation extends createBaseClass({ componentName, baseSelector:
         width: 1em;
         text-align: center;
       }
-    </style>
-		`;
+        `,
+      this
+    );
 
     this.panel = this.shadowRoot.querySelector(':host > div');
     this.label = this.shadowRoot.querySelector('.label');

package/src/components/descope-recaptcha/RecaptchaClass.js

@@ -2,6 +2,7 @@ import { draggableMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('recaptcha');
 
@@ -48,7 +49,15 @@ class RawRecaptcha extends BaseClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div class="badge">
+      <span id="recaptcha"></span>
+      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
+    </div>
+    <slot></slot>
+	`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -74,13 +83,9 @@ class RawRecaptcha extends BaseClass {
       .hidden {
         display: none;
       }
-		</style>
-    <div class="badge">
-      <span id="recaptcha"></span>
-      <img src="https://imgs.descope.com/connectors/templates/recaptcha/recaptcha-big.png" alt="recaptcha"/>
-    </div>
-    <slot></slot>
-	`;
+        `,
+      this
+    );
 
     this.recaptchaEle = this.baseElement.querySelector('#recaptcha');
     this.mockRecaptchaEle = this.baseElement.querySelector('img');

package/src/components/descope-scopes-list/ScopesListClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -30,7 +31,11 @@ class RawScopesList extends createBaseClass({ componentName, baseSelector: 'div'
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -39,10 +44,9 @@ class RawScopesList extends createBaseClass({ componentName, baseSelector: 'div'
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   get isReadOnly() {

package/src/components/descope-security-questions-setup/SecurityQuestionsSetupClass.js

@@ -4,6 +4,7 @@ import { getComponentName, observeAttributes } from '../../helpers/componentHelp
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
 import { ComboBoxClass } from '@descope-ui/descope-combo-box/class';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('security-questions-setup');
 
@@ -29,7 +30,11 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName, baseSel
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -38,10 +43,9 @@ class RawSecurityQuestionsSetup extends createBaseClass({ componentName, baseSel
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+    `,
+      this
+    );
   }
 
   get count() {

package/src/components/descope-security-questions-verify/SecurityQuestionsVerifyClass.js

@@ -4,6 +4,7 @@ import { getComponentName, observeAttributes } from '../../helpers/componentHelp
 import { componentNameValidationMixin, createStyleMixin, draggableMixin } from '../../mixins';
 import { TextClass } from '@descope-ui/descope-text/class';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('security-questions-verify');
 
@@ -34,7 +35,11 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName, baseSe
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+    <div></div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -43,10 +48,9 @@ class RawSecurityQuestionsVerify extends createBaseClass({ componentName, baseSe
         display: flex;
         flex-direction: column;
       }
-
-		</style>
-    <div></div>
-		`;
+        `,
+      this
+    );
   }
 
   #renderQuestions() {

package/src/components/descope-text-field/TextFieldClass.js

@@ -136,7 +136,7 @@ export const TextFieldClass = compose(
         align-self: center;
       }
 		`,
-    excludeAttrsSync: ['tabindex'],
+    excludeAttrsSync: ['tabindex', 'style'],
     componentName,
   })
 );

package/src/components/descope-third-party-app-logo/ThirdPartyAppLogoClass.js

@@ -1,3 +1,4 @@
+import { injectStyle } from '@descope-ui/common/components-helpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
@@ -14,8 +15,22 @@ class RawThirdPartyAppLogoClass extends createBaseClass({
   constructor() {
     super();
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div class="wrapper">
+        <div class="third-party-app-logo-wrapper">
+          <div class="third-party-app-logo"></div>
+        </div>
+        <div class="arrows">
+          <descope-icon src="${arrowsImg}"></descope-icon>
+        </div>
+        <div class="company-logo-wrapper">
+            <descope-logo></descope-logo>
+        </div>
+      </div>
+			`;
+
+    injectStyle(
+      `
+        :host {
 					display: inline-flex;
 				}
 				:host([draggable="true"]) > div {
@@ -54,20 +69,9 @@ class RawThirdPartyAppLogoClass extends createBaseClass({
           flex-shrink: 0;
           display: flex;
         }
-
-			</style>
-			<div class="wrapper">
-        <div class="third-party-app-logo-wrapper">
-          <div class="third-party-app-logo"></div>
-        </div>
-        <div class="arrows">
-          <descope-icon src="${arrowsImg}"></descope-icon>
-        </div>
-        <div class="company-logo-wrapper">
-            <descope-logo></descope-logo>
-        </div>
-      </div>
-			`;
+          `,
+      this
+    );
   }
 }
 

package/src/components/descope-upload-file/UploadFileClass.js

@@ -4,6 +4,7 @@ import { getComponentName } from '../../helpers/componentHelpers';
 import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { getFileBase64, getFilename } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('upload-file');
 
@@ -31,8 +32,22 @@ class RawUploadFile extends BaseInputClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-			:host {
+			<div>
+        <slot name="icon"></slot>
+				<div class="title">
+					<span class="title-text"></span>
+				</div>
+				<div class="description"></div>
+				<div class="button-wrapper">
+					<input type="file" tabindex="-1" aria-labelledby="button"/>
+					<descope-button id="button"></descope-button>
+				</div>
+			</div>
+		`;
+
+    injectStyle(
+      `
+      :host {
 				display: flex;
 			}
 			:host > div {
@@ -53,19 +68,9 @@ class RawUploadFile extends BaseInputClass {
 				height: 100%;
 				opacity: 0;
 			}
-			</style>
-			<div>
-        <slot name="icon"></slot>
-				<div class="title">
-					<span class="title-text"></span>
-				</div>
-				<div class="description"></div>
-				<div class="button-wrapper">
-					<input type="file" tabindex="-1" aria-labelledby="button"/>
-					<descope-button id="button"></descope-button>
-				</div>
-			</div>
-		`;
+        `,
+      this
+    );
 
     this.wrapperEle = this.shadowRoot.querySelector('.wrapper');
     this.inputElement = this.shadowRoot.querySelector('input');

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

@@ -7,6 +7,7 @@ import editIcon from './edit.svg';
 import { TextClass } from '@descope-ui/descope-text/class';
 import { ButtonClass } from '../descope-button/ButtonClass';
 import { BadgeClass } from '../descope-badge/BadgeClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
@@ -17,8 +18,27 @@ class RawUserAttribute extends createBaseClass({
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+      <div class="root">
+        <div class="text-wrapper">
+          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
+          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
+        </div>
+
+        <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>
+          </descope-button>
+          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
+            <vaadin-icon src=${deleteIcon}></vaadin-icon>
+          </descope-button>
+        </div
+      </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
 					display: inline-flex;
 				}
 
@@ -81,26 +101,9 @@ class RawUserAttribute extends createBaseClass({
         :host([readonly="true"]) descope-button {
           visibility: hidden;
         }
-      </style>
-
-
-      <div class="root">
-        <div class="text-wrapper">
-          <descope-text st-text-align="auto" data-id="label-text" variant="body1" mode="secondary" class="label"></descope-text>
-          <descope-text st-text-align="auto" data-id="value-text" variant="body1" mode="primary" class="value"></descope-text>
-        </div>
-
-        <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>
-          </descope-button>
-          <descope-button size="xs" data-id="delete-btn" square="true" variant="link" mode="primary">
-            <vaadin-icon src=${deleteIcon}></vaadin-icon>
-          </descope-button>
-        </div
-      </div>
-		`;
+          `,
+      this
+    );
 
     this.deleteButton = this.shadowRoot.querySelector('descope-button[data-id="delete-btn"]');
     this.editButton = this.shadowRoot.querySelector('descope-button[data-id="edit-btn"]');