@descope/web-components-ui 1.31.0 → 1.33.0

package/src/components/descope-badge/BadgeClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('badge');
 
@@ -10,7 +11,13 @@ class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > d
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<div>
+      <slot></slot>
+		</div>
+		`;
+
+    injectStyle(
+      `
       :host {
         display: inline-flex;
       }
@@ -20,11 +27,9 @@ class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > d
         overflow: hidden;
         white-space: nowrap;
       }
-		</style>
-		<div>
-      <slot></slot>
-		</div>
-		`;
+      `,
+      this
+    );
   }
 }
 

package/src/components/descope-code-snippet/CodeSnippetClass.js

@@ -4,6 +4,7 @@ import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { decode, tpl } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('code-snippet');
 
@@ -16,7 +17,11 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <code class="hljs"></code>
+    `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         width: 100%;
@@ -31,9 +36,9 @@ class CodeSnippet extends createBaseClass({ componentName, baseSelector: ':host
       pre {
         margin: 0;
       }
-    </style>
-    <code class="hljs"></code>
-    `;
+      `,
+      this
+    );
   }
 
   init() {

package/src/components/descope-container/ContainerClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('container');
 
@@ -10,7 +11,11 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: 'slot'
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -21,9 +26,9 @@ class RawContainer extends createBaseClass({ componentName, baseSelector: 'slot'
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 }
 

package/src/components/descope-date-field/DateFieldClass.js

@@ -22,6 +22,7 @@ import { calendarIcon } from './icons';
 import { counterConfig, DEFAULT_FORMAT, DIVIDER, NATIVE_FORMAT } from './consts';
 import { DateCounter } from './DateCounterClass';
 import { TextFieldClass } from '../descope-text-field/TextFieldClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('date-field');
 
@@ -55,7 +56,18 @@ class RawDateFieldClass extends BaseInputClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div>
+      <descope-text-field>
+        <span slot="suffix" class="toggle-calendar">
+          ${calendarIcon}
+        </span>
+      </descope-text-field>
+      <vaadin-popover></vaadin-popover>
+    </div>
+    `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         box-sizing: border-box;
@@ -73,22 +85,15 @@ class RawDateFieldClass extends BaseInputClass {
         align-self: center;
         z-index: 1;
         height: 100%;
-        align-items: center;        
+        align-items: center;
       }
 
       :host([readonly="true"]) .toggle-calendar {
         pointer-events: none;
       }
-    </style>
-    <div>
-      <descope-text-field>
-        <span slot="suffix" class="toggle-calendar">
-          ${calendarIcon}
-        </span>
-      </descope-text-field>
-      <vaadin-popover></vaadin-popover>
-    </div>
-    `;
+        `,
+      this
+    );
 
     this.inputElement = this.shadowRoot.querySelector('descope-text-field');
     this.popoverToggleButton = this.inputElement.querySelector('.toggle-calendar');
@@ -292,14 +297,14 @@ class RawDateFieldClass extends BaseInputClass {
       newOffset = Math.min(Math.abs(offset), availableLeft) * -1;
     }
 
-    this.#popoverPosStylesheet = document.createElement('style');
-    this.#popoverPosStylesheet.innerHTML = `
+    injectStyle(
+      `
       vaadin-popover-overlay::part(overlay) {
         transform: translateX(${newOffset}px);
       }
-    `;
-
-    popover.appendChild(this.#popoverPosStylesheet);
+    `,
+      popover
+    );
   }
 
   #getPopoverContent() {

package/src/components/descope-date-field/descope-calendar/CalendarClass.js

@@ -35,6 +35,7 @@ import {
   nextMonth,
 } from './helpers';
 import { ButtonClass } from '../../descope-button/ButtonClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('calendar');
 
@@ -70,13 +71,30 @@ class RawCalendar extends BaseInputClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div>
+      <nav class="nav top-nav">
+        <div class="nav-prev">
+        </div>
+        <div class="selectors"></div>
+        <div class="nav-next">
+        </div>
+      </nav>
+      <div class="calendar"></div>
+      <nav class="nav bottom-nav">
+        <descope-button class="cancel-button" variant="link" mode="primary">Cancel</descope-button>
+        <descope-button class="submit-button" variant="link" mode="primary" disabled="true">Done</descope-button>
+      </nav>
+    </div>
+  `;
+
+    injectStyle(
+      `
       :host {
         display: inline-block;
         box-sizing: border-box;
         max-width: 100%;
         user-select: none;
-         -webkit-user-select: none;
+        -webkit-user-select: none;
       }
 
       :host ::slotted {
@@ -119,23 +137,15 @@ class RawCalendar extends BaseInputClass {
         ${ButtonClass.cssVarList.outlineWidth}: 0;
       }
 
+      .combo-box-item {
+        display:flex;
+        flex-direction: column;
+      }
+
       ${inputFloatingLabelStyle()}
-    </style>
-    <div>
-      <nav class="nav top-nav">
-        <div class="nav-prev">
-        </div>
-        <div class="selectors"></div>
-        <div class="nav-next">
-        </div>
-      </nav>
-      <div class="calendar"></div>
-      <nav class="nav bottom-nav">
-        <descope-button class="cancel-button" variant="link" mode="primary">Cancel</descope-button>
-        <descope-button class="submit-button" variant="link" mode="primary" disabled="true">Done</descope-button>
-      </nav>
-    </div>
-  `;
+      `,
+      this
+    );
   }
 
   set value(val) {

package/src/components/descope-date-field/descope-calendar/helpers.js

@@ -20,8 +20,7 @@ const getMaxDaysInMonth = (year, month) => {
 };
 
 const comboBoxItemTpl = ({ label, dataId, dataName }) => `
-	<div
-		style="display:flex; flex-direction: column;"
+	<div class="combo-box-item"
 		data-id="${dataId}"
 		data-name="${dataName}"
 	>

package/src/components/descope-divider/DividerClass.js

@@ -3,6 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { TextClass } from '@descope-ui/descope-text/class';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('divider');
 class RawDivider extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
@@ -10,8 +11,16 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-			<style>
-				:host {
+			<div>
+				<descope-text>
+					<slot></slot>
+				</descope-text>
+			</div>
+		`;
+
+    injectStyle(
+      `
+      	:host {
 					display: inline-block;
 				}
 				:host > div {
@@ -34,13 +43,9 @@ class RawDivider extends createBaseClass({ componentName, baseSelector: ':host >
 				:host([vertical="true"]) div {
 					width: fit-content;
 				}
-			</style>
-			<div>
-				<descope-text>
-					<slot></slot>
-				</descope-text>
-			</div>
-		`;
+          `,
+      this
+    );
 
     this.textComponent = this.shadowRoot.querySelector('descope-text');
 

package/src/components/descope-enriched-text/EnrichedTextClass.js

@@ -7,6 +7,7 @@ import { getComponentName, observeChildren } from '../../helpers/componentHelper
 import { disableRules } from './consts';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { decodeHTML } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('enriched-text');
 
@@ -19,7 +20,11 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
+    <div class="content"></div>
+    `;
+
+    injectStyle(
+      `
       :host {
         line-height: 1em;
         word-break: break-word;
@@ -52,9 +57,9 @@ class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host
       s {
         color: currentColor;
       }
-    </style>
-    <div class="content"></div>
-    `;
+        `,
+      this
+    );
 
     this.#initProcessor();
 

package/src/components/descope-grid/GridClass.js

@@ -362,7 +362,7 @@ export const GridClass = compose(
       }
     /*!css*/
 		`,
-    excludeAttrsSync: ['columns', 'tabindex'],
+    excludeAttrsSync: ['columns', 'tabindex', 'style'],
     componentName,
   })
 );

package/src/components/descope-hybrid-field/HybridFieldClass.js

@@ -5,6 +5,7 @@ import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
 import { isNumericValue, sanitizeCountryCodePrefix as sanitizeValue } from './helpers';
 import { PhoneFieldClass } from '../phone-fields/descope-phone-field/PhoneFieldClass';
 import { PhoneFieldInputBoxClass } from '../phone-fields/descope-phone-input-box-field/PhoneFieldInputBoxClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('hybrid-field');
 
@@ -79,8 +80,16 @@ class RawHybridField extends BaseClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		  :host {
+    <div class="wrapper">
+      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
+      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
+      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
+    </div>
+		`;
+
+    injectStyle(
+      `
+      :host {
         display: inline-flex;
         box-sizing: border-box;
         padding: 0;
@@ -99,14 +108,10 @@ class RawHybridField extends BaseClass {
       }
       .hidden {
         visibility: hidden;
-      }        
-		</style>
-    <div class="wrapper">
-      <descope-email-field external-input="${this.isExternalInput}"></descope-email-field>
-      <descope-phone-field allow-alphanumeric-input="true"></descope-phone-field>
-      <descope-phone-input-box-field allow-alphanumeric-input="true"></descope-phone-input-box-field>
-    </div>
-		`;
+      }
+      `,
+      this
+    );
   }
 
   get isExternalInput() {

package/src/components/descope-icon/IconClass.js

@@ -4,6 +4,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import { createIcon } from './helpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('icon');
 
@@ -18,7 +19,11 @@ class RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
+		<slot></slot>
+	`;
+
+    injectStyle(
+      `
 			:host > slot {
 				box-sizing: border-box;
 				width: 100%;
@@ -29,9 +34,9 @@ class RawIcon extends createBaseClass({ componentName, baseSelector: 'slot' }) {
 			:host {
 				display: inline-block;
 			}
-		</style>
-		<slot></slot>
-	`;
+  `,
+      this
+    );
   }
 
   init() {

package/src/components/descope-image/ImageClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin } from '../../mixins';
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 const observedAttributes = ['src', 'alt'];
 
@@ -17,17 +18,21 @@ class RawImage extends BaseClass {
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			:host > img {
+		<img/>
+	`;
+
+    injectStyle(
+      `
+    :host > img {
 				width: 100%;
 				height: 100%
 			}
 			:host {
 				display: inline-flex;
 			}
-		</style>
-		<img/>
-	`;
+        `,
+      this
+    );
   }
 
   connectedCallback() {

package/src/components/descope-link/LinkClass.js

@@ -3,6 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { TextClass } from '@descope-ui/descope-text/class';
 import { compose } from '../../helpers';
 import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('link');
 
@@ -11,15 +12,6 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-		:host {
-			display: inline-block;
-      line-height: 1em;
-		}
-		:host a {
-			display: inline;
-		}
-		</style>
 		<div>
 			<descope-text>
 				<a>
@@ -29,6 +21,19 @@ class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }
 		</div>
 		`;
 
+    injectStyle(
+      `
+    :host {
+			display: inline-block;
+      line-height: 1em;
+		}
+		:host a {
+			display: inline;
+		}
+      `,
+      this
+    );
+
     forwardAttrs(this, this.shadowRoot.querySelector('a'), {
       includeAttrs: ['href', 'target', 'tooltip'],
       mapAttrs: {

package/src/components/descope-list/ListClass.js

@@ -3,6 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
 import { ListItemClass } from './ListItemClass';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('list');
 
@@ -15,9 +16,17 @@ class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper'
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-	    /*css*/
-      .wrapper {
+    <div class="wrapper">
+    <slot></slot>
+    <slot name="empty-state">
+      No item...
+    </slot>
+    </div>
+	`;
+
+    injectStyle(
+      `
+    .wrapper {
         overflow: auto;
         display: grid;
         max-height: 100%;
@@ -44,16 +53,9 @@ class RawList extends createBaseClass({ componentName, baseSelector: '.wrapper'
       ::slotted(:not([slot])) {
         width: 100%;
       }
-      /*!css*/
-		</style>
-
-    <div class="wrapper">
-    <slot></slot>
-    <slot name="empty-state">
-      No item...
-    </slot>
-    </div>
-	`;
+        `,
+      this
+    );
   }
 
   get items() {

package/src/components/descope-list/ListItemClass.js

@@ -3,6 +3,7 @@ import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
 import { activeableMixin } from '../../mixins/activableMixin';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('list-item');
 
@@ -12,22 +13,23 @@ const customMixin = (superclass) =>
       super();
 
       this.attachShadow({ mode: 'open' }).innerHTML = `
-      <style>
-        /*css*/
-        slot {
-            width: 100%;
-            display: flex;
-            overflow: hidden;
-            box-sizing: border-box;
-        }
-        :host {
-          display: block;
-        }
-
-        /*!css*/
-      </style>
       <slot></slot>
     `;
+
+      injectStyle(
+        `
+      slot {
+          width: 100%;
+          display: flex;
+          overflow: hidden;
+          box-sizing: border-box;
+      }
+      :host {
+        display: block;
+      }
+        `,
+        this
+      );
     }
   };
 

package/src/components/descope-loader-linear/LoaderLinearClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('loader-linear');
 
@@ -14,8 +15,12 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes tilt {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes tilt {
 				0% { transform: translateX(0); }
 				50% { transform: translateX(400%); }
 			}
@@ -32,9 +37,9 @@ class RawLoaderLinear extends createBaseClass({ componentName, baseSelector: ':h
 			:host > div {
 				width: 100%;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }
 

package/src/components/descope-loader-radial/LoaderRadialClass.js

@@ -2,6 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
 import { createBaseClass } from '../../baseClasses/createBaseClass';
 import { compose } from '../../helpers';
 import { getComponentName } from '../../helpers/componentHelpers';
+import { injectStyle } from '@descope-ui/common/components-helpers';
 
 export const componentName = getComponentName('loader-radial');
 
@@ -10,8 +11,12 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
     super();
 
     this.attachShadow({ mode: 'open' }).innerHTML = `
-		<style>
-			@keyframes spin {
+		<div></div>
+	`;
+
+    injectStyle(
+      `
+    @keyframes spin {
 				0% { transform: rotate(0deg); }
 				100% { transform: rotate(360deg); }
 			}
@@ -22,9 +27,9 @@ class RawLoaderRadial extends createBaseClass({ componentName, baseSelector: ':h
 			:host > div {
 				animation-name: spin;
 			}
-		</style>
-		<div></div>
-	`;
+        `,
+      this
+    );
   }
 }