@descope/web-components-ui 1.0.300 → 1.0.301
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +287 -204
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +221 -138
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/1612.js +1 -1
- package/dist/umd/1621.js +2 -2
- package/dist/umd/3951.js +1 -1
- package/dist/umd/4024.js +1 -1
- package/dist/umd/4052.js +1 -1
- package/dist/umd/4746.js +1 -1
- package/dist/umd/5806.js +1 -1
- package/dist/umd/6770.js +1 -1
- package/dist/umd/7056.js +1 -1
- package/dist/umd/7531.js +1 -1
- package/dist/umd/7911.js +1 -1
- package/dist/umd/9092.js +2 -2
- package/dist/umd/9314.js +1 -1
- package/dist/umd/9423.js +2 -2
- package/dist/umd/9562.js +1 -1
- package/dist/umd/9927.js +1 -0
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-divider-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-enriched-text-index-js.js +1 -0
- package/dist/umd/descope-link-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -0
- package/dist/umd/descope-user-attribute-index-js.js +1 -1
- package/dist/umd/descope-user-auth-method-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/dist/umd/mapping-fields-descope-mappings-field-index-js.js +1 -1
- package/dist/umd/mapping-fields-descope-saml-group-mappings-index-js.js +1 -1
- package/package.json +3 -3
- package/src/components/descope-divider/DividerClass.js +1 -1
- package/src/components/descope-divider/index.js +1 -1
- package/src/components/descope-enriched-text/EnrichedTextClass.js +163 -0
- package/src/components/descope-enriched-text/consts.js +74 -0
- package/src/components/descope-link/LinkClass.js +1 -1
- package/src/components/descope-link/index.js +1 -1
- package/src/components/descope-text/TextClass.js +64 -0
- package/src/components/descope-user-attribute/UserAttributeClass.js +1 -1
- package/src/components/descope-user-attribute/index.js +1 -1
- package/src/components/descope-user-auth-method/UserAuthMethodClass.js +1 -1
- package/src/components/descope-user-auth-method/index.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/MappingsFieldClass.js +1 -1
- package/src/components/mapping-fields/descope-mappings-field/index.js +1 -1
- package/src/index.cjs.js +2 -2
- package/src/index.d.ts +2 -2
- package/src/index.js +2 -2
- package/src/theme/components/enrichedText.js +4 -1
- package/src/theme/components/text.js +1 -1
- package/dist/umd/4569.js +0 -1
- package/dist/umd/text-components-descope-enriched-text-index-js.js +0 -1
- package/dist/umd/text-components-descope-text-index-js.js +0 -1
- package/src/components/text-components/createBaseTextClass.js +0 -26
- package/src/components/text-components/descope-enriched-text/EnrichedTextClass.js +0 -106
- package/src/components/text-components/descope-enriched-text/helpers.js +0 -41
- package/src/components/text-components/descope-text/TextClass.js +0 -34
- package/src/components/text-components/hideWhenEmptyMixin.js +0 -17
- /package/src/components/{text-components/descope-enriched-text → descope-enriched-text}/index.js +0 -0
- /package/src/components/{text-components/descope-text → descope-text}/index.js +0 -0
package/dist/cjs/index.cjs.js
CHANGED
@@ -2,7 +2,7 @@
|
|
2
2
|
|
3
3
|
var merge = require('lodash.merge');
|
4
4
|
var Color = require('color');
|
5
|
-
var
|
5
|
+
var remarkable = require('remarkable');
|
6
6
|
|
7
7
|
const DESCOPE_PREFIX = 'descope';
|
8
8
|
const CSS_SELECTOR_SPECIFIER_MULTIPLY = 3;
|
@@ -4417,50 +4417,41 @@ var notpImage = /*#__PURE__*/Object.freeze({
|
|
4417
4417
|
vars: vars$s
|
4418
4418
|
});
|
4419
4419
|
|
4420
|
-
const
|
4421
|
-
class HideWhenEmptyMixinClass extends superclass {
|
4422
|
-
get hideWhenEmpty() {
|
4423
|
-
return this.getAttribute('hide-when-empty') === 'true';
|
4424
|
-
}
|
4425
|
-
|
4426
|
-
init() {
|
4427
|
-
super.init();
|
4428
|
-
|
4429
|
-
observeChildren(this, () => {
|
4430
|
-
const hasChildren = !!this.childNodes.length;
|
4431
|
-
this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
|
4432
|
-
});
|
4433
|
-
}
|
4434
|
-
};
|
4420
|
+
const componentName$A = getComponentName('text');
|
4435
4421
|
|
4436
|
-
|
4437
|
-
|
4438
|
-
|
4439
|
-
super();
|
4422
|
+
class RawText extends createBaseClass({ componentName: componentName$A, baseSelector: ':host > slot' }) {
|
4423
|
+
constructor() {
|
4424
|
+
super();
|
4440
4425
|
|
4441
|
-
|
4442
|
-
|
4443
|
-
|
4444
|
-
|
4445
|
-
|
4446
|
-
|
4447
|
-
|
4448
|
-
|
4449
|
-
|
4450
|
-
|
4451
|
-
|
4452
|
-
|
4426
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4427
|
+
<style>
|
4428
|
+
:host {
|
4429
|
+
display: inline-block;
|
4430
|
+
}
|
4431
|
+
:host > slot {
|
4432
|
+
width: 100%;
|
4433
|
+
display: inline-block;
|
4434
|
+
}
|
4435
|
+
</style>
|
4436
|
+
<slot part="text-wrapper"></slot>
|
4437
|
+
`;
|
4453
4438
|
|
4454
|
-
|
4455
|
-
}
|
4439
|
+
this.textSlot = this.shadowRoot.querySelector('slot');
|
4456
4440
|
}
|
4457
4441
|
|
4458
|
-
|
4459
|
-
|
4442
|
+
get hideWhenEmpty() {
|
4443
|
+
return this.getAttribute('hide-when-empty') === 'true';
|
4444
|
+
}
|
4460
4445
|
|
4461
|
-
|
4446
|
+
init() {
|
4447
|
+
super.init();
|
4462
4448
|
|
4463
|
-
|
4449
|
+
observeChildren(this, () => {
|
4450
|
+
const hasChildren = !!this.childNodes.length;
|
4451
|
+
this.style.display = !hasChildren && this.hideWhenEmpty ? 'none' : '';
|
4452
|
+
});
|
4453
|
+
}
|
4454
|
+
}
|
4464
4455
|
|
4465
4456
|
const TextClass = compose(
|
4466
4457
|
createStyleMixin({
|
@@ -4483,9 +4474,8 @@ const TextClass = compose(
|
|
4483
4474
|
},
|
4484
4475
|
}),
|
4485
4476
|
draggableMixin,
|
4486
|
-
componentNameValidationMixin
|
4487
|
-
|
4488
|
-
)(BaseTextClass);
|
4477
|
+
componentNameValidationMixin
|
4478
|
+
)(RawText);
|
4489
4479
|
|
4490
4480
|
const globalRefs$j = getThemeRefs(globals);
|
4491
4481
|
const vars$r = TextClass.cssVarList;
|
@@ -4577,115 +4567,218 @@ var text$3 = /*#__PURE__*/Object.freeze({
|
|
4577
4567
|
vars: vars$r
|
4578
4568
|
});
|
4579
4569
|
|
4580
|
-
const
|
4581
|
-
|
4570
|
+
const ruleSet = {
|
4571
|
+
custom: ['image'],
|
4572
|
+
core: [
|
4573
|
+
'block',
|
4574
|
+
'inline',
|
4575
|
+
'abbr', // Parse abbreviation definitions, i.e. `*[abbr]: description`
|
4576
|
+
'abbr2', // Enclose abbreviations in <abbr> tags
|
4577
|
+
'references',
|
4578
|
+
'footnote_tail',
|
4579
|
+
'replacements', // Simple typographical replacements
|
4580
|
+
'smartquotes', // Convert straight quotation marks to typographic ones
|
4581
|
+
],
|
4582
|
+
inline: [
|
4583
|
+
'text',
|
4584
|
+
'newline', // Proceess '\n'
|
4585
|
+
'backticks', // Parse backticks
|
4586
|
+
'del', // Process ~~deleted text~~
|
4587
|
+
'emphasis', // Process *this* and _that_
|
4588
|
+
'sub', // Process ~subscript~
|
4589
|
+
'sup', // Process ^superscript^
|
4590
|
+
'links', // Process [links](<to> "stuff")
|
4591
|
+
'escape', // Proceess escaped chars and hardbreaks
|
4592
|
+
'ins', // Process ++inserted text++
|
4593
|
+
'mark', // Process ==highlighted text==
|
4594
|
+
'footnote_inline', // Process inline footnotes (^[...])
|
4595
|
+
'footnote_ref', // Process footnote references ([^...])
|
4596
|
+
'autolink', // Process autolinks '<protocol:...>'
|
4597
|
+
'htmltag', // Process html tags
|
4598
|
+
'entity', // Process html entity - {, ¯, ", ...
|
4599
|
+
],
|
4600
|
+
block: [
|
4601
|
+
'code', // Code block (4 spaces padded)
|
4602
|
+
'fences', // fences (``` lang, ~~~ lang)
|
4603
|
+
'blockquote', // Block quotes
|
4604
|
+
'list',
|
4605
|
+
'heading', // heading (#, ##, ...)
|
4606
|
+
'paragraph',
|
4607
|
+
'hr', // Horizontal rule
|
4608
|
+
'footnote', // Process footnote reference list
|
4609
|
+
'lheading', // lheading (---, ===)
|
4610
|
+
'htmlblock', // HTML block
|
4611
|
+
'table', // GFM table, non-standard
|
4612
|
+
'deflist', // Definition lists
|
4613
|
+
],
|
4582
4614
|
};
|
4583
4615
|
|
4584
|
-
const
|
4616
|
+
const textRuleSet = {
|
4617
|
+
core: ['block', 'inline'],
|
4618
|
+
inline: [
|
4619
|
+
'text',
|
4620
|
+
'newline', // Proceess '\n'
|
4621
|
+
'backticks', // Parse backticks
|
4622
|
+
'del', // Process ~~deleted text~~
|
4623
|
+
'emphasis', // Process *this* and _that_
|
4624
|
+
'sub', // Process ~subscript~
|
4625
|
+
'sup', // Process ^superscript^
|
4626
|
+
'links', // Process [links](<to> "stuff")
|
4627
|
+
'escape', // Proceess escaped chars and hardbreaks
|
4628
|
+
'ins', // Process ++inserted text++
|
4629
|
+
'footnote_inline', // Process inline footnotes (^[...])
|
4630
|
+
'footnote_ref', // Process footnote references ([^...])
|
4631
|
+
'autolink', // Process autolinks '<protocol:...>'
|
4632
|
+
],
|
4633
|
+
block: [
|
4634
|
+
'code', // Code block (4 spaces padded)
|
4635
|
+
'fences', // fences (``` lang, ~~~ lang)
|
4636
|
+
'blockquote', // Block quotes
|
4637
|
+
'list',
|
4638
|
+
'heading', // heading (#, ##, ...)
|
4639
|
+
'paragraph',
|
4640
|
+
'footnote', // Process footnote reference list
|
4641
|
+
'htmlblock', // HTML block
|
4642
|
+
],
|
4643
|
+
};
|
4585
4644
|
|
4586
|
-
const
|
4645
|
+
const componentName$z = getComponentName('enriched-text');
|
4587
4646
|
|
4588
|
-
|
4589
|
-
|
4590
|
-
const tag = getTokenTag(token);
|
4647
|
+
let EnrichedText$2 = class EnrichedText extends createBaseClass({ componentName: componentName$z, baseSelector: ':host > div' }) {
|
4648
|
+
#origImageRenderer;
|
4591
4649
|
|
4592
|
-
|
4593
|
-
|
4594
|
-
return {
|
4595
|
-
...token,
|
4596
|
-
tag,
|
4597
|
-
};
|
4598
|
-
}
|
4650
|
+
constructor() {
|
4651
|
+
super();
|
4599
4652
|
|
4600
|
-
|
4601
|
-
|
4602
|
-
|
4603
|
-
|
4604
|
-
|
4605
|
-
|
4606
|
-
|
4653
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4654
|
+
<style>
|
4655
|
+
:host {
|
4656
|
+
display: inline-block;
|
4657
|
+
}
|
4658
|
+
:host > slot {
|
4659
|
+
width: 100%;
|
4660
|
+
display: inline-block;
|
4661
|
+
}
|
4662
|
+
*, *:last-child {
|
4663
|
+
margin: 0;
|
4664
|
+
}
|
4665
|
+
h1,
|
4666
|
+
h2,
|
4667
|
+
h3,
|
4668
|
+
h4,
|
4669
|
+
h5,
|
4670
|
+
h6,
|
4671
|
+
p {
|
4672
|
+
margin-bottom: 1em;
|
4673
|
+
}
|
4674
|
+
a {
|
4675
|
+
text-decoration: none;
|
4676
|
+
cursor: pointer;
|
4677
|
+
}
|
4678
|
+
a:hover {
|
4679
|
+
text-decoration: underline;
|
4680
|
+
}
|
4681
|
+
blockquote {
|
4682
|
+
padding: 0 2em;
|
4683
|
+
}
|
4684
|
+
</style>
|
4685
|
+
<slot part="text-wrapper" style="display:none"></slot>
|
4686
|
+
<div class="content"></div>
|
4687
|
+
`;
|
4607
4688
|
|
4608
|
-
|
4609
|
-
...token,
|
4610
|
-
tag,
|
4611
|
-
};
|
4612
|
-
});
|
4689
|
+
this.textSlot = this.shadowRoot.querySelector('slot');
|
4613
4690
|
|
4614
|
-
|
4615
|
-
const selection = document.getSelection().toString();
|
4616
|
-
const clipdata = e.clipboardData || window.clipboardData;
|
4617
|
-
clipdata.setData('text/plain', selection);
|
4618
|
-
clipdata.setData('text/html', selection);
|
4619
|
-
e.preventDefault();
|
4620
|
-
};
|
4691
|
+
this.#initProcessor();
|
4621
4692
|
|
4622
|
-
|
4693
|
+
this.textSlot.addEventListener('slotchange', this.#parseChildren.bind(this));
|
4694
|
+
}
|
4623
4695
|
|
4624
|
-
|
4696
|
+
static get observedAttributes() {
|
4697
|
+
return ['readonly'];
|
4698
|
+
}
|
4625
4699
|
|
4626
|
-
|
4627
|
-
|
4628
|
-
static get observedAttributes() {
|
4629
|
-
return ['disabled-rules', 'line-break', 'readonly'];
|
4630
|
-
}
|
4700
|
+
attributeChangedCallback(attrName, oldValue, newValue) {
|
4701
|
+
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
4631
4702
|
|
4632
|
-
|
4633
|
-
|
4703
|
+
if (newValue !== oldValue) {
|
4704
|
+
if (attrName === 'readonly') {
|
4705
|
+
this.onReadOnlyChange(newValue === 'true');
|
4706
|
+
}
|
4634
4707
|
}
|
4708
|
+
}
|
4635
4709
|
|
4636
|
-
|
4637
|
-
|
4710
|
+
#disableAllRules() {
|
4711
|
+
if (!this.processor) {
|
4712
|
+
return;
|
4638
4713
|
}
|
4639
4714
|
|
4640
|
-
|
4641
|
-
|
4642
|
-
|
4643
|
-
|
4715
|
+
ruleSet?.core && this.processor.core.ruler.disable(ruleSet.core);
|
4716
|
+
ruleSet?.inline && this.processor.inline.ruler.disable(ruleSet.inline);
|
4717
|
+
ruleSet?.block && this.processor.block.ruler.disable(ruleSet.block);
|
4718
|
+
|
4719
|
+
this.processor.renderer.rules.image = () => {
|
4720
|
+
return '';
|
4721
|
+
};
|
4722
|
+
}
|
4723
|
+
|
4724
|
+
#enableCustomRules() {
|
4725
|
+
if (!this.processor) {
|
4726
|
+
return;
|
4644
4727
|
}
|
4645
4728
|
|
4646
|
-
|
4647
|
-
super.attributeChangedCallback?.(attrName, oldValue, newValue);
|
4729
|
+
const customRuleSet = textRuleSet;
|
4648
4730
|
|
4649
|
-
|
4650
|
-
|
4651
|
-
|
4652
|
-
this.#parseChildren();
|
4653
|
-
}
|
4654
|
-
}
|
4731
|
+
customRuleSet?.core && this.processor?.core.ruler.enable(customRuleSet?.core);
|
4732
|
+
customRuleSet?.inline && this.processor?.inline.ruler.enable(customRuleSet?.inline);
|
4733
|
+
customRuleSet?.block && this.processor?.block.ruler.enable(customRuleSet?.block);
|
4655
4734
|
|
4656
|
-
|
4657
|
-
|
4658
|
-
}
|
4735
|
+
if (customRuleSet?.custom?.includes('image')) {
|
4736
|
+
this.processor.renderer.rules.image = this.#origImageRenderer;
|
4659
4737
|
}
|
4738
|
+
}
|
4660
4739
|
|
4661
|
-
|
4662
|
-
|
4663
|
-
|
4740
|
+
#updateProcessorRules() {
|
4741
|
+
this.#disableAllRules();
|
4742
|
+
this.#enableCustomRules();
|
4743
|
+
}
|
4664
4744
|
|
4665
|
-
|
4666
|
-
|
4745
|
+
#initProcessor() {
|
4746
|
+
this.processor = new remarkable.Remarkable();
|
4747
|
+
this.#origImageRenderer = this.processor.renderer.rules.image;
|
4748
|
+
this.#updateProcessorRules();
|
4749
|
+
}
|
4667
4750
|
|
4668
|
-
|
4669
|
-
|
4670
|
-
|
4671
|
-
breaks: this.lineBreak,
|
4672
|
-
});
|
4751
|
+
get contentNode() {
|
4752
|
+
return this.shadowRoot.querySelector('.content');
|
4753
|
+
}
|
4673
4754
|
|
4674
|
-
|
4675
|
-
|
4676
|
-
|
4677
|
-
// eslint-disable-next-line no-use-before-define
|
4678
|
-
span.innerHTML = `${getStyleReset()}${result}`;
|
4679
|
-
span.addEventListener('copy', onClipboardCopy);
|
4680
|
-
node.parentNode.replaceChild(span, node);
|
4681
|
-
}
|
4682
|
-
}
|
4755
|
+
#parseChildren() {
|
4756
|
+
if (!this.processor) {
|
4757
|
+
return;
|
4683
4758
|
}
|
4684
4759
|
|
4685
|
-
|
4686
|
-
|
4760
|
+
let html = this.textContent;
|
4761
|
+
|
4762
|
+
try {
|
4763
|
+
const tokens = this.processor.parse(this.textContent);
|
4764
|
+
html = this.processor.renderer.render(tokens, { breaks: true });
|
4765
|
+
this.contentNode.innerHTML = html;
|
4766
|
+
} catch (e) {
|
4767
|
+
// eslint-disable-next-line no-console
|
4768
|
+
console.warn('Not parsing invalid markdown token');
|
4687
4769
|
}
|
4688
|
-
|
4770
|
+
|
4771
|
+
this.contentNode.innerHTML = html;
|
4772
|
+
}
|
4773
|
+
|
4774
|
+
onReadOnlyChange(isReadOnly) {
|
4775
|
+
if (isReadOnly) {
|
4776
|
+
this.setAttribute('inert', isReadOnly);
|
4777
|
+
} else {
|
4778
|
+
this.removeAttribute('inert');
|
4779
|
+
}
|
4780
|
+
}
|
4781
|
+
};
|
4689
4782
|
|
4690
4783
|
const EnrichedTextClass = compose(
|
4691
4784
|
createStyleMixin({
|
@@ -4697,27 +4790,82 @@ const EnrichedTextClass = compose(
|
|
4697
4790
|
fontWeight: {},
|
4698
4791
|
textColor: { property: 'color' },
|
4699
4792
|
textLineHeight: { property: 'line-height' },
|
4700
|
-
marginReset: { selector: '*', property: 'margin' },
|
4701
4793
|
textAlign: {},
|
4794
|
+
linkColor: { selector: 'a', property: 'color' },
|
4702
4795
|
},
|
4703
4796
|
}),
|
4797
|
+
createStyleMixin({ componentNameOverride: getComponentName('link') }),
|
4704
4798
|
draggableMixin,
|
4705
|
-
componentNameValidationMixin
|
4706
|
-
|
4707
|
-
|
4708
|
-
|
4709
|
-
|
4710
|
-
|
4711
|
-
|
4712
|
-
|
4713
|
-
|
4714
|
-
.
|
4715
|
-
|
4716
|
-
|
4717
|
-
|
4718
|
-
|
4799
|
+
componentNameValidationMixin
|
4800
|
+
)(EnrichedText$2);
|
4801
|
+
|
4802
|
+
const componentName$y = getComponentName('link');
|
4803
|
+
|
4804
|
+
class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
|
4805
|
+
constructor() {
|
4806
|
+
super();
|
4807
|
+
|
4808
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4809
|
+
<style>
|
4810
|
+
:host {
|
4811
|
+
display: inline-block;
|
4812
|
+
}
|
4813
|
+
:host a {
|
4814
|
+
display: inline;
|
4815
|
+
text-decoration: none;
|
4816
|
+
}
|
4817
|
+
:host a:hover {
|
4818
|
+
text-decoration: underline;
|
4819
|
+
}
|
4820
|
+
</style>
|
4821
|
+
<div>
|
4822
|
+
<descope-text>
|
4823
|
+
<a>
|
4824
|
+
<slot></slot>
|
4825
|
+
</a>
|
4826
|
+
</descope-text>
|
4827
|
+
</div>
|
4828
|
+
`;
|
4829
|
+
|
4830
|
+
forwardAttrs(this, this.shadowRoot.querySelector('a'), {
|
4831
|
+
includeAttrs: ['href', 'target', 'tooltip'],
|
4832
|
+
mapAttrs: {
|
4833
|
+
tooltip: 'title',
|
4834
|
+
},
|
4835
|
+
});
|
4836
|
+
|
4837
|
+
forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
|
4838
|
+
includeAttrs: ['mode', 'variant'],
|
4839
|
+
});
|
4840
|
+
}
|
4719
4841
|
}
|
4720
4842
|
|
4843
|
+
const selectors$2 = {
|
4844
|
+
host: { selector: () => ':host' },
|
4845
|
+
anchor: {},
|
4846
|
+
wrapper: { selector: () => ':host > div' },
|
4847
|
+
text: { selector: () => TextClass.componentName },
|
4848
|
+
};
|
4849
|
+
|
4850
|
+
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
|
4851
|
+
|
4852
|
+
const LinkClass = compose(
|
4853
|
+
createStyleMixin({
|
4854
|
+
mappings: {
|
4855
|
+
hostWidth: { ...host$h, property: 'width' },
|
4856
|
+
hostDirection: { ...text$1, property: 'direction' },
|
4857
|
+
textAlign: wrapper$1,
|
4858
|
+
textColor: [
|
4859
|
+
{ ...anchor, property: 'color' },
|
4860
|
+
{ ...text$1, property: TextClass.cssVarList.textColor },
|
4861
|
+
],
|
4862
|
+
cursor: anchor,
|
4863
|
+
},
|
4864
|
+
}),
|
4865
|
+
draggableMixin,
|
4866
|
+
componentNameValidationMixin
|
4867
|
+
)(RawLink);
|
4868
|
+
|
4721
4869
|
const globalRefs$i = getThemeRefs(globals);
|
4722
4870
|
const vars$q = EnrichedTextClass.cssVarList;
|
4723
4871
|
|
@@ -4732,6 +4880,8 @@ const EnrichedText = {
|
|
4732
4880
|
[vars$q.textAlign]: 'left',
|
4733
4881
|
[vars$q.textColor]: globalRefs$i.colors.surface.dark,
|
4734
4882
|
|
4883
|
+
[vars$q.linkColor]: `var(${LinkClass.cssVarList.textColor})`,
|
4884
|
+
|
4735
4885
|
mode: {
|
4736
4886
|
primary: {
|
4737
4887
|
[vars$q.textColor]: globalRefs$i.colors.surface.contrast,
|
@@ -4802,73 +4952,6 @@ var EnrichedText$1 = /*#__PURE__*/Object.freeze({
|
|
4802
4952
|
vars: vars$q
|
4803
4953
|
});
|
4804
4954
|
|
4805
|
-
const componentName$y = getComponentName('link');
|
4806
|
-
|
4807
|
-
class RawLink extends createBaseClass({ componentName: componentName$y, baseSelector: ':host a' }) {
|
4808
|
-
constructor() {
|
4809
|
-
super();
|
4810
|
-
|
4811
|
-
this.attachShadow({ mode: 'open' }).innerHTML = `
|
4812
|
-
<style>
|
4813
|
-
:host {
|
4814
|
-
display: inline-block;
|
4815
|
-
}
|
4816
|
-
:host a {
|
4817
|
-
display: inline;
|
4818
|
-
text-decoration: none;
|
4819
|
-
}
|
4820
|
-
:host a:hover {
|
4821
|
-
text-decoration: underline;
|
4822
|
-
}
|
4823
|
-
</style>
|
4824
|
-
<div>
|
4825
|
-
<descope-text>
|
4826
|
-
<a>
|
4827
|
-
<slot></slot>
|
4828
|
-
</a>
|
4829
|
-
</descope-text>
|
4830
|
-
</div>
|
4831
|
-
`;
|
4832
|
-
|
4833
|
-
forwardAttrs(this, this.shadowRoot.querySelector('a'), {
|
4834
|
-
includeAttrs: ['href', 'target', 'tooltip'],
|
4835
|
-
mapAttrs: {
|
4836
|
-
tooltip: 'title',
|
4837
|
-
},
|
4838
|
-
});
|
4839
|
-
|
4840
|
-
forwardAttrs(this, this.shadowRoot.querySelector('descope-text'), {
|
4841
|
-
includeAttrs: ['mode', 'variant'],
|
4842
|
-
});
|
4843
|
-
}
|
4844
|
-
}
|
4845
|
-
|
4846
|
-
const selectors$2 = {
|
4847
|
-
host: { selector: () => ':host' },
|
4848
|
-
anchor: {},
|
4849
|
-
wrapper: { selector: () => ':host > div' },
|
4850
|
-
text: { selector: () => TextClass.componentName },
|
4851
|
-
};
|
4852
|
-
|
4853
|
-
const { anchor, text: text$1, host: host$h, wrapper: wrapper$1 } = selectors$2;
|
4854
|
-
|
4855
|
-
const LinkClass = compose(
|
4856
|
-
createStyleMixin({
|
4857
|
-
mappings: {
|
4858
|
-
hostWidth: { ...host$h, property: 'width' },
|
4859
|
-
hostDirection: { ...text$1, property: 'direction' },
|
4860
|
-
textAlign: wrapper$1,
|
4861
|
-
textColor: [
|
4862
|
-
{ ...anchor, property: 'color' },
|
4863
|
-
{ ...text$1, property: TextClass.cssVarList.textColor },
|
4864
|
-
],
|
4865
|
-
cursor: anchor,
|
4866
|
-
},
|
4867
|
-
}),
|
4868
|
-
draggableMixin,
|
4869
|
-
componentNameValidationMixin
|
4870
|
-
)(RawLink);
|
4871
|
-
|
4872
4955
|
const globalRefs$h = getThemeRefs(globals);
|
4873
4956
|
const vars$p = LinkClass.cssVarList;
|
4874
4957
|
|