@descope/web-components-ui 1.0.311 → 1.0.312

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

@@ -0,0 +1,238 @@
+import hljs from 'highlight.js';
+import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
+import { compose } from '../../helpers';
+import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
+import { createBaseClass } from '../../baseClasses/createBaseClass';
+import { decode, tpl } from './helpers';
+
+export const componentName = getComponentName('code-snippet');
+
+class CodeSnippet extends createBaseClass({ componentName, 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,
+  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' },
+};
+
+export 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, property: 'color' },
+      paramsTextColor: { ...params, property: 'color' },
+      propertyTextColor: { ...property, property: 'color' },
+      punctuationTextColor: { ...punctuation, property: 'color' },
+      tagTextColor: { ...tag, property: 'color' },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin
+)(CodeSnippet);

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

@@ -0,0 +1,9 @@
+export const decode = (input) => {
+  const txt = document.createElement('textarea');
+  txt.innerHTML = input;
+  return txt.value;
+};
+
+export const tpl = (input, inline) => {
+  return inline ? input : `<pre>${input}</pre>`;
+};

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

@@ -0,0 +1,5 @@
+import { componentName, CodeSnippetClass } from './CodeSnippetClass';
+
+customElements.define(componentName, CodeSnippetClass);
+
+export { CodeSnippetClass };

package/src/darkTheme.js

@@ -1,5 +1,6 @@
 import merge from 'lodash.merge';
 import { defaultTheme } from './theme';
+import { codeSnippetDarkThemeOverrides } from './theme/components/codeSnippet';
 
 export const colors = {
   surface: {
@@ -43,6 +44,9 @@ const darkTheme = merge({}, defaultTheme, {
   globals: {
     colors,
   },
+  components: {
+    ...codeSnippetDarkThemeOverrides,
+  },
 });
 
 export default darkTheme;

package/src/index.cjs.js

@@ -44,3 +44,4 @@ export { UserAuthMethodClass } from './components/descope-user-auth-method/UserA
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/MappingsFieldClass';
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/SamlGroupMappingsClass';
 export { PolicyValidationClass } from './components/descope-policy-validation/PolicyValidationClass';
+export { CodeSnippetClass } from './components/descope-code-snippet/CodeSnippetClass';

package/src/index.d.ts

@@ -46,6 +46,7 @@ export { MultiSelectComboBoxClass } from './components/descope-multi-select-comb
 export { MappingsFieldClass } from './components/mapping-fields/descope-mappings-field/';
 export { SamlGroupMappingsClass } from './components/mapping-fields/descope-saml-group-mappings/';
 export { PolicyValidationClass } from './components/descope-policy-validation/';
+export { CodeSnippetClass } from './components/descope-code-snippet/';
 
 export type Theme = {
   globals: {

package/src/index.js

@@ -39,6 +39,7 @@ export * from './components/descope-user-attribute';
 export * from './components/descope-user-auth-method';
 export * from './components/mapping-fields/descope-saml-group-mappings';
 export * from './components/descope-policy-validation';
+export * from './components/descope-code-snippet';
 
 export {
   globalsThemeToStyle,

package/src/theme/components/codeSnippet.js

@@ -0,0 +1,145 @@
+import globals from '../globals';
+import { getThemeRefs } from '../../helpers/themeHelpers';
+import { CodeSnippetClass } from '../../components/descope-code-snippet/CodeSnippetClass';
+
+const globalRefs = getThemeRefs(globals);
+
+const vars = CodeSnippetClass.cssVarList;
+
+const light = {
+  color1: '#fa0',
+  color2: '#d73a49',
+  color3: '#6f42c1',
+  color4: '#005cc5',
+  color5: '#e36209',
+  color6: '#6a737d',
+  color7: '#22863a',
+  color8: '#24292e',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#b31d28',
+  color12: '#ffeef0',
+  color13: '#032f62',
+};
+
+const dark = {
+  color1: '#c9d1d9',
+  color2: '#ff7b72',
+  color3: '#d2a8ff',
+  color4: '#79c0ff',
+  color5: '#ffa657',
+  color6: '#8b949e',
+  color7: '#7ee787',
+  color8: '#c9d1d9',
+  color9: '#735c0f',
+  color10: '#f0fff4',
+  color11: '#67060c',
+  color12: '#ffeef0',
+  color13: '#a5d6ff',
+};
+
+const CodeSnippet = {
+  [vars.rootBgColor]: globalRefs.colors.surface.main,
+  [vars.rootTextColor]: globalRefs.colors.surface.contrast,
+  [vars.docTagTextColor]: light.color2,
+  [vars.keywordTextColor]: light.color2,
+  [vars.metaKeywordTextColor]: light.color2,
+  [vars.templateTagTextColor]: light.color2,
+  [vars.templateVariableTextColor]: light.color2,
+  [vars.typeTextColor]: light.color2,
+  [vars.variableLanguageTextColor]: light.color2,
+  [vars.titleTextColor]: light.color3,
+  [vars.titleClassTextColor]: light.color3,
+  [vars.titleClassInheritedTextColor]: light.color3,
+  [vars.titleFunctionTextColor]: light.color3,
+  [vars.attrTextColor]: light.color4,
+  [vars.attributeTextColor]: light.color4,
+  [vars.literalTextColor]: light.color4,
+  [vars.metaTextColor]: light.color4,
+  [vars.numberTextColor]: light.color4,
+  [vars.operatorTextColor]: light.color4,
+  [vars.variableTextColor]: light.color4,
+  [vars.selectorAttrTextColor]: light.color4,
+  [vars.selectorClassTextColor]: light.color4,
+  [vars.selectorIdTextColor]: light.color4,
+  [vars.regexpTextColor]: light.color13,
+  [vars.stringTextColor]: light.color13,
+  [vars.metaStringTextColor]: light.color13,
+  [vars.builtInTextColor]: light.color5,
+  [vars.symbolTextColor]: light.color5,
+  [vars.commentTextColor]: light.color6,
+  [vars.codeTextColor]: light.color6,
+  [vars.formulaTextColor]: light.color6,
+  [vars.nameTextColor]: light.color7,
+  [vars.quoteTextColor]: light.color7,
+  [vars.selectorTagTextColor]: light.color7,
+  [vars.selectorPseudoTextColor]: light.color7,
+  [vars.substTextColor]: light.color8,
+  [vars.sectionTextColor]: light.color4,
+  [vars.bulletTextColor]: light.color9,
+  [vars.emphasisTextColor]: light.color8,
+  [vars.strongTextColor]: light.color8,
+  [vars.additionTextColor]: light.color7,
+  [vars.additionBgColor]: light.color10,
+  [vars.deletionTextColor]: light.color2,
+  [vars.deletionBgColor]: light.color10,
+  /* purposely ignored */
+  // [vars.charEscapeTextColor]: '',
+  // [vars.linkTextColor]: '',
+  // [vars.paramsTextColor]: '',
+  // [vars.propertyTextColor]: '',
+  // [vars.punctuationTextColor]: '',
+  // [vars.tagTextColor  ]: '',
+};
+
+export const codeSnippetDarkThemeOverrides = {
+  codeSnippet: {
+    [vars.rootBgColor]: globalRefs.colors.surface.main,
+    [vars.rootTextColor]: globalRefs.colors.surface.contrast,
+    [vars.docTagTextColor]: dark.color2,
+    [vars.keywordTextColor]: dark.color2,
+    [vars.metaKeywordTextColor]: dark.color2,
+    [vars.templateTagTextColor]: dark.color2,
+    [vars.templateVariableTextColor]: dark.color2,
+    [vars.typeTextColor]: dark.color2,
+    [vars.variableLanguageTextColor]: dark.color2,
+    [vars.titleTextColor]: dark.color3,
+    [vars.titleClassTextColor]: dark.color3,
+    [vars.titleClassInheritedTextColor]: dark.color3,
+    [vars.titleFunctionTextColor]: dark.color3,
+    [vars.attrTextColor]: dark.color4,
+    [vars.attributeTextColor]: dark.color4,
+    [vars.literalTextColor]: dark.color4,
+    [vars.metaTextColor]: dark.color4,
+    [vars.numberTextColor]: dark.color4,
+    [vars.operatorTextColor]: dark.color4,
+    [vars.variableTextColor]: dark.color4,
+    [vars.selectorAttrTextColor]: dark.color4,
+    [vars.selectorClassTextColor]: dark.color4,
+    [vars.selectorIdTextColor]: dark.color4,
+    [vars.regexpTextColor]: dark.color13,
+    [vars.stringTextColor]: dark.color13,
+    [vars.metaStringTextColor]: dark.color13,
+    [vars.builtInTextColor]: dark.color5,
+    [vars.symbolTextColor]: dark.color5,
+    [vars.commentTextColor]: dark.color6,
+    [vars.codeTextColor]: dark.color6,
+    [vars.formulaTextColor]: dark.color6,
+    [vars.nameTextColor]: dark.color7,
+    [vars.quoteTextColor]: dark.color7,
+    [vars.selectorTagTextColor]: dark.color7,
+    [vars.selectorPseudoTextColor]: dark.color7,
+    [vars.substTextColor]: dark.color8,
+    [vars.sectionTextColor]: dark.color4,
+    [vars.bulletTextColor]: dark.color9,
+    [vars.emphasisTextColor]: dark.color8,
+    [vars.strongTextColor]: dark.color8,
+    [vars.additionTextColor]: dark.color7,
+    [vars.additionBgColor]: dark.color10,
+    [vars.deletionTextColor]: dark.color2,
+    [vars.deletionBgColor]: dark.color10,
+  },
+};
+
+export default CodeSnippet;
+export { vars };

package/src/theme/components/index.js

@@ -38,6 +38,7 @@ import * as userAuthMethod from './userAuthMethod';
 import * as samlGroupMappings from './samlGroupMappings';
 import * as policyValidation from './policyValidation';
 import * as icon from './icon';
+import * as codeSnippet from './codeSnippet';
 
 const components = {
   button,
@@ -81,6 +82,7 @@ const components = {
   samlGroupMappings,
   policyValidation,
   icon,
+  codeSnippet,
 };
 
 const theme = Object.keys(components).reduce(