@descope/web-components-ui 1.0.49 → 1.0.51
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/index.esm.js +346 -175
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/433.js +1 -0
- package/dist/umd/descope-button-index-js.js +1 -1
- package/dist/umd/descope-checkbox-index-js.js +1 -1
- package/dist/umd/descope-combo-index-js.js +1 -1
- package/dist/umd/descope-container-index-js.js +1 -1
- package/dist/umd/descope-date-picker-index-js.js +1 -1
- package/dist/umd/descope-email-field-index-js.js +1 -1
- package/dist/umd/descope-logo-index-js.js +1 -1
- package/dist/umd/descope-number-field-index-js.js +1 -1
- package/dist/umd/descope-password-field-index-js.js +1 -1
- package/dist/umd/descope-switch-toggle-index-js.js +1 -1
- package/dist/umd/descope-text-area-index-js.js +1 -1
- package/dist/umd/descope-text-field-index-js.js +1 -1
- package/dist/umd/descope-text-index-js.js +1 -0
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-text/Text.js +46 -0
- package/src/components/descope-text/index.js +5 -0
- package/src/components/descope-text-area/TextArea.js +3 -3
- package/src/componentsHelpers/inputMixin.js +40 -8
- package/src/index.js +1 -0
- package/src/theme/components/index.js +3 -1
- package/src/theme/components/text.js +79 -0
- package/src/theme/components/textArea.js +0 -1
- package/src/theme/components/textField.js +6 -6
- package/src/theme/globals.js +49 -21
- package/dist/umd/313.js +0 -1
- package/dist/umd/599.js +0 -1
- package/dist/umd/938.js +0 -1
- package/dist/umd/97.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberField:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[142],{4951:(t,n,e)=>{e.r(n),e.d(n,{NumberField:()=>o}),e(5806);var i=e(9433),a=e(4447);const r=(0,i.iY)("number-field");let l="";const d=(0,i.qC)((0,i.yk)({mappings:{...a.Z}}),i.e4,i.y7,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-number-field",style:()=>l,excludeAttrsSync:["tabindex"],componentName:r}));l=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-number-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-number-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-number-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-number-field input:-webkit-autofill,\n\tvaadin-number-field input:-webkit-autofill::first-line,\n\tvaadin-number-field input:-webkit-autofill:hover,\n\tvaadin-number-field input:-webkit-autofill:active,\n\tvaadin-number-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${d.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${d.cssVarList.height}) var(${d.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-number-field > label,\n\tvaadin-number-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-number-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-number-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${d.cssVarList.color});\n\t}\n\tvaadin-number-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const o=d;customElements.define(r,o)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[320],{1721:(t,n,a)=>{a.r(n),a.d(n,{PasswordField:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[320],{1721:(t,n,a)=>{a.r(n),a.d(n,{PasswordField:()=>d}),a(7056);var i=a(9433),e=a(4447);const s=(0,i.iY)("password-field");let r="";const o=(0,i.qC)((0,i.yk)({mappings:{...e.Z,revealCursor:[{selector:"::part(reveal-button)::before",property:"cursor"}]}}),i.e4,i.y7,i.Ae)((0,i.DM)({slots:["suffix"],wrappedEleName:"vaadin-password-field",style:()=>r,excludeAttrsSync:["tabindex"],componentName:s}));r=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\tvaadin-password-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-password-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-password-field input:-webkit-autofill,\n\tvaadin-password-field input:-webkit-autofill::first-line,\n\tvaadin-password-field input:-webkit-autofill:hover,\n\tvaadin-password-field input:-webkit-autofill:active,\n\tvaadin-password-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-password-field > label,\n\tvaadin-password-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-password-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-password-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-password-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const d=o;customElements.define(s,d)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[739],{3774:(t,n,e)=>{e.r(n),e.d(n,{SwitchToggle:()=>l}),e(9515);var a=e(9433),i=e(3535);const r=(0,a.iY)("switch-toggle");let o="";const c=(0,a.qC)((0,a.yk)({mappings:{width:(0,i.zy)(),cursor:[{},{selector:"> label"}]}}),a.e4,a.y7,a.Ae)((0,a.DM)({slots:[],wrappedEleName:"vaadin-checkbox",style:()=>o,excludeAttrsSync:["tabindex"],componentName:r}));o=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\t\n\t:host {\n\t\t--margin: 7px;\n\t\t--width: var(${c.cssVarList.width});\n\t\t--height: calc(var(--width) / 2);\n\t\t--radius: var(--height);\n\t\t--knobSize: calc(var(--height) - 5px);\n\t\t--bgColor: #fff;\n\t\t--knobBgColor: #000;\n\t}\n\tvaadin-checkbox>label {\n\t\tcursor: pointer;\n\t\tborder: 1px solid;\n\t\ttext-indent: -99999px;\n\t\tdisplay: block;\n\t\tposition: relative;\t\t\t\n\t\twidth: var(--width);\n\t\theight: var(--height);\n\t\tbackground: var(--bgColor);\n\t\tborder-radius: var(--radius);\n\t}\n\tvaadin-checkbox>label::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttransition: 0.3s;\n\t\ttop: var(--margin);\n\t\tleft: var(--margin);\n\t\twidth: var(--knobSize);\n\t\theight: var(--knobSize);\n\t\tbackground: var(--knobBgColor);\n\t\tborder-radius: var(--knobSize);\n\t}\n\tvaadin-checkbox::part(checkbox) {\n\t\theight: 0;\n\t\twidth: 0;\n\t\tvisibility: hidden;\n\t}\n\tvaadin-checkbox[checked]>label::after {\n\t\ttransform: translateX(-100%);\n\t\tleft: calc(100% - var(--margin));\n\t}\n\tvaadin-checkbox[active]>label::after {\n\t\twidth: calc(var(--knobSize) + 15px);\n\t}\n`;const l=c;customElements.define(r,l)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[322],{178:(t,e,r)=>{r.r(e),r.d(e,{TextArea:()=>c}),r(7101);var n=r(9433),a=r(3535);const o=(0,n.iY)("text-area"),s="::part(input-field)";let l="";const i=(0,n.qC)((0,n.yk)({mappings:{resize:{selector:"> textarea"},color:{selector:"::part(label)"},cursor:{},width:(0,a.zy)(),backgroundColor:{selector:s},borderWidth:{selector:s},borderStyle:{selector:s},borderColor:{selector:s},borderRadius:{selector:s},outline:{selector:s},outlineOffset:{selector:s}}}),n.e4,n.y7,n.Ae)((0,n.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>l,excludeAttrsSync:["tabindex"],componentName:o}));l='\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-area {\n\t\tmargin: 0;\n\t}\n\tvaadin-text-area > label,\n\tvaadin-text-area::part(input-field) {\n\t\tcursor: pointer;\n\t}\n\tvaadin-text-area[focused]::part(input-field) {\n\t\tcursor: text;\n\t}\n\tvaadin-text-area::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t}\t\n';const c=i;customElements.define(o,c)}}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{6303:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[934],{6303:(t,e,n)=>{n.r(e),n.d(e,{TextField:()=>r}),n(9789);var i=n(9433),a=n(4447);const l=(0,i.iY)("text-field");let d="";const o=(0,i.qC)((0,i.yk)({mappings:a.Z}),i.e4,i.y7,i.Ae)((0,i.DM)({slots:["prefix","suffix"],wrappedEleName:"vaadin-text-field",style:()=>d,excludeAttrsSync:["tabindex"],componentName:l}));d=`\n\t:host {\n\t\tdisplay: inline-block;\n\t}\n\n\tvaadin-text-field {\n\t\tmargin: 0;\n\t\tpadding: 0;\n\t}\n\tvaadin-text-field::part(input-field) {\n\t\toverflow: hidden;\n\t}\n\tvaadin-text-field[readonly] > input:placeholder-shown {\n\t\topacity: 1;\n\t}\n\tvaadin-text-field input:-webkit-autofill,\n\tvaadin-text-field input:-webkit-autofill::first-line,\n\tvaadin-text-field input:-webkit-autofill:hover,\n\tvaadin-text-field input:-webkit-autofill:active,\n\tvaadin-text-field input:-webkit-autofill:focus {\n\t\t-webkit-text-fill-color: var(${o.cssVarList.color});\n\t\tbox-shadow: 0 0 0 var(${o.cssVarList.height}) var(${o.cssVarList.backgroundColor}) inset;\n\t}\n\tvaadin-text-field > label,\n\tvaadin-text-field::part(input-field) {\n\t\tcursor: pointer;\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field::part(input-field):focus {\n\t\tcursor: text;\n\t}\n\tvaadin-text-field[required]::part(required-indicator)::after {\n\t\tfont-size: "12px";\n\t\tcontent: "*";\n\t\tcolor: var(${o.cssVarList.color});\n\t}\n\tvaadin-text-field[readonly]::part(input-field)::after {\n\t\tborder: 0 solid;\n\t}\n`;const r=o;customElements.define(l,r)}}]);
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[528],{2092:(e,t,o)=>{o.r(t),o.d(t,{Text:()=>i});var n=o(9433),s=o(3535);const c=(0,n.iY)("text");class l extends HTMLElement{static get componentName(){return c}constructor(){super();const e=document.createElement("template");e.innerHTML="<slot></slot>",this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.content.cloneNode(!0)),this.baseSelector=":host > slot"}}const i=(0,n.qC)((0,n.yk)({mappings:{fontFamily:{},lineHeight:{},fontStyle:{},fontSize:{},fontWeight:{},width:{},color:{},textAlign:(0,s.zy)(),display:(0,s.zy)()}}),n.e4,n.Ae)(l);customElements.define(c,i)}}]);
|
package/dist/umd/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.DescopeUI=t():e.DescopeUI=t()}(self,(()=>(()=>{var e,t,o,r={534:(e,t,o)=>{var r={"./descope-button/index.js":[3029,840,767,211,513,729,433,662],"./descope-checkbox/index.js":[7904,840,786,208,767,515,433,761],"./descope-combo/index.js":[2798,840,786,208,233,767,422,211,725,513,789,729,433,447,662,934,247],"./descope-container/index.js":[147,433,317],"./descope-date-picker/index.js":[2552,840,786,208,233,767,211,513,54,433,17],"./descope-email-field/index.js":[689,840,786,208,233,422,725,437,433,447,760],"./descope-logo/index.js":[4641,433,984],"./descope-number-field/index.js":[4951,840,786,208,233,422,806,433,447,142],"./descope-password-field/index.js":[1721,840,786,208,233,767,422,211,725,56,433,447,320],"./descope-switch-toggle/index.js":[3774,840,786,208,767,515,433,739],"./descope-text-area/index.js":[178,840,786,233,422,101,433,322],"./descope-text-field/index.js":[6303,840,786,208,233,422,725,789,433,447,934],"./descope-text/index.js":[2092,433,528]};function n(e){if(!o.o(r,e))return Promise.resolve().then((()=>{var t=new Error("Cannot find module '"+e+"'");throw t.code="MODULE_NOT_FOUND",t}));var t=r[e],n=t[0];return Promise.all(t.slice(1).map(o.e)).then((()=>o(n)))}n.keys=()=>Object.keys(r),n.id=534,e.exports=n},7507:(e,t,o)=>{const r=o(534);e.exports=r.keys().reduce(((e,t)=>(e[t.replace(/.*?([^\/]+)\/index\.js$/,"$1")]=()=>r(t),e)),{})}},n={};function i(e){var t=n[e];if(void 0!==t)return t.exports;var o=n[e]={exports:{}};return r[e](o,o.exports,i),o.exports}i.m=r,e=[],i.O=(t,o,r,n)=>{if(!o){var s=1/0;for(p=0;p<e.length;p++){for(var[o,r,n]=e[p],d=!0,c=0;c<o.length;c++)(!1&n||s>=n)&&Object.keys(i.O).every((e=>i.O[e](o[c])))?o.splice(c--,1):(d=!1,n<s&&(s=n));if(d){e.splice(p--,1);var a=r();void 0!==a&&(t=a)}}return t}n=n||0;for(var p=e.length;p>0&&e[p-1][2]>n;p--)e[p]=e[p-1];e[p]=[o,r,n]},i.F={},i.E=e=>{Object.keys(i.F).map((t=>{i.F[t](e)}))},i.d=(e,t)=>{for(var o in t)i.o(t,o)&&!i.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((t,o)=>(i.f[o](e,t),t)),[])),i.u=e=>(({17:"descope-date-picker-index-js",142:"descope-number-field-index-js",247:"descope-combo-index-js",317:"descope-container-index-js",320:"descope-password-field-index-js",322:"descope-text-area-index-js",528:"descope-text-index-js",662:"descope-button-index-js",739:"descope-switch-toggle-index-js",760:"descope-email-field-index-js",761:"descope-checkbox-index-js",934:"descope-text-field-index-js",984:"descope-logo-index-js"}[e]||e)+".js"),i.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),t={},o="DescopeUI:",i.l=(e,r,n,s)=>{if(t[e])t[e].push(r);else{var d,c;if(void 0!==n)for(var a=document.getElementsByTagName("script"),p=0;p<a.length;p++){var l=a[p];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==o+n){d=l;break}}d||(c=!0,(d=document.createElement("script")).charset="utf-8",d.timeout=120,i.nc&&d.setAttribute("nonce",i.nc),d.setAttribute("data-webpack",o+n),d.src=e),t[e]=[r];var u=(o,r)=>{d.onerror=d.onload=null,clearTimeout(f);var n=t[e];if(delete t[e],d.parentNode&&d.parentNode.removeChild(d),n&&n.forEach((e=>e(r))),o)return o(r)},f=setTimeout(u.bind(null,void 0,{type:"timeout",target:d}),12e4);d.onerror=u.bind(null,d.onerror),d.onload=u.bind(null,d.onload),c&&document.head.appendChild(d)}},i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},(()=>{var e;i.g.importScripts&&(e=i.g.location+"");var t=i.g.document;if(!e&&t&&(t.currentScript&&(e=t.currentScript.src),!e)){var o=t.getElementsByTagName("script");o.length&&(e=o[o.length-1].src)}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={826:0};i.f.j=(t,o)=>{var r=i.o(e,t)?e[t]:void 0;if(0!==r)if(r)o.push(r[2]);else{var n=new Promise(((o,n)=>r=e[t]=[o,n]));o.push(r[2]=n);var s=i.p+i.u(t),d=new Error;i.l(s,(o=>{if(i.o(e,t)&&(0!==(r=e[t])&&(e[t]=void 0),r)){var n=o&&("load"===o.type?"missing":o.type),s=o&&o.target&&o.target.src;d.message="Loading chunk "+t+" failed.\n("+n+": "+s+")",d.name="ChunkLoadError",d.type=n,d.request=s,r[1](d)}}),"chunk-"+t,t)}},i.F.j=t=>{if(!i.o(e,t)||void 0===e[t]){e[t]=null;var o=document.createElement("link");i.nc&&o.setAttribute("nonce",i.nc),o.rel="prefetch",o.as="script",o.href=i.p+i.u(t),document.head.appendChild(o)}},i.O.j=t=>0===e[t];var t=(t,o)=>{var r,n,[s,d,c]=o,a=0;if(s.some((t=>0!==e[t]))){for(r in d)i.o(d,r)&&(i.m[r]=d[r]);if(c)var p=c(i)}for(t&&t(o);a<s.length;a++)n=s[a],i.o(e,n)&&e[n]&&e[n][0](),e[n]=0;return i.O(p)},o=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];o.forEach(t.bind(null,0)),o.push=t.bind(null,o.push.bind(o))})(),i.O(0,[826],(()=>{[840,767,211,513,729,433,662,786,208,515,761,233,422,725,789,447,934,247,317,54,17,437,760,984,806,142,56,320,739,101,322,528].map(i.E)}),5);var s=i(7507);return i.O(s)})()));
|
package/package.json
CHANGED
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import {
|
|
2
|
+
getComponentName,
|
|
3
|
+
createStyleMixin,
|
|
4
|
+
draggableMixin,
|
|
5
|
+
compose,
|
|
6
|
+
componentNameValidationMixin
|
|
7
|
+
} from '../../componentsHelpers';
|
|
8
|
+
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
|
9
|
+
|
|
10
|
+
export const componentName = getComponentName('text');
|
|
11
|
+
|
|
12
|
+
class RawText extends HTMLElement {
|
|
13
|
+
static get componentName() {
|
|
14
|
+
return componentName;
|
|
15
|
+
}
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
const template = document.createElement('template');
|
|
19
|
+
template.innerHTML = `<slot></slot>`;
|
|
20
|
+
|
|
21
|
+
this.attachShadow({ mode: 'open' });
|
|
22
|
+
this.shadowRoot.appendChild(template.content.cloneNode(true));
|
|
23
|
+
|
|
24
|
+
this.baseSelector = ':host > slot';
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
const Text = compose(
|
|
29
|
+
createStyleMixin({
|
|
30
|
+
mappings: {
|
|
31
|
+
fontFamily: {},
|
|
32
|
+
lineHeight: {},
|
|
33
|
+
fontStyle: {},
|
|
34
|
+
fontSize: {},
|
|
35
|
+
fontWeight: {},
|
|
36
|
+
width: {},
|
|
37
|
+
color: {},
|
|
38
|
+
textAlign: matchHostStyle(),
|
|
39
|
+
display: matchHostStyle()
|
|
40
|
+
}
|
|
41
|
+
}),
|
|
42
|
+
draggableMixin,
|
|
43
|
+
componentNameValidationMixin
|
|
44
|
+
)(RawText);
|
|
45
|
+
|
|
46
|
+
export default Text;
|
|
@@ -5,7 +5,7 @@ import {
|
|
|
5
5
|
createProxy,
|
|
6
6
|
inputMixin,
|
|
7
7
|
compose,
|
|
8
|
-
componentNameValidationMixin
|
|
8
|
+
componentNameValidationMixin
|
|
9
9
|
} from '../../componentsHelpers';
|
|
10
10
|
import { matchHostStyle } from '../../componentsHelpers/createStyleMixin/helpers';
|
|
11
11
|
|
|
@@ -13,7 +13,7 @@ export const componentName = getComponentName('text-area');
|
|
|
13
13
|
|
|
14
14
|
const selectors = {
|
|
15
15
|
label: '::part(label)',
|
|
16
|
-
input: '
|
|
16
|
+
input: '::part(input-field)',
|
|
17
17
|
required: '::part(required-indicator)::after'
|
|
18
18
|
};
|
|
19
19
|
|
|
@@ -60,7 +60,7 @@ overrides = `
|
|
|
60
60
|
vaadin-text-area::part(input-field) {
|
|
61
61
|
cursor: pointer;
|
|
62
62
|
}
|
|
63
|
-
vaadin-text-area[focused]
|
|
63
|
+
vaadin-text-area[focused]::part(input-field) {
|
|
64
64
|
cursor: text;
|
|
65
65
|
}
|
|
66
66
|
vaadin-text-area::part(required-indicator)::after {
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
+
const attrs = {
|
|
2
|
+
valueMissing: 'data-errormessage-value-missing',
|
|
3
|
+
patternMismatch: 'data-errormessage-pattern-mismatch'
|
|
4
|
+
};
|
|
5
|
+
|
|
6
|
+
const errorAttrs = ['invalid', 'has-error-message'];
|
|
7
|
+
|
|
1
8
|
const propertyObserver = (src, target, property) => {
|
|
2
9
|
Object.defineProperty(src, property, {
|
|
3
10
|
set: function (v) {
|
|
4
|
-
return target[property] = v
|
|
11
|
+
return (target[property] = v);
|
|
5
12
|
},
|
|
6
13
|
get: function () {
|
|
7
|
-
return target[property]
|
|
14
|
+
return target[property];
|
|
8
15
|
},
|
|
9
16
|
configurable: true
|
|
10
17
|
});
|
|
11
|
-
}
|
|
18
|
+
};
|
|
12
19
|
|
|
13
20
|
export const inputMixin = (superclass) =>
|
|
14
21
|
class InputMixinClass extends superclass {
|
|
@@ -28,8 +35,26 @@ export const inputMixin = (superclass) =>
|
|
|
28
35
|
this.setValidity?.();
|
|
29
36
|
}
|
|
30
37
|
|
|
38
|
+
setValidationAttribute(attr) {
|
|
39
|
+
const validationAttr = this.getAttribute(attr);
|
|
40
|
+
if (validationAttr) {
|
|
41
|
+
this.proxyElement.setAttribute('error-message', validationAttr);
|
|
42
|
+
}
|
|
43
|
+
// normalize vaadin error attributes to have a boolean value
|
|
44
|
+
errorAttrs.forEach((att) => this.proxyElement.setAttribute(att, 'true'));
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
validate() {
|
|
48
|
+
const { valueMissing, patternMismatch, typeMismatch } = this.validity;
|
|
49
|
+
if (valueMissing) {
|
|
50
|
+
this.setValidationAttribute(attrs.valueMissing);
|
|
51
|
+
} else if (typeMismatch || patternMismatch) {
|
|
52
|
+
this.setValidationAttribute(attrs.patternMismatch);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
31
56
|
connectedCallback() {
|
|
32
|
-
this.baseEle = this.shadowRoot.querySelector(this.baseSelector)
|
|
57
|
+
this.baseEle = this.shadowRoot.querySelector(this.baseSelector);
|
|
33
58
|
super.connectedCallback?.();
|
|
34
59
|
|
|
35
60
|
// this is needed in order to make sure the form input validation is working
|
|
@@ -43,11 +68,9 @@ export const inputMixin = (superclass) =>
|
|
|
43
68
|
if (!input) throw Error('no input was found');
|
|
44
69
|
|
|
45
70
|
// sync properties
|
|
46
|
-
propertyObserver(this, input, 'value')
|
|
47
|
-
this.setSelectionRange = input.setSelectionRange.bind(input)
|
|
71
|
+
propertyObserver(this, input, 'value');
|
|
72
|
+
this.setSelectionRange = input.setSelectionRange.bind(input);
|
|
48
73
|
|
|
49
|
-
this.checkValidity = () => input.checkValidity();
|
|
50
|
-
this.reportValidity = () => input.reportValidity();
|
|
51
74
|
this.validity = input.validity;
|
|
52
75
|
|
|
53
76
|
this.setValidity = () => {
|
|
@@ -58,5 +81,14 @@ export const inputMixin = (superclass) =>
|
|
|
58
81
|
this.value = input.value;
|
|
59
82
|
this.setValidity();
|
|
60
83
|
};
|
|
84
|
+
|
|
85
|
+
this.onfocus = () => {
|
|
86
|
+
setTimeout(() => input.reportValidity(), 0);
|
|
87
|
+
this.validate();
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
input.oninvalid = () => {
|
|
91
|
+
this.validate();
|
|
92
|
+
};
|
|
61
93
|
}
|
|
62
94
|
};
|
package/src/index.js
CHANGED
|
@@ -8,6 +8,7 @@ import checkbox from './checkbox';
|
|
|
8
8
|
import switchToggle from './switchToggle';
|
|
9
9
|
import container from './container';
|
|
10
10
|
import logo from './logo';
|
|
11
|
+
import text from './text';
|
|
11
12
|
|
|
12
13
|
export default {
|
|
13
14
|
button,
|
|
@@ -19,5 +20,6 @@ export default {
|
|
|
19
20
|
checkbox,
|
|
20
21
|
switchToggle,
|
|
21
22
|
container,
|
|
22
|
-
logo
|
|
23
|
+
logo,
|
|
24
|
+
text
|
|
23
25
|
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
import globals from '../globals';
|
|
2
|
+
import { getThemeRefs } from '../../themeHelpers';
|
|
3
|
+
import Text from '../../components/descope-text/Text';
|
|
4
|
+
|
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
|
6
|
+
|
|
7
|
+
const vars = Text.cssVarList;
|
|
8
|
+
|
|
9
|
+
const text = {
|
|
10
|
+
[vars.lineHeight]: '1em',
|
|
11
|
+
[vars.display]: 'inline-block',
|
|
12
|
+
[vars.textAlign]: 'left',
|
|
13
|
+
[vars.color]: globalRefs.colors.surface.dark,
|
|
14
|
+
variant: {
|
|
15
|
+
h1: {
|
|
16
|
+
[vars.fontSize]: globalRefs.typography.h1.size,
|
|
17
|
+
[vars.fontWeight]: globalRefs.typography.h1.weight,
|
|
18
|
+
[vars.fontFamily]: globalRefs.typography.h1.font
|
|
19
|
+
},
|
|
20
|
+
h2: {
|
|
21
|
+
[vars.fontSize]: globalRefs.typography.h2.size,
|
|
22
|
+
[vars.fontWeight]: globalRefs.typography.h2.weight,
|
|
23
|
+
[vars.fontFamily]: globalRefs.typography.h2.font
|
|
24
|
+
},
|
|
25
|
+
h3: {
|
|
26
|
+
[vars.fontSize]: globalRefs.typography.h3.size,
|
|
27
|
+
[vars.fontWeight]: globalRefs.typography.h3.weight,
|
|
28
|
+
[vars.fontFamily]: globalRefs.typography.h3.font
|
|
29
|
+
},
|
|
30
|
+
subtitle1: {
|
|
31
|
+
[vars.fontSize]: globalRefs.typography.subtitle1.size,
|
|
32
|
+
[vars.fontWeight]: globalRefs.typography.subtitle1.weight,
|
|
33
|
+
[vars.fontFamily]: globalRefs.typography.subtitle1.font
|
|
34
|
+
},
|
|
35
|
+
subtitle2: {
|
|
36
|
+
[vars.fontSize]: globalRefs.typography.subtitle2.size,
|
|
37
|
+
[vars.fontWeight]: globalRefs.typography.subtitle2.weight,
|
|
38
|
+
[vars.fontFamily]: globalRefs.typography.subtitle2.font
|
|
39
|
+
},
|
|
40
|
+
body1: {
|
|
41
|
+
[vars.fontSize]: globalRefs.typography.body1.size,
|
|
42
|
+
[vars.fontWeight]: globalRefs.typography.body1.weight,
|
|
43
|
+
[vars.fontFamily]: globalRefs.typography.body1.font
|
|
44
|
+
},
|
|
45
|
+
body2: {
|
|
46
|
+
[vars.fontSize]: globalRefs.typography.body2.size,
|
|
47
|
+
[vars.fontWeight]: globalRefs.typography.body2.weight,
|
|
48
|
+
[vars.fontFamily]: globalRefs.typography.body2.font
|
|
49
|
+
}
|
|
50
|
+
},
|
|
51
|
+
mode: {
|
|
52
|
+
primary: {
|
|
53
|
+
[vars.color]: globalRefs.colors.primary.main
|
|
54
|
+
},
|
|
55
|
+
secondary: {
|
|
56
|
+
[vars.color]: globalRefs.colors.secondary.main
|
|
57
|
+
},
|
|
58
|
+
error: {
|
|
59
|
+
[vars.color]: globalRefs.colors.error.main
|
|
60
|
+
},
|
|
61
|
+
success: {
|
|
62
|
+
[vars.color]: globalRefs.colors.success.main
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
textAlign: {
|
|
66
|
+
right: { [vars.textAlign]: 'right' },
|
|
67
|
+
left: { [vars.textAlign]: 'left' },
|
|
68
|
+
center: { [vars.textAlign]: 'center' }
|
|
69
|
+
},
|
|
70
|
+
_fullWidth: {
|
|
71
|
+
[vars.width]: '100%',
|
|
72
|
+
[vars.display]: 'block'
|
|
73
|
+
},
|
|
74
|
+
_italic: {
|
|
75
|
+
[vars.fontStyle]: 'italic'
|
|
76
|
+
}
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
export default text;
|
|
@@ -43,18 +43,12 @@ export const textField = (vars) => ({
|
|
|
43
43
|
[vars.borderWidth]: '1px',
|
|
44
44
|
[vars.borderStyle]: 'solid',
|
|
45
45
|
[vars.borderColor]: 'transparent',
|
|
46
|
-
[vars.borderWidthReadOnly]: '0',
|
|
47
46
|
[vars.borderRadius]: globalRefs.radius.sm,
|
|
48
47
|
|
|
49
48
|
_borderOffset: {
|
|
50
49
|
[vars.outlineOffset]: '2px'
|
|
51
50
|
},
|
|
52
51
|
|
|
53
|
-
_invalid: {
|
|
54
|
-
[vars.borderColor]: globalRefs.colors.error.main,
|
|
55
|
-
[vars.color]: globalRefs.colors.error.main
|
|
56
|
-
},
|
|
57
|
-
|
|
58
52
|
_disabled: {
|
|
59
53
|
[vars.color]: globalRefs.colors.surface.dark,
|
|
60
54
|
[vars.placeholderColor]: globalRefs.colors.surface.light,
|
|
@@ -71,6 +65,12 @@ export const textField = (vars) => ({
|
|
|
71
65
|
|
|
72
66
|
_bordered: {
|
|
73
67
|
[vars.borderColor]: globalRefs.colors.surface.main
|
|
68
|
+
},
|
|
69
|
+
|
|
70
|
+
_hasErrorMessage: {
|
|
71
|
+
[vars.borderColor]: globalRefs.colors.error.main,
|
|
72
|
+
[vars.color]: globalRefs.colors.error.main,
|
|
73
|
+
[vars.placeholderColor]: globalRefs.colors.error.light
|
|
74
74
|
}
|
|
75
75
|
});
|
|
76
76
|
|
package/src/theme/globals.js
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getThemeRefs } from '../themeHelpers';
|
|
1
2
|
import { genColors } from '../themeHelpers/processColors';
|
|
2
3
|
|
|
3
4
|
export const colors = genColors({
|
|
@@ -12,21 +13,47 @@ export const colors = genColors({
|
|
|
12
13
|
error: 'red'
|
|
13
14
|
});
|
|
14
15
|
|
|
16
|
+
const fonts = {
|
|
17
|
+
font1: ['Roboto', 'sans-serif'],
|
|
18
|
+
font2: ['Oswald', 'serif']
|
|
19
|
+
};
|
|
20
|
+
const fontsRef = getThemeRefs({ fonts }).fonts;
|
|
21
|
+
|
|
15
22
|
const typography = {
|
|
16
23
|
h1: {
|
|
17
|
-
font:
|
|
18
|
-
weight: '
|
|
24
|
+
font: fontsRef.font1,
|
|
25
|
+
weight: '900',
|
|
19
26
|
size: '48px'
|
|
20
27
|
},
|
|
21
28
|
h2: {
|
|
22
|
-
font:
|
|
23
|
-
weight: '
|
|
29
|
+
font: fontsRef.font1,
|
|
30
|
+
weight: '800',
|
|
24
31
|
size: '38px'
|
|
25
32
|
},
|
|
26
33
|
h3: {
|
|
27
|
-
font:
|
|
28
|
-
weight: '
|
|
34
|
+
font: fontsRef.font1,
|
|
35
|
+
weight: '600',
|
|
29
36
|
size: '28px'
|
|
37
|
+
},
|
|
38
|
+
subtitle1: {
|
|
39
|
+
font: fontsRef.font2,
|
|
40
|
+
weight: '500',
|
|
41
|
+
size: '22px'
|
|
42
|
+
},
|
|
43
|
+
subtitle2: {
|
|
44
|
+
font: fontsRef.font2,
|
|
45
|
+
weight: '400',
|
|
46
|
+
size: '20px'
|
|
47
|
+
},
|
|
48
|
+
body1: {
|
|
49
|
+
font: fontsRef.font1,
|
|
50
|
+
weight: '300',
|
|
51
|
+
size: '16px'
|
|
52
|
+
},
|
|
53
|
+
body2: {
|
|
54
|
+
font: fontsRef.font1,
|
|
55
|
+
weight: '200',
|
|
56
|
+
size: '14px'
|
|
30
57
|
}
|
|
31
58
|
};
|
|
32
59
|
|
|
@@ -51,20 +78,20 @@ const radius = {
|
|
|
51
78
|
};
|
|
52
79
|
|
|
53
80
|
const shadow = {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
81
|
+
wide: {
|
|
82
|
+
sm: '0 2px 3px -0.5px',
|
|
83
|
+
md: '0 4px 6px -1px',
|
|
84
|
+
lg: '0 10px 15px -3px',
|
|
85
|
+
xl: '0 20px 25px -5px',
|
|
86
|
+
'2xl': '0 25px 50px -12px'
|
|
87
|
+
},
|
|
88
|
+
narrow: {
|
|
89
|
+
sm: '0 1px 2px -1px',
|
|
90
|
+
md: '0 2px 4px -2px',
|
|
91
|
+
lg: '0 4px 6px -4px',
|
|
92
|
+
xl: '0 8px 10px -6px',
|
|
93
|
+
'2xl': '0 16px 16px -8px'
|
|
94
|
+
}
|
|
68
95
|
};
|
|
69
96
|
|
|
70
97
|
export default {
|
|
@@ -73,5 +100,6 @@ export default {
|
|
|
73
100
|
spacing,
|
|
74
101
|
border,
|
|
75
102
|
radius,
|
|
76
|
-
shadow
|
|
103
|
+
shadow,
|
|
104
|
+
fonts
|
|
77
105
|
};
|
package/dist/umd/313.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[313],{8237:(e,t,s)=>{s.d(t,{A:()=>o});const o=e=>class extends e{#e(){const t=this.shadowRoot.host.tagName.toLowerCase();if(!e.componentName)throw Error('component name is not defined on super class, make sure you have a static get for "componentName"');if(t!==e.componentName)throw Error(`component name mismatch, expected "${e.componentName}", current "${t}"`)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&this.#e()}}},2089:(e,t,s)=>{s.d(t,{e:()=>o});const o=e=>class extends e{#t=null;static get observedAttributes(){return[...e.observedAttributes||[],"draggable"]}constructor(){super(),this.#t=document.createElement("style"),this.#t.innerText=`${this.baseSelector} { cursor: inherit }`}#s(e){e?this.shadowRoot.appendChild(this.#t):this.#t.remove()}attributeChangedCallback(e,t,s){super.attributeChangedCallback?.(e,t,s),"draggable"===e&&this.#s("true"===s)}}},2788:(e,t,s)=>{s.d(t,{qC:()=>n,iY:()=>a});var o=s(6225);const a=e=>(0,o.E3)("descope",e),n=(...e)=>t=>e.reduceRight(((e,t)=>t(e)),t)},6225:(e,t,s)=>{s.d(t,{E3:()=>a,GL:()=>o,Tk:()=>n});const o=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").replace(/[\s_.]+/g,"-").toLowerCase(),a=(...e)=>o(e.join("-")),n=(...e)=>`--${a(...e.filter((e=>!!e)))}`}}]);
|
package/dist/umd/599.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[599],{3535:(e,t,s)=>{s.d(t,{SP:()=>c,wj:()=>o,zy:()=>l});var r=s(6225);const n=(e,...t)=>`var(${e}${t.length?` , ${n(...t)}`:""})`;class a{constructor(){this.styleMap=new Map}add(e,t,s){this.styleMap.has(e)||this.styleMap.set(e,[]),this.styleMap.set(e,[...this.styleMap.get(e),{property:t,value:s}])}toString(){return Array.from(this.styleMap.entries()).reduce(((e,[t,s])=>e+`${t} { \n${s.map((({property:e,value:t})=>`${e}: ${t}`)).join(";\n")} \n}\n\n`),"")}}const o=(e,t,s)=>{const o=new a;return Object.keys(s).forEach((a=>{const c=((e,t)=>{const s={selector:"",property:(0,r.GL)(e)};return t&&Object.keys(t).length?Array.isArray(t)?t.map((e=>Object.assign({},s,e))):[Object.assign({},s,t)]:[s]})(a,s[a]),l=(0,r.Tk)(e,a);c.forEach((({selector:e,property:s})=>{o.add(((e="",t="")=>"function"==typeof t?t(e):`${e}${t}`)(t,e),s,n(l))}))})),o.toString()},c=(e,t)=>Object.keys(t).reduce(((t,s)=>Object.assign(t,{[s]:(0,r.Tk)(e,s)})),{}),l=(e={})=>[e,{...e,selector:()=>`:host${e.selector||""}`}]},4599:(e,t,s)=>{s.d(t,{y:()=>a});var r=s(6225),n=s(3535);const a=({mappings:e={}})=>t=>{const s=Object.keys(e).map((e=>(0,r.E3)("st",e)));return class extends t{static get observedAttributes(){return[...t.observedAttributes||[],...s]}static get cssVarList(){return(0,n.SP)(t.componentName,e)}#e=null;constructor(){super(),this.#t(),this.#s()}#s(){this.#e=document.createElement("style"),this.#e.id="style-mixin-overrides",this.#e.innerText="* {}",this.shadowRoot.prepend(this.#e)}#r(e,s){const n=this.#e.sheet.cssRules[0].style,a=(0,r.Tk)(t.componentName,e.replace(/^st-/,""));s?n.setProperty(a,s):n.removeProperty(a)}#t(){const s=document.createElement("style");s.id="style-mixin-component",s.innerHTML=(0,n.wj)(t.componentName,this.baseSelector,e),this.shadowRoot.prepend(s)}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),s.includes(e)&&this.#r(e,r)}connectedCallback(){super.connectedCallback?.(),this.shadowRoot.isConnected&&Array.from(this.attributes).forEach((e=>{s.includes(e.nodeName)&&this.#r(e.nodeName,e.value)}))}}}}}]);
|
package/dist/umd/938.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[938],{3938:(t,e,i)=>{i.d(e,{y:()=>s});const s=t=>class extends t{static get formAssociated(){return!0}#t;constructor(){super(),this.#t=this.attachInternals()}formAssociatedCallback(){this.setValidity?.()}connectedCallback(){this.baseEle=this.shadowRoot.querySelector(this.baseSelector),super.connectedCallback?.(),this.hasAttribute("tabindex")||this.setAttribute("tabindex",0);const t=this.baseEle.querySelector("input")||this.baseEle.querySelector("textarea");if(!t)throw Error("no input was found");var e,i;e=t,i="value",Object.defineProperty(this,i,{set:function(t){return e[i]=t},get:function(){return e[i]},configurable:!0}),this.setSelectionRange=t.setSelectionRange.bind(t),this.checkValidity=()=>t.checkValidity(),this.reportValidity=()=>t.reportValidity(),this.validity=t.validity,this.setValidity=()=>{this.#t.setValidity(t.validity,t.validationMessage)},t.oninput=()=>{this.value=t.value,this.setValidity()}}}}}]);
|
package/dist/umd/97.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[97],{3097:(t,e,o)=>{o.d(e,{D:()=>r});const s=(t,e,o)=>{e(...Array.from(t.attributes).map((t=>t.name))),new MutationObserver((t=>{for(const s of t)"attributes"!==s.type||o.includes(s.attributeName)||e(s.attributeName)})).observe(t,{attributes:!0})},n=(t,e)=>(...o)=>{o.forEach((o=>{const s=t.getAttribute(o);null!==s?e.getAttribute(o)!==s&&e.setAttribute(o,s):e.removeAttribute(o)}))},r=({componentName:t,wrappedEleName:e,slots:o=[],style:r,excludeAttrsSync:i=[]})=>{const a=`\n\t\t<style id="create-proxy"></style>\n\t\t<${e}>\n\t\t<slot></slot>\n\t\t${o.map((t=>`<slot name="${t}" slot="${t}"></slot>`)).join("")}\n\t\t</${e}>\n\t`;class h extends HTMLElement{static get componentName(){return t}constructor(){super().attachShadow({mode:"open"}).innerHTML=a,this.hostElement=this.shadowRoot.host,this.componentName=this.hostElement.tagName.toLowerCase(),this.baseSelector=e,this.shadowRoot.getElementById("create-proxy").innerHTML="function"==typeof r?r():r}connectedCallback(){var t,o,r;this.shadowRoot.isConnected&&(this.proxyElement=this.shadowRoot.querySelector(e),this.setAttribute("tabindex","0"),this.onfocus=t=>{this.proxyElement.focus()},this.proxyElement.onkeydown=t=>{t.shiftKey&&9===t.keyCode&&(this.removeAttribute("tabindex"),setTimeout((()=>this.setAttribute("tabindex","0")),0))},this.mouseoverCbRef=()=>{this.proxyElement.setAttribute("hover",""),this.proxyElement.addEventListener("mouseleave",(()=>this.proxyElement.removeAttribute("hover")),{once:!0})},this.proxyElement.addEventListener("mouseover",this.mouseoverCbRef),this.addEventListener=this.proxyElement.addEventListener,t=this.proxyElement,o=this.hostElement,r=i,s(t,n(t,o),r),s(o,n(o,t),r))}disconnectedCallback(){this.proxyElement.removeEventListener("mouseover",this.mouseoverCbRef)}attributeChangedCallback(){this.proxyElement}}return h}}}]);
|