@descope/web-components-ui 1.0.359 → 1.0.361
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +43 -104
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.esm.js +42 -104
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/DescopeDev.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-enriched-text-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-email-field/EmailFieldClass.js +1 -3
- package/src/components/descope-enriched-text/EnrichedTextClass.js +1 -0
- package/src/helpers/themeHelpers/index.js +1 -1
- package/src/theme/components/enrichedText.js +14 -75
- package/src/theme/components/index.js +2 -2
- package/src/theme/components/text.js +1 -0
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
direction: rtl;
|
|
17
17
|
text-align: left;
|
|
18
18
|
}
|
|
19
|
-
`;(0,r.hC)("vaadin-email-field",p,{moduleId:"vaadin-email-field-styles"});class s extends a.n{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,l.M)(s);var d=n(94978),u=n(4447),c=n(2061),h=n(54567),f=n(54201);const m=(0,h.iY)("email-field"),g=(0,c.qC)((0,d.yk)({mappings:u.Z}),d.e4,(0,d.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),d.Ae,(t=>class extends t{init(){super.init?.(),this.
|
|
19
|
+
`;(0,r.hC)("vaadin-email-field",p,{moduleId:"vaadin-email-field-styles"});class s extends a.n{static get is(){return"vaadin-email-field"}constructor(){super(),this._setType("email"),this.pattern="^([a-zA-Z0-9_\\.\\-+])+@[a-zA-Z0-9\\-.]+\\.[a-zA-Z0-9\\-]{2,}$"}ready(){super.ready(),this.inputElement&&(this.inputElement.autocapitalize="off")}}(0,l.M)(s);var d=n(94978),u=n(4447),c=n(2061),h=n(54567),f=n(54201);const m=(0,h.iY)("email-field"),g=(0,c.qC)((0,d.yk)({mappings:u.Z}),d.e4,(0,d.dj)({proxyProps:["value","selectionStart"],useProxyTargets:!0}),d.Ae,(t=>class extends t{init(){super.init?.(),this.setAttribute("pattern","^[\\w\\.\\%\\+\\-']+@[\\w\\.\\-]+\\.[A-Za-z]{2,}$"),this.getAttribute("autocomplete")||this.setAttribute("autocomplete","username")}}))((0,d.DM)({slots:["","suffix"],wrappedEleName:"vaadin-email-field",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n\t\t\t\tpadding: calc(var(${g.cssVarList.inputOutlineWidth}) + var(${g.cssVarList.inputOutlineOffset}));\n box-sizing: border-box;\n\t\t\t}\n ${(0,f.Wf)("vaadin-email-field")}\n\t\t\t${(0,f.bi)(g.cssVarList)}\n\t\t\t${(0,f.wm)("vaadin-email-field",g.cssVarList)}\n ${(0,f.bz)()}\n\n vaadin-email-field[label-type="floating"]:not([focused])[readonly] > input:placeholder-shown {\n opacity: 0;\n }\n vaadin-email-field[label-type="floating"]:not([focused])[disabled] > input:placeholder-shown {\n opacity: 0;\n }\n\n :host ::slotted(*) {\n -webkit-mask-image: none;\n }\n\t\t`,excludeAttrsSync:["tabindex"],componentName:m}));customElements.define(m,g)},4447:(t,e,n)=>{n.d(e,{Z:()=>m});const{host:i,label:r,placeholder:o,requiredIndicator:l,inputField:a,input:p,inputMask:s,helperText:d,errorMessage:u,disabledPlaceholder:c,inputDisabled:h,inputIcon:f}={host:{selector:()=>":host"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},placeholder:[{selector:"> input:placeholder-shown"},{selector:()=>":host::slotted(input:placeholder-shown)"}],disabledPlaceholder:{selector:"> input:disabled::placeholder"},inputField:{selector:"::part(input-field)"},input:{selector:"input"},inputMask:{selector:"::part(input-field)::before"},inputDisabled:{selector:"input:disabled"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"},inputIcon:{selector:"vaadin-icon"}},m={fontSize:[{},i],fontFamily:[r,a,d,u],labelFontSize:{...r,property:"font-size"},labelFontWeight:{...r,property:"font-weight"},labelTextColor:[{...r,property:"color"},{...l,property:"color"},{...r,property:"-webkit-text-fill-color"},{...l,property:"-webkit-text-fill-color"}],hostWidth:{...i,property:"width"},hostMinWidth:{...i,property:"min-width"},hostDirection:{...i,property:"direction"},inputBackgroundColor:[{...a,property:"background-color"},{...s,property:"background-color"}],errorMessageTextColor:{...u,property:"color"},helperTextColor:{...d,property:"-webkit-text-fill-color"},inputValueTextColor:[{...a,property:"color"},{...h,property:"-webkit-text-fill-color"}],inputCaretTextColor:[{...p,property:"color"}],labelRequiredIndicator:{...l,property:"content"},inputBorderColor:{...a,property:"border-color"},inputBorderWidth:{...a,property:"border-width"},inputBorderStyle:{...a,property:"border-style"},inputBorderRadius:{...a,property:"border-radius"},inputHeight:{...a,property:"height"},inputHorizontalPadding:[{...p,property:"padding-left"},{...p,property:"padding-right"}],inputOutlineColor:{...a,property:"outline-color"},inputOutlineStyle:{...a,property:"outline-style"},inputOutlineWidth:{...a,property:"outline-width"},inputOutlineOffset:{...a,property:"outline-offset"},inputTextAlign:[{...p,property:"text-align"}],inputPlaceholderColor:[{selector:()=>":host input:placeholder-shown",property:"color"},{...o,property:"color"},{...c,property:"-webkit-text-fill-color"}],labelPosition:{...r,property:"position"},labelTopPosition:{...r,property:"top"},labelHorizontalPosition:[{...r,property:"left"},{...r,property:"right"}],inputTransformY:{...r,property:"transform"},inputTransition:{...r,property:"transition"},marginInlineStart:{...r,property:"margin-inline-start"},placeholderOpacity:[{selector:"> input:placeholder-shown",property:"opacity"}],inputVerticalAlignment:[{...a,property:"align-items"}],valueInputHeight:[{...p,property:"height"}],valueInputMarginBottom:[{...p,property:"margin-bottom"}],inputIconOffset:[{...f,property:"margin-right"},{...f,property:"margin-left"}],inputIconSize:{...f,property:"font-size"},inputIconColor:{...f,property:"color"}}},54201:(t,e,n)=>{n.d(e,{B:()=>d,DY:()=>p,PH:()=>s,Pd:()=>l,TX:()=>r,Wf:()=>c,bi:()=>i,bz:()=>h,jI:()=>a,jl:()=>o,wm:()=>u});const i=t=>`\n :host {\n padding: calc(var(${t.inputOutlineWidth}) + var(${t.inputOutlineOffset}))\n }\n`,r=t=>`\n ${t} {\n margin: 0;\n padding: 0;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n }\n`,o=t=>`\n ${t}::part(input-field) {\n overflow: hidden;\n padding: 0;\n box-shadow: none;\n }\n`,l=t=>`\n ${t} > label,\n ${t}::part(label),\n ${t}::part(required-indicator) {\n cursor: pointer;\n }\n`,a=(t,e="input")=>`\n ${t}[disabled] > ${e}:placeholder-shown,\n\t${t}[readonly] > ${e}:placeholder-shown {\n\t\topacity: 1;\n\t}\n`,p=()=>"\n :host {\n --vaadin-field-default-width: auto;\n box-sizing: border-box;\n }\n",s=t=>`\n ${t}::part(input-field)::after {\n opacity: 0;\n }\n`,d=t=>`\n ${t}::part(input-field)::after {\n background: none;\n }\n`,u=(t,e)=>`\n ${r(t)}\n ${l(t)}\n ${a(t)}\n ${o(t)}\n ${((t,e)=>`\n ${t} input:-webkit-autofill,\n ${t} input:-webkit-autofill::first-line,\n ${t} input:-webkit-autofill:hover,\n ${t} input:-webkit-autofill:active,\n ${t} input:-webkit-autofill:focus {\n -webkit-text-fill-color: var(${e.inputValueTextColor});\n box-shadow: 0 0 0 var(${e.inputHeight}) var(${e.inputBackgroundColor}) inset;\n }\n`)(t,e)}\n ${d(t)}\n ${(t=>`\n ${t}::before {\n\t\theight: unset;\n\t}\n`)(t)}\n ${(t=>`\n ${t} > input {\n -webkit-mask-image: none;\n min-height: 0;\n box-sizing: border-box;\n }\n`)(t)}\n ${(t=>`\n ${t}::part(input-field)::after {\n border: none;\n }\n`)(t)}\n`,c=t=>`\n :host ::part(error-message) {\n direction: ltr;\n }\n :host([required]) ::part(required-indicator) {\n width: 1em;\n display: inline-flex;\n }\n :host([required]) ::part(required-indicator)::after {\n position: static;\n }\n :host([has-label]) ::part(label) {\n padding-right: 0;\n padding-bottom: 0;\n display: flex;\n width: 100%;\n }\n ${t} [slot="label"] {\n max-width: calc(100% - 1em);\n overflow: hidden;\n text-overflow: ellipsis;\n padding-bottom: 0.5em;\n }\n`,h=()=>'\n :host([label-type="floating"]) {\n position: relative;\n }\n :host([label-type="floating"][has-label]) [slot="label"] {\n padding: 0;\n }\n :host([label-type="floating"][has-label]) > ::part(label) {\n z-index: 1;\n padding: 0;\n width: auto;\n }\n '},73208:(t,e,n)=>{n.d(e,{b:()=>r});var i=n(78591);class r extends i.n{constructor(t,e){super(t,"input","input",{initializer:(t,n)=>{n.value&&(t.value=n.value),n.type&&t.setAttribute("type",n.type),t.id=this.defaultId,"function"==typeof e&&e(t)},useUniqueId:!0})}}},20422:(t,e,n)=>{n.d(e,{j:()=>r});var i=n(73406);const r=t=>class extends((0,i.L)(t)){static get properties(){return{autocomplete:{type:String},autocorrect:{type:String},autocapitalize:{type:String,reflectToAttribute:!0}}}static get delegateAttrs(){return[...super.delegateAttrs,"autocapitalize","autocomplete","autocorrect"]}get __data(){return this.__dataValue||{}}set __data(t){this.__dataValue=t}_inputElementChanged(t){super._inputElementChanged(t),t&&(t.value&&t.value!==this.value&&(console.warn(`Please define value on the <${this.localName}> component!`),t.value=""),this.value&&(t.value=this.value))}_setFocused(t){super._setFocused(t),!t&&document.hasFocus()&&this.validate()}_onInput(t){super._onInput(t),this.invalid&&this.validate()}_valueChanged(t,e){super._valueChanged(t,e),void 0!==e&&this.invalid&&this.validate()}}},18005:(t,e,n)=>{n.d(e,{n:()=>h}),n(13553);var i=n(74241),r=n(52807),o=n(12521),l=n(34463),a=n(62743),p=n(46570),s=n(73208),d=n(20422),u=n(46729);const c=t=>class extends((0,d.j)(t)){static get properties(){return{maxlength:{type:Number},minlength:{type:Number},pattern:{type:String}}}static get delegateAttrs(){return[...super.delegateAttrs,"maxlength","minlength","pattern"]}static get constraints(){return[...super.constraints,"maxlength","minlength","pattern"]}constructor(){super(),this._setType("text")}get clearElement(){return this.$.clearButton}ready(){super.ready(),this.addController(new s.b(this,(t=>{this._setInputElement(t),this._setFocusElement(t),this.stateTarget=t,this.ariaTarget=t}))),this.addController(new u.v(this.inputElement,this._labelController))}};(0,p.hC)("vaadin-text-field",a.J,{moduleId:"vaadin-text-field-styles"});class h extends(c((0,p.Tb)((0,o.S)(i.H3)))){static get is(){return"vaadin-text-field"}static get template(){return i.dy`
|
|
20
20
|
<style>
|
|
21
21
|
[part='input-field'] {
|
|
22
22
|
flex-grow: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20409:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>d});var n=r(84569),o=r(94978),s=r(2061),i=r(54567);const l=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"];var a=r(33346);const c=(0,i.iY)("enriched-text");class h extends((0,a.s)({componentName:c,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <style>\n :host {\n display: inline-block;\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 </style>\n <slot part="text-wrapper" style="display:none"></slot>\n <div class="content"></div>\n ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#r(),(0,i.P$)(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(l)}#i(){this.#s()}#l(){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.Z("commonmark",{html:!0}),this.#l(),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=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.innerHTML);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 d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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.yk)({componentNameOverride:(0,i.iY)("link")}),o.e4,o.Ae)(h);customElements.define(c,d)}}]);
|
|
1
|
+
"use strict";(self.webpackChunk_descope_web_components_ui=self.webpackChunk_descope_web_components_ui||[]).push([[5158],{20409:(e,t,r)=>{r.r(t),r.d(t,{EnrichedTextClass:()=>d});var n=r(84569),o=r(94978),s=r(2061),i=r(54567);const l=["blockquote","list","image","table","code","hr","backticks","fence","reference","heading","lheading","html_block"];var a=r(33346);const c=(0,i.iY)("enriched-text");class h extends((0,a.s)({componentName:c,baseSelector:":host > div"})){#e;#t;constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n <style>\n :host {\n display: inline-block;\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 </style>\n <slot part="text-wrapper" style="display:none"></slot>\n <div class="content"></div>\n ',this.textSlot=this.shadowRoot.querySelector("slot"),this.#r(),(0,i.P$)(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(l)}#i(){this.#s()}#l(){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.Z("commonmark",{html:!0}),this.#l(),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=(e=>{const t=document.createElement("textarea");return t.innerHTML=e,t.value})(this.innerHTML);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 d=(0,s.qC)((0,o.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},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.yk)({componentNameOverride:(0,i.iY)("link")}),(0,o.yk)({componentNameOverride:(0,i.iY)("text")}),o.e4,o.Ae)(h);customElements.define(c,d)}}]);
|
package/package.json
CHANGED
|
@@ -25,9 +25,7 @@ const customMixin = (superclass) =>
|
|
|
25
25
|
init() {
|
|
26
26
|
super.init?.();
|
|
27
27
|
|
|
28
|
-
|
|
29
|
-
this.setAttribute('pattern', defaultPattern);
|
|
30
|
-
}
|
|
28
|
+
this.setAttribute('pattern', defaultPattern);
|
|
31
29
|
|
|
32
30
|
if (!this.getAttribute('autocomplete')) {
|
|
33
31
|
this.setAttribute('autocomplete', defaultAutocomplete);
|
|
@@ -195,6 +195,7 @@ export const EnrichedTextClass = compose(
|
|
|
195
195
|
},
|
|
196
196
|
}),
|
|
197
197
|
createStyleMixin({ componentNameOverride: getComponentName('link') }),
|
|
198
|
+
createStyleMixin({ componentNameOverride: getComponentName('text') }),
|
|
198
199
|
draggableMixin,
|
|
199
200
|
componentNameValidationMixin
|
|
200
201
|
)(EnrichedText);
|
|
@@ -148,7 +148,7 @@ export const themeToStyle = ({ globals, components }, themeName) => ({
|
|
|
148
148
|
components: createComponentsTheme(components),
|
|
149
149
|
});
|
|
150
150
|
|
|
151
|
-
const useVar = (varName) => `var(${varName})`;
|
|
151
|
+
export const useVar = (varName) => `var(${varName})`;
|
|
152
152
|
|
|
153
153
|
export const createHelperVars = (theme, prefix) => {
|
|
154
154
|
const res = transformTheme(theme, [], (path, value) => {
|
|
@@ -1,93 +1,32 @@
|
|
|
1
1
|
import globals from '../globals';
|
|
2
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
|
2
|
+
import { getThemeRefs, useVar } from '../../helpers/themeHelpers';
|
|
3
3
|
import { EnrichedTextClass } from '../../components/descope-enriched-text/EnrichedTextClass';
|
|
4
|
-
import {
|
|
4
|
+
import { vars as textCompVars } from './text';
|
|
5
|
+
import { vars as linkCompVars } from './link';
|
|
5
6
|
|
|
6
7
|
const globalRefs = getThemeRefs(globals);
|
|
7
8
|
const vars = EnrichedTextClass.cssVarList;
|
|
8
9
|
|
|
9
|
-
const
|
|
10
|
+
const enrichedText = {
|
|
10
11
|
[vars.hostDirection]: globalRefs.direction,
|
|
12
|
+
[vars.hostWidth]: useVar(textCompVars.hostWidth),
|
|
11
13
|
|
|
12
|
-
[vars.
|
|
13
|
-
[vars.
|
|
14
|
-
[vars.
|
|
15
|
-
[vars.fontFamily]: globalRefs.typography.body1.font,
|
|
14
|
+
[vars.textLineHeight]: useVar(textCompVars.textLineHeight),
|
|
15
|
+
[vars.textColor]: useVar(textCompVars.textColor),
|
|
16
|
+
[vars.textAlign]: useVar(textCompVars.textAlign),
|
|
16
17
|
|
|
17
|
-
[vars.
|
|
18
|
-
[vars.
|
|
19
|
-
[vars.
|
|
18
|
+
[vars.fontSize]: useVar(textCompVars.fontSize),
|
|
19
|
+
[vars.fontWeight]: useVar(textCompVars.fontWeight),
|
|
20
|
+
[vars.fontFamily]: useVar(textCompVars.fontFamily),
|
|
20
21
|
|
|
21
|
-
[vars.linkColor]:
|
|
22
|
+
[vars.linkColor]: useVar(linkCompVars.textColor),
|
|
22
23
|
[vars.linkTextDecoration]: 'none',
|
|
23
24
|
[vars.linkHoverTextDecoration]: 'underline',
|
|
24
25
|
|
|
26
|
+
[vars.fontWeightBold]: '900',
|
|
25
27
|
[vars.minWidth]: '0.25em',
|
|
26
28
|
[vars.minHeight]: '1.35em',
|
|
27
|
-
|
|
28
|
-
mode: {
|
|
29
|
-
primary: {
|
|
30
|
-
[vars.textColor]: globalRefs.colors.surface.contrast,
|
|
31
|
-
},
|
|
32
|
-
secondary: {
|
|
33
|
-
[vars.textColor]: globalRefs.colors.surface.dark,
|
|
34
|
-
},
|
|
35
|
-
error: {
|
|
36
|
-
[vars.textColor]: globalRefs.colors.error.main,
|
|
37
|
-
},
|
|
38
|
-
success: {
|
|
39
|
-
[vars.textColor]: globalRefs.colors.success.main,
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
|
|
43
|
-
variant: {
|
|
44
|
-
h1: {
|
|
45
|
-
[vars.fontSize]: globalRefs.typography.h1.size,
|
|
46
|
-
[vars.fontWeight]: globalRefs.typography.h1.weight,
|
|
47
|
-
[vars.fontFamily]: globalRefs.typography.h1.font,
|
|
48
|
-
},
|
|
49
|
-
h2: {
|
|
50
|
-
[vars.fontSize]: globalRefs.typography.h2.size,
|
|
51
|
-
[vars.fontWeight]: globalRefs.typography.h2.weight,
|
|
52
|
-
[vars.fontFamily]: globalRefs.typography.h2.font,
|
|
53
|
-
},
|
|
54
|
-
h3: {
|
|
55
|
-
[vars.fontSize]: globalRefs.typography.h3.size,
|
|
56
|
-
[vars.fontWeight]: globalRefs.typography.h3.weight,
|
|
57
|
-
[vars.fontFamily]: globalRefs.typography.h3.font,
|
|
58
|
-
},
|
|
59
|
-
subtitle1: {
|
|
60
|
-
[vars.fontSize]: globalRefs.typography.subtitle1.size,
|
|
61
|
-
[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
|
|
62
|
-
[vars.fontFamily]: globalRefs.typography.subtitle1.font,
|
|
63
|
-
},
|
|
64
|
-
subtitle2: {
|
|
65
|
-
[vars.fontSize]: globalRefs.typography.subtitle2.size,
|
|
66
|
-
[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
|
|
67
|
-
[vars.fontFamily]: globalRefs.typography.subtitle2.font,
|
|
68
|
-
},
|
|
69
|
-
body1: {
|
|
70
|
-
[vars.fontSize]: globalRefs.typography.body1.size,
|
|
71
|
-
[vars.fontWeight]: globalRefs.typography.body1.weight,
|
|
72
|
-
[vars.fontFamily]: globalRefs.typography.body1.font,
|
|
73
|
-
},
|
|
74
|
-
body2: {
|
|
75
|
-
[vars.fontSize]: globalRefs.typography.body2.size,
|
|
76
|
-
[vars.fontWeight]: globalRefs.typography.body2.weight,
|
|
77
|
-
[vars.fontFamily]: globalRefs.typography.body2.font,
|
|
78
|
-
},
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
textAlign: {
|
|
82
|
-
right: { [vars.textAlign]: 'right' },
|
|
83
|
-
left: { [vars.textAlign]: 'left' },
|
|
84
|
-
center: { [vars.textAlign]: 'center' },
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
_fullWidth: {
|
|
88
|
-
[vars.hostWidth]: '100%',
|
|
89
|
-
},
|
|
90
29
|
};
|
|
91
30
|
|
|
92
|
-
export default
|
|
31
|
+
export default enrichedText;
|
|
93
32
|
export { vars };
|
|
@@ -11,7 +11,7 @@ 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 './text';
|
|
14
|
-
import * as
|
|
14
|
+
import * as enrichedText from './enrichedText';
|
|
15
15
|
import * as link from './link';
|
|
16
16
|
import * as divider from './divider';
|
|
17
17
|
import * as passcode from './passcode';
|
|
@@ -56,7 +56,7 @@ const components = {
|
|
|
56
56
|
totpImage,
|
|
57
57
|
notpImage,
|
|
58
58
|
text,
|
|
59
|
-
|
|
59
|
+
enrichedText,
|
|
60
60
|
link,
|
|
61
61
|
divider,
|
|
62
62
|
passcode,
|