@descope/web-components-ui 1.0.349 → 1.0.350

package/dist/index.esm.js

@@ -13,12 +13,12 @@ import '@vaadin/combo-box';
 import '@vaadin/grid';
 import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
 import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
+import hljs from 'highlight.js';
 import '@vaadin/multi-select-combo-box';
 import '@vaadin/dialog';
 import '@vaadin/notification';
 import '@vaadin/avatar';
 import '@vaadin/custom-field';
-import hljs from 'highlight.js';
 import '@vaadin/radio-group';
 import merge from 'lodash.merge';
 import Color from 'color';
@@ -8424,6 +8424,250 @@ const componentName$i = getComponentName('grid-item-details-column');
 
 customElements.define(componentName$i, GridItemDetailsColumnClass);
 
+const decode = (input) => {
+  const txt = document.createElement('textarea');
+  txt.innerHTML = input;
+  return txt.value;
+};
+
+const tpl = (input, inline) => {
+  return inline ? input : `<pre>${input}</pre>`;
+};
+
+const componentName$h = getComponentName('code-snippet');
+
+let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$h, baseSelector: ':host > code' }) {
+  static get observedAttributes() {
+    return ['lang', 'inline'];
+  }
+
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+    <style>
+      :host {
+        display: inline-block;
+        width: 100%;
+      }
+      code {
+        display: block;
+        width: 100%;
+        min-height: 1em;
+        overflow-x: scroll;
+        overflow-y: scroll;
+      }
+      pre {
+        margin: 0;
+      }
+    </style>
+    <code class="hljs"></code>
+    `;
+  }
+
+  init() {
+    super.init?.();
+
+    this.lang = this.getAttribute('lang');
+    this.isInline = this.getAttribute('inline') === 'true';
+
+    observeChildren(this, this.#renderSnippet.bind(this));
+  }
+
+  get contentNode() {
+    return this.shadowRoot.querySelector(this.baseSelector);
+  }
+
+  attributeChangedCallback(attrName, oldValue, newValue) {
+    super.attributeChangedCallback?.(attrName, oldValue, newValue);
+
+    if (oldValue !== newValue) {
+      if (attrName === 'inline') {
+        this.isInline = newValue;
+      }
+
+      if (attrName === 'lang') {
+        this.lang = newValue;
+      }
+
+      this.#renderSnippet();
+    }
+  }
+
+  #renderSnippet() {
+    const sanitized = decode(this.textContent);
+    const language = this.lang;
+
+    if (!language) {
+      this.contentNode.textContent = sanitized;
+      return;
+    }
+
+    const { value: highlighted } = hljs.highlight(sanitized, { language });
+
+    this.contentNode.innerHTML = tpl(highlighted, this.isInline);
+  }
+};
+
+const {
+  root,
+  docTag,
+  keyword,
+  metaKeyword,
+  templateTag,
+  templateVariable,
+  type,
+  variableLanguage,
+  title,
+  titleClass,
+  titleClassInherited,
+  titleFunction,
+  attr,
+  attribute,
+  literal,
+  meta,
+  number,
+  operator,
+  variable,
+  selectorAttr,
+  selectorClass,
+  selectorId,
+  regexp,
+  string,
+  metaString,
+  builtIn,
+  symbol,
+  comment,
+  code,
+  formula,
+  name,
+  quote,
+  selectorTag,
+  selectorPseudo,
+  subst,
+  section,
+  bullet,
+  emphasis,
+  strong,
+  addition,
+  deletion,
+  charEscape,
+  link: link$2,
+  params,
+  property,
+  punctuation,
+  tag,
+} = {
+  root: { selector: () => '.hljs' },
+  docTag: { selector: () => '.hljs-doctag' },
+  keyword: { selector: () => '.hljs-keyword' },
+  metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
+  templateTag: { selector: () => '.hljs-template-tag' },
+  templateVariable: { selector: () => '.hljs-template-variable' },
+  type: { selector: () => '.hljs-type' },
+  variableLanguage: { selector: () => '.hljs-variable.language' },
+  title: { selector: () => '.hljs-title' },
+  titleClass: { selector: () => '.hljs-title.class_' },
+  titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
+  titleFunction: { selector: () => '.hljs-title.function_' },
+  attr: { selector: () => '.hljs-attr' },
+  attribute: { selector: () => '.hljs-attribute' },
+  literal: { selector: () => '.hljs-literal' },
+  meta: { selector: () => '.hljs-meta' },
+  number: { selector: () => '.hljs-number' },
+  operator: { selector: () => '.hljs-operator' },
+  variable: { selector: () => '.hljs-variable' },
+  selectorAttr: { selector: () => '.hljs-selector-attr' },
+  selectorClass: { selector: () => '.hljs-selector-class' },
+  selectorId: { selector: () => '.hljs-selector-id' },
+  regexp: { selector: () => '.hljs-regexp' },
+  string: { selector: () => '.hljs-string' },
+  metaString: { selector: () => '.hljs-meta .hljs-string' },
+  builtIn: { selector: () => '.hljs-built_in' },
+  symbol: { selector: () => '.hljs-symbol' },
+  comment: { selector: () => '.hljs-comment' },
+  code: { selector: () => '.hljs-code' },
+  formula: { selector: () => '.hljs-formula' },
+  name: { selector: () => '.hljs-name' },
+  quote: { selector: () => '.hljs-quote' },
+  selectorTag: { selector: () => '.hljs-selector-tag' },
+  selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
+  subst: { selector: () => '.hljs-subst' },
+  section: { selector: () => '.hljs-section' },
+  bullet: { selector: () => '.hljs-bullet' },
+  emphasis: { selector: () => '.hljs-emphasis' },
+  strong: { selector: () => '.hljs-strong' },
+  addition: { selector: () => '.hljs-addition' },
+  deletion: { selector: () => '.hljs-deletion' },
+  charEscape: { selector: () => '.hljs-char.escape' },
+  link: { selector: () => '.hljs-link' },
+  params: { selector: () => '.hljs-params' },
+  property: { selector: () => '.hljs-property' },
+  punctuation: { selector: () => '.hljs-punctuation' },
+  tag: { selector: () => '.hljs-tag' },
+};
+
+const CodeSnippetClass = compose(
+  createStyleMixin({
+    mappings: {
+      rootBgColor: { ...root, property: 'background-color' },
+      rootTextColor: { ...root, property: 'color' },
+      docTagTextColor: { ...docTag, property: 'color' },
+      keywordTextColor: { ...keyword, property: 'color' },
+      metaKeywordTextColor: { ...metaKeyword, property: 'color' },
+      templateTagTextColor: { ...templateTag, property: 'color' },
+      templateVariableTextColor: { ...templateVariable, property: 'color' },
+      typeTextColor: { ...type, property: 'color' },
+      variableLanguageTextColor: { ...variableLanguage, property: 'color' },
+      titleTextColor: { ...title, property: 'color' },
+      titleClassTextColor: { ...titleClass, property: 'color' },
+      titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
+      titleFunctionTextColor: { ...titleFunction, property: 'color' },
+      attrTextColor: { ...attr, property: 'color' },
+      attributeTextColor: { ...attribute, property: 'color' },
+      literalTextColor: { ...literal, property: 'color' },
+      metaTextColor: { ...meta, property: 'color' },
+      numberTextColor: { ...number, property: 'color' },
+      operatorTextColor: { ...operator, property: 'color' },
+      variableTextColor: { ...variable, property: 'color' },
+      selectorAttrTextColor: { ...selectorAttr, property: 'color' },
+      selectorClassTextColor: { ...selectorClass, property: 'color' },
+      selectorIdTextColor: { ...selectorId, property: 'color' },
+      regexpTextColor: { ...regexp, property: 'color' },
+      stringTextColor: { ...string, property: 'color' },
+      metaStringTextColor: { ...metaString, property: 'color' },
+      builtInTextColor: { ...builtIn, property: 'color' },
+      symbolTextColor: { ...symbol, property: 'color' },
+      commentTextColor: { ...comment, property: 'color' },
+      codeTextColor: { ...code, property: 'color' },
+      formulaTextColor: { ...formula, property: 'color' },
+      nameTextColor: { ...name, property: 'color' },
+      quoteTextColor: { ...quote, property: 'color' },
+      selectorTagTextColor: { ...selectorTag, property: 'color' },
+      selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
+      substTextColor: { ...subst, property: 'color' },
+      sectionTextColor: { ...section, property: 'color' },
+      bulletTextColor: { ...bullet, property: 'color' },
+      emphasisTextColor: { ...emphasis, property: 'color' },
+      strongTextColor: { ...strong, property: 'color' },
+      additionTextColor: { ...addition, property: 'color' },
+      additionBgColor: { ...addition, property: 'background-color' },
+      deletionTextColor: { ...deletion, property: 'color' },
+      deletionBgColor: { ...deletion, property: 'background-color' },
+      charEscapeTextColor: { ...charEscape, property: 'color' },
+      linkTextColor: { ...link$2, property: 'color' },
+      paramsTextColor: { ...params, property: 'color' },
+      propertyTextColor: { ...property, property: 'color' },
+      punctuationTextColor: { ...punctuation, property: 'color' },
+      tagTextColor: { ...tag, property: 'color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(CodeSnippet$1);
+
+customElements.define(componentName$h, CodeSnippetClass);
+
 const isValidDataType = (data) => {
   const isValid = Array.isArray(data);
   if (!isValid) {
@@ -8486,7 +8730,7 @@ const defaultRowDetailsRenderer = (item, itemLabelsMapping) => {
   `;
 };
 
-const componentName$h = getComponentName('grid');
+const componentName$g = getComponentName('grid');
 
 const GridMixin = (superclass) =>
   class GridMixinClass extends superclass {
@@ -8506,7 +8750,6 @@ const GridMixin = (superclass) =>
     // this renders the details panel content
     // in order to open it, the descope-grid-item-details-column should be used
     #rowDetailsRenderer = async (cell, _col, model) => {
-      await Promise.resolve().then(function () { return index; });
       // prevent details panel from being scrolled into view when clicked
       cell.addEventListener('mousedown', (e) => e.stopImmediatePropagation(), true);
 
@@ -8833,13 +9076,13 @@ const GridClass = compose(
     /*!css*/
 		`,
     excludeAttrsSync: ['columns', 'tabindex'],
-    componentName: componentName$h,
+    componentName: componentName$g,
   })
 );
 
-customElements.define(componentName$h, GridClass);
+customElements.define(componentName$g, GridClass);
 
-const componentName$g = getComponentName('multi-select-combo-box');
+const componentName$f = getComponentName('multi-select-combo-box');
 
 const multiSelectComboBoxMixin = (superclass) =>
   class MultiSelectComboBoxMixinClass extends superclass {
@@ -9473,16 +9716,16 @@ const MultiSelectComboBoxClass = compose(
     // Note: we exclude `placeholder` because the vaadin component observes it and
     // tries to override it, causing us to lose the user set placeholder.
     excludeAttrsSync: ['tabindex', 'size', 'data', 'placeholder'],
-    componentName: componentName$g,
+    componentName: componentName$f,
     includeForwardProps: ['items', 'renderer', 'selectedItems'],
   })
 );
 
-customElements.define(componentName$g, MultiSelectComboBoxClass);
+customElements.define(componentName$f, MultiSelectComboBoxClass);
 
-const componentName$f = getComponentName('badge');
+const componentName$e = getComponentName('badge');
 
-class RawBadge extends createBaseClass({ componentName: componentName$f, baseSelector: ':host > div' }) {
+class RawBadge extends createBaseClass({ componentName: componentName$e, baseSelector: ':host > div' }) {
   constructor() {
     super();
 
@@ -9533,9 +9776,9 @@ const BadgeClass = compose(
   componentNameValidationMixin
 )(RawBadge);
 
-customElements.define(componentName$f, BadgeClass);
+customElements.define(componentName$e, BadgeClass);
 
-const componentName$e = getComponentName('modal');
+const componentName$d = getComponentName('modal');
 
 const customMixin$3 = (superclass) =>
   class ModalMixinClass extends superclass {
@@ -9634,11 +9877,11 @@ const ModalClass = compose(
     wrappedEleName: 'vaadin-dialog',
     style: () => ``,
     excludeAttrsSync: ['tabindex', 'opened'],
-    componentName: componentName$e,
+    componentName: componentName$d,
   })
 );
 
-customElements.define(componentName$e, ModalClass);
+customElements.define(componentName$d, ModalClass);
 
 const vaadinContainerClass = window.customElements.get('vaadin-notification-container');
 
@@ -9649,7 +9892,7 @@ if (!vaadinContainerClass) {
 class NotificationContainerClass extends vaadinContainerClass {}
 customElements.define(getComponentName('notification-container'), NotificationContainerClass);
 
-const componentName$d = getComponentName('notification-card');
+const componentName$c = getComponentName('notification-card');
 
 const notificationCardMixin = (superclass) =>
   class NotificationCardMixinClass extends superclass {
@@ -9757,13 +10000,13 @@ const NotificationCardClass = compose(
     }
     `,
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$d,
+    componentName: componentName$c,
   })
 );
 
-customElements.define(componentName$d, NotificationCardClass);
+customElements.define(componentName$c, NotificationCardClass);
 
-const componentName$c = getComponentName('notification');
+const componentName$b = getComponentName('notification');
 
 const NotificationMixin = (superclass) =>
   class NotificationMixinClass extends superclass {
@@ -9858,14 +10101,14 @@ const NotificationClass = compose(
   createProxy({
     wrappedEleName: 'vaadin-notification',
     excludeAttrsSync: ['tabindex'],
-    componentName: componentName$c,
+    componentName: componentName$b,
   })
 );
 
-customElements.define(componentName$c, NotificationClass);
+customElements.define(componentName$b, NotificationClass);
 
-const componentName$b = getComponentName('avatar');
-class RawAvatar extends createBaseClass({ componentName: componentName$b, baseSelector: ':host > .wrapper' }) {
+const componentName$a = getComponentName('avatar');
+class RawAvatar extends createBaseClass({ componentName: componentName$a, baseSelector: ':host > .wrapper' }) {
   constructor() {
     super();
 
@@ -9966,13 +10209,13 @@ const AvatarClass = compose(
   componentNameValidationMixin
 )(RawAvatar);
 
-customElements.define(componentName$b, AvatarClass);
+customElements.define(componentName$a, AvatarClass);
 
 customElements.define(componentName$X, IconClass);
 
-const componentName$a = getComponentName('mappings-field-internal');
+const componentName$9 = getComponentName('mappings-field-internal');
 
-const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$a, baseSelector: 'div' });
+const BaseInputClass$2 = createBaseInputClass({ componentName: componentName$9, baseSelector: 'div' });
 
 class MappingsFieldInternal extends BaseInputClass$2 {
   #errorItem;
@@ -10207,7 +10450,7 @@ class MappingsFieldInternal extends BaseInputClass$2 {
   }
 }
 
-const componentName$9 = getComponentName('mappings-field');
+const componentName$8 = getComponentName('mappings-field');
 
 const customMixin$2 = (superclass) =>
   class MappingsFieldMixinClass extends superclass {
@@ -10236,14 +10479,14 @@ const customMixin$2 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$a}
+      <${componentName$9}
         tabindex="-1"
-      ></${componentName$a}>
+      ></${componentName$9}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$a);
+      this.inputElement = this.shadowRoot.querySelector(componentName$9);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -10372,17 +10615,17 @@ const MappingsFieldClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$9,
+    componentName: componentName$8,
   })
 );
 
-customElements.define(componentName$a, MappingsFieldInternal);
+customElements.define(componentName$9, MappingsFieldInternal);
 
-const componentName$8 = getComponentName('mapping-item');
+const componentName$7 = getComponentName('mapping-item');
 
 const inputAttrs = ['size', 'bordered', 'readonly', 'full-width', 'disabled'];
 
-const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$8, baseSelector: 'div' });
+const BaseInputClass$1 = createBaseInputClass({ componentName: componentName$7, baseSelector: 'div' });
 
 class MappingItem extends BaseInputClass$1 {
   static get observedAttributes() {
@@ -10532,17 +10775,17 @@ class MappingItem extends BaseInputClass$1 {
   }
 }
 
-customElements.define(componentName$8, MappingItem);
+customElements.define(componentName$7, MappingItem);
 
-customElements.define(componentName$9, MappingsFieldClass);
+customElements.define(componentName$8, MappingsFieldClass);
 
 var deleteIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTQiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxNCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEgMTZDMSAxNy4xIDEuOSAxOCAzIDE4SDExQzEyLjEgMTggMTMgMTcuMSAxMyAxNlY0SDFWMTZaTTMgNkgxMVYxNkgzVjZaTTEwLjUgMUw5LjUgMEg0LjVMMy41IDFIMFYzSDE0VjFIMTAuNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
 var editIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxNSAxNSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEwLjAwMDIgMC45OTIxNDlDMTAuMDAwMiAxLjAxNjE1IDEwLjAwMDIgMS4wMTYxNSAxMC4wMDAyIDEuMDE2MTVMOC4yMjQxOSAzLjAwODE1SDIuOTkyMTlDMi40NjQxOSAzLjAwODE1IDIuMDA4MTkgMy40NDAxNSAyLjAwODE5IDMuOTkyMTVWMTIuMDA4MkMyLjAwODE5IDEyLjUzNjIgMi40NDAxOSAxMi45OTIyIDIuOTkyMTkgMTIuOTkyMkg1LjUzNjE5QzUuODQ4MTkgMTMuMDQwMiA2LjE2MDE5IDEzLjA0MDIgNi40NzIxOSAxMi45OTIySDExLjAwODJDMTEuNTM2MiAxMi45OTIyIDExLjk5MjIgMTIuNTYwMiAxMS45OTIyIDEyLjAwODJWNy43ODQxNkwxMy45MzYyIDUuNjI0MTVMMTQuMDA4MiA1LjY3MjE1VjExLjk4NDJDMTQuMDA4MiAxMy42NjQyIDEyLjY2NDIgMTUuMDA4MiAxMS4wMDgyIDE1LjAwODJIMy4wMTYxOUMxLjMzNjE5IDE1LjAwODIgLTAuMDA3ODEyNSAxMy42NjQyIC0wLjAwNzgxMjUgMTEuOTg0MlYzLjk5MjE1Qy0wLjAwNzgxMjUgMi4zMzYxNSAxLjMzNjE5IDAuOTkyMTQ5IDMuMDE2MTkgMC45OTIxNDlIMTAuMDAwMlpNMTEuMjcyMiAyLjYyNDE1TDEyLjYxNjIgNC4xMTIxNUw3LjcyMDE5IDkuNjgwMTZDNy41MDQxOSA5LjkyMDE2IDYuODMyMTkgMTAuMjMyMiA1LjY4MDE5IDEwLjYxNjJDNS42NTYxOSAxMC42NDAyIDUuNjA4MTkgMTAuNjQwMiA1LjU2MDE5IDEwLjYxNjJDNS40NjQxOSAxMC41OTIyIDUuMzkyMTkgMTAuNDcyMiA1LjQ0MDE5IDEwLjM3NjJDNS43NTIxOSA5LjI0ODE2IDYuMDQwMTkgOC41NTIxNiA2LjI1NjE5IDguMzEyMTZMMTEuMjcyMiAyLjYyNDE1Wk0xMS45MjAyIDEuODU2MTVMMTMuMjg4MiAwLjMyMDE0OUMxMy42NDgyIC0wLjA4Nzg1MTYgMTQuMjcyMiAtMC4xMTE4NTIgMTQuNjgwMiAwLjI3MjE0OUMxNS4wODgyIDAuNjMyMTQ5IDE1LjExMjIgMS4yODAxNSAxNC43NTIyIDEuNjg4MTVMMTMuMjY0MiAzLjM2ODE1TDExLjkyMDIgMS44NTYxNVoiIGZpbGw9ImN1cnJlbnRjb2xvciIvPgo8L3N2Zz4K";
 
-const componentName$7 = getComponentName('user-attribute');
+const componentName$6 = getComponentName('user-attribute');
 class RawUserAttribute extends createBaseClass({
-  componentName: componentName$7,
+  componentName: componentName$6,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -10772,13 +11015,13 @@ const UserAttributeClass = compose(
   componentNameValidationMixin
 )(RawUserAttribute);
 
-customElements.define(componentName$7, UserAttributeClass);
+customElements.define(componentName$6, UserAttributeClass);
 
 var greenVIcon = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTggMEMzLjYgMCAwIDMuNiAwIDhDMCAxMi40IDMuNiAxNiA4IDE2QzEyLjQgMTYgMTYgMTIuNCAxNiA4QzE2IDMuNiAxMi40IDAgOCAwWk03LjEgMTEuN0wyLjkgNy42TDQuMyA2LjJMNyA4LjlMMTIgNEwxMy40IDUuNEw3LjEgMTEuN1oiIGZpbGw9IiM0Q0FGNTAiLz4KPC9zdmc+Cg==";
 
-const componentName$6 = getComponentName('user-auth-method');
+const componentName$5 = getComponentName('user-auth-method');
 class RawUserAuthMethod extends createBaseClass({
-  componentName: componentName$6,
+  componentName: componentName$5,
   baseSelector: ':host > .root',
 }) {
   constructor() {
@@ -10970,11 +11213,11 @@ const UserAuthMethodClass = compose(
   componentNameValidationMixin
 )(RawUserAuthMethod);
 
-customElements.define(componentName$6, UserAuthMethodClass);
+customElements.define(componentName$5, UserAuthMethodClass);
 
-const componentName$5 = getComponentName('saml-group-mappings-internal');
+const componentName$4 = getComponentName('saml-group-mappings-internal');
 
-const BaseInputClass = createBaseInputClass({ componentName: componentName$5, baseSelector: '' });
+const BaseInputClass = createBaseInputClass({ componentName: componentName$4, baseSelector: '' });
 
 class SamlGroupMappingsInternal extends BaseInputClass {
   static get observedAttributes() {
@@ -11100,7 +11343,7 @@ class SamlGroupMappingsInternal extends BaseInputClass {
   }
 }
 
-const componentName$4 = getComponentName('saml-group-mappings');
+const componentName$3 = getComponentName('saml-group-mappings');
 
 const customMixin$1 = (superclass) =>
   class SamlGroupMappingsMixinClass extends superclass {
@@ -11110,14 +11353,14 @@ const customMixin$1 = (superclass) =>
       const template = document.createElement('template');
 
       template.innerHTML = `
-      <${componentName$5}
+      <${componentName$4}
         tabindex="-1"
-      ></${componentName$5}>
+      ></${componentName$4}>
       `;
 
       this.baseElement.appendChild(template.content.cloneNode(true));
 
-      this.inputElement = this.shadowRoot.querySelector(componentName$5);
+      this.inputElement = this.shadowRoot.querySelector(componentName$4);
 
       forwardAttrs(this, this.inputElement, {
         includeAttrs: [
@@ -11194,262 +11437,13 @@ const SamlGroupMappingsClass = compose(
       'options',
       'error-message',
     ],
-    componentName: componentName$4,
+    componentName: componentName$3,
   })
 );
 
-customElements.define(componentName$5, SamlGroupMappingsInternal);
-
-customElements.define(componentName$4, SamlGroupMappingsClass);
-
-const decode = (input) => {
-  const txt = document.createElement('textarea');
-  txt.innerHTML = input;
-  return txt.value;
-};
-
-const tpl = (input, inline) => {
-  return inline ? input : `<pre>${input}</pre>`;
-};
-
-const componentName$3 = getComponentName('code-snippet');
-
-let CodeSnippet$1 = class CodeSnippet extends createBaseClass({ componentName: componentName$3, baseSelector: ':host > code' }) {
-  static get observedAttributes() {
-    return ['lang', 'inline'];
-  }
-
-  constructor() {
-    super();
-
-    this.attachShadow({ mode: 'open' }).innerHTML = `
-    <style>
-      :host {
-        display: inline-block;
-        width: 100%;
-      }
-      code {
-        display: block;
-        width: 100%;
-        min-height: 1em;
-        overflow-x: scroll;
-        overflow-y: scroll;
-      }
-      pre {
-        margin: 0;
-      }
-    </style>
-    <code class="hljs"></code>
-    `;
-  }
-
-  init() {
-    super.init?.();
-
-    this.lang = this.getAttribute('lang');
-    this.isInline = this.getAttribute('inline') === 'true';
-
-    observeChildren(this, this.#renderSnippet.bind(this));
-  }
-
-  get contentNode() {
-    return this.shadowRoot.querySelector(this.baseSelector);
-  }
-
-  attributeChangedCallback(attrName, oldValue, newValue) {
-    super.attributeChangedCallback?.(attrName, oldValue, newValue);
-
-    if (oldValue !== newValue) {
-      if (attrName === 'inline') {
-        this.isInline = newValue;
-      }
-
-      if (attrName === 'lang') {
-        this.lang = newValue;
-      }
-
-      this.#renderSnippet();
-    }
-  }
-
-  #renderSnippet() {
-    const sanitized = decode(this.textContent);
-    const language = this.lang;
+customElements.define(componentName$4, SamlGroupMappingsInternal);
 
-    if (!language) {
-      this.contentNode.textContent = sanitized;
-      return;
-    }
-
-    const { value: highlighted } = hljs.highlight(sanitized, { language });
-
-    this.contentNode.innerHTML = tpl(highlighted, this.isInline);
-  }
-};
-
-const {
-  root,
-  docTag,
-  keyword,
-  metaKeyword,
-  templateTag,
-  templateVariable,
-  type,
-  variableLanguage,
-  title,
-  titleClass,
-  titleClassInherited,
-  titleFunction,
-  attr,
-  attribute,
-  literal,
-  meta,
-  number,
-  operator,
-  variable,
-  selectorAttr,
-  selectorClass,
-  selectorId,
-  regexp,
-  string,
-  metaString,
-  builtIn,
-  symbol,
-  comment,
-  code,
-  formula,
-  name,
-  quote,
-  selectorTag,
-  selectorPseudo,
-  subst,
-  section,
-  bullet,
-  emphasis,
-  strong,
-  addition,
-  deletion,
-  charEscape,
-  link: link$2,
-  params,
-  property,
-  punctuation,
-  tag,
-} = {
-  root: { selector: () => '.hljs' },
-  docTag: { selector: () => '.hljs-doctag' },
-  keyword: { selector: () => '.hljs-keyword' },
-  metaKeyword: { selector: () => '.hljs-meta .hljs-keyword' },
-  templateTag: { selector: () => '.hljs-template-tag' },
-  templateVariable: { selector: () => '.hljs-template-variable' },
-  type: { selector: () => '.hljs-type' },
-  variableLanguage: { selector: () => '.hljs-variable.language' },
-  title: { selector: () => '.hljs-title' },
-  titleClass: { selector: () => '.hljs-title.class_' },
-  titleClassInherited: { selector: () => '.hljs-title.class_.inherited__' },
-  titleFunction: { selector: () => '.hljs-title.function_' },
-  attr: { selector: () => '.hljs-attr' },
-  attribute: { selector: () => '.hljs-attribute' },
-  literal: { selector: () => '.hljs-literal' },
-  meta: { selector: () => '.hljs-meta' },
-  number: { selector: () => '.hljs-number' },
-  operator: { selector: () => '.hljs-operator' },
-  variable: { selector: () => '.hljs-variable' },
-  selectorAttr: { selector: () => '.hljs-selector-attr' },
-  selectorClass: { selector: () => '.hljs-selector-class' },
-  selectorId: { selector: () => '.hljs-selector-id' },
-  regexp: { selector: () => '.hljs-regexp' },
-  string: { selector: () => '.hljs-string' },
-  metaString: { selector: () => '.hljs-meta .hljs-string' },
-  builtIn: { selector: () => '.hljs-built_in' },
-  symbol: { selector: () => '.hljs-symbol' },
-  comment: { selector: () => '.hljs-comment' },
-  code: { selector: () => '.hljs-code' },
-  formula: { selector: () => '.hljs-formula' },
-  name: { selector: () => '.hljs-name' },
-  quote: { selector: () => '.hljs-quote' },
-  selectorTag: { selector: () => '.hljs-selector-tag' },
-  selectorPseudo: { selector: () => '.hljs-selector-pseudo' },
-  subst: { selector: () => '.hljs-subst' },
-  section: { selector: () => '.hljs-section' },
-  bullet: { selector: () => '.hljs-bullet' },
-  emphasis: { selector: () => '.hljs-emphasis' },
-  strong: { selector: () => '.hljs-strong' },
-  addition: { selector: () => '.hljs-addition' },
-  deletion: { selector: () => '.hljs-deletion' },
-  charEscape: { selector: () => '.hljs-char.escape' },
-  link: { selector: () => '.hljs-link' },
-  params: { selector: () => '.hljs-params' },
-  property: { selector: () => '.hljs-property' },
-  punctuation: { selector: () => '.hljs-punctuation' },
-  tag: { selector: () => '.hljs-tag' },
-};
-
-const CodeSnippetClass = compose(
-  createStyleMixin({
-    mappings: {
-      rootBgColor: { ...root, property: 'background-color' },
-      rootTextColor: { ...root, property: 'color' },
-      docTagTextColor: { ...docTag, property: 'color' },
-      keywordTextColor: { ...keyword, property: 'color' },
-      metaKeywordTextColor: { ...metaKeyword, property: 'color' },
-      templateTagTextColor: { ...templateTag, property: 'color' },
-      templateVariableTextColor: { ...templateVariable, property: 'color' },
-      typeTextColor: { ...type, property: 'color' },
-      variableLanguageTextColor: { ...variableLanguage, property: 'color' },
-      titleTextColor: { ...title, property: 'color' },
-      titleClassTextColor: { ...titleClass, property: 'color' },
-      titleClassInheritedTextColor: { ...titleClassInherited, property: 'color' },
-      titleFunctionTextColor: { ...titleFunction, property: 'color' },
-      attrTextColor: { ...attr, property: 'color' },
-      attributeTextColor: { ...attribute, property: 'color' },
-      literalTextColor: { ...literal, property: 'color' },
-      metaTextColor: { ...meta, property: 'color' },
-      numberTextColor: { ...number, property: 'color' },
-      operatorTextColor: { ...operator, property: 'color' },
-      variableTextColor: { ...variable, property: 'color' },
-      selectorAttrTextColor: { ...selectorAttr, property: 'color' },
-      selectorClassTextColor: { ...selectorClass, property: 'color' },
-      selectorIdTextColor: { ...selectorId, property: 'color' },
-      regexpTextColor: { ...regexp, property: 'color' },
-      stringTextColor: { ...string, property: 'color' },
-      metaStringTextColor: { ...metaString, property: 'color' },
-      builtInTextColor: { ...builtIn, property: 'color' },
-      symbolTextColor: { ...symbol, property: 'color' },
-      commentTextColor: { ...comment, property: 'color' },
-      codeTextColor: { ...code, property: 'color' },
-      formulaTextColor: { ...formula, property: 'color' },
-      nameTextColor: { ...name, property: 'color' },
-      quoteTextColor: { ...quote, property: 'color' },
-      selectorTagTextColor: { ...selectorTag, property: 'color' },
-      selectorPseudoTextColor: { ...selectorPseudo, property: 'color' },
-      substTextColor: { ...subst, property: 'color' },
-      sectionTextColor: { ...section, property: 'color' },
-      bulletTextColor: { ...bullet, property: 'color' },
-      emphasisTextColor: { ...emphasis, property: 'color' },
-      strongTextColor: { ...strong, property: 'color' },
-      additionTextColor: { ...addition, property: 'color' },
-      additionBgColor: { ...addition, property: 'background-color' },
-      deletionTextColor: { ...deletion, property: 'color' },
-      deletionBgColor: { ...deletion, property: 'background-color' },
-      charEscapeTextColor: { ...charEscape, property: 'color' },
-      linkTextColor: { ...link$2, property: 'color' },
-      paramsTextColor: { ...params, property: 'color' },
-      propertyTextColor: { ...property, property: 'color' },
-      punctuationTextColor: { ...punctuation, property: 'color' },
-      tagTextColor: { ...tag, property: 'color' },
-    },
-  }),
-  draggableMixin,
-  componentNameValidationMixin
-)(CodeSnippet$1);
-
-customElements.define(componentName$3, CodeSnippetClass);
-
-var index = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  CodeSnippetClass: CodeSnippetClass
-});
+customElements.define(componentName$3, SamlGroupMappingsClass);
 
 const componentName$2 = getComponentName('radio-button');