@descope/web-components-ui 1.106.0 → 1.108.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/cjs/index.cjs.js +1535 -1385
  2. package/dist/cjs/index.cjs.js.map +1 -1
  3. package/dist/index.esm.js +2086 -1935
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/umd/DescopeDev.js +1 -1
  6. package/dist/umd/DescopeDev.js.map +1 -1
  7. package/dist/umd/descope-alert-index-js.js +1 -1
  8. package/dist/umd/descope-alert-index-js.js.map +1 -1
  9. package/dist/umd/descope-enriched-text.js +2 -0
  10. package/dist/umd/descope-enriched-text.js.map +1 -0
  11. package/dist/umd/descope-hcaptcha-index-js.js +2 -0
  12. package/dist/umd/descope-hcaptcha-index-js.js.map +1 -0
  13. package/dist/umd/descope-link.js +2 -0
  14. package/dist/umd/descope-link.js.map +1 -0
  15. package/dist/umd/index.js +1 -1
  16. package/dist/umd/index.js.map +1 -1
  17. package/package.json +4 -3
  18. package/src/components/descope-alert/AlertClass.js +1 -1
  19. package/src/components/descope-alert/index.js +1 -1
  20. package/src/components/descope-hcaptcha/HcaptchaClass.js +137 -0
  21. package/src/components/descope-hcaptcha/index.js +5 -0
  22. package/src/index.cjs.js +1 -2
  23. package/src/index.js +1 -2
  24. package/src/theme/components/hcaptcha.js +14 -0
  25. package/src/theme/components/index.js +4 -2
  26. package/dist/umd/descope-enriched-text-index-js.js +0 -2
  27. package/dist/umd/descope-enriched-text-index-js.js.map +0 -1
  28. package/dist/umd/descope-link-index-js.js +0 -2
  29. package/dist/umd/descope-link-index-js.js.map +0 -1
  30. package/src/components/descope-enriched-text/EnrichedTextClass.js +0 -209
  31. package/src/components/descope-enriched-text/consts.js +0 -14
  32. package/src/components/descope-enriched-text/helpers.js +0 -5
  33. package/src/components/descope-enriched-text/index.js +0 -5
  34. package/src/components/descope-link/LinkClass.js +0 -76
  35. package/src/components/descope-link/index.js +0 -6
  36. package/src/theme/components/enrichedText.js +0 -40
  37. package/src/theme/components/link.js +0 -36
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@descope/web-components-ui",
3
- "version": "1.106.0",
3
+ "version": "1.108.0",
4
4
  "description": "",
5
5
  "main": "dist/cjs/index.cjs.js",
6
6
  "module": "dist/index.esm.js",
@@ -75,7 +75,6 @@
75
75
  "libphonenumber-js": "^1.11.12",
76
76
  "lodash.debounce": "4.0.8",
77
77
  "lodash.merge": "4.6.2",
78
- "markdown-it": "14.1.0",
79
78
  "@descope-ui/common": "0.0.16",
80
79
  "@descope-ui/descope-button": "0.0.15",
81
80
  "@descope-ui/descope-image": "0.0.8",
@@ -89,7 +88,9 @@
89
88
  "@descope-ui/descope-timer-button": "0.0.16",
90
89
  "@descope-ui/descope-password-strength": "0.0.11",
91
90
  "@descope-ui/descope-collapsible-container": "0.0.15",
92
- "@descope-ui/descope-recovery-codes": "0.0.4"
91
+ "@descope-ui/descope-recovery-codes": "0.0.4",
92
+ "@descope-ui/descope-link": "0.0.1",
93
+ "@descope-ui/descope-enriched-text": "0.0.1"
93
94
  },
94
95
  "overrides": {
95
96
  "@vaadin/avatar": "24.3.4",
@@ -2,7 +2,7 @@ import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '
2
2
  import { compose } from '../../helpers';
3
3
  import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
4
4
  import { createBaseClass } from '../../baseClasses/createBaseClass';
5
- import { EnrichedTextClass } from '../descope-enriched-text/EnrichedTextClass';
5
+ import { EnrichedTextClass } from '@descope-ui/descope-enriched-text/class';
6
6
  import { injectStyle, observeChildren, syncAttrs } from '@descope-ui/common/components-helpers';
7
7
 
8
8
  export const componentName = getComponentName('alert');
@@ -1,4 +1,4 @@
1
- import '../descope-enriched-text';
1
+ import '@descope-ui/descope-enriched-text';
2
2
  import { componentName, AlertClass } from './AlertClass';
3
3
 
4
4
  customElements.define(componentName, AlertClass);
@@ -0,0 +1,137 @@
1
+ import { injectStyle, observeChildren } from '@descope-ui/common/components-helpers';
2
+ import { draggableMixin, createStyleMixin, componentNameValidationMixin } from '../../mixins';
3
+ import { createBaseInputClass } from '../../baseClasses/createBaseInputClass';
4
+ import { compose } from '../../helpers';
5
+ import { getComponentName } from '../../helpers/componentHelpers';
6
+
7
+ export const componentName = getComponentName('hcaptcha');
8
+
9
+ const observedAttributes = ['enabled', 'site-key'];
10
+
11
+ const BaseInputClass = createBaseInputClass({ componentName, baseSelector: ':host > div' });
12
+ class RawHcaptcha extends BaseInputClass {
13
+ static get observedAttributes() {
14
+ return observedAttributes.concat(BaseInputClass.observedAttributes || []);
15
+ }
16
+
17
+ attributeChangedCallback(attrName, oldValue, newValue) {
18
+ super.attributeChangedCallback?.(attrName, oldValue, newValue);
19
+ if (oldValue !== newValue) {
20
+ if (attrName === 'enabled') {
21
+ this.toggleCaptchaEles(newValue === 'true');
22
+ }
23
+ }
24
+ }
25
+
26
+ constructor() {
27
+ super();
28
+
29
+ this.attachShadow({ mode: 'open' }).innerHTML = `
30
+ <div class="badge">
31
+ <span id="hcaptcha"></span>
32
+ <input id="hcaptcha-input" type="hidden" name="hcaptcha" required />
33
+ <img src="https://imgs.descope.com/connectors/templates/hcaptcha/hcaptcha-big.png" alt="hcaptcha"/>
34
+ </div>
35
+ <slot></slot>
36
+ `;
37
+
38
+ injectStyle(
39
+ `
40
+ :host {
41
+ display: inline-flex;
42
+ }
43
+ :host > div:not(.hidden) {
44
+ display: flex;
45
+ }
46
+ :host #hcaptcha-input {
47
+ display: none;
48
+ }
49
+ :host #hcaptcha .hcaptcha-logo {
50
+ height: 100%;
51
+ }
52
+ :host #hcaptcha {
53
+ width: 100%;
54
+ height: 100%;
55
+ }
56
+ :host img {
57
+ max-width: 100%;
58
+ max-height: 100%;
59
+ object-fit: contain;
60
+ }
61
+ .hidden {
62
+ display: none;
63
+ }
64
+ `,
65
+ this
66
+ );
67
+
68
+ this.captchaEle = this.shadowRoot.querySelector('#hcaptcha');
69
+ this.mockCaptchaEle = this.shadowRoot.querySelector('img');
70
+ this.badge = this.shadowRoot.querySelector('.badge');
71
+ this.inputElement = this.shadowRoot.querySelector('input');
72
+ }
73
+
74
+ init() {
75
+ super.init?.();
76
+
77
+ observeChildren(this, this.updatePreview.bind(this));
78
+ // avoid any possible conflicts with the inner input elements
79
+ this.inputElement.getValidity = null;
80
+ this.inputElement.checkValidity = null;
81
+ }
82
+
83
+ toggleCaptchaEles(enabled) {
84
+ if (enabled) {
85
+ this.captchaEle.style.display = '';
86
+ this.mockCaptchaEle.style.display = 'none';
87
+ } else {
88
+ this.captchaEle.style.display = 'none';
89
+ this.mockCaptchaEle.style.display = '';
90
+ }
91
+ }
92
+
93
+ updatePreview() {
94
+ this.toggleCaptchaEles(this.enabled);
95
+ }
96
+
97
+ getValidity() {
98
+ if (!this.inputElement.value) {
99
+ return { valueMissing: true };
100
+ }
101
+
102
+ return {};
103
+ }
104
+
105
+ checkValidity() {
106
+ return !!this.inputElement.value;
107
+ }
108
+
109
+ get siteKey() {
110
+ return this.getAttribute('site-key');
111
+ }
112
+
113
+ get enabled() {
114
+ return this.getAttribute('enabled') === 'true';
115
+ }
116
+ }
117
+
118
+ export const HcaptchaClass = compose(
119
+ createStyleMixin({
120
+ mappings: {
121
+ hostWidth: [{ selector: () => ':host', property: 'width' }],
122
+ hostDirection: { property: 'direction' },
123
+ verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
124
+ horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
125
+ maxHeight: [
126
+ { selector: '>img', property: 'height' },
127
+ { selector: '>#hcaptcha', property: 'height' },
128
+ ],
129
+ maxWidth: [
130
+ { selector: '>img', property: 'max-width' },
131
+ { selector: '>hcaptcha', property: 'max-width' },
132
+ ],
133
+ },
134
+ }),
135
+ draggableMixin,
136
+ componentNameValidationMixin
137
+ )(RawHcaptcha);
@@ -0,0 +1,5 @@
1
+ import { componentName, HcaptchaClass } from './HcaptchaClass';
2
+
3
+ customElements.define(componentName, HcaptchaClass);
4
+
5
+ export { HcaptchaClass, componentName };
package/src/index.cjs.js CHANGED
@@ -12,14 +12,12 @@ export { LoaderRadialClass } from './components/descope-loader-radial/LoaderRadi
12
12
  export { ContainerClass } from './components/descope-container/ContainerClass';
13
13
  export { DividerClass } from './components/descope-divider/DividerClass';
14
14
  export { EmailFieldClass } from './components/descope-email-field/EmailFieldClass';
15
- export { LinkClass } from './components/descope-link/LinkClass';
16
15
  export { LogoClass } from './components/descope-logo/LogoClass';
17
16
  export { TotpImageClass } from './components/descope-totp-image/TotpImageClass';
18
17
  export { NotpImageClass } from './components/descope-notp-image/NotpImageClass';
19
18
  export { NumberFieldClass } from './components/descope-number-field/NumberFieldClass';
20
19
  export { PasscodeClass } from './components/descope-passcode/PasscodeClass';
21
20
  export { PasswordClass } from './components/descope-password/PasswordClass';
22
- export { EnrichedTextClass } from './components/descope-enriched-text/EnrichedTextClass';
23
21
  export { TextAreaClass } from './components/descope-text-area/TextAreaClass';
24
22
  export { TextFieldClass } from './components/descope-text-field/TextFieldClass';
25
23
  export { PhoneFieldClass } from './components/phone-fields/descope-phone-field/PhoneFieldClass';
@@ -54,5 +52,6 @@ export { SecurityQuestionsSetupClass } from './components/descope-security-quest
54
52
  export { SecurityQuestionsVerifyClass } from './components/descope-security-questions-verify/SecurityQuestionsVerifyClass';
55
53
  export { HybridFieldClass } from './components/descope-hybrid-field/HybridFieldClass';
56
54
  export { AlertClass } from './components/descope-alert/AlertClass';
55
+ export { HcaptchaClass } from './components/descope-hcaptcha/HcaptchaClass';
57
56
 
58
57
  /* INJECT_COMPONENTS */
package/src/index.js CHANGED
@@ -7,14 +7,12 @@ export * from './components/descope-date-field/descope-calendar';
7
7
  export * from './components/descope-date-field';
8
8
  export * from './components/descope-divider';
9
9
  export * from './components/descope-email-field';
10
- export * from './components/descope-link';
11
10
  export * from './components/descope-logo';
12
11
  export * from './components/descope-totp-image';
13
12
  export * from './components/descope-notp-image';
14
13
  export * from './components/descope-number-field';
15
14
  export * from './components/descope-passcode';
16
15
  export * from './components/descope-password';
17
- export * from './components/descope-enriched-text';
18
16
  export * from './components/descope-text-area';
19
17
  export * from './components/descope-text-field';
20
18
  export * from './components/phone-fields/descope-phone-field';
@@ -44,6 +42,7 @@ export * from './components/descope-security-questions-setup';
44
42
  export * from './components/descope-security-questions-verify';
45
43
  export * from './components/descope-hybrid-field';
46
44
  export * from './components/descope-alert';
45
+ export * from './components/descope-hcaptcha';
47
46
 
48
47
  export {
49
48
  globalsThemeToStyle,
@@ -0,0 +1,14 @@
1
+ import { HcaptchaClass } from '../../components/descope-hcaptcha/HcaptchaClass';
2
+
3
+ const vars = HcaptchaClass.cssVarList;
4
+
5
+ const hcaptcha = {
6
+ enabled: {
7
+ false: {
8
+ [vars.maxHeight]: '70px',
9
+ },
10
+ },
11
+ };
12
+
13
+ export default hcaptcha;
14
+ export { vars };
@@ -11,8 +11,8 @@ import * as logo from './logo';
11
11
  import * as totpImage from './totpImage';
12
12
  import * as notpImage from './notpImage';
13
13
  import * as text from '@descope-ui/descope-text/theme';
14
- import * as enrichedText from './enrichedText';
15
- import * as link from './link';
14
+ import * as enrichedText from '@descope-ui/descope-enriched-text/theme';
15
+ import * as link from '@descope-ui/descope-link/theme';
16
16
  import * as divider from './divider';
17
17
  import * as passcode from './passcode';
18
18
  import { loaderRadial, loaderLinear } from './loader';
@@ -52,6 +52,7 @@ import * as securityQuestionsSetup from './securityQuestionsSetup';
52
52
  import * as securityQuestionsVerify from './securityQuestionsVerify';
53
53
  import * as hybridField from './hybridField';
54
54
  import * as alert from './alert';
55
+ import * as hcaptcha from './hcaptcha';
55
56
  import * as autocompleteField from '@descope-ui/descope-autocomplete-field/theme';
56
57
  import * as addressField from '@descope-ui/descope-address-field/theme';
57
58
  import * as timer from '@descope-ui/descope-timer/theme';
@@ -123,6 +124,7 @@ const components = {
123
124
  passwordStrength,
124
125
  collapsibleContainer,
125
126
  recoveryCodes,
127
+ hcaptcha,
126
128
  };
127
129
 
128
130
  const theme = Object.keys(components).reduce(
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5710],{610:(e,t,r)=>{r.d(t,{M:()=>n});const n=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"]},30521:(e,t,r)=>{r.d(t,{T:()=>d,m:()=>u});var n=r(92540),o=r(79365),s=r(9696),i=r(97810),c=r(610),l=r(81365),h=r(39449),a=r(25964);const d=(0,i.xE)("enriched-text");class p extends((0,l.q)({componentName:d,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <div class="content"></div>\n ',(0,a.fz)("\n :host {\n line-height: 1em;\n word-break: break-word;\n }\n :host > slot {\n width: 100%;\n display: inline-block;\n }\n *, *:last-child {\n margin: 0;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p {\n margin-bottom: 1em;\n }\n a {\n cursor: pointer;\n }\n blockquote {\n padding: 0 2em;\n }\n u {\n text-decoration: underline\n }\n s {\n color: currentColor;\n }\n ",this),this.#r(),(0,i.Ge)(this,this.#n.bind(this))}static get observedAttributes(){return["readonly","link-target-blank"]}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),r!==t&&("readonly"===e&&this.onReadOnlyChange("true"===r),"link-target-blank"===e&&this.#r())}customUnderlineRenderer(){this.processor.renderer.rules.em_open=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o)),this.processor.renderer.rules.em_close=(e,t,r,n,o)=>("_"===e[t].markup&&(e[t].tag="u"),this.#t(e,t,r,n,o))}#o(){this.linkTargetBlank?this.processor.renderer.rules.link_open=(e,t,r,n,o)=>(e[t].attrSet("target","_blank"),this.#e(e,t,r,n,o)):this.processor.renderer.rules.link_open=this.#e}#s(){this.processor&&this.processor.disable(c.M)}#i(){this.#s()}#c(){this.#e=this.processor.renderer.rules.link_open||((e,t,r,n,o)=>o.renderToken(e,t,r)),this.#t=this.processor.renderer.rules.em_open||((e,t,r,n,o)=>o.renderToken(e,t,r))}#r(){this.processor=new n.A("commonmark",{html:!0}),this.#c(),this.#i(),this.#o(),this.customUnderlineRenderer()}get linkTargetBlank(){return"true"===this.getAttribute("link-target-blank")}get contentNode(){return this.shadowRoot.querySelector(".content")}#n(){if(!this.processor)return;let e=(0,h.G)(this.innerHTML);!e?.trim()&&this.isConnected?this.setAttribute("empty","true"):this.removeAttribute("empty");try{const t=this.processor.parse(e,{references:void 0});e=this.processor.renderer.render(t,{html:!0,breaks:!0})}catch(e){console.warn("Not parsing invalid markdown token")}this.contentNode.innerHTML=e}onReadOnlyChange(e){e?this.contentNode.setAttribute("inert",e):this.contentNode.removeAttribute("inert")}}const u=(0,s.Zz)((0,o.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDisplay:{selector:()=>":host",property:"display",fallback:"inline-block"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},fontFamily:{},fontWeight:{},fontWeightBold:[{selector:()=>":host strong",property:"font-weight"},{selector:()=>":host b",property:"font-weight"}],textColor:{property:"color"},textLineHeight:{property:"line-height"},textAlign:{},linkColor:{selector:"a",property:"color"},linkTextDecoration:{selector:"a",property:"text-decoration"},linkHoverTextDecoration:{selector:"a:hover",property:"text-decoration"},minHeight:{},minWidth:{}}}),(0,o.RF)({componentNameOverride:(0,i.xE)("link")}),(0,o.RF)({componentNameOverride:(0,i.xE)("text")}),o.VO,o.tQ)(p)},39449:(e,t,r)=>{r.d(t,{G:()=>n});const n=e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value}},63196:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>n.m,componentName:()=>n.T});var n=r(30521);customElements.define(n.T,n.m)}}]);
2
- //# sourceMappingURL=descope-enriched-text-index-js.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"descope-enriched-text-index-js.js","mappings":"wJAAO,MAAMA,EAAe,CAC1B,aACA,OACA,QACA,QACA,OACA,KACA,YACA,QACA,YACA,UACA,WACA,a,oICDK,MAAMC,GAAgB,QAAiB,iBAE9C,MAAMC,WAAqB,OAAgB,CAAED,gBAAeE,aAAc,iBACxE,GAEA,GAEA,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,2CAIhD,QACE,6iBAkCAH,MAGFA,MAAK,KAEL,QAAgBA,KAAMA,MAAK,EAAeI,KAAKJ,MACjD,CAEA,6BAAWK,GACT,MAAO,CAAC,WAAY,oBACtB,CAEA,wBAAAC,CAAyBC,EAAUC,EAAUC,GAC3CV,MAAMO,2BAA2BC,EAAUC,EAAUC,GAEjDA,IAAaD,IACE,aAAbD,GACFP,KAAKU,iBAA8B,SAAbD,GAGP,sBAAbF,GACFP,MAAK,IAGX,CAGA,uBAAAW,GACEX,KAAKY,UAAUC,SAASC,MAAMC,QAAU,CAACC,EAAQC,EAAKC,EAASC,EAAKC,KACvC,MAAvBJ,EAAOC,GAAKI,SAAgBL,EAAOC,GAAKK,IAAM,KAC3CtB,MAAK,EAAgBgB,EAAQC,EAAKC,EAASC,EAAKC,IAEzDpB,KAAKY,UAAUC,SAASC,MAAMS,SAAW,CAACP,EAAQC,EAAKC,EAASC,EAAKC,KACxC,MAAvBJ,EAAOC,GAAKI,SAAgBL,EAAOC,GAAKK,IAAM,KAC3CtB,MAAK,EAAgBgB,EAAQC,EAAKC,EAASC,EAAKC,GAE3D,CAEA,KACMpB,KAAKwB,gBACPxB,KAAKY,UAAUC,SAASC,MAAMW,UAAY,CAACT,EAAQC,EAAKC,EAASC,EAAKC,KAEpEJ,EAAOC,GAAKS,QAAQ,SAAU,UAEvB1B,MAAK,EAAkBgB,EAAQC,EAAKC,EAASC,EAAKC,IAG3DpB,KAAKY,UAAUC,SAASC,MAAMW,UAAYzB,MAAK,CAEnD,CAEA,KACOA,KAAKY,WAGVZ,KAAKY,UAAUe,QAAQ,IACzB,CAEA,KACE3B,MAAK,GACP,CAEA,KAGEA,MAAK,EAAoBA,KAAKY,UAAUC,SAASC,MAAMW,WAF3B,EAACT,EAAQC,EAAKC,EAASU,EAAGR,IACpDA,EAAKS,YAAYb,EAAQC,EAAKC,IAKhClB,MAAK,EAAkBA,KAAKY,UAAUC,SAASC,MAAMC,SAFvB,EAACC,EAAQC,EAAKC,EAASU,EAAGR,IACtDA,EAAKS,YAAYb,EAAQC,EAAKC,GAElC,CAEA,KACElB,KAAKY,UAAY,IAAI,IAAW,aAAc,CAAEkB,MAAM,IACtD9B,MAAK,IACLA,MAAK,IACLA,MAAK,IACLA,KAAKW,yBACP,CAEA,mBAAIa,GACF,MAAkD,SAA3CxB,KAAK+B,aAAa,oBAC3B,CAEA,eAAIC,GACF,OAAOhC,KAAKiC,WAAWC,cAAc,WACvC,CAEA,KACE,IAAKlC,KAAKY,UACR,OAGF,IAAIkB,GAAO,OAAW9B,KAAKG,YAEtB2B,GAAMK,QAAUnC,KAAKoC,YACxBpC,KAAKqC,aAAa,QAAS,QAE3BrC,KAAKsC,gBAAgB,SAGvB,IACE,MAAMtB,EAAShB,KAAKY,UAAU2B,MAAMT,EAAM,CAAEU,gBAAYC,IACxDX,EAAO9B,KAAKY,UAAUC,SAAS6B,OAAO1B,EAAQ,CAAEc,MAAM,EAAMa,QAAQ,GACtE,CAAE,MAAOC,GAEPC,QAAQC,KAAK,qCACf,CAEA9C,KAAKgC,YAAY7B,UAAY2B,CAC/B,CAEA,gBAAApB,CAAiBqC,GACXA,EACF/C,KAAKgC,YAAYK,aAAa,QAASU,GAEvC/C,KAAKgC,YAAYM,gBAAgB,QAErC,EAGK,MAAMU,GAAoB,SAC/B,QAAiB,CACfC,SAAU,CACRC,UAAW,CAAEC,SAAU,IAAM,QAASC,SAAU,SAChDC,YAAa,CAAEF,SAAU,IAAM,QAASC,SAAU,UAAWE,SAAU,gBACvEC,cAAe,CAAEJ,SAAU,IAAM,QAASC,SAAU,aACpDI,SAAU,CAAC,EACXC,WAAY,CAAC,EACbC,WAAY,CAAC,EACbC,eAAgB,CACd,CAAER,SAAU,IAAM,eAAgBC,SAAU,eAC5C,CAAED,SAAU,IAAM,UAAWC,SAAU,gBAEzCQ,UAAW,CAAER,SAAU,SACvBS,eAAgB,CAAET,SAAU,eAC5BU,UAAW,CAAC,EACZC,UAAW,CAAEZ,SAAU,IAAKC,SAAU,SACtCY,mBAAoB,CAAEb,SAAU,IAAKC,SAAU,mBAC/Ca,wBAAyB,CAAEd,SAAU,UAAWC,SAAU,mBAC1Dc,UAAW,CAAC,EACZC,SAAU,CAAC,MAGf,QAAiB,CAAEC,uBAAuB,QAAiB,WAC3D,QAAiB,CAAEA,uBAAuB,QAAiB,UAC3D,KACA,KA1B+B,CA2B/BxE,E,mCChNK,MAAMyE,EAAcvC,IACzB,MAAMwC,EAAWC,SAASC,cAAc,YAExC,OADAF,EAASnE,UAAY2B,EACdwC,EAASG,KAAK,C,iGCDvBC,eAAeC,OAAO,IAAe,I","sources":["webpack://@descope/web-components-ui/./src/components/descope-enriched-text/consts.js","webpack://@descope/web-components-ui/./src/components/descope-enriched-text/EnrichedTextClass.js","webpack://@descope/web-components-ui/./src/components/descope-enriched-text/helpers.js","webpack://@descope/web-components-ui/./src/components/descope-enriched-text/index.js"],"sourcesContent":["export const disableRules = [\n 'blockquote',\n 'list',\n 'image',\n 'table',\n 'code',\n 'hr',\n 'backticks',\n 'fence',\n 'reference',\n 'heading',\n 'lheading',\n 'html_block',\n];\n","/* eslint-disable no-param-reassign */\n\nimport MarkdownIt from 'markdown-it';\nimport { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { compose } from '../../helpers';\nimport { getComponentName, observeChildren } from '../../helpers/componentHelpers';\nimport { disableRules } from './consts';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { decodeHTML } from './helpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('enriched-text');\n\nclass EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {\n #origLinkRenderer;\n\n #origEmRenderer;\n\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <div class=\"content\"></div>\n `;\n\n injectStyle(\n `\n :host {\n line-height: 1em;\n word-break: break-word;\n }\n :host > slot {\n width: 100%;\n display: inline-block;\n }\n *, *:last-child {\n margin: 0;\n }\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p {\n margin-bottom: 1em;\n }\n a {\n cursor: pointer;\n }\n blockquote {\n padding: 0 2em;\n }\n u {\n text-decoration: underline\n }\n s {\n color: currentColor;\n }\n `,\n this\n );\n\n this.#initProcessor();\n\n observeChildren(this, this.#parseChildren.bind(this));\n }\n\n static get observedAttributes() {\n return ['readonly', 'link-target-blank'];\n }\n\n attributeChangedCallback(attrName, oldValue, newValue) {\n super.attributeChangedCallback?.(attrName, oldValue, newValue);\n\n if (newValue !== oldValue) {\n if (attrName === 'readonly') {\n this.onReadOnlyChange(newValue === 'true');\n }\n\n if (attrName === 'link-target-blank') {\n this.#initProcessor();\n }\n }\n }\n\n // We're overriding the rule for em with single underscore to perform as underline. (_underline_)\n customUnderlineRenderer() {\n this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {\n if (tokens[idx].markup === '_') tokens[idx].tag = 'u';\n return this.#origEmRenderer(tokens, idx, options, env, self);\n };\n this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {\n if (tokens[idx].markup === '_') tokens[idx].tag = 'u';\n return this.#origEmRenderer(tokens, idx, options, env, self);\n };\n }\n\n #customizeLinkRenderer() {\n if (this.linkTargetBlank) {\n this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {\n // Add a new `target` attribute, or replace the value of the existing one.\n tokens[idx].attrSet('target', '_blank');\n // Pass the token to the default renderer.\n return this.#origLinkRenderer(tokens, idx, options, env, self);\n };\n } else {\n this.processor.renderer.rules.link_open = this.#origLinkRenderer;\n }\n }\n\n #disableCustomRules() {\n if (!this.processor) {\n return;\n }\n this.processor.disable(disableRules);\n }\n\n #updateProcessorRules() {\n this.#disableCustomRules();\n }\n\n #storeOrigRenderers() {\n const defaultLinkRenderer = (tokens, idx, options, _, self) =>\n self.renderToken(tokens, idx, options);\n this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;\n\n const defaultStrongRenderer = (tokens, idx, options, _, self) =>\n self.renderToken(tokens, idx, options);\n this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;\n }\n\n #initProcessor() {\n this.processor = new MarkdownIt('commonmark', { html: true });\n this.#storeOrigRenderers();\n this.#updateProcessorRules();\n this.#customizeLinkRenderer();\n this.customUnderlineRenderer();\n }\n\n get linkTargetBlank() {\n return this.getAttribute('link-target-blank') === 'true';\n }\n\n get contentNode() {\n return this.shadowRoot.querySelector('.content');\n }\n\n #parseChildren() {\n if (!this.processor) {\n return;\n }\n\n let html = decodeHTML(this.innerHTML);\n\n if (!html?.trim() && this.isConnected) {\n this.setAttribute('empty', 'true');\n } else {\n this.removeAttribute('empty');\n }\n\n try {\n const tokens = this.processor.parse(html, { references: undefined });\n html = this.processor.renderer.render(tokens, { html: true, breaks: true });\n } catch (e) {\n // eslint-disable-next-line no-console\n console.warn('Not parsing invalid markdown token');\n }\n\n this.contentNode.innerHTML = html;\n }\n\n onReadOnlyChange(isReadOnly) {\n if (isReadOnly) {\n this.contentNode.setAttribute('inert', isReadOnly);\n } else {\n this.contentNode.removeAttribute('inert');\n }\n }\n}\n\nexport const EnrichedTextClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontSize: {},\n fontFamily: {},\n fontWeight: {},\n fontWeightBold: [\n { selector: () => ':host strong', property: 'font-weight' },\n { selector: () => ':host b', property: 'font-weight' },\n ],\n textColor: { property: 'color' },\n textLineHeight: { property: 'line-height' },\n textAlign: {},\n linkColor: { selector: 'a', property: 'color' },\n linkTextDecoration: { selector: 'a', property: 'text-decoration' },\n linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },\n minHeight: {},\n minWidth: {},\n },\n }),\n createStyleMixin({ componentNameOverride: getComponentName('link') }),\n createStyleMixin({ componentNameOverride: getComponentName('text') }),\n draggableMixin,\n componentNameValidationMixin\n)(EnrichedText);\n","export const decodeHTML = (html) => {\n const textArea = document.createElement('textarea');\n textArea.innerHTML = html;\n return textArea.value;\n};\n","import { componentName, EnrichedTextClass } from './EnrichedTextClass';\n\ncustomElements.define(componentName, EnrichedTextClass);\n\nexport { EnrichedTextClass, componentName };\n"],"names":["disableRules","componentName","EnrichedText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","bind","observedAttributes","attributeChangedCallback","attrName","oldValue","newValue","onReadOnlyChange","customUnderlineRenderer","processor","renderer","rules","em_open","tokens","idx","options","env","self","markup","tag","em_close","linkTargetBlank","link_open","attrSet","disable","_","renderToken","html","getAttribute","contentNode","shadowRoot","querySelector","trim","isConnected","setAttribute","removeAttribute","parse","references","undefined","render","breaks","e","console","warn","isReadOnly","EnrichedTextClass","mappings","hostWidth","selector","property","hostDisplay","fallback","hostDirection","fontSize","fontFamily","fontWeight","fontWeightBold","textColor","textLineHeight","textAlign","linkColor","linkTextDecoration","linkHoverTextDecoration","minHeight","minWidth","componentNameOverride","decodeHTML","textArea","document","createElement","value","customElements","define"],"sourceRoot":""}
@@ -1,2 +0,0 @@
1
- "use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[2294,7792],{63595:(t,e,o)=>{o.r(e),o.d(e,{TextClass:()=>n.s,componentName:()=>n.T});var n=o(66434);customElements.define(n.T,n.s)},66434:(t,e,o)=>{o.d(e,{T:()=>h,s:()=>c});var n=o(88961),s=o(63200),r=o(25964),i=o(72270);const h=(0,r.xE)("text");class l extends((0,i.qu)({componentName:h,baseSelector:":host > slot"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <slot part="text-wrapper"></slot>\n ',(0,r.fz)("\n :host {\n display: inline-block;\n line-height: 1em;\n }\n :host > slot {\n width: 100%;\n display: inline-block;\n }\n ",this)}get hideWhenEmpty(){return"true"===this.getAttribute("hide-when-empty")}init(){super.init(),(0,r.Ge)(this,(()=>{const t=!!this.childNodes.length;this.style.display=!t&&this.hideWhenEmpty?"none":""}))}}const{host:p}={host:{selector:()=>":host"}},c=(0,s.Zz)((0,n.RF)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostDirection:{selector:()=>":host",property:"direction"},fontSize:{},textColor:[{property:"color"}],textLineHeight:{property:"line-height"},textLetterSpacing:{property:"letter-spacing"},textShadow:{},textAlign:{},textTransform:{},fontFamily:{},fontStyle:{},fontWeight:{},borderWidth:{},borderStyle:{},borderColor:{}}}),n.VO,n.tQ)(l)},83002:(t,e,o)=>{o.r(e),o.d(e,{LinkClass:()=>w,componentName:()=>p});var n=o(79365),s=o(81365),r=o(66434),i=o(9696),h=o(97810),l=o(25964);const p=(0,h.xE)("link");class c extends((0,s.q)({componentName:p,baseSelector:":host a"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t",(0,l.fz)("\n :host {\n\t\t\tdisplay: inline-block;\n line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n ",this),(0,h.EA)(this,this.shadowRoot.querySelector("a"),{includeAttrs:["href","target","tooltip"],mapAttrs:{tooltip:"title"}}),(0,h.EA)(this,this.shadowRoot.querySelector("descope-text"),{includeAttrs:["mode","variant"]})}}const a={host:{selector:()=>":host"},link:{selector:()=>":host a"},anchor:{},wrapper:{selector:()=>":host > div"},text:{selector:()=>r.s.componentName}},{anchor:d,text:m,host:y,wrapper:x,link:u}=a,w=(0,i.Zz)((0,n.RF)({mappings:{hostWidth:{...y,property:"width"},hostDirection:{...m,property:"direction"},textAlign:x,textDecoration:{...u,property:"text-decoration",fallback:"none"},textColor:[{...d,property:"color"},{...m,property:r.s.cssVarList.textColor}],cursor:d}}),n.VO,n.tQ)(c);o(63595),customElements.define(p,w)}}]);
2
- //# sourceMappingURL=descope-link-index-js.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"descope-link-index-js.js","mappings":"qNAEAA,eAAeC,OAAO,IAAe,I,2FCW9B,MAAMC,GAAgB,QAAiB,QAE9C,MAAMC,WAAgB,QAAgB,CACpCD,gBACAE,aAAc,kBAEd,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,iDAIhD,QAAY,iLASTH,KACL,CAEA,iBAAII,GACF,MAAgD,SAAzCJ,KAAKK,aAAa,kBAC3B,CAEA,IAAAC,GACEP,MAAMO,QAEN,QAAgBN,MAAM,KACpB,MAAMO,IAAgBP,KAAKQ,WAAWC,OACtCT,KAAKU,MAAMC,SAAWJ,GAAeP,KAAKI,cAAgB,OAAS,EAAE,GAEzE,EAGF,MAAM,KAAEQ,GAAS,CACfA,KAAM,CAAEC,SAAU,IAAM,UAGbC,GAAY,SACvB,QAAiB,CACfC,SAAU,CACRC,UAAW,CAAEH,SAAU,IAAM,QAASI,SAAU,SAChDC,cAAe,CAAEL,SAAU,IAAM,QAASI,SAAU,aACpDE,SAAU,CAAC,EACXC,UAAW,CACT,CAAEH,SAAU,UAEdI,eAAgB,CAAEJ,SAAU,eAC5BK,kBAAmB,CAAEL,SAAU,kBAC/BM,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,cAAe,CAAC,EAChBC,WAAY,CAAC,EACbC,UAAW,CAAC,EACZC,WAAY,CAAC,EACbC,YAAa,CAAC,EACdC,YAAa,CAAC,EACdC,YAAa,CAAC,KAGlB,KACA,KAvBuB,CAwBvBnC,E,2ICzEK,MAAMD,GAAgB,QAAiB,QAE9C,MAAMqC,WAAgB,EAAAC,EAAA,GAAgB,CAAEtC,gBAAeE,aAAc,aACnE,WAAAC,GACEC,QAEAC,KAAKC,aAAa,CAAEC,KAAM,SAAUC,UAAY,kIAUhD,QACE,oIASAH,OAGF,QAAaA,KAAMA,KAAKkC,WAAWC,cAAc,KAAM,CACrDC,aAAc,CAAC,OAAQ,SAAU,WACjCC,SAAU,CACRC,QAAS,YAIb,QAAatC,KAAMA,KAAKkC,WAAWC,cAAc,gBAAiB,CAChEC,aAAc,CAAC,OAAQ,YAE3B,EAGF,MAAMG,EAAY,CAChB3B,KAAM,CAAEC,SAAU,IAAM,SACxB2B,KAAM,CAAE3B,SAAU,IAAM,WACxB4B,OAAQ,CAAC,EACTC,QAAS,CAAE7B,SAAU,IAAM,eAC3B8B,KAAM,CAAE9B,SAAU,IAAMC,EAAA,EAAUnB,iBAG5B8C,OAAM,OAAM,wBAAqB,GAAKF,EAEjCK,GAAY,SACvB,QAAiB,CACf7B,SAAU,CACRC,UAAW,IAAKJ,EAAMK,SAAU,SAChCC,cAAe,IAAK,EAAMD,SAAU,aACpCO,UAAWkB,EACXG,eAAgB,IAAK,EAAM5B,SAAU,kBAAmB6B,SAAU,QAClE1B,UAAW,CACT,IAAK,EAAQH,SAAU,SACvB,IAAK,EAAMA,SAAUH,EAAA,EAAUiC,WAAW3B,YAE5C4B,OAAQ,KAGZ,KACA,KAfuB,CAgBvBhB,G,SCxEFvC,eAAeC,OAAOC,EAAeiD,E","sources":["webpack://@descope/web-components-ui/../components/descope-text/src/component/index.js","webpack://@descope/web-components-ui/../components/descope-text/src/component/TextClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/LinkClass.js","webpack://@descope/web-components-ui/./src/components/descope-link/index.js"],"sourcesContent":["import { componentName, TextClass } from './TextClass';\n\ncustomElements.define(componentName, TextClass);\n\nexport { TextClass, componentName };\n","import {\n createStyleMixin,\n draggableMixin,\n componentNameValidationMixin,\n} from '@descope-ui/common/components-mixins';\nimport { compose } from '@descope-ui/common/utils';\nimport {\n getComponentName,\n injectStyle,\n observeChildren,\n} from '@descope-ui/common/components-helpers';\nimport { createBaseClass } from '@descope-ui/common/base-classes';\n\nexport const componentName = getComponentName('text');\n\nclass RawText extends createBaseClass({\n componentName,\n baseSelector: ':host > slot',\n}) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n <slot part=\"text-wrapper\"></slot>\n `;\n\n injectStyle(`\n :host {\n display: inline-block;\n line-height: 1em;\n }\n :host > slot {\n width: 100%;\n display: inline-block;\n }\n `, this);\n }\n\n get hideWhenEmpty() {\n return this.getAttribute('hide-when-empty') === 'true';\n }\n\n init() {\n super.init();\n\n observeChildren(this, () => {\n const hasChildren = !!this.childNodes.length;\n this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';\n });\n }\n}\n\nconst { host } = {\n host: { selector: () => ':host' }\n}\n\nexport const TextClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { selector: () => ':host', property: 'width' },\n hostDirection: { selector: () => ':host', property: 'direction' },\n fontSize: {},\n textColor: [\n { property: 'color' }\n ],\n textLineHeight: { property: 'line-height' },\n textLetterSpacing: { property: 'letter-spacing' },\n textShadow: {},\n textAlign: {},\n textTransform: {},\n fontFamily: {},\n fontStyle: {},\n fontWeight: {},\n borderWidth: {},\n borderStyle: {},\n borderColor: {},\n },\n }),\n draggableMixin,\n componentNameValidationMixin,\n)(RawText);\n","import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';\nimport { createBaseClass } from '../../baseClasses/createBaseClass';\nimport { TextClass } from '@descope-ui/descope-text/class';\nimport { compose } from '../../helpers';\nimport { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';\nimport { injectStyle } from '@descope-ui/common/components-helpers';\n\nexport const componentName = getComponentName('link');\n\nclass RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {\n constructor() {\n super();\n\n this.attachShadow({ mode: 'open' }).innerHTML = `\n\t\t<div>\n\t\t\t<descope-text>\n\t\t\t\t<a>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</a>\n\t\t\t</descope-text>\n\t\t</div>\n\t\t`;\n\n injectStyle(\n `\n :host {\n\t\t\tdisplay: inline-block;\n line-height: 1em;\n\t\t}\n\t\t:host a {\n\t\t\tdisplay: inline;\n\t\t}\n `,\n this\n );\n\n forwardAttrs(this, this.shadowRoot.querySelector('a'), {\n includeAttrs: ['href', 'target', 'tooltip'],\n mapAttrs: {\n tooltip: 'title',\n },\n });\n\n forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {\n includeAttrs: ['mode', 'variant'],\n });\n }\n}\n\nconst selectors = {\n host: { selector: () => ':host' },\n link: { selector: () => ':host a' },\n anchor: {},\n wrapper: { selector: () => ':host > div' },\n text: { selector: () => TextClass.componentName },\n};\n\nconst { anchor, text, host, wrapper, link } = selectors;\n\nexport const LinkClass = compose(\n createStyleMixin({\n mappings: {\n hostWidth: { ...host, property: 'width' },\n hostDirection: { ...text, property: 'direction' },\n textAlign: wrapper,\n textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },\n textColor: [\n { ...anchor, property: 'color' },\n { ...text, property: TextClass.cssVarList.textColor },\n ],\n cursor: anchor,\n },\n }),\n draggableMixin,\n componentNameValidationMixin\n)(RawLink);\n","import { componentName, LinkClass } from './LinkClass';\nimport '@descope-ui/descope-text';\n\ncustomElements.define(componentName, LinkClass);\n\nexport { LinkClass, componentName };\n"],"names":["customElements","define","componentName","RawText","baseSelector","constructor","super","this","attachShadow","mode","innerHTML","hideWhenEmpty","getAttribute","init","hasChildren","childNodes","length","style","display","host","selector","TextClass","mappings","hostWidth","property","hostDirection","fontSize","textColor","textLineHeight","textLetterSpacing","textShadow","textAlign","textTransform","fontFamily","fontStyle","fontWeight","borderWidth","borderStyle","borderColor","RawLink","createBaseClass","shadowRoot","querySelector","includeAttrs","mapAttrs","tooltip","selectors","link","anchor","wrapper","text","LinkClass","textDecoration","fallback","cssVarList","cursor"],"sourceRoot":""}
@@ -1,209 +0,0 @@
1
- /* eslint-disable no-param-reassign */
2
-
3
- import MarkdownIt from 'markdown-it';
4
- import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
5
- import { compose } from '../../helpers';
6
- import { getComponentName, observeChildren } from '../../helpers/componentHelpers';
7
- import { disableRules } from './consts';
8
- import { createBaseClass } from '../../baseClasses/createBaseClass';
9
- import { decodeHTML } from './helpers';
10
- import { injectStyle } from '@descope-ui/common/components-helpers';
11
-
12
- export const componentName = getComponentName('enriched-text');
13
-
14
- class EnrichedText extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
15
- #origLinkRenderer;
16
-
17
- #origEmRenderer;
18
-
19
- constructor() {
20
- super();
21
-
22
- this.attachShadow({ mode: 'open' }).innerHTML = `
23
- <div class="content"></div>
24
- `;
25
-
26
- injectStyle(
27
- `
28
- :host {
29
- line-height: 1em;
30
- word-break: break-word;
31
- }
32
- :host > slot {
33
- width: 100%;
34
- display: inline-block;
35
- }
36
- *, *:last-child {
37
- margin: 0;
38
- }
39
- h1,
40
- h2,
41
- h3,
42
- h4,
43
- h5,
44
- h6,
45
- p {
46
- margin-bottom: 1em;
47
- }
48
- a {
49
- cursor: pointer;
50
- }
51
- blockquote {
52
- padding: 0 2em;
53
- }
54
- u {
55
- text-decoration: underline
56
- }
57
- s {
58
- color: currentColor;
59
- }
60
- `,
61
- this
62
- );
63
-
64
- this.#initProcessor();
65
-
66
- observeChildren(this, this.#parseChildren.bind(this));
67
- }
68
-
69
- static get observedAttributes() {
70
- return ['readonly', 'link-target-blank'];
71
- }
72
-
73
- attributeChangedCallback(attrName, oldValue, newValue) {
74
- super.attributeChangedCallback?.(attrName, oldValue, newValue);
75
-
76
- if (newValue !== oldValue) {
77
- if (attrName === 'readonly') {
78
- this.onReadOnlyChange(newValue === 'true');
79
- }
80
-
81
- if (attrName === 'link-target-blank') {
82
- this.#initProcessor();
83
- }
84
- }
85
- }
86
-
87
- // We're overriding the rule for em with single underscore to perform as underline. (_underline_)
88
- customUnderlineRenderer() {
89
- this.processor.renderer.rules.em_open = (tokens, idx, options, env, self) => {
90
- if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
91
- return this.#origEmRenderer(tokens, idx, options, env, self);
92
- };
93
- this.processor.renderer.rules.em_close = (tokens, idx, options, env, self) => {
94
- if (tokens[idx].markup === '_') tokens[idx].tag = 'u';
95
- return this.#origEmRenderer(tokens, idx, options, env, self);
96
- };
97
- }
98
-
99
- #customizeLinkRenderer() {
100
- if (this.linkTargetBlank) {
101
- this.processor.renderer.rules.link_open = (tokens, idx, options, env, self) => {
102
- // Add a new `target` attribute, or replace the value of the existing one.
103
- tokens[idx].attrSet('target', '_blank');
104
- // Pass the token to the default renderer.
105
- return this.#origLinkRenderer(tokens, idx, options, env, self);
106
- };
107
- } else {
108
- this.processor.renderer.rules.link_open = this.#origLinkRenderer;
109
- }
110
- }
111
-
112
- #disableCustomRules() {
113
- if (!this.processor) {
114
- return;
115
- }
116
- this.processor.disable(disableRules);
117
- }
118
-
119
- #updateProcessorRules() {
120
- this.#disableCustomRules();
121
- }
122
-
123
- #storeOrigRenderers() {
124
- const defaultLinkRenderer = (tokens, idx, options, _, self) =>
125
- self.renderToken(tokens, idx, options);
126
- this.#origLinkRenderer = this.processor.renderer.rules.link_open || defaultLinkRenderer;
127
-
128
- const defaultStrongRenderer = (tokens, idx, options, _, self) =>
129
- self.renderToken(tokens, idx, options);
130
- this.#origEmRenderer = this.processor.renderer.rules.em_open || defaultStrongRenderer;
131
- }
132
-
133
- #initProcessor() {
134
- this.processor = new MarkdownIt('commonmark', { html: true });
135
- this.#storeOrigRenderers();
136
- this.#updateProcessorRules();
137
- this.#customizeLinkRenderer();
138
- this.customUnderlineRenderer();
139
- }
140
-
141
- get linkTargetBlank() {
142
- return this.getAttribute('link-target-blank') === 'true';
143
- }
144
-
145
- get contentNode() {
146
- return this.shadowRoot.querySelector('.content');
147
- }
148
-
149
- #parseChildren() {
150
- if (!this.processor) {
151
- return;
152
- }
153
-
154
- let html = decodeHTML(this.innerHTML);
155
-
156
- if (!html?.trim() && this.isConnected) {
157
- this.setAttribute('empty', 'true');
158
- } else {
159
- this.removeAttribute('empty');
160
- }
161
-
162
- try {
163
- const tokens = this.processor.parse(html, { references: undefined });
164
- html = this.processor.renderer.render(tokens, { html: true, breaks: true });
165
- } catch (e) {
166
- // eslint-disable-next-line no-console
167
- console.warn('Not parsing invalid markdown token');
168
- }
169
-
170
- this.contentNode.innerHTML = html;
171
- }
172
-
173
- onReadOnlyChange(isReadOnly) {
174
- if (isReadOnly) {
175
- this.contentNode.setAttribute('inert', isReadOnly);
176
- } else {
177
- this.contentNode.removeAttribute('inert');
178
- }
179
- }
180
- }
181
-
182
- export const EnrichedTextClass = compose(
183
- createStyleMixin({
184
- mappings: {
185
- hostWidth: { selector: () => ':host', property: 'width' },
186
- hostDisplay: { selector: () => ':host', property: 'display', fallback: 'inline-block' },
187
- hostDirection: { selector: () => ':host', property: 'direction' },
188
- fontSize: {},
189
- fontFamily: {},
190
- fontWeight: {},
191
- fontWeightBold: [
192
- { selector: () => ':host strong', property: 'font-weight' },
193
- { selector: () => ':host b', property: 'font-weight' },
194
- ],
195
- textColor: { property: 'color' },
196
- textLineHeight: { property: 'line-height' },
197
- textAlign: {},
198
- linkColor: { selector: 'a', property: 'color' },
199
- linkTextDecoration: { selector: 'a', property: 'text-decoration' },
200
- linkHoverTextDecoration: { selector: 'a:hover', property: 'text-decoration' },
201
- minHeight: {},
202
- minWidth: {},
203
- },
204
- }),
205
- createStyleMixin({ componentNameOverride: getComponentName('link') }),
206
- createStyleMixin({ componentNameOverride: getComponentName('text') }),
207
- draggableMixin,
208
- componentNameValidationMixin
209
- )(EnrichedText);
@@ -1,14 +0,0 @@
1
- export const disableRules = [
2
- 'blockquote',
3
- 'list',
4
- 'image',
5
- 'table',
6
- 'code',
7
- 'hr',
8
- 'backticks',
9
- 'fence',
10
- 'reference',
11
- 'heading',
12
- 'lheading',
13
- 'html_block',
14
- ];
@@ -1,5 +0,0 @@
1
- export const decodeHTML = (html) => {
2
- const textArea = document.createElement('textarea');
3
- textArea.innerHTML = html;
4
- return textArea.value;
5
- };
@@ -1,5 +0,0 @@
1
- import { componentName, EnrichedTextClass } from './EnrichedTextClass';
2
-
3
- customElements.define(componentName, EnrichedTextClass);
4
-
5
- export { EnrichedTextClass, componentName };
@@ -1,76 +0,0 @@
1
- import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
2
- import { createBaseClass } from '../../baseClasses/createBaseClass';
3
- import { TextClass } from '@descope-ui/descope-text/class';
4
- import { compose } from '../../helpers';
5
- import { forwardAttrs, getComponentName } from '../../helpers/componentHelpers';
6
- import { injectStyle } from '@descope-ui/common/components-helpers';
7
-
8
- export const componentName = getComponentName('link');
9
-
10
- class RawLink extends createBaseClass({ componentName, baseSelector: ':host a' }) {
11
- constructor() {
12
- super();
13
-
14
- this.attachShadow({ mode: 'open' }).innerHTML = `
15
- <div>
16
- <descope-text>
17
- <a>
18
- <slot></slot>
19
- </a>
20
- </descope-text>
21
- </div>
22
- `;
23
-
24
- injectStyle(
25
- `
26
- :host {
27
- display: inline-block;
28
- line-height: 1em;
29
- }
30
- :host a {
31
- display: inline;
32
- }
33
- `,
34
- this
35
- );
36
-
37
- forwardAttrs(this, this.shadowRoot.querySelector('a'), {
38
- includeAttrs: ['href', 'target', 'tooltip'],
39
- mapAttrs: {
40
- tooltip: 'title',
41
- },
42
- });
43
-
44
- forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
45
- includeAttrs: ['mode', 'variant'],
46
- });
47
- }
48
- }
49
-
50
- const selectors = {
51
- host: { selector: () => ':host' },
52
- link: { selector: () => ':host a' },
53
- anchor: {},
54
- wrapper: { selector: () => ':host > div' },
55
- text: { selector: () => TextClass.componentName },
56
- };
57
-
58
- const { anchor, text, host, wrapper, link } = selectors;
59
-
60
- export const LinkClass = compose(
61
- createStyleMixin({
62
- mappings: {
63
- hostWidth: { ...host, property: 'width' },
64
- hostDirection: { ...text, property: 'direction' },
65
- textAlign: wrapper,
66
- textDecoration: { ...link, property: 'text-decoration', fallback: 'none' },
67
- textColor: [
68
- { ...anchor, property: 'color' },
69
- { ...text, property: TextClass.cssVarList.textColor },
70
- ],
71
- cursor: anchor,
72
- },
73
- }),
74
- draggableMixin,
75
- componentNameValidationMixin
76
- )(RawLink);