@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.
- package/dist/cjs/index.cjs.js +1535 -1385
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +2086 -1935
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/DescopeDev.js.map +1 -1
- package/dist/umd/descope-alert-index-js.js +1 -1
- package/dist/umd/descope-alert-index-js.js.map +1 -1
- package/dist/umd/descope-enriched-text.js +2 -0
- package/dist/umd/descope-enriched-text.js.map +1 -0
- package/dist/umd/descope-hcaptcha-index-js.js +2 -0
- package/dist/umd/descope-hcaptcha-index-js.js.map +1 -0
- package/dist/umd/descope-link.js +2 -0
- package/dist/umd/descope-link.js.map +1 -0
- package/dist/umd/index.js +1 -1
- package/dist/umd/index.js.map +1 -1
- package/package.json +4 -3
- package/src/components/descope-alert/AlertClass.js +1 -1
- package/src/components/descope-alert/index.js +1 -1
- package/src/components/descope-hcaptcha/HcaptchaClass.js +137 -0
- package/src/components/descope-hcaptcha/index.js +5 -0
- package/src/index.cjs.js +1 -2
- package/src/index.js +1 -2
- package/src/theme/components/hcaptcha.js +14 -0
- package/src/theme/components/index.js +4 -2
- package/dist/umd/descope-enriched-text-index-js.js +0 -2
- package/dist/umd/descope-enriched-text-index-js.js.map +0 -1
- package/dist/umd/descope-link-index-js.js +0 -2
- package/dist/umd/descope-link-index-js.js.map +0 -1
- package/src/components/descope-enriched-text/EnrichedTextClass.js +0 -209
- package/src/components/descope-enriched-text/consts.js +0 -14
- package/src/components/descope-enriched-text/helpers.js +0 -5
- package/src/components/descope-enriched-text/index.js +0 -5
- package/src/components/descope-link/LinkClass.js +0 -76
- package/src/components/descope-link/index.js +0 -6
- package/src/theme/components/enrichedText.js +0 -40
- 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.
|
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 '
|
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');
|
@@ -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);
|
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 '
|
15
|
-
import * as link from '
|
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":"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","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,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);
|