@descope/web-components-ui 1.0.273 → 1.0.274
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +125 -90
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +2 -2
- package/dist/index.esm.js +172 -93
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/2481.js +1 -1
- package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/package.json +1 -1
- package/src/components/button-selection-group-fields/descope-button-selection-group-item/ButtonSelectionGroupItemClass.js +5 -0
- package/src/components/descope-grid/GridClass.js +7 -5
- package/src/components/descope-password/PasswordClass.js +2 -4
- package/src/darkTheme.js +48 -0
- package/src/helpers/themeHelpers/colorsHelpers.js +2 -0
- package/src/index.d.ts +2 -2
- package/src/index.js +1 -0
- package/src/theme/components/badge.js +1 -1
- package/src/theme/components/button.js +7 -5
- package/src/theme/components/buttonSelectionGroup/buttonSelectionGroupItem.js +9 -4
- package/src/theme/components/comboBox.js +1 -1
- package/src/theme/components/container.js +1 -1
- package/src/theme/components/divider.js +1 -1
- package/src/theme/components/grid.js +10 -10
- package/src/theme/components/inputWrapper.js +10 -10
- package/src/theme/components/loader/loaderLinear.js +1 -1
- package/src/theme/components/modal.js +1 -1
- package/src/theme/components/multiSelectComboBox.js +2 -2
- package/src/theme/components/password.js +1 -0
- package/src/theme/components/switchToggle.js +3 -4
- package/src/theme/components/text.js +2 -2
- package/src/theme/components/textArea.js +0 -7
- package/src/theme/globals.js +34 -8
package/dist/umd/2481.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2481],{2481:(t,e,r)=>{r.d(e,{v:()=>v,f:()=>p});var n=r(1e3),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:d,inputElement:l,inputElementPlaceholder:u,revealButtonContainer:c,revealButtonIcon:h,label:y,requiredIndicator:b,errorMessage:f,helperText:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonContainer:{selector:()=>"::part(reveal-button)"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},hostMinWidth:{...s,property:"min-width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[y,d,f,g],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[2481],{2481:(t,e,r)=>{r.d(e,{v:()=>v,f:()=>p});var n=r(1e3),o=r(2061),i=r(4567);var a=r(4201);const p=(0,i.iY)("password"),{host:s,inputField:d,inputElement:l,inputElementPlaceholder:u,revealButtonContainer:c,revealButtonIcon:h,label:y,requiredIndicator:b,errorMessage:f,helperText:g}={host:{selector:()=>":host"},inputField:{selector:"::part(input-field)"},inputElement:{selector:"> input"},inputElementPlaceholder:{selector:"> input:placeholder-shown"},revealButtonContainer:{selector:()=>"::part(reveal-button)"},revealButtonIcon:{selector:()=>"::part(reveal-button)::before"},label:{selector:"::part(label)"},requiredIndicator:{selector:"[required]::part(required-indicator)::after"},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},v=(0,o.qC)((0,n.yk)({mappings:{hostWidth:{...s,property:"width"},hostMinWidth:{...s,property:"min-width"},hostDirection:{...s,property:"direction"},fontSize:[{},s],fontFamily:[y,d,f,g],inputHeight:{...d,property:"height"},inputHorizontalPadding:[{...l,property:"padding-left"},{...l,property:"padding-right"}],inputBackgroundColor:{...d,property:"background-color"},inputBorderStyle:{...d,property:"border-style"},inputBorderWidth:{...d,property:"border-width"},inputBorderColor:{...d,property:"border-color"},inputBorderRadius:{...d,property:"border-radius"},inputOutlineColor:{...d,property:"outline-color"},inputOutlineStyle:{...d,property:"outline-style"},inputOutlineOffset:{...d,property:"outline-offset"},inputOutlineWidth:{...d,property:"outline-width"},labelTextColor:[{...y,property:"color"},{...b,property:"color"}],labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...l,property:"color"},inputPlaceholderTextColor:{...u,property:"color"},revealButtonOffset:[{...c,property:"margin-right"},{...c,property:"margin-left"}],revealButtonSize:{...c,property:"font-size"},revealButtonColor:{...h,property:"color"}}}),n.e4,(0,n.dj)({proxyProps:["value","selectionStart"]}),n.Ae,(t=>class extends t{get isReadOnly(){return this.hasAttribute("readonly")&&"false"!==this.getAttribute("readonly")}init(){this.addEventListener("mousedown",(t=>{if(this.isDraggable&&this.isReadOnly){const e=this.baseElement.querySelector("input"),r=e.getAttribute("type");e.setAttribute("type","text"),setTimeout((()=>e.focus()));const n=o=>{e.setAttribute("type",r),t.target.removeEventListener("mouseup",n),t.target.removeEventListener("dragend",n)};t.target.addEventListener("mouseup",n,{once:!0}),t.target.addEventListener("dragend",n,{once:!0})}})),super.init?.()}}))((0,n.DM)({slots:["","suffix"],wrappedEleName:"vaadin-password-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\tmin-width: 10em;\n box-sizing: border-box;\n\t\t\t}\n\t\t\t${(0,a.bi)(v.cssVarList)}\n\t\t\t${(0,a.Pd)("vaadin-password-field")}\n ${(0,a.Wf)("vaadin-password-field")}\n\n\t\t\tvaadin-password-field {\n\t\t\t\twidth: 100%;\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field) {\n\t\t\t\tbox-sizing: border-box;\n\t\t\t\tpadding: 0;\n\t\t\t}\n\t\t\tvaadin-password-field[focus-ring]::part(input-field) {\n\t\t\t\tbox-shadow: none;\n\t\t\t}\n\t\t\tvaadin-password-field > input {\n\t\t\t\tmin-height: 0;\n\t\t\t\t-webkit-mask-image: none;\n\t\t\t}\n\t\t\tvaadin-password-field[readonly] > input:placeholder-shown {\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t\tvaadin-password-field::before {\n\t\t\t\theight: initial;\n\t\t\t}\n\t\t\tvaadin-password-field::part(input-field)::after {\n\t\t\t\topacity: 0;\n\t\t\t}\n\t\t\tvaadin-password-field-button {\n\t\t\t\tcursor: pointer;\n\t\t\t}\n\n\t\t\t[readonly] vaadin-password-field-button {\n\t\t\t\tpointer-events: none;\n\t\t\t}\n\n\t\t\tvaadin-password-field-button[focus-ring] {\n\t\t\t\tbox-shadow: 0 0 0 2px var(${v.cssVarList.inputOutlineColor});\n\t\t\t}\n\t\t`,excludeAttrsSync:["tabindex"],componentName:p}))}}]);
|
package/dist/umd/button-selection-group-fields-descope-button-selection-group-item-index-js.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[6656],{4873:(t,e,o)=>{o.r(e),o.d(e,{ButtonSelectionGroupItemClass:()=>u});var s=o(1e3),n=o(2561),r=o(2061),i=o(4567),c=o(9690);const a=(0,i.iY)("button-selection-group-item");class l extends((0,n.s)({componentName:a,baseSelector:":host > descope-button"})){get size(){return this.getAttribute("size")||"md"}get variant(){return this.getAttribute("variant")||"contained"}get value(){return this.getAttribute("value")||""}set value(t){this.setAttribute("value",t)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=`\n\t\t<style>\n descope-button {\n max-width: 100%;\n }\n\t\t\tdescope-button > slot {\n\t\t\t\twidth: 100%;\n\t\t\t\toverflow: hidden;\n text-overflow: ellipsis;\n display: inline-block;\n\t\t\t}\n\t\t\t:host {\n\t\t\t\tdisplay: inline-block;\n max-width: 100%\n\t\t\t}\n\t\t</style>\n <descope-button variant="${this.variant}" size="${this.size}" mode="primary">\n <slot></slot>\n </descope-button>\n\t`,(0,i.oP)(this,this.baseElement,{includeAttrs:["size","variant"]}),(0,i.oP)(this.baseElement,this,{includeAttrs:["focused","active"]})}handleFocus(){this.shadowRoot.querySelector("descope-button")?.focus()}focus(){this.handleFocus()}init(){super.init(),this.addEventListener("focus",(t=>{t.isTrusted&&this.handleFocus()}))}}const u=(0,r.qC)((0,s.yk)({mappings:{hostDirection:{selector:()=>c.n.componentName,property:c.n.cssVarList.hostDirection},backgroundColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.backgroundColor},labelTextColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.labelTextColor},borderColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderColor},borderStyle:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderStyle},borderRadius:{selector:()=>c.n.componentName,property:c.n.cssVarList.borderRadius},outlineColor:{selector:()=>c.n.componentName,property:c.n.cssVarList.outlineColor}}}),s.e4,s.Ae)(l);o(2018),customElements.define(a,u)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,4803,7044],{818:(e,t,r)=>{r.d(t,{h:()=>i});var n=r(4567),o=r(1250);const i=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,n.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,n.Db)(this.inputElement,this,["checked"]),(0,n.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(e,t,r)=>{r.d(t,{Z:()=>n});const n=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n position: absolute;\n top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n align-self: flex-start;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n -webkit-mask-image: none;\n min-height: initial;\n}\n`},3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>f});var n=r(4567),o=r(2061),i=r(1e3),s=r(818),a=r(6882),l=r(4201);const d=(0,n.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:g,helperText:b,errorMessage:y}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,b,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...g,property:"content"},errorMessageTextColor:{...y,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...p,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n ${(0,l.bi)(f.cssVarList)}\n\n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n :host ::part(error-message) {\n direction: ltr;\n }\n\n vaadin-text-field {\n width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n height: 100%;\n }\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(checkbox)::after {\n top: 0;\n left: 0;\n }\n\n vaadin-text-field::part(input-field)::after {\n content: none;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:d}));r(3092),r(9789),r(6676),customElements.define(d,f)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var n=r(4567),o=r(7044);class i extends o.C{_defaultRenderer(e,t,r){const n=r.item[this.path]||"",o=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(n)}));if(!o)return void(e.innerHTML=r.item[this.path]||"");const i=o.cloneNode(!0);i.innerHTML=n||"",e.innerHTML="",e.append(i)}}const s=(0,n.iY)("grid-custom-column");customElements.define(s,i)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var n=r(4567),o=r(8623);const i=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},s=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class a extends o.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=i(),r.addEventListener("input",(()=>{const e=s(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",s(t))}_defaultRenderer(e,t,r){const n=e.parentNode;let o=e.querySelector("descope-checkbox");o||(o=i(),e.appendChild(o)),o.onchange=()=>{o.checked?n.selectItem(r.item):n.deselectItem(r.item)},o.setAttribute("checked",r.selected)}}const l=(0,n.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>o});var n=r(322);class o extends n.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const n=r.item[this.path]||"";e.innerHTML=n,e.title=n,Array.isArray(n)&&(e.innerHTML=n.join(", "))}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}},2356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var n=r(4567),o=r(7044);const i=(0,n.iY)("grid-text-column");customElements.define(i,o.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>f}),r(4595),r(2356),r(9278),r(2238);var n=r(2061),o=r(4567),i=r(1e3);const s=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,o.iY)("grid"),{host:l,headerRow:d,headerRowCell:c,contentRow:p,firstRow:h,sortIndicators:u,activeSortIndicator:m,selectedRow:g,rowSeparator:b,resizeHandle:y}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},headerRowCell:{selector:()=>"vaadin-grid::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,n.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...p}],fontSize:[{...d},{...p}],fontWeight:{...p},valueTextColor:{...p,property:"color"},backgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],sortIndicatorsColor:{...u,property:"color"},activeSortIndicator:{...m,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...g,property:"background-color"},selectedTextColor:{...g,property:"color"},headerRowTextColor:{...c,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...b,property:"border-top-color"}],resizeHandleColor:{...y,property:"background-color"}}}),i.e4,i.Ae,(e=>class extends e{#e;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(e=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:e.detail}))}))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"columns"===e&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#e=Array.from(this.children).map((e=>({path:e.getAttribute("path"),header:e.getAttribute("header"),type:e.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((t,r)=>{const n=e.getAttribute(r);return n&&(t[r]=n),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);s(e)&&(this.columns=e)}catch(e){console.error('could not parse data string from attribute "columns" -',e.message)}}#t=({path:e,header:t,type:r,attrs:n})=>{const o=`descope-grid-${r}-column`;return`<${o} header="${t}" path="${e}" ${Object.entries(n).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#t}set renderColumn(e){this.#t=e,this.renderColumns()}getColumnsTemplate(){return this.#e?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}renderColumns(){const e=this.getColumnsTemplate();e&&(this.innerHTML=e)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(e){if(s(e)&&this.grid.items!==e&&(this.grid.items=e,this.grid.selectedItems)){const e=new Set(this.grid.items.map((e=>e[this.uniqueColumnId]??e))),t=this.grid.selectedItems.filter((t=>e.has(t[this.uniqueColumnId]??t)));this.grid.selectedItems.length!==t.length&&(this.grid.selectedItems=t)}}get columns(){return this.#e}set columns(e){this.#e=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({delegatesFocus:!1,slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n vaadin-grid {\n overflow: hidden;\n height: 100%;\n min-height: 300px;\n }\n vaadin-grid-cell-content {\n display: flex;\n }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,3726,5988,7487,3705,4803,7044],{818:(e,t,r)=>{r.d(t,{h:()=>i});var n=r(4567),o=r(1250);const i=e=>class extends e{init(){super.init?.();const e=document.createElement("template");e.innerHTML=`\n\t\t\t\t<${o.f}\n\t\t\t\t\ttabindex="-1"\n\t\t\t\t\tslot="input"\n\t\t\t\t></${o.f}>\n\t\t\t`,this.baseElement.appendChild(e.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,n.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,n.Db)(this.inputElement,this,["checked"]),(0,n.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(e,t,r)=>{r.d(t,{Z:()=>n});const n=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,r(4201).DY)()}\n\n.wrapper {\n\tdisplay: flex;\n\tbox-sizing: border-box;\n}\nvaadin-text-field {\n\tposition: relative;\n\tpadding: 0;\n\tdisplay: inline-flex;\n\talign-items: flex-start;\n}\nvaadin-text-field::before {\n\theight: 0;\n\tmargin: 0;\n}\nvaadin-text-field::part(label) {\n position: absolute;\n top: 0;\n}\nvaadin-text-field::part(input-field) {\n\tpadding: 0;\n\tbackground: none;\n\tmin-height: 0;\n}\nvaadin-text-field::part(input-field)::after {\n background: none;\n}\nvaadin-text-field[focus-ring]::part(input-field) {\n\tbox-shadow: none;\n}\n\nvaadin-checkbox [slot="label"] {\n align-self: flex-start;\n padding: 0;\n}\n[required] vaadin-checkbox [slot="label"]:not(:empty) {\n\tpadding-inline-end: 1em;\n}\ndescope-boolean-field-internal {\n -webkit-mask-image: none;\n min-height: initial;\n}\n`},3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>f});var n=r(4567),o=r(2061),i=r(1e3),s=r(818),a=r(6882),l=r(4201);const d=(0,n.iY)("checkbox"),{host:c,component:p,checkboxElement:h,checkboxSurface:u,checkboxLabel:m,requiredIndicator:b,helperText:g,errorMessage:y}={host:{selector:()=>":host"},requiredIndicator:{selector:'[required] vaadin-checkbox [slot="label"]:not(:empty)::after'},component:{selector:"vaadin-checkbox"},checkboxElement:{selector:"vaadin-checkbox::part(checkbox)"},checkboxSurface:{selector:"vaadin-checkbox::part(checkbox)::after"},checkboxLabel:{selector:'vaadin-checkbox [slot="label"]:not(:empty)'},helperText:{selector:"::part(helper-text)"},errorMessage:{selector:"::part(error-message)"}},f=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,h,m],fontFamily:[m,g,y],labelTextColor:{...m,property:"color"},labelSpacing:{...m,property:"padding-inline-start"},labelLineHeight:{...m,property:"line-height"},labelFontWeight:{...m,property:"font-weight"},labelRequiredIndicator:{...b,property:"content"},errorMessageTextColor:{...y,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...h,property:"background-color"},inputBorderRadius:{...h,property:"border-radius"},inputBorderWidth:{...h,property:"border-width"},inputBorderOffset:{...h,property:"border-offset"},inputBorderColor:{...h,property:"border-color"},inputBorderStyle:{...h,property:"border-style"},inputOutlineWidth:{...h,property:"outline-width"},inputOutlineOffset:{...h,property:"outline-offset"},inputOutlineColor:{...h,property:"outline-color"},inputOutlineStyle:{...h,property:"outline-style"},inputSize:[{...h,property:"width"},{...h,property:"height"},{...u,property:"font-size"},{...p,property:"font-size"}]}}),i.e4,(0,i.dj)({proxyProps:["value","selectionStart"]}),i.Ae,s.h)((0,i.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n ${(0,l.bi)(f.cssVarList)}\n\n :host {\n\t\t\t\tdisplay: inline-flex;\n\t\t\t\tmax-width: 100%;\n }\n\n :host ::part(error-message) {\n direction: ltr;\n }\n\n vaadin-text-field {\n width: 100%;\n }\n\n descope-boolean-field-internal {\n\t\t\t\tpadding: 0;\n\t\t\t\twidth: 100%;\n height: 100%;\n }\n\n vaadin-checkbox::part(checkbox) {\n margin: 0;\n }\n\n vaadin-checkbox::part(checkbox)::after {\n top: 0;\n left: 0;\n }\n\n vaadin-text-field::part(input-field)::after {\n content: none;\n }\n `,excludeAttrsSync:["label","tabindex"],componentName:d}));r(3092),r(9789),r(6676),customElements.define(d,f)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>s});var n=r(4567),o=r(7044);class i extends o.C{_defaultRenderer(e,t,r){const n=r.item[this.path]||"",o=Array.from(this.children).find((e=>{const t=e.getAttribute("data-pattern");return!t||new RegExp(t).test(n)}));if(!o)return void(e.innerHTML=r.item[this.path]||"");const i=o.cloneNode(!0);i.innerHTML=n||"",e.innerHTML="",e.append(i)}}const s=(0,n.iY)("grid-custom-column");customElements.define(s,i)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var n=r(4567),o=r(8623);const i=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},s=e=>!!e.items?.length&&e.selectedItems.length===e.items.length;class a extends o.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=i(),r.addEventListener("input",(()=>{const e=s(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",s(t))}_defaultRenderer(e,t,r){const n=e.parentNode;let o=e.querySelector("descope-checkbox");o||(o=i(),e.appendChild(o)),o.onchange=()=>{o.checked?n.selectItem(r.item):n.deselectItem(r.item)},o.setAttribute("checked",r.selected)}}const l=(0,n.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>o});var n=r(322);class o extends n.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultRenderer(e,t,r){const n=r.item[this.path]||"";e.innerHTML=n,e.title=n,Array.isArray(n)&&(e.innerHTML=n.join(", "))}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}},2356:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var n=r(4567),o=r(7044);const i=(0,n.iY)("grid-text-column");customElements.define(i,o.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>f}),r(4595),r(2356),r(9278),r(2238);var n=r(2061),o=r(4567),i=r(1e3);const s=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,o.iY)("grid"),{host:l,headerRow:d,headerRowCell:c,contentRow:p,firstRow:h,sortIndicators:u,activeSortIndicator:m,selectedRow:b,rowSeparator:g,resizeHandle:y}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::part(header-cell)"},headerRowCell:{selector:()=>"vaadin-grid::part(header-cell)"},contentRow:{selector:()=>"::part(cell)"},firstRow:{selector:()=>"::part(first-header-row-cell)"},selectedRow:{selector:()=>"::part(selected-row-cell)"},sortIndicators:{selector:()=>"vaadin-grid-sorter::part(indicators)"},activeSortIndicator:{selector:()=>"vaadin-grid-sorter[direction]"},rowSeparator:{selector:()=>"vaadin-grid::part(body-cell)"},resizeHandle:{selector:()=>"::part(resize-handle)"}},f=(0,n.qC)((0,i.yk)({componentNameOverride:(0,o.iY)("input-wrapper")}),(0,i.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...p}],fontSize:[{...d},{...p}],fontWeight:{...p},valueTextColor:{...p,property:"color"},backgroundColor:[{...l,property:"background-color"},{...p,property:"background-color"}],sortIndicatorsColor:{...u,property:"color"},activeSortIndicator:{...m,property:"color"},borderColor:{...l,property:"border-color"},borderWidth:{...l,property:"border-width"},borderStyle:{...l,property:"border-style"},borderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...b,property:"background-color"},headerRowTextColor:{...c,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...g,property:"border-top-color"}],resizeHandleColor:{...y,property:"background-color"}}}),i.e4,i.Ae,(e=>class extends e{#e;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(e=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:e.detail}))}))}attributeChangedCallback(e,t,r){super.attributeChangedCallback?.(e,t,r),"columns"===e&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#e=Array.from(this.children).map((e=>({path:e.getAttribute("path"),header:e.getAttribute("header"),type:e.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((t,r)=>{const n=e.getAttribute(r);return n&&(t[r]=n),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);s(e)&&(this.columns=e)}catch(e){console.error('could not parse data string from attribute "columns" -',e.message)}}#t=({path:e,header:t,type:r,attrs:n})=>{const o=`descope-grid-${r}-column`;return`<${o} header="${t}" path="${e}" ${Object.entries(n).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#t}set renderColumn(e){this.#t=e,this.renderColumns()}getColumnsTemplate(){return this.#e?.reduce?.(((e,t)=>e+(this.renderColumn?.(t||{})||"")),"")}renderColumns(){const e=this.getColumnsTemplate();e&&(this.innerHTML=e)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(e){if(s(e)&&this.grid.items!==e&&(this.grid.items=e,this.grid.selectedItems)){const e=new Set(this.grid.items.map((e=>e[this.uniqueColumnId]??e))),t=this.grid.selectedItems.filter((t=>e.has(t[this.uniqueColumnId]??t)));this.grid.selectedItems.length!==t.length&&(this.grid.selectedItems=t)}}get columns(){return this.#e}set columns(e){this.#e=e,this.renderColumns()}get paths(){return this.columns.map((e=>e.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({delegatesFocus:!1,slots:[""],wrappedEleName:"vaadin-grid",style:()=>"\n vaadin-grid {\n overflow: hidden;\n height: 100%;\n min-height: 300px;\n }\n vaadin-grid-cell-content {\n display: flex;\n }\n vaadin-grid::part(selected-row-cell) {\n background-image: none;\n }\n\t\t",excludeAttrsSync:["columns","tabindex"],componentName:a}));customElements.define(a,f)}}]);
|
package/package.json
CHANGED
@@ -51,6 +51,7 @@ class RawSelectItem extends createBaseClass({
|
|
51
51
|
`;
|
52
52
|
|
53
53
|
forwardAttrs(this, this.baseElement, { includeAttrs: ['size', 'variant'] });
|
54
|
+
forwardAttrs(this.baseElement, this, { includeAttrs: ['focused', 'active'] });
|
54
55
|
}
|
55
56
|
|
56
57
|
handleFocus() {
|
@@ -99,6 +100,10 @@ export const ButtonSelectionGroupItemClass = compose(
|
|
99
100
|
selector: () => ButtonClass.componentName,
|
100
101
|
property: ButtonClass.cssVarList.borderRadius,
|
101
102
|
},
|
103
|
+
outlineColor: {
|
104
|
+
selector: () => ButtonClass.componentName,
|
105
|
+
property: ButtonClass.cssVarList.outlineColor,
|
106
|
+
},
|
102
107
|
},
|
103
108
|
}),
|
104
109
|
draggableMixin,
|
@@ -209,12 +209,11 @@ export const GridClass = compose(
|
|
209
209
|
],
|
210
210
|
sortIndicatorsColor: { ...sortIndicators, property: 'color' },
|
211
211
|
activeSortIndicator: { ...activeSortIndicator, property: 'color' },
|
212
|
-
|
213
|
-
|
214
|
-
|
215
|
-
|
212
|
+
borderColor: { ...host, property: 'border-color' },
|
213
|
+
borderWidth: { ...host, property: 'border-width' },
|
214
|
+
borderStyle: { ...host, property: 'border-style' },
|
215
|
+
borderRadius: { ...host, property: 'border-radius' },
|
216
216
|
selectedBackgroundColor: { ...selectedRow, property: 'background-color' },
|
217
|
-
selectedTextColor: { ...selectedRow, property: 'color' },
|
218
217
|
headerRowTextColor: { ...headerRowCell, property: 'color' },
|
219
218
|
separatorColor: [
|
220
219
|
{ ...firstRow, property: 'border-bottom-color' },
|
@@ -239,6 +238,9 @@ export const GridClass = compose(
|
|
239
238
|
}
|
240
239
|
vaadin-grid-cell-content {
|
241
240
|
display: flex;
|
241
|
+
}
|
242
|
+
vaadin-grid::part(selected-row-cell) {
|
243
|
+
background-image: none;
|
242
244
|
}
|
243
245
|
`,
|
244
246
|
excludeAttrsSync: ['columns', 'tabindex'],
|
@@ -72,10 +72,7 @@ export const PasswordClass = compose(
|
|
72
72
|
labelRequiredIndicator: { ...requiredIndicator, property: 'content' },
|
73
73
|
errorMessageTextColor: { ...errorMessage, property: 'color' },
|
74
74
|
|
75
|
-
inputValueTextColor:
|
76
|
-
{ ...inputElement, property: 'color' },
|
77
|
-
{ ...revealButtonIcon, property: 'color' },
|
78
|
-
],
|
75
|
+
inputValueTextColor: { ...inputElement, property: 'color' },
|
79
76
|
inputPlaceholderTextColor: { ...inputElementPlaceholder, property: 'color' },
|
80
77
|
|
81
78
|
revealButtonOffset: [
|
@@ -83,6 +80,7 @@ export const PasswordClass = compose(
|
|
83
80
|
{ ...revealButtonContainer, property: 'margin-left' },
|
84
81
|
],
|
85
82
|
revealButtonSize: { ...revealButtonContainer, property: 'font-size' },
|
83
|
+
revealButtonColor: { ...revealButtonIcon, property: 'color' },
|
86
84
|
},
|
87
85
|
}),
|
88
86
|
draggableMixin,
|
package/src/darkTheme.js
ADDED
@@ -0,0 +1,48 @@
|
|
1
|
+
import merge from 'lodash.merge';
|
2
|
+
import { defaultTheme } from './theme';
|
3
|
+
|
4
|
+
export const colors = {
|
5
|
+
surface: {
|
6
|
+
main: '#181a1c',
|
7
|
+
dark: '#bec4ca',
|
8
|
+
light: '#555f68',
|
9
|
+
highlight: '#22262a',
|
10
|
+
contrast: '#f5f6f7',
|
11
|
+
},
|
12
|
+
primary: {
|
13
|
+
main: '#1f80ff',
|
14
|
+
dark: '#71aeff',
|
15
|
+
light: '#004094',
|
16
|
+
highlight: '#00214d',
|
17
|
+
contrast: '#000000',
|
18
|
+
},
|
19
|
+
secondary: {
|
20
|
+
main: '#a665eb',
|
21
|
+
dark: '#b9a0f3',
|
22
|
+
light: '#683ae6',
|
23
|
+
highlight: '#361299',
|
24
|
+
contrast: '#000000',
|
25
|
+
},
|
26
|
+
success: {
|
27
|
+
main: '#27963c',
|
28
|
+
dark: '#8bc3a2',
|
29
|
+
light: '#004d0f',
|
30
|
+
highlight: '#001f00',
|
31
|
+
contrast: '#000000',
|
32
|
+
},
|
33
|
+
error: {
|
34
|
+
main: '#f85249',
|
35
|
+
dark: '#fa7c75',
|
36
|
+
light: '#c51107',
|
37
|
+
highlight: '#4a0603',
|
38
|
+
contrast: '#000000',
|
39
|
+
},
|
40
|
+
};
|
41
|
+
|
42
|
+
const darkTheme = merge({}, defaultTheme, {
|
43
|
+
globals: {
|
44
|
+
colors,
|
45
|
+
},
|
46
|
+
});
|
47
|
+
|
48
|
+
export default darkTheme;
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import Color from 'color';
|
2
2
|
|
3
|
+
// TODO: fix generated colors strategy
|
3
4
|
const genDark = (c, percentage = 0.5) => c.darken(percentage).hex();
|
4
5
|
const genLight = (c, percentage = 0.5) => c.lighten(percentage).hex();
|
5
6
|
const genContrast = (c, percentage = 0.9) => {
|
@@ -17,6 +18,7 @@ export const genColor = (color) => {
|
|
17
18
|
main: mainColor.hex(),
|
18
19
|
dark: color.dark || genDark(mainColor),
|
19
20
|
light: color.light || genLight(mainColor),
|
21
|
+
highlight: color.highlight || genLight(mainColor),
|
20
22
|
contrast: color.contrast || genContrast(mainColor),
|
21
23
|
};
|
22
24
|
};
|
package/src/index.d.ts
CHANGED
@@ -7,8 +7,8 @@ export {
|
|
7
7
|
componentsThemeManager,
|
8
8
|
} from './helpers/themeHelpers';
|
9
9
|
export { genColor } from './helpers/themeHelpers/colorsHelpers';
|
10
|
-
export { defaultTheme, themeVars } from './
|
11
|
-
|
10
|
+
export { defaultTheme, themeVars } from './defaultTheme';
|
11
|
+
export { default as darkTheme } from './darkTheme';
|
12
12
|
export { ButtonClass } from './components/descope-button';
|
13
13
|
export { CheckboxClass } from './components/boolean-fields/descope-checkbox';
|
14
14
|
export { SwitchToggleClass } from './components/boolean-fields/descope-switch-toggle';
|
package/src/index.js
CHANGED
@@ -69,10 +69,10 @@ const button = {
|
|
69
69
|
},
|
70
70
|
|
71
71
|
_disabled: {
|
72
|
-
[helperVars.main]: globalRefs.colors.surface.
|
72
|
+
[helperVars.main]: globalRefs.colors.surface.light,
|
73
73
|
[helperVars.dark]: globalRefs.colors.surface.dark,
|
74
74
|
[helperVars.light]: globalRefs.colors.surface.light,
|
75
|
-
[helperVars.contrast]: globalRefs.colors.surface.
|
75
|
+
[helperVars.contrast]: globalRefs.colors.surface.main,
|
76
76
|
},
|
77
77
|
|
78
78
|
variant: {
|
@@ -92,12 +92,14 @@ const button = {
|
|
92
92
|
|
93
93
|
outline: {
|
94
94
|
[compVars.labelTextColor]: helperRefs.main,
|
95
|
-
[compVars.borderColor]:
|
95
|
+
[compVars.borderColor]: helperRefs.main,
|
96
96
|
_hover: {
|
97
97
|
[compVars.labelTextColor]: helperRefs.dark,
|
98
|
+
[compVars.borderColor]: helperRefs.dark,
|
98
99
|
},
|
99
100
|
_active: {
|
100
101
|
[compVars.labelTextColor]: helperRefs.main,
|
102
|
+
[compVars.borderColor]: helperRefs.main,
|
101
103
|
},
|
102
104
|
},
|
103
105
|
|
@@ -108,13 +110,13 @@ const button = {
|
|
108
110
|
[compVars.labelTextDecoration]: 'underline',
|
109
111
|
},
|
110
112
|
_active: {
|
111
|
-
[compVars.labelTextColor]: helperRefs.
|
113
|
+
[compVars.labelTextColor]: helperRefs.main,
|
112
114
|
},
|
113
115
|
},
|
114
116
|
},
|
115
117
|
|
116
118
|
_focused: {
|
117
|
-
[compVars.outlineColor]:
|
119
|
+
[compVars.outlineColor]: helperRefs.light,
|
118
120
|
},
|
119
121
|
};
|
120
122
|
|
@@ -8,20 +8,25 @@ export const vars = ButtonSelectionGroupItemClass.cssVarList;
|
|
8
8
|
|
9
9
|
const buttonSelectionGroupItem = {
|
10
10
|
[vars.hostDirection]: 'inherit',
|
11
|
-
[vars.backgroundColor]: globalRefs.colors.surface.
|
11
|
+
[vars.backgroundColor]: globalRefs.colors.surface.main,
|
12
12
|
[vars.labelTextColor]: globalRefs.colors.surface.contrast,
|
13
|
-
[vars.borderColor]: globalRefs.colors.surface.
|
13
|
+
[vars.borderColor]: globalRefs.colors.surface.light,
|
14
14
|
[vars.borderStyle]: 'solid',
|
15
15
|
[vars.borderRadius]: globalRefs.radius.sm,
|
16
|
+
[vars.outlineColor]: 'transparent',
|
16
17
|
|
17
18
|
_hover: {
|
18
|
-
[vars.backgroundColor]:
|
19
|
+
[vars.backgroundColor]: globalRefs.colors.surface.highlight,
|
20
|
+
},
|
21
|
+
|
22
|
+
_focused: {
|
23
|
+
[vars.outlineColor]: globalRefs.colors.surface.light,
|
19
24
|
},
|
20
25
|
|
21
26
|
_selected: {
|
22
27
|
[vars.borderColor]: globalRefs.colors.surface.contrast,
|
23
28
|
[vars.backgroundColor]: globalRefs.colors.surface.contrast,
|
24
|
-
[vars.labelTextColor]: globalRefs.colors.surface.
|
29
|
+
[vars.labelTextColor]: globalRefs.colors.surface.main,
|
25
30
|
},
|
26
31
|
};
|
27
32
|
|
@@ -27,7 +27,7 @@ export const comboBox = {
|
|
27
27
|
[vars.inputBackgroundColor]: refs.backgroundColor,
|
28
28
|
[vars.inputHorizontalPadding]: refs.horizontalPadding,
|
29
29
|
[vars.inputHeight]: refs.inputHeight,
|
30
|
-
[vars.inputDropdownButtonColor]: globalRefs.colors.surface.
|
30
|
+
[vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
|
31
31
|
[vars.inputDropdownButtonCursor]: 'pointer',
|
32
32
|
[vars.inputDropdownButtonSize]: refs.toggleButtonSize,
|
33
33
|
[vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
@@ -34,7 +34,7 @@ const container = {
|
|
34
34
|
|
35
35
|
[compVars.hostWidth]: '100%',
|
36
36
|
[compVars.boxShadow]: 'none',
|
37
|
-
[compVars.backgroundColor]: globalRefs.colors.surface.
|
37
|
+
[compVars.backgroundColor]: globalRefs.colors.surface.main,
|
38
38
|
[compVars.color]: globalRefs.colors.surface.contrast,
|
39
39
|
[compVars.borderRadius]: '0px',
|
40
40
|
[compVars.hostDirection]: globalRefs.direction,
|
@@ -21,7 +21,7 @@ const divider = {
|
|
21
21
|
[compVars.flexDirection]: 'row',
|
22
22
|
[compVars.alignSelf]: 'stretch',
|
23
23
|
[compVars.hostWidth]: '100%',
|
24
|
-
[compVars.stripeColor]: globalRefs.colors.surface.
|
24
|
+
[compVars.stripeColor]: globalRefs.colors.surface.light,
|
25
25
|
[compVars.stripeColorOpacity]: '0.5',
|
26
26
|
[compVars.stripeHorizontalThickness]: helperRefs.thickness,
|
27
27
|
[compVars.labelTextWidth]: 'fit-content',
|
@@ -11,28 +11,28 @@ export const grid = {
|
|
11
11
|
[vars.hostHeight]: '100%',
|
12
12
|
[vars.hostMinHeight]: '400px',
|
13
13
|
[vars.fontWeight]: '400',
|
14
|
-
[vars.backgroundColor]: globalRefs.colors.surface.
|
14
|
+
[vars.backgroundColor]: globalRefs.colors.surface.main,
|
15
15
|
|
16
16
|
[vars.fontSize]: refs.fontSize,
|
17
17
|
[vars.fontFamily]: refs.fontFamily,
|
18
18
|
|
19
|
-
[vars.sortIndicatorsColor]: globalRefs.colors.surface.
|
19
|
+
[vars.sortIndicatorsColor]: globalRefs.colors.surface.light,
|
20
20
|
[vars.activeSortIndicator]: globalRefs.colors.surface.dark,
|
21
|
-
[vars.resizeHandleColor]: globalRefs.colors.surface.
|
21
|
+
[vars.resizeHandleColor]: globalRefs.colors.surface.light,
|
22
22
|
|
23
|
-
[vars.
|
24
|
-
[vars.
|
25
|
-
[vars.
|
26
|
-
[vars.
|
23
|
+
[vars.borderWidth]: refs.borderWidth,
|
24
|
+
[vars.borderStyle]: refs.borderStyle,
|
25
|
+
[vars.borderRadius]: refs.borderRadius,
|
26
|
+
[vars.borderColor]: 'transparent',
|
27
27
|
|
28
28
|
[vars.headerRowTextColor]: globalRefs.colors.surface.dark,
|
29
|
-
[vars.separatorColor]: globalRefs.colors.surface.
|
29
|
+
[vars.separatorColor]: globalRefs.colors.surface.light,
|
30
30
|
|
31
31
|
[vars.valueTextColor]: globalRefs.colors.surface.contrast,
|
32
|
-
[vars.selectedBackgroundColor]: globalRefs.colors.
|
32
|
+
[vars.selectedBackgroundColor]: globalRefs.colors.surface.highlight,
|
33
33
|
|
34
34
|
_bordered: {
|
35
|
-
[vars.
|
35
|
+
[vars.borderColor]: refs.borderColor,
|
36
36
|
},
|
37
37
|
};
|
38
38
|
|
@@ -7,9 +7,9 @@ const globalRefs = getThemeRefs(globals);
|
|
7
7
|
|
8
8
|
const [theme, refs, vars] = createHelperVars(
|
9
9
|
{
|
10
|
-
labelTextColor: globalRefs.colors.surface.
|
10
|
+
labelTextColor: globalRefs.colors.surface.dark,
|
11
11
|
valueTextColor: globalRefs.colors.surface.contrast,
|
12
|
-
placeholderTextColor: globalRefs.colors.surface.
|
12
|
+
placeholderTextColor: globalRefs.colors.surface.dark,
|
13
13
|
requiredIndicator: "'*'",
|
14
14
|
errorMessageTextColor: globalRefs.colors.error.main,
|
15
15
|
|
@@ -28,7 +28,7 @@ const [theme, refs, vars] = createHelperVars(
|
|
28
28
|
horizontalPadding: '0.5em',
|
29
29
|
verticalPadding: '0.5em',
|
30
30
|
|
31
|
-
backgroundColor: globalRefs.colors.surface.
|
31
|
+
backgroundColor: globalRefs.colors.surface.main,
|
32
32
|
|
33
33
|
fontFamily: globalRefs.fonts.font1.family,
|
34
34
|
|
@@ -48,7 +48,7 @@ const [theme, refs, vars] = createHelperVars(
|
|
48
48
|
},
|
49
49
|
|
50
50
|
_focused: {
|
51
|
-
outlineColor: globalRefs.colors.surface.
|
51
|
+
outlineColor: globalRefs.colors.surface.light,
|
52
52
|
_invalid: {
|
53
53
|
outlineColor: globalRefs.colors.error.main,
|
54
54
|
},
|
@@ -56,7 +56,7 @@ const [theme, refs, vars] = createHelperVars(
|
|
56
56
|
|
57
57
|
_bordered: {
|
58
58
|
outlineWidth: globalRefs.border.xs,
|
59
|
-
borderColor: globalRefs.colors.surface.
|
59
|
+
borderColor: globalRefs.colors.surface.light,
|
60
60
|
borderStyle: 'solid',
|
61
61
|
_invalid: {
|
62
62
|
borderColor: globalRefs.colors.error.main,
|
@@ -64,11 +64,11 @@ const [theme, refs, vars] = createHelperVars(
|
|
64
64
|
},
|
65
65
|
|
66
66
|
_disabled: {
|
67
|
-
labelTextColor: globalRefs.colors.surface.
|
68
|
-
borderColor: globalRefs.colors.surface.
|
69
|
-
valueTextColor: globalRefs.colors.surface.
|
70
|
-
placeholderTextColor: globalRefs.colors.surface.
|
71
|
-
backgroundColor: globalRefs.colors.surface.
|
67
|
+
labelTextColor: globalRefs.colors.surface.light,
|
68
|
+
borderColor: globalRefs.colors.surface.light,
|
69
|
+
valueTextColor: globalRefs.colors.surface.light,
|
70
|
+
placeholderTextColor: globalRefs.colors.surface.light,
|
71
|
+
backgroundColor: globalRefs.colors.surface.main,
|
72
72
|
},
|
73
73
|
},
|
74
74
|
componentName
|
@@ -12,7 +12,7 @@ const loaderLinear = {
|
|
12
12
|
[vars.barColor]: globalRefs.colors.surface.contrast,
|
13
13
|
[vars.barWidth]: '20%',
|
14
14
|
|
15
|
-
[vars.barBackgroundColor]: globalRefs.colors.surface.
|
15
|
+
[vars.barBackgroundColor]: globalRefs.colors.surface.light,
|
16
16
|
[vars.barBorderRadius]: '4px',
|
17
17
|
|
18
18
|
[vars.animationDuration]: '2s',
|
@@ -7,7 +7,7 @@ const globalRefs = getThemeRefs(globals);
|
|
7
7
|
const compVars = ModalClass.cssVarList;
|
8
8
|
|
9
9
|
const modal = {
|
10
|
-
[compVars.overlayBackgroundColor]: globalRefs.colors.surface.
|
10
|
+
[compVars.overlayBackgroundColor]: globalRefs.colors.surface.main,
|
11
11
|
[compVars.overlayShadow]: globalRefs.shadow.wide['2xl'],
|
12
12
|
[compVars.overlayWidth]: '540px',
|
13
13
|
};
|
@@ -28,7 +28,7 @@ export const multiSelectComboBox = {
|
|
28
28
|
[vars.inputHorizontalPadding]: refs.horizontalPadding,
|
29
29
|
[vars.inputVerticalPadding]: refs.verticalPadding,
|
30
30
|
[vars.inputHeight]: refs.inputHeight,
|
31
|
-
[vars.inputDropdownButtonColor]: globalRefs.colors.surface.
|
31
|
+
[vars.inputDropdownButtonColor]: globalRefs.colors.surface.dark,
|
32
32
|
[vars.inputDropdownButtonCursor]: 'pointer',
|
33
33
|
[vars.inputDropdownButtonSize]: refs.toggleButtonSize,
|
34
34
|
[vars.inputDropdownButtonOffset]: globalRefs.spacing.xs,
|
@@ -36,7 +36,7 @@ export const multiSelectComboBox = {
|
|
36
36
|
[vars.overlayItemPaddingInlineEnd]: globalRefs.spacing.lg,
|
37
37
|
[vars.chipFontSize]: refs.chipFontSize,
|
38
38
|
[vars.chipTextColor]: globalRefs.colors.surface.contrast,
|
39
|
-
[vars.chipBackgroundColor]: globalRefs.colors.surface.
|
39
|
+
[vars.chipBackgroundColor]: globalRefs.colors.surface.light,
|
40
40
|
|
41
41
|
_readonly: {
|
42
42
|
[vars.inputDropdownButtonCursor]: 'default',
|
@@ -29,6 +29,7 @@ const password = {
|
|
29
29
|
[vars.inputOutlineOffset]: refs.outlineOffset,
|
30
30
|
[vars.revealButtonOffset]: globalRefs.spacing.md,
|
31
31
|
[vars.revealButtonSize]: refs.toggleButtonSize,
|
32
|
+
[vars.revealButtonColor]: refs.placeholderTextColor,
|
32
33
|
};
|
33
34
|
|
34
35
|
export default password;
|
@@ -23,7 +23,7 @@ const switchToggle = {
|
|
23
23
|
[vars.trackBorderStyle]: refs.borderStyle,
|
24
24
|
[vars.trackBorderWidth]: refs.borderWidth, // var `trackBorderWidth` used outside the theme for `left` margin calculation
|
25
25
|
[vars.trackBorderColor]: refs.borderColor,
|
26
|
-
[vars.trackBackgroundColor]:
|
26
|
+
[vars.trackBackgroundColor]: refs.backgroundColor,
|
27
27
|
[vars.trackBorderRadius]: globalRefs.radius.md,
|
28
28
|
[vars.trackWidth]: '2.5em', // var `trackWidth` used outside the theme for `left` margin calculation
|
29
29
|
[vars.trackHeight]: checkboxHeight,
|
@@ -32,7 +32,7 @@ const switchToggle = {
|
|
32
32
|
[vars.knobRadius]: '50%',
|
33
33
|
[vars.knobTopOffset]: '1px',
|
34
34
|
[vars.knobLeftOffset]: knobMargin,
|
35
|
-
[vars.knobColor]: refs.
|
35
|
+
[vars.knobColor]: refs.labelTextColor,
|
36
36
|
[vars.knobTransitionDuration]: '0.3s',
|
37
37
|
|
38
38
|
[vars.labelTextColor]: refs.labelTextColor,
|
@@ -44,7 +44,6 @@ const switchToggle = {
|
|
44
44
|
|
45
45
|
_checked: {
|
46
46
|
[vars.trackBorderColor]: refs.borderColor,
|
47
|
-
[vars.trackBackgroundColor]: refs.backgroundColor,
|
48
47
|
[vars.knobLeftOffset]: `calc(100% - var(${vars.knobSize}) - ${knobMargin})`,
|
49
48
|
[vars.knobColor]: refs.valueTextColor,
|
50
49
|
[vars.knobTextColor]: refs.valueTextColor,
|
@@ -52,7 +51,7 @@ const switchToggle = {
|
|
52
51
|
|
53
52
|
_disabled: {
|
54
53
|
[vars.knobColor]: globalRefs.colors.surface.light,
|
55
|
-
[vars.trackBorderColor]: globalRefs.colors.surface.
|
54
|
+
[vars.trackBorderColor]: globalRefs.colors.surface.light,
|
56
55
|
[vars.trackBackgroundColor]: globalRefs.colors.surface.main,
|
57
56
|
[vars.labelTextColor]: refs.labelTextColor,
|
58
57
|
_checked: {
|
@@ -50,10 +50,10 @@ const text = {
|
|
50
50
|
|
51
51
|
mode: {
|
52
52
|
primary: {
|
53
|
-
[vars.textColor]: globalRefs.colors.
|
53
|
+
[vars.textColor]: globalRefs.colors.surface.contrast,
|
54
54
|
},
|
55
55
|
secondary: {
|
56
|
-
[vars.textColor]: globalRefs.colors.
|
56
|
+
[vars.textColor]: globalRefs.colors.surface.dark,
|
57
57
|
},
|
58
58
|
error: {
|
59
59
|
[vars.textColor]: globalRefs.colors.error.main,
|
@@ -1,9 +1,6 @@
|
|
1
|
-
import globals from '../globals';
|
2
|
-
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
1
|
import { TextAreaClass } from '../../components/descope-text-area/TextAreaClass';
|
4
2
|
import { refs } from './inputWrapper';
|
5
3
|
|
6
|
-
const globalRefs = getThemeRefs(globals);
|
7
4
|
const vars = TextAreaClass.cssVarList;
|
8
5
|
|
9
6
|
const textArea = {
|
@@ -34,10 +31,6 @@ const textArea = {
|
|
34
31
|
center: { [vars.inputTextAlign]: 'center' },
|
35
32
|
},
|
36
33
|
|
37
|
-
_disabled: {
|
38
|
-
[vars.inputBackgroundColor]: globalRefs.colors.surface.light,
|
39
|
-
},
|
40
|
-
|
41
34
|
_readonly: {
|
42
35
|
[vars.inputResizeType]: 'none',
|
43
36
|
},
|
package/src/theme/globals.js
CHANGED
@@ -5,14 +5,40 @@ const direction = 'ltr';
|
|
5
5
|
|
6
6
|
export const colors = genColors({
|
7
7
|
surface: {
|
8
|
-
main: '
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
8
|
+
main: '#ffffff',
|
9
|
+
dark: '#636c74',
|
10
|
+
light: '#cfd3d7',
|
11
|
+
highlight: '#f4f5f6',
|
12
|
+
contrast: '#181a1c',
|
13
|
+
},
|
14
|
+
primary: {
|
15
|
+
main: '#006af5',
|
16
|
+
dark: '#004094',
|
17
|
+
light: '#71aeff',
|
18
|
+
highlight: '#f0f6ff',
|
19
|
+
contrast: '#ffffff',
|
20
|
+
},
|
21
|
+
secondary: {
|
22
|
+
main: '#802ed6',
|
23
|
+
dark: '#6410bc',
|
24
|
+
light: '#be89f5',
|
25
|
+
highlight: '#ede7f6',
|
26
|
+
contrast: '#ffffff',
|
27
|
+
},
|
28
|
+
success: {
|
29
|
+
main: '#008000',
|
30
|
+
dark: '#005700',
|
31
|
+
light: '#8bc38b',
|
32
|
+
highlight: '#f5faf5',
|
33
|
+
contrast: '#ffffff',
|
34
|
+
},
|
35
|
+
error: {
|
36
|
+
main: '#e21d12',
|
37
|
+
dark: '#b3170f',
|
38
|
+
light: '#f4807a',
|
39
|
+
highlight: '#fef1f1',
|
40
|
+
contrast: '#ffffff',
|
41
|
+
},
|
16
42
|
});
|
17
43
|
|
18
44
|
const fonts = {
|