@descope/web-components-ui 1.0.253 → 1.0.254

package/dist/umd/descope-button-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{9690:(t,n,e)=>{e.d(n,{n:()=>c,f:()=>a});var o=e(2061),r=e(4567),i=e(1e3);const a=(0,r.iY)("button"),{host:s,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...s,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${c.cssVarList.outlineWidth}) + var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${c.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${c.cssVarList.hostHeight}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${c.cssVarList.hostWidth}) - var(${c.cssVarList.outlineWidth}) - var(${c.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:p,fontSize:b}=c.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${p});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>o.n}),e(1721);var o=e(9690);customElements.define(o.f,o.n)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9662],{9690:(t,n,e)=>{e.d(n,{n:()=>p,f:()=>a});var o=e(2061),r=e(4567),i=e(1e3);const a=(0,r.iY)("button"),{host:s,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const p=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...s,property:"direction"},fontSize:{},fontFamily:{},cursor:{},backgroundColor:{},outlineOffset:{},outlineColor:{},outlineStyle:{},outlineWidth:{},borderRadius:{},borderColor:{},borderStyle:{},borderWidth:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],labelTextColor:{property:"color"},labelTextDecoration:{...l,property:"text-decoration"},labelSpacing:{...l,property:"gap"},textAlign:{...l,property:"justify-content"}}}),(t=>class extends t{get isLoading(){return"true"===this.getAttribute("loading")}click(){this.isLoading||super.click()}}),i.e4,i.Ae)((0,i.DM)({slots:["","prefix","label","suffix"],wrappedEleName:"vaadin-button",style:()=>`\n\t\t\t\n\t:host {\n\t\tdisplay: inline-block;\n\t\tbox-sizing: border-box;\n\t}\n\tvaadin-button::before,\n\tvaadin-button::after {\n\t\topacity: 0;\n\t}\n\tvaadin-button {\n\t\tmargin: 0;\n\t\tmin-width: 0;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tbox-shadow: none;\n\t}\n\tvaadin-button::part(label) {\n\t\tpadding: 0;\n    width: 100%;\n\t}\n\tvaadin-button::part(prefix) {\n\t\tmargin-left: 0;\n\t\tmargin-right: 0;\n\t}\n\n\t\t\t\n\tvaadin-button::part(prefix),\n\tvaadin-button::part(label) {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\n\t\t\t${d}\n\t\t\tvaadin-button::part(label) { pointer-events: none; }\n\t\t\t:host {\n\t\t\t\tpadding: calc(var(${p.cssVarList.outlineWidth}) + var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n      :host([full-width="true"]) {\n        width: var(${p.cssVarList.hostWidth});\n      }\n\t\t\tvaadin-button {\n\t\t\t\theight: calc(var(${p.cssVarList.hostHeight}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n\t\t\t}\n\t\t\t[square="true"]:not([full-width="true"]) {\n\t\t\t\twidth: calc(var(${p.cssVarList.hostWidth}) - var(${p.cssVarList.outlineWidth}) - var(${p.cssVarList.outlineOffset}));\n        padding: 0;\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:a})),{color:c,fontSize:b}=p.cssVarList;d=`\n\t@keyframes spin {\n\t\t0% { -webkit-transform: rotate(0deg); }\n\t\t100% { -webkit-transform: rotate(360deg); }\n\t}\n\t:host([loading="true"]) ::before {\n\t\tanimation: spin 2s linear infinite;\n\t\tposition: absolute;\n\t\tcontent: '';\n\t\tz-index: 1;\n\t\tbox-sizing: border-box;\n\t\tborder-radius: 50%;\n\t\tborder-bottom-color: transparent;\n\t\tborder-left-color: transparent;\n\t\tborder-style: solid;\n\t\tcolor: var(${c});\n\t\ttop: calc(50% - (var(${b}) / 2));\n\t\tleft: calc(50% - (var(${b}) / 2));\n\t\tborder-width: calc(var(${b}) / 10);\n\t\twidth: var(${b});\n\t\theight: var(${b});\n\t}\n\t:host([disabled="true"]),\n\t:host([loading="true"]) {\n\t\tpointer-events: none;\n\t}\n\t:host([loading="true"])::part(prefix),\n\t:host([loading="true"])::part(label) {\n\t\tvisibility: hidden;\n\t}\n`},2018:(t,n,e)=>{e.r(n),e.d(n,{ButtonClass:()=>o.n}),e(1721);var o=e(9690);customElements.define(o.f,o.n)}}]);

package/dist/umd/descope-text-area-index-js.js

@@ -1 +1 @@
-"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3322],{1962:(t,e,r)=>{r.r(e),r.d(e,{TextAreaClass:()=>b}),r(6770);var o=r(1e3),i=r(2061),p=r(4567),a=r(4201);const n=(0,p.iY)("text-area"),{host:l,label:s,placeholder:d,inputField:c,textArea:u,requiredIndicator:h,helperText:y,errorMessage:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"textarea:placeholder-shown"},inputField:{selector:"::part(input-field)"},textArea:{selector:"> textarea"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},b=(0,i.qC)((0,o.yk)({mappings:{hostWidth:{...l,property:"width"},hostMinWidth:{...l,property:"min-width"},hostDirection:{...l,property:"direction"},fontSize:[l,u],fontFamily:[s,c,y,x],labelTextColor:[{...s,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...x,property:"color"},inputBackgroundColor:{...c,property:"background-color"},inputValueTextColor:{...u,property:"color"},inputPlaceholderTextColor:{...d,property:"color"},inputBorderWidth:{...c,property:"border-width"},inputBorderStyle:{...c,property:"border-style"},inputBorderColor:{...c,property:"border-color"},inputBorderRadius:{...c,property:"border-radius"},inputOutlineStyle:{...c,property:"outline-Style"},inputOutlineColor:{...c,property:"outline-color"},inputOutlineOffset:{...c,property:"outline-offset"},inputOutlineWidth:{...c,property:"outline-width"},inputResizeType:{...u,property:"resize"},inputMinHeight:{...u,property:"min-height"}}}),o.e4,(0,o.dj)({proxyProps:["value","selectionStart"]}),o.Ae)((0,o.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n        box-sizing: border-box;\n\t\t\t}\n\t\t\ttextarea {\n\t\t\t\theight: 100%;\n\t\t\t}\n      ${(0,a.Wf)("vaadin-text-area")}\n\t\t\t${(0,a.bi)(b.cssVarList)}\n\t\t\t${(0,a.TX)("vaadin-text-area")}\n\t\t\t${(0,a.jl)("vaadin-text-area")}\n\t\t\t${(0,a.jI)("vaadin-text-area","textarea")}\n\t\t\t${(0,a.Pd)("vaadin-text-area")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:n}));customElements.define(n,b)}}]);
+"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3322],{1962:(t,e,r)=>{r.r(e),r.d(e,{TextAreaClass:()=>b}),r(6770);var o=r(1e3),i=r(2061),p=r(4567),a=r(4201);const n=(0,p.iY)("text-area"),{host:l,label:s,placeholder:d,inputField:c,textArea:u,requiredIndicator:h,helperText:y,errorMessage:x}={host:{selector:()=>":host"},label:{selector:"::part(label)"},placeholder:{selector:"textarea:placeholder-shown"},inputField:{selector:"::part(input-field)"},textArea:{selector:"> textarea"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},b=(0,i.qC)((0,o.yk)({mappings:{hostWidth:{...l,property:"width"},hostMinWidth:{...l,property:"min-width"},hostDirection:{...l,property:"direction"},fontSize:[l,u],fontFamily:[s,c,y,x],labelTextColor:[{...s,property:"color"},{...h,property:"color"}],labelRequiredIndicator:{...h,property:"content"},errorMessageTextColor:{...x,property:"color"},inputBackgroundColor:{...c,property:"background-color"},inputValueTextColor:{...u,property:"color"},inputPlaceholderTextColor:{...d,property:"color"},inputBorderWidth:{...c,property:"border-width"},inputBorderStyle:{...c,property:"border-style"},inputBorderColor:{...c,property:"border-color"},inputBorderRadius:{...c,property:"border-radius"},inputOutlineStyle:{...c,property:"outline-Style"},inputOutlineColor:{...c,property:"outline-color"},inputOutlineOffset:{...c,property:"outline-offset"},inputOutlineWidth:{...c,property:"outline-width"},inputResizeType:{...u,property:"resize"},inputMinHeight:{...u,property:"min-height"},inputTextAlign:{...u,property:"text-align"}}}),o.e4,(0,o.dj)({proxyProps:["value","selectionStart"]}),o.Ae)((0,o.DM)({slots:[],wrappedEleName:"vaadin-text-area",style:()=>`\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n\t\t\t\tmax-width: 100%;\n        box-sizing: border-box;\n\t\t\t}\n\t\t\ttextarea {\n\t\t\t\theight: 100%;\n\t\t\t}\n      ${(0,a.Wf)("vaadin-text-area")}\n\t\t\t${(0,a.bi)(b.cssVarList)}\n\t\t\t${(0,a.TX)("vaadin-text-area")}\n\t\t\t${(0,a.jl)("vaadin-text-area")}\n\t\t\t${(0,a.jI)("vaadin-text-area","textarea")}\n\t\t\t${(0,a.Pd)("vaadin-text-area")}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:n}));customElements.define(n,b)}}]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@descope/web-components-ui",
-  "version": "1.0.253",
+  "version": "1.0.254",
   "description": "",
   "main": "dist/cjs/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/descope-button/ButtonClass.js

@@ -28,6 +28,7 @@ const resetStyles = `
 	}
 	vaadin-button::part(label) {
 		padding: 0;
+    width: 100%;
 	}
 	vaadin-button::part(prefix) {
 		margin-left: 0;
@@ -39,7 +40,6 @@ const iconStyles = `
 	vaadin-button::part(prefix),
 	vaadin-button::part(label) {
 		display: flex;
-		justify-content: center;
 		align-items: center;
 	}
 `;
@@ -80,6 +80,7 @@ export const ButtonClass = compose(
       labelTextColor: { property: 'color' },
       labelTextDecoration: { ...label, property: 'text-decoration' },
       labelSpacing: { ...label, property: 'gap' },
+      textAlign: { ...label, property: 'justify-content' },
     },
   }),
   clickableMixin,

package/src/components/descope-text-area/TextAreaClass.js

@@ -65,6 +65,7 @@ export const TextAreaClass = compose(
       inputOutlineWidth: { ...inputField, property: 'outline-width' },
       inputResizeType: { ...textArea, property: 'resize' },
       inputMinHeight: { ...textArea, property: 'min-height' },
+      inputTextAlign: { ...textArea, property: 'text-align' },
     },
   }),
   draggableMixin,

package/src/theme/components/button.js

@@ -32,6 +32,13 @@ const button = {
 
   [compVars.labelSpacing]: '0.25em',
 
+  [compVars.textAlign]: 'center', // default text align center
+  textAlign: {
+    right: { [compVars.textAlign]: 'right' },
+    left: { [compVars.textAlign]: 'left' },
+    center: { [compVars.textAlign]: 'center' },
+  },
+
   [compVars.verticalPadding]: '1em',
 
   [compVars.outlineWidth]: globals.border.sm,

package/src/theme/components/textArea.js

@@ -28,6 +28,11 @@ const textArea = {
   [vars.inputOutlineOffset]: refs.outlineOffset,
   [vars.inputResizeType]: 'vertical',
   [vars.inputMinHeight]: '5em',
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
 
   _disabled: {
     [vars.inputBackgroundColor]: globalRefs.colors.surface.light,

package/src/theme/components/textField.js

@@ -25,6 +25,11 @@ export const textField = {
   [vars.inputBackgroundColor]: refs.backgroundColor,
   [vars.inputHeight]: refs.inputHeight,
   [vars.inputHorizontalPadding]: refs.horizontalPadding,
+  textAlign: {
+    right: { [vars.inputTextAlign]: 'right' },
+    left: { [vars.inputTextAlign]: 'left' },
+    center: { [vars.inputTextAlign]: 'center' },
+  },
 };
 
 export default textField;