@descope/web-components-ui 1.0.235 → 1.0.237
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/cjs/index.cjs.js +770 -647
- package/dist/cjs/index.cjs.js.map +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +796 -643
- package/dist/index.esm.js.map +1 -1
- package/dist/umd/7044.js +1 -0
- package/dist/umd/descope-badge-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-custom-column-index-js.js +1 -0
- package/dist/umd/descope-grid-descope-grid-selection-column-index-js.js +1 -1
- package/dist/umd/descope-grid-descope-grid-text-column-index-js.js +1 -1
- package/dist/umd/descope-grid-index-js.js +1 -1
- package/dist/umd/index.js +1 -1
- package/package.json +1 -1
- package/src/components/descope-badge/BadgeClass.js +54 -0
- package/src/components/descope-badge/index.js +5 -0
- package/src/components/descope-grid/descope-grid-custom-column/GridCustomColumnClass.js +31 -0
- package/src/components/descope-grid/descope-grid-custom-column/index.js +7 -0
- package/src/components/descope-grid/descope-grid-selection-column/GridSelectionColumnClass.js +57 -0
- package/src/components/descope-grid/descope-grid-selection-column/index.js +1 -56
- package/src/components/descope-grid/descope-grid-text-column/GridTextColumnClass.js +18 -0
- package/src/components/descope-grid/descope-grid-text-column/index.js +1 -10
- package/src/components/descope-grid/index.js +1 -1
- package/src/index.cjs.js +1 -0
- package/src/index.d.ts +1 -0
- package/src/theme/components/badge.js +71 -0
- package/src/theme/components/index.js +2 -0
- package/dist/umd/descope-grid-descope-grid-status-column-index-js.js +0 -1
- package/src/components/descope-grid/descope-grid-status-column/index.js +0 -25
package/dist/umd/7044.js
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7044],{7044:(e,t,r)=>{r.d(t,{C:()=>a});var s=r(322);class a extends s.n{get sortable(){return"true"===this.getAttribute("sortable")}_defaultHeaderRenderer(e,t){this.sortable?super._defaultHeaderRenderer(e,t):e.innerHTML=this.__getHeader(this.header,this.path)}}}}]);
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[8012],{8506:(t,e,o)=>{o.r(e),o.d(e,{BadgeClass:()=>p});var n=o(1e3),r=o(2561),s=o(2061);const d=(0,o(4567).iY)("badge");class i extends((0,r.s)({componentName:d,baseSelector:":host > div"})){constructor(){super(),this.attachShadow({mode:"open"}).innerHTML="\n\t\t<style>\n :host {\n display: inline-flex;\n }\n :host > div {\n width: 100%;\n }\n\t\t</style>\n\t\t<div>\n <slot></slot>\n\t\t</div>\n\t\t"}}const p=(0,s.qC)((0,n.yk)({mappings:{hostWidth:[{selector:()=>":host",property:"width"}],hostDirection:{property:"direction"},fontFamily:{},fontSize:{},fontWeight:{},textTransform:{},verticalPadding:[{property:"padding-top"},{property:"padding-bottom"}],horizontalPadding:[{property:"padding-left"},{property:"padding-right"}],borderWidth:{},borderStyle:{},borderColor:{},borderRadius:{},backgroundColor:{},textColor:{property:"color"},textAlign:{}}}),n.e4,n.Ae)(i);customElements.define(d,p)}}]);
|
@@ -0,0 +1 @@
|
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[5988],{9278:(e,t,n)=>{n.r(t),n.d(t,{componentName:()=>c});var s=n(4567),r=n(7044);class i extends r.C{_defaultRenderer(e,t,n){const s=n.item[this.path],r=Array.from(this.children).find((e=>{const t=e.getAttribute("pattern");return!t||new RegExp(t).test(s)}));if(!r)return void(e.innerHTML=n.item[this.path]);const i=r.cloneNode(!0);i.innerHTML=s,e.innerHTML="",e.append(i)}}const c=(0,s.iY)("grid-custom-column");customElements.define(c,i)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7487],{
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[7487],{2238:(e,t,c)=>{c.r(t),c.d(t,{componentName:()=>l}),c(3483);var s=c(4567),n=c(8623);const d=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},r=e=>e.selectedItems.length===e.items?.length;class o extends n.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let c=e.querySelector("descope-checkbox");c||(c=d(),c.addEventListener("input",(()=>{const e=r(t);t.selectedItems=e?[]:t.items})),e.appendChild(c)),c.setAttribute("checked",r(t))}_defaultRenderer(e,t,c){const s=e.parentNode;let n=e.querySelector("descope-checkbox");n||(n=d(),e.appendChild(n)),n.onchange=()=>{n.checked?s.selectItem(c.item):s.deselectItem(c.item)},n.setAttribute("checked",c.selected)}}const l=(0,s.iY)("grid-selection-column");customElements.define(l,o)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3705],{2356:(e,s,
|
1
|
+
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[3705],{2356:(e,s,c)=>{c.r(s),c.d(s,{componentName:()=>o});var n=c(4567),t=c(7044);const o=(0,n.iY)("grid-text-column");customElements.define(o,t.C)}}]);
|
@@ -1 +1 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[9461,769,3726,9662,7487,1383,3705,4803],{818:(t,e,n)=>{n.d(e,{h:()=>i});var r=n(4567),o=n(1250);const i=t=>class extends t{init(){super.init?.();const t=document.createElement("template");t.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(t.content.cloneNode(!0)),this.inputElement=this.shadowRoot.querySelector(o.f),this.checkbox=this.inputElement.querySelector("vaadin-checkbox"),(0,r.oP)(this,this.inputElement,{includeAttrs:["required","full-width","size","label","invalid","disabled","readonly"]}),(0,r.Db)(this.inputElement,this,["checked"]),(0,r.tg)(this,this.inputElement,{includeAttrs:["checked"]})}}},6882:(t,e,n)=>{n.d(e,{Z:()=>r});const r=`\n:host {\n\tdisplay: inline-flex;\n}\n\n${(0,n(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`},1250:(t,e,n)=>{n.d(e,{Z:()=>l,f:()=>i});var r=n(3878),o=n(4567);const i=(0,o.iY)("boolean-field-internal"),s=["disabled","label","invalid","readonly"],a=(0,r.P)({componentName:i,baseSelector:"div"}),l=class extends a{static get observedAttributes(){return["readonly"]}constructor(){super(),this.innerHTML='\n\t\t\t<div class="wrapper">\n\t\t\t\t<vaadin-checkbox></vaadin-checkbox>\n\t\t\t</div>\n\t\t',this.wrapperEle=this.querySelector("div"),this.checkbox=this.querySelector("vaadin-checkbox")}get value(){return this.checkbox?.checked}set value(t){this.checkbox.checked=t}get checked(){return this.value}set checked(t){this.value=t}init(){this.addEventListener("focus",(t=>{t.isTrusted&&this.checkbox.focus()})),super.init?.(),(0,o.oP)(this,this.checkbox,{includeAttrs:s}),(0,o.tg)(this,this.checkbox,{includeAttrs:["checked"]}),this.handleFocusEventsDispatching([this.checkbox])}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"readonly"===t&&this.onReadOnlyChange(null!==n)}onReadOnlyChange(t){this.baseElement.setAttribute("inert",t)}getValidity(){return this.isRequired&&!this.value?{valueMissing:!0}:{}}}},6676:(t,e,n)=>{n.r(e);var r=n(1250);customElements.define(r.f,r.Z)},3483:(t,e,n)=>{n.r(e),n.d(e,{CheckboxClass:()=>y});var r=n(4567),o=n(2061),i=n(1e3),s=n(818),a=n(6882),l=n(4201);const d=(0,r.iY)("checkbox"),{host:c,component:h,checkboxElement:p,checkboxSurface:u,checkboxLabel:b,requiredIndicator:m,helperText:g,errorMessage:f}={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)"}},y=(0,o.qC)((0,i.yk)({mappings:{hostWidth:{...c,property:"width"},hostDirection:{...c,property:"direction"},fontSize:[c,p,b],fontFamily:[b,g,f],labelTextColor:{...b,property:"color"},labelSpacing:{...b,property:"padding-inline-start"},labelLineHeight:{...b,property:"line-height"},labelFontWeight:{...b,property:"font-weight"},labelRequiredIndicator:{...m,property:"content"},errorMessageTextColor:{...f,property:"color"},inputValueTextColor:{...u,property:"color"},inputBackgroundColor:{...p,property:"background-color"},inputBorderRadius:{...p,property:"border-radius"},inputBorderWidth:{...p,property:"border-width"},inputBorderOffset:{...p,property:"border-offset"},inputBorderColor:{...p,property:"border-color"},inputBorderStyle:{...p,property:"border-style"},inputOutlineWidth:{...p,property:"outline-width"},inputOutlineOffset:{...p,property:"outline-offset"},inputOutlineColor:{...p,property:"outline-color"},inputOutlineStyle:{...p,property:"outline-style"},inputSize:[{...p,property:"width"},{...p,property:"height"},{...u,property:"font-size"},{...h,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)(y.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}));n(3092),n(9789),n(6676),customElements.define(d,y)},9690:(t,e,n)=>{n.d(e,{n:()=>c,f:()=>s});var r=n(2061),o=n(4567),i=n(1e3);const s=(0,o.iY)("button"),{host:a,label:l}={host:{selector:()=>":host"},label:{selector:"::part(label)"}};let d;const c=(0,r.qC)((0,i.yk)({mappings:{hostWidth:{property:"width"},hostHeight:{property:"height"},hostDirection:{...a,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:s})),{color:h,fontSize:p}=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(${h});\n\t\ttop: calc(50% - (var(${p}) / 2));\n\t\tleft: calc(50% - (var(${p}) / 2));\n\t\tborder-width: calc(var(${p}) / 10);\n\t\twidth: var(${p});\n\t\theight: var(${p});\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,e,n)=>{n.r(e),n.d(e,{ButtonClass:()=>r.n}),n(1721);var r=n(9690);customElements.define(r.f,r.n)},426:(t,e,n)=>{n.r(e),n.d(e,{GridSelectionColumnClass:()=>a,componentName:()=>o});var r=n(8623);n(3483);const o=(0,n(4567).iY)("grid-selection-column"),i=()=>{const t=document.createElement("descope-checkbox");return t.setAttribute("bordered","true"),t.setAttribute("size","xs"),t},s=t=>t.selectedItems.length===t.items?.length;class a extends r.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(t){const e=t.parentNode;let n=t.querySelector("descope-checkbox");n||(n=i(),n.addEventListener("input",(()=>{const t=s(e);e.selectedItems=t?[]:e.items})),t.appendChild(n)),n.setAttribute("checked",s(e))}_defaultRenderer(t,e,n){const r=t.parentNode;let o=t.querySelector("descope-checkbox");o||(o=i(),t.appendChild(o)),o.onchange=()=>{o.checked?r.selectItem(n.item):r.deselectItem(n.item)},o.setAttribute("checked",n.selected)}}customElements.define(o,a)},830:(t,e,n)=>{n.r(e),n.d(e,{GridStatusColumnClass:()=>i,componentName:()=>o});var r=n(322);const o=(0,n(4567).iY)("grid-status-column");class i extends r.n{_defaultRenderer(t,e,n){const r=this.getAttribute("status");if(!r)return void(t.innerHTML=n.item[this.path]);const[o,i]=r.split(","),s=n.item[this.path]?o:i;t.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${n.item[this.path]?"lightgreen":"pink"};">${s}</div>`}}customElements.define(o,i)},2356:(t,e,n)=>{n.r(e),n.d(e,{GridTextColumnClass:()=>i,componentName:()=>o});var r=n(322);n(2018);const o=(0,n(4567).iY)("grid-text-column");class i extends r.n{}customElements.define(o,i)},9950:(t,e,n)=>{n.r(e),n.d(e,{GridClass:()=>f}),n(849),n(2356),n(830),n(426);var r=n(2061),o=n(4567),i=n(1e3);const s=t=>{const e=Array.isArray(t);return e||console.error("data must be an array, received:",t),e},a=(0,o.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:h,sortIndicators:p,activeSortIndicator:u,selectedRow:b,rowSeparator:m,resizeHandle:g}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::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,r.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},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...p,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...b,property:"background-color"},selectedTextColor:{...b,property:"color"},separatorColor:[{...h,property:"border-bottom-color"},{...m,property:"border-top-color"}],resizeHandleColor:{...g,property:"background-color"}}}),i.e4,i.Ae,(t=>class extends t{#t;init(){super.init?.(),this.handleColumns(),this.forwardSelectedItemsChange(),this.baseElement._mapSorters=()=>{}}forwardSelectedItemsChange(){this.baseElement.addEventListener("selected-items-changed",(t=>{this.dispatchEvent(new CustomEvent("selected-items-changed",{bubbles:!0,composed:!0,detail:t.detail}))}))}attributeChangedCallback(t,e,n){super.attributeChangedCallback?.(t,e,n),"columns"===t&&this.setColumnsDataFromAttr()}handleColumns(){this.columnsAttr?this.setColumnsDataFromAttr():this.children.length&&this.setColumnsFromChildren()}setColumnsFromChildren(){this.#t=Array.from(this.children).map((t=>({path:t.getAttribute("path"),header:t.getAttribute("header"),type:t.localName.match("^descope-grid-(\\w+)-column$")?.[1]||"text",attrs:["frozen","resizable","auto-width","status"].reduce(((e,n)=>{const r=t.getAttribute(n);return r&&(e[n]=r),e}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const t=JSON.parse(this.columnsAttr);s(t)&&(this.columns=t)}catch(t){console.error('could not parse data string from attribute "columns" -',t.message)}}#e=({path:t,header:e,type:n,attrs:r})=>{const o=`descope-grid-${n}-column`;return`<${o} header="${e}" path="${t}" ${Object.entries(r).map((([t,e])=>`${t}="${e}"`)).join(" ")}></${o}>`};get renderColumn(){return this.#e}set renderColumn(t){this.#e=t,this.renderColumns()}getColumnsTemplate(){return this.#t?.reduce?.(((t,e)=>t+(this.renderColumn?.(e||{})||"")),"")}renderColumns(){const t=this.getColumnsTemplate();t&&(this.innerHTML=t)}get grid(){return this.shadowRoot.querySelector("vaadin-grid")}get data(){return this.grid.items}set data(t){if(s(t)&&this.grid.items!==t&&(this.grid.items=t,this.grid.selectedItems)){const t=new Set(this.grid.items.map((t=>t[this.uniqueColumnId]??t))),e=this.grid.selectedItems.filter((e=>t.has(e[this.uniqueColumnId]??e)));this.grid.selectedItems.length!==e.length&&(this.grid.selectedItems=e)}}get columns(){return this.#t}set columns(t){this.#t=t,this.renderColumns()}get paths(){return this.columns.map((t=>t.path))}get uniqueColumnId(){return this.getAttribute("unique-column-id")}}))((0,i.DM)({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,7044],{3483:(e,t,r)=>{r.r(t),r.d(t,{CheckboxClass:()=>C});var o=r(4567),n=r(2061),s=r(1e3),i=r(818),a=r(6882),l=r(4201);const d=(0,o.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)"}},C=(0,n.qC)((0,s.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"}]}}),s.e4,(0,s.dj)({proxyProps:["value","selectionStart"]}),s.Ae,i.h)((0,s.DM)({slots:[],wrappedEleName:"vaadin-text-field",style:()=>`\n\t\t\t${a.Z}\n ${(0,l.bi)(C.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,C)},9278:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>i});var o=r(4567),n=r(7044);class s extends n.C{_defaultRenderer(e,t,r){const o=r.item[this.path],n=Array.from(this.children).find((e=>{const t=e.getAttribute("pattern");return!t||new RegExp(t).test(o)}));if(!n)return void(e.innerHTML=r.item[this.path]);const s=n.cloneNode(!0);s.innerHTML=o,e.innerHTML="",e.append(s)}}const i=(0,o.iY)("grid-custom-column");customElements.define(i,s)},2238:(e,t,r)=>{r.r(t),r.d(t,{componentName:()=>l}),r(3483);var o=r(4567),n=r(8623);const s=()=>{const e=document.createElement("descope-checkbox");return e.setAttribute("bordered","true"),e.setAttribute("size","xs"),e},i=e=>e.selectedItems.length===e.items?.length;class a extends n.w{_onHeaderRendererOrBindingChanged(){}_headerRenderer(e){const t=e.parentNode;let r=e.querySelector("descope-checkbox");r||(r=s(),r.addEventListener("input",(()=>{const e=i(t);t.selectedItems=e?[]:t.items})),e.appendChild(r)),r.setAttribute("checked",i(t))}_defaultRenderer(e,t,r){const o=e.parentNode;let n=e.querySelector("descope-checkbox");n||(n=s(),e.appendChild(n)),n.onchange=()=>{n.checked?o.selectItem(r.item):o.deselectItem(r.item)},n.setAttribute("checked",r.selected)}}const l=(0,o.iY)("grid-selection-column");customElements.define(l,a)},7044:(e,t,r)=>{r.d(t,{C:()=>n});var o=r(322);class n extends o.n{get sortable(){return"true"===this.getAttribute("sortable")}_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:()=>s});var o=r(4567),n=r(7044);const s=(0,o.iY)("grid-text-column");customElements.define(s,n.C)},9950:(e,t,r)=>{r.r(t),r.d(t,{GridClass:()=>y}),r(849),r(2356),r(9278),r(2238);var o=r(2061),n=r(4567),s=r(1e3);const i=e=>{const t=Array.isArray(e);return t||console.error("data must be an array, received:",e),t},a=(0,n.iY)("grid"),{host:l,headerRow:d,contentRow:c,firstRow:p,sortIndicators:h,activeSortIndicator:u,selectedRow:m,rowSeparator:g,resizeHandle:b}={host:{selector:()=>"vaadin-grid"},headerRow:{selector:()=>"::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)"}},y=(0,o.qC)((0,s.yk)({componentNameOverride:(0,n.iY)("input-wrapper")}),(0,s.yk)({mappings:{hostWidth:{selector:()=>":host",property:"width"},hostHeight:{selector:()=>":host",property:"height"},hostMinHeight:{selector:()=>":host",property:"min-height"},fontFamily:[{...d},{...c}],fontSize:[{...d},{...c}],fontWeight:{...c},valueTextColor:{...c,property:"color"},sortIndicatorsColor:{...h,property:"color"},activeSortIndicator:{...u,property:"color"},inputBorderColor:{...l,property:"border-color"},inputBorderWidth:{...l,property:"border-width"},inputBorderStyle:{...l,property:"border-style"},inputBorderRadius:{...l,property:"border-radius"},selectedBackgroundColor:{...m,property:"background-color"},selectedTextColor:{...m,property:"color"},separatorColor:[{...p,property:"border-bottom-color"},{...g,property:"border-top-color"}],resizeHandleColor:{...b,property:"background-color"}}}),s.e4,s.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 o=e.getAttribute(r);return o&&(t[r]=o),t}),{})})))}get columnsAttr(){return this.getAttribute("columns")}setColumnsDataFromAttr(){try{const e=JSON.parse(this.columnsAttr);i(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:o})=>{const n=`descope-grid-${r}-column`;return`<${n} header="${t}" path="${e}" ${Object.entries(o).map((([e,t])=>`${e}="${t}"`)).join(" ")}></${n}>`};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(i(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,s.DM)({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,y)}}]);
|
package/dist/umd/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,s,n={534:(e,o,s)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4567,1e3,4201,3878,769,4803,4483],"./descope-button-selection-group/descope-button-selection-group-internal/index.js":[8460,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,3878,9662,1348],"./descope-button-selection-group/descope-button-selection-group-item/index.js":[7901,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,9662,206],"./descope-button-selection-group/index.js":[8086,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,4201,3878,9662,1348,6699],"./descope-button/index.js":[2018,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2269,2066,3660,1037,9558,3208,262,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2269,2066,3660,1037,9558,3208,1224,9211,9320,9189,6091,5345,9092,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9437,4567,1e3,4201,4447,9760],"./descope-grid/descope-grid-selection-column/index.js":[426,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,262,9789,4905,5517,3092,8623,4567,1e3,4201,3878,769,4803,3726,7487],"./descope-grid/descope-grid-status-column/index.js":[830,7531,2066,262,4905,5517,322,4567,1383],"./descope-grid/descope-grid-text-column/index.js":[2356,5910,7531,4226,2269,2066,3660,1224,262,9211,4905,1721,5517,322,4567,1e3,9662,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,262,9789,9211,4905,9189,1721,3003,5517,3092,322,8623,9680,849,4567,1e3,4201,3878,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[2797,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,1932,4567,1e3,4641],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,4201,3878,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,9211,7056,4567,1e3,4201,3878,4447,2934,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401,9655],"./descope-number-field/index.js":[6916,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,5806,4567,1e3,4201,4447,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,1841,939],"./descope-password/index.js":[9279,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9211,7056,4567,1e3,4201,2481,8106],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2269,2066,3660,1037,9558,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,4447,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2269,2066,3660,1224,9211,1721,4567,1e3,3878,9662,5874],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,7262,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2269,2066,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,4981,5119]};function d(e){if(!s.o(n,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=n[e],d=o[0];return Promise.all(o.slice(1).map(s.e)).then((()=>s(d)))}d.keys=()=>Object.keys(n),d.id=534,e.exports=d},5561:(e,o,s)=>{"use strict";s.r(o),s.d(o,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#o="light";#s=new Set;#n(){this.#s.forEach((e=>e?.()))}get currentThemeName(){return this.#o}set currentThemeName(e){this.#o=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#s.add(e),()=>{this.#s.delete(e)}}set themes(e){this.#e=e,this.#n()}}},7507:(e,o,s)=>{const{componentsThemeManager:n}=s(5561),d=s(534);e.exports=d.keys().reduce(((e,o)=>{const s=o.replace(/.*?([^\/]+)\/index\.js$/,"$1");return s.endsWith("-internal")||(e[s]=()=>d(o)),e}),{}),e.exports.componentsThemeManager=n}},d={};function i(e){var o=d[e];if(void 0!==o)return o.exports;var s=d[e]={exports:{}};return n[e](s,s.exports,i),s.exports}i.m=n,e=[],i.O=(o,s,n,d)=>{if(!s){var t=1/0;for(a=0;a<e.length;a++){for(var[s,n,d]=e[a],r=!0,c=0;c<s.length;c++)(!1&d||t>=d)&&Object.keys(i.O).every((e=>i.O[e](s[c])))?s.splice(c--,1):(r=!1,d<t&&(t=d));if(r){e.splice(a--,1);var p=n();void 0!==p&&(o=p)}}return o}d=d||0;for(var a=e.length;a>0&&e[a-1][2]>d;a--)e[a]=e[a-1];e[a]=[s,n,d]},i.F={},i.E=e=>{Object.keys(i.F).map((o=>{i.F[o](e)}))},i.d=(e,o)=>{for(var s in o)i.o(o,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((o,s)=>(i.f[s](e,o),o)),[])),i.u=e=>(({58:"descope-link-index-js",206:"descope-button-selection-group-descope-button-selection-group-item-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1348:"descope-button-selection-group-descope-button-selection-group-internal-index-js",1383:"descope-grid-descope-grid-status-column-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2528:"descope-text-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",6453:"descope-loader-linear-index-js",6699:"descope-button-selection-group-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9461:"descope-grid-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-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,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},s="DescopeUI:",i.l=(e,n,d,t)=>{if(o[e])o[e].push(n);else{var r,c;if(void 0!==d)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==s+d){r=l;break}}r||(c=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,i.nc&&r.setAttribute("nonce",i.nc),r.setAttribute("data-webpack",s+d),r.src=e),o[e]=[n];var u=(s,n)=>{r.onerror=r.onload=null,clearTimeout(x);var d=o[e];if(delete o[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(n))),s)return s(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),c&&document.head.appendChild(r)}},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 o=i.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var s=o.getElementsByTagName("script");if(s.length)for(var n=s.length-1;n>-1&&!e;)e=s[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={4826:0};i.f.j=(o,s)=>{var n=i.o(e,o)?e[o]:void 0;if(0!==n)if(n)s.push(n[2]);else{var d=new Promise(((s,d)=>n=e[o]=[s,d]));s.push(n[2]=d);var t=i.p+i.u(o),r=new Error;i.l(t,(s=>{if(i.o(e,o)&&(0!==(n=e[o])&&(e[o]=void 0),n)){var d=s&&("load"===s.type?"missing":s.type),t=s&&s.target&&s.target.src;r.message="Loading chunk "+o+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,n[1](r)}}),"chunk-"+o,o)}},i.F.j=o=>{if(!i.o(e,o)||void 0===e[o]){e[o]=null;var s=document.createElement("link");i.nc&&s.setAttribute("nonce",i.nc),s.rel="prefetch",s.as="script",s.href=i.p+i.u(o),document.head.appendChild(s)}},i.O.j=o=>0===e[o];var o=(o,s)=>{var n,d,[t,r,c]=s,p=0;if(t.some((o=>0!==e[o]))){for(n in r)i.o(r,n)&&(i.m[n]=r[n]);if(c)var a=c(i)}for(o&&o(s);p<t.length;p++)d=t[p],i.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return i.O(a)},s=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];s.forEach(o.bind(null,0)),s.push=o.bind(null,s.push.bind(s))})(),i.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2269,2066,3660,1037,9558,3208,422,1224,8725,9789,3092,4201,4803,3726,4483,9211,1721,9662,1348,206,6699,262,9320,4905,9189,6091,3003,5345,5977,9483,7317,9092,8017,2528,4178,9437,4447,9760,5517,8623,7487,322,1383,3705,9680,849,9461,6772,58,6453,3072,3585,1984,1932,4641,2481,1842,7056,2934,8106,7055,6542,7401,9655,5806,2142,1841,939,964,6770,3322,5364,5874,7262,9288,9806,4981,5119].map(i.E)}),5);var t=i(7507);return i.O(t)})()));
|
1
|
+
!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.DescopeUI=o():e.DescopeUI=o()}(self,(()=>(()=>{var e,o,s,n={534:(e,o,s)=>{var n={"./boolean-fields/descope-boolean-field-internal/index.js":[6676,5910,4567,1e3,3878,769],"./boolean-fields/descope-checkbox/index.js":[3483,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,9789,3092,4567,1e3,4201,3878,769,4803,3726],"./boolean-fields/descope-switch-toggle/index.js":[9203,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,9789,3092,4567,1e3,4201,3878,769,4803,4483],"./descope-badge/index.js":[8506,5910,4567,1e3,8012],"./descope-button-selection-group/descope-button-selection-group-internal/index.js":[8460,5910,7531,4226,2066,2269,3660,1224,9211,1721,4567,1e3,3878,9662,1348],"./descope-button-selection-group/descope-button-selection-group-item/index.js":[7901,5910,7531,4226,2066,2269,3660,1224,9211,1721,4567,1e3,9662,206],"./descope-button-selection-group/index.js":[8086,5910,7531,4226,2066,2269,3660,1224,9211,1721,4567,1e3,4201,3878,9662,1348,6699],"./descope-button/index.js":[2018,5910,7531,4226,2066,2269,3660,1224,9211,1721,4567,1e3,9662],"./descope-combo-box/index.js":[1294,5910,7531,4226,2066,2269,3660,1037,9558,3208,262,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,9483],"./descope-container/index.js":[7107,5910,4567,1e3,7317],"./descope-date-picker/index.js":[2552,5910,7531,4226,2066,2269,3660,1037,9558,3208,1224,9211,9320,9189,6091,5345,9092,4567,1e3,8017],"./descope-divider/index.js":[6162,5910,4567,1e3,2528,4178],"./descope-email-field/index.js":[1272,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,9437,4567,1e3,4201,4447,9760],"./descope-grid/descope-grid-custom-column/index.js":[9278,7531,2066,262,4905,5517,322,4567,7044,5988],"./descope-grid/descope-grid-selection-column/index.js":[2238,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,262,9789,4905,5517,3092,8623,4567,1e3,4201,3878,769,4803,3726,7487],"./descope-grid/descope-grid-text-column/index.js":[2356,7531,2066,262,4905,5517,322,4567,7044,3705],"./descope-grid/index.js":[9950,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,262,9789,4905,9189,3003,5517,3092,322,8623,9680,849,4567,1e3,4201,3878,769,4803,9461],"./descope-image/index.js":[8278,5910,4567,1e3,6772],"./descope-link/index.js":[5846,5910,4567,1e3,2528,58],"./descope-loader-linear/index.js":[7845,5910,4567,1e3,6453],"./descope-loader-radial/index.js":[2797,5910,4567,1e3,3072],"./descope-logo/index.js":[1034,5910,4567,1e3,3585,1984],"./descope-modal/index.js":[958,5910,7531,4226,2269,1037,262,9320,9189,6091,1932,4567,1e3,4641],"./descope-new-password/descope-new-password-internal/index.js":[1545,5910,4567,1e3,4201,3878,2481,1842],"./descope-new-password/index.js":[8974,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,9789,9211,7056,4567,1e3,4201,3878,4447,2934,2481,1842,8106,7055],"./descope-notification/descope-notification-card/index.js":[5400,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401],"./descope-notification/index.js":[1845,5910,7531,4226,1037,262,9320,6542,4567,1e3,7401,9655],"./descope-number-field/index.js":[6916,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,5806,4567,1e3,4201,4447,2142],"./descope-passcode/descope-passcode-internal/index.js":[4775,5910,4567,1e3,3878,1841],"./descope-passcode/index.js":[4919,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,1841,939],"./descope-password/index.js":[9279,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,9211,7056,4567,1e3,4201,2481,8106],"./descope-recaptcha/index.js":[8164,5910,4567,1e3,964],"./descope-text-area/index.js":[1962,5910,7531,4226,2066,2269,3660,1037,9558,422,9680,6770,4567,1e3,4201,3322],"./descope-text-field/index.js":[9357,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,4447,2934],"./descope-text/index.js":[1876,5910,4567,1e3,2528],"./descope-totp-image/index.js":[1331,5910,4567,1e3,3585,5364],"./descope-upload-file/index.js":[6667,5910,7531,4226,2066,2269,3660,1224,9211,1721,4567,1e3,3878,9662,5874],"./phone-fields/descope-phone-field/descope-phone-field-internal/index.js":[9240,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288],"./phone-fields/descope-phone-field/index.js":[6581,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,9288,9806],"./phone-fields/descope-phone-input-box-field/descope-phone-input-box-internal/index.js":[3067,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,9789,4567,1e3,4201,3878,4447,2934,7262,4981],"./phone-fields/descope-phone-input-box-field/index.js":[9423,5910,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,262,9789,9320,4905,9189,6091,3003,5345,5977,4567,1e3,4201,3878,4447,2934,7262,9483,4981,5119]};function d(e){if(!s.o(n,e))return Promise.resolve().then((()=>{var o=new Error("Cannot find module '"+e+"'");throw o.code="MODULE_NOT_FOUND",o}));var o=n[e],d=o[0];return Promise.all(o.slice(1).map(s.e)).then((()=>s(d)))}d.keys=()=>Object.keys(n),d.id=534,e.exports=d},5561:(e,o,s)=>{"use strict";s.r(o),s.d(o,{componentsThemeManager:()=>n});const n=new class{static mountOnPropName="DescopeThemeManager";#e={};#o="light";#s=new Set;#n(){this.#s.forEach((e=>e?.()))}get currentThemeName(){return this.#o}set currentThemeName(e){this.#o=e,this.#n()}get currentTheme(){return this.#e[this.currentThemeName]}onCurrentThemeChange(e){return this.#s.add(e),()=>{this.#s.delete(e)}}set themes(e){this.#e=e,this.#n()}}},7507:(e,o,s)=>{const{componentsThemeManager:n}=s(5561),d=s(534);e.exports=d.keys().reduce(((e,o)=>{const s=o.replace(/.*?([^\/]+)\/index\.js$/,"$1");return s.endsWith("-internal")||(e[s]=()=>d(o)),e}),{}),e.exports.componentsThemeManager=n}},d={};function i(e){var o=d[e];if(void 0!==o)return o.exports;var s=d[e]={exports:{}};return n[e](s,s.exports,i),s.exports}i.m=n,e=[],i.O=(o,s,n,d)=>{if(!s){var t=1/0;for(a=0;a<e.length;a++){for(var[s,n,d]=e[a],r=!0,c=0;c<s.length;c++)(!1&d||t>=d)&&Object.keys(i.O).every((e=>i.O[e](s[c])))?s.splice(c--,1):(r=!1,d<t&&(t=d));if(r){e.splice(a--,1);var p=n();void 0!==p&&(o=p)}}return o}d=d||0;for(var a=e.length;a>0&&e[a-1][2]>d;a--)e[a]=e[a-1];e[a]=[s,n,d]},i.F={},i.E=e=>{Object.keys(i.F).map((o=>{i.F[o](e)}))},i.d=(e,o)=>{for(var s in o)i.o(o,s)&&!i.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:o[s]})},i.f={},i.e=e=>Promise.all(Object.keys(i.f).reduce(((o,s)=>(i.f[s](e,o),o)),[])),i.u=e=>(({58:"descope-link-index-js",206:"descope-button-selection-group-descope-button-selection-group-item-index-js",769:"boolean-fields-descope-boolean-field-internal-index-js",939:"descope-passcode-index-js",964:"descope-recaptcha-index-js",1348:"descope-button-selection-group-descope-button-selection-group-internal-index-js",1841:"descope-passcode-descope-passcode-internal-index-js",1842:"descope-new-password-descope-new-password-internal-index-js",1984:"descope-logo-index-js",2142:"descope-number-field-index-js",2528:"descope-text-index-js",2934:"descope-text-field-index-js",3072:"descope-loader-radial-index-js",3322:"descope-text-area-index-js",3705:"descope-grid-descope-grid-text-column-index-js",3726:"boolean-fields-descope-checkbox-index-js",4178:"descope-divider-index-js",4483:"boolean-fields-descope-switch-toggle-index-js",4641:"descope-modal-index-js",4981:"phone-fields-descope-phone-input-box-field-descope-phone-input-box-internal-index-js",5119:"phone-fields-descope-phone-input-box-field-index-js",5364:"descope-totp-image-index-js",5874:"descope-upload-file-index-js",5988:"descope-grid-descope-grid-custom-column-index-js",6453:"descope-loader-linear-index-js",6699:"descope-button-selection-group-index-js",6772:"descope-image-index-js",7055:"descope-new-password-index-js",7317:"descope-container-index-js",7401:"descope-notification-descope-notification-card-index-js",7487:"descope-grid-descope-grid-selection-column-index-js",8012:"descope-badge-index-js",8017:"descope-date-picker-index-js",8106:"descope-password-index-js",9288:"phone-fields-descope-phone-field-descope-phone-field-internal-index-js",9461:"descope-grid-index-js",9483:"descope-combo-box-index-js",9655:"descope-notification-index-js",9662:"descope-button-index-js",9760:"descope-email-field-index-js",9806:"phone-fields-descope-phone-field-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,o)=>Object.prototype.hasOwnProperty.call(e,o),o={},s="DescopeUI:",i.l=(e,n,d,t)=>{if(o[e])o[e].push(n);else{var r,c;if(void 0!==d)for(var p=document.getElementsByTagName("script"),a=0;a<p.length;a++){var l=p[a];if(l.getAttribute("src")==e||l.getAttribute("data-webpack")==s+d){r=l;break}}r||(c=!0,(r=document.createElement("script")).charset="utf-8",r.timeout=120,i.nc&&r.setAttribute("nonce",i.nc),r.setAttribute("data-webpack",s+d),r.src=e),o[e]=[n];var u=(s,n)=>{r.onerror=r.onload=null,clearTimeout(x);var d=o[e];if(delete o[e],r.parentNode&&r.parentNode.removeChild(r),d&&d.forEach((e=>e(n))),s)return s(n)},x=setTimeout(u.bind(null,void 0,{type:"timeout",target:r}),12e4);r.onerror=u.bind(null,r.onerror),r.onload=u.bind(null,r.onload),c&&document.head.appendChild(r)}},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 o=i.g.document;if(!e&&o&&(o.currentScript&&(e=o.currentScript.src),!e)){var s=o.getElementsByTagName("script");if(s.length)for(var n=s.length-1;n>-1&&!e;)e=s[n--].src}if(!e)throw new Error("Automatic publicPath is not supported in this browser");e=e.replace(/#.*$/,"").replace(/\?.*$/,"").replace(/\/[^\/]+$/,"/"),i.p=e})(),(()=>{var e={4826:0};i.f.j=(o,s)=>{var n=i.o(e,o)?e[o]:void 0;if(0!==n)if(n)s.push(n[2]);else{var d=new Promise(((s,d)=>n=e[o]=[s,d]));s.push(n[2]=d);var t=i.p+i.u(o),r=new Error;i.l(t,(s=>{if(i.o(e,o)&&(0!==(n=e[o])&&(e[o]=void 0),n)){var d=s&&("load"===s.type?"missing":s.type),t=s&&s.target&&s.target.src;r.message="Loading chunk "+o+" failed.\n("+d+": "+t+")",r.name="ChunkLoadError",r.type=d,r.request=t,n[1](r)}}),"chunk-"+o,o)}},i.F.j=o=>{if(!i.o(e,o)||void 0===e[o]){e[o]=null;var s=document.createElement("link");i.nc&&s.setAttribute("nonce",i.nc),s.rel="prefetch",s.as="script",s.href=i.p+i.u(o),document.head.appendChild(s)}},i.O.j=o=>0===e[o];var o=(o,s)=>{var n,d,[t,r,c]=s,p=0;if(t.some((o=>0!==e[o]))){for(n in r)i.o(r,n)&&(i.m[n]=r[n]);if(c)var a=c(i)}for(o&&o(s);p<t.length;p++)d=t[p],i.o(e,d)&&e[d]&&e[d][0](),e[d]=0;return i.O(a)},s=self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[];s.forEach(o.bind(null,0)),s.push=o.bind(null,s.push.bind(s))})(),i.O(0,[4826],(()=>{[5910,4567,1e3,3878,769,7531,4226,2066,2269,3660,1037,9558,3208,422,8725,1224,9789,3092,4201,4803,3726,4483,8012,9211,1721,9662,1348,206,6699,262,9320,4905,9189,6091,3003,5345,5977,9483,7317,9092,8017,2528,4178,9437,4447,9760,5517,322,7044,5988,8623,7487,3705,9680,849,9461,6772,58,6453,3072,3585,1984,1932,4641,2481,1842,7056,2934,8106,7055,6542,7401,9655,5806,2142,1841,939,964,6770,3322,5364,5874,7262,9288,9806,4981,5119].map(i.E)}),5);var t=i(7507);return i.O(t)})()));
|
package/package.json
CHANGED
@@ -0,0 +1,54 @@
|
|
1
|
+
import { createStyleMixin, draggableMixin, componentNameValidationMixin } from '../../mixins';
|
2
|
+
import { createBaseClass } from '../../baseClasses/createBaseClass';
|
3
|
+
import { compose } from '../../helpers';
|
4
|
+
import { getComponentName } from '../../helpers/componentHelpers';
|
5
|
+
|
6
|
+
export const componentName = getComponentName('badge');
|
7
|
+
|
8
|
+
class RawBadge extends createBaseClass({ componentName, baseSelector: ':host > div' }) {
|
9
|
+
constructor() {
|
10
|
+
super();
|
11
|
+
|
12
|
+
this.attachShadow({ mode: 'open' }).innerHTML = `
|
13
|
+
<style>
|
14
|
+
:host {
|
15
|
+
display: inline-flex;
|
16
|
+
}
|
17
|
+
:host > div {
|
18
|
+
width: 100%;
|
19
|
+
}
|
20
|
+
</style>
|
21
|
+
<div>
|
22
|
+
<slot></slot>
|
23
|
+
</div>
|
24
|
+
`;
|
25
|
+
}
|
26
|
+
}
|
27
|
+
|
28
|
+
export const BadgeClass = compose(
|
29
|
+
createStyleMixin({
|
30
|
+
mappings: {
|
31
|
+
hostWidth: [{ selector: () => ':host', property: 'width' }],
|
32
|
+
hostDirection: { property: 'direction' },
|
33
|
+
|
34
|
+
fontFamily: {},
|
35
|
+
fontSize: {},
|
36
|
+
fontWeight: {},
|
37
|
+
textTransform: {},
|
38
|
+
verticalPadding: [{ property: 'padding-top' }, { property: 'padding-bottom' }],
|
39
|
+
horizontalPadding: [{ property: 'padding-left' }, { property: 'padding-right' }],
|
40
|
+
|
41
|
+
borderWidth: {},
|
42
|
+
borderStyle: {},
|
43
|
+
borderColor: {},
|
44
|
+
borderRadius: {},
|
45
|
+
|
46
|
+
backgroundColor: {},
|
47
|
+
|
48
|
+
textColor: { property: 'color' },
|
49
|
+
textAlign: {},
|
50
|
+
},
|
51
|
+
}),
|
52
|
+
draggableMixin,
|
53
|
+
componentNameValidationMixin
|
54
|
+
)(RawBadge);
|
@@ -0,0 +1,31 @@
|
|
1
|
+
/* eslint-disable no-param-reassign */
|
2
|
+
import { GridTextColumnClass } from '../descope-grid-text-column/GridTextColumnClass';
|
3
|
+
|
4
|
+
export class GridCustomColumnClass extends GridTextColumnClass {
|
5
|
+
_defaultRenderer(cell, _col, model) {
|
6
|
+
const content = model.item[this.path];
|
7
|
+
|
8
|
+
// we get a list of elements that can be used to render the content
|
9
|
+
// each element can have a "pattern" attribute which contains regex expression
|
10
|
+
// we are going over the elements, and when finding an element which is pattern matches the data,
|
11
|
+
// we are cloning this element, and injecting the data as its child
|
12
|
+
const contentEle = Array.from(this.children).find((child) => {
|
13
|
+
const pattern = child.getAttribute('pattern');
|
14
|
+
if (!pattern) return true;
|
15
|
+
|
16
|
+
const regEx = new RegExp(pattern);
|
17
|
+
return regEx.test(content);
|
18
|
+
});
|
19
|
+
|
20
|
+
if (!contentEle) {
|
21
|
+
cell.innerHTML = model.item[this.path];
|
22
|
+
|
23
|
+
return;
|
24
|
+
}
|
25
|
+
|
26
|
+
const newEle = contentEle.cloneNode(true);
|
27
|
+
newEle.innerHTML = content;
|
28
|
+
cell.innerHTML = '';
|
29
|
+
cell.append(newEle);
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,7 @@
|
|
1
|
+
/* eslint-disable no-param-reassign */
|
2
|
+
import { getComponentName } from '../../../helpers/componentHelpers';
|
3
|
+
import { GridCustomColumnClass } from './GridCustomColumnClass';
|
4
|
+
|
5
|
+
export const componentName = getComponentName('grid-custom-column');
|
6
|
+
|
7
|
+
customElements.define(componentName, GridCustomColumnClass);
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
2
|
+
|
3
|
+
const createCheckboxEle = () => {
|
4
|
+
const checkbox = document.createElement('descope-checkbox');
|
5
|
+
|
6
|
+
checkbox.setAttribute('bordered', 'true');
|
7
|
+
checkbox.setAttribute('size', 'xs');
|
8
|
+
|
9
|
+
return checkbox;
|
10
|
+
};
|
11
|
+
|
12
|
+
const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
|
13
|
+
|
14
|
+
export class GridSelectionColumnClass extends GridSelectionColumn {
|
15
|
+
// eslint-disable-next-line class-methods-use-this
|
16
|
+
_onHeaderRendererOrBindingChanged() {}
|
17
|
+
|
18
|
+
// eslint-disable-next-line class-methods-use-this
|
19
|
+
_headerRenderer(cell) {
|
20
|
+
const grid = cell.parentNode;
|
21
|
+
|
22
|
+
let checkbox = cell.querySelector('descope-checkbox');
|
23
|
+
if (!checkbox) {
|
24
|
+
checkbox = createCheckboxEle();
|
25
|
+
|
26
|
+
checkbox.addEventListener('input', () => {
|
27
|
+
const isAllItemsSelected = getIsAllItemsSelected(grid);
|
28
|
+
if (isAllItemsSelected) {
|
29
|
+
grid.selectedItems = [];
|
30
|
+
} else {
|
31
|
+
grid.selectedItems = grid.items;
|
32
|
+
}
|
33
|
+
});
|
34
|
+
|
35
|
+
cell.appendChild(checkbox);
|
36
|
+
}
|
37
|
+
|
38
|
+
checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
|
39
|
+
}
|
40
|
+
|
41
|
+
// eslint-disable-next-line class-methods-use-this
|
42
|
+
_defaultRenderer(cell, col, model) {
|
43
|
+
const grid = cell.parentNode;
|
44
|
+
|
45
|
+
let checkbox = cell.querySelector('descope-checkbox');
|
46
|
+
if (!checkbox) {
|
47
|
+
checkbox = createCheckboxEle();
|
48
|
+
cell.appendChild(checkbox);
|
49
|
+
}
|
50
|
+
|
51
|
+
checkbox.onchange = () => {
|
52
|
+
checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
|
53
|
+
};
|
54
|
+
|
55
|
+
checkbox.setAttribute('checked', model.selected);
|
56
|
+
}
|
57
|
+
}
|
@@ -1,62 +1,7 @@
|
|
1
|
-
/* eslint-disable class-methods-use-this */
|
2
|
-
/* eslint-disable no-param-reassign */
|
3
|
-
import { GridSelectionColumn } from '@vaadin/grid/vaadin-grid-selection-column';
|
4
1
|
import '../../boolean-fields/descope-checkbox';
|
5
2
|
import { getComponentName } from '../../../helpers/componentHelpers';
|
3
|
+
import { GridSelectionColumnClass } from './GridSelectionColumnClass';
|
6
4
|
|
7
5
|
export const componentName = getComponentName('grid-selection-column');
|
8
6
|
|
9
|
-
const createCheckboxEle = () => {
|
10
|
-
const checkbox = document.createElement('descope-checkbox');
|
11
|
-
|
12
|
-
checkbox.setAttribute('bordered', 'true');
|
13
|
-
checkbox.setAttribute('size', 'xs');
|
14
|
-
|
15
|
-
return checkbox;
|
16
|
-
};
|
17
|
-
|
18
|
-
const getIsAllItemsSelected = (grid) => grid.selectedItems.length === grid.items?.length;
|
19
|
-
|
20
|
-
export class GridSelectionColumnClass extends GridSelectionColumn {
|
21
|
-
_onHeaderRendererOrBindingChanged() {}
|
22
|
-
|
23
|
-
_headerRenderer(cell) {
|
24
|
-
const grid = cell.parentNode;
|
25
|
-
|
26
|
-
let checkbox = cell.querySelector('descope-checkbox');
|
27
|
-
if (!checkbox) {
|
28
|
-
checkbox = createCheckboxEle();
|
29
|
-
|
30
|
-
checkbox.addEventListener('input', () => {
|
31
|
-
const isAllItemsSelected = getIsAllItemsSelected(grid);
|
32
|
-
if (isAllItemsSelected) {
|
33
|
-
grid.selectedItems = [];
|
34
|
-
} else {
|
35
|
-
grid.selectedItems = grid.items;
|
36
|
-
}
|
37
|
-
});
|
38
|
-
|
39
|
-
cell.appendChild(checkbox);
|
40
|
-
}
|
41
|
-
|
42
|
-
checkbox.setAttribute('checked', getIsAllItemsSelected(grid));
|
43
|
-
}
|
44
|
-
|
45
|
-
_defaultRenderer(cell, col, model) {
|
46
|
-
const grid = cell.parentNode;
|
47
|
-
|
48
|
-
let checkbox = cell.querySelector('descope-checkbox');
|
49
|
-
if (!checkbox) {
|
50
|
-
checkbox = createCheckboxEle();
|
51
|
-
cell.appendChild(checkbox);
|
52
|
-
}
|
53
|
-
|
54
|
-
checkbox.onchange = () => {
|
55
|
-
checkbox.checked ? grid.selectItem(model.item) : grid.deselectItem(model.item);
|
56
|
-
};
|
57
|
-
|
58
|
-
checkbox.setAttribute('checked', model.selected);
|
59
|
-
}
|
60
|
-
}
|
61
|
-
|
62
7
|
customElements.define(componentName, GridSelectionColumnClass);
|
@@ -0,0 +1,18 @@
|
|
1
|
+
import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
|
2
|
+
|
3
|
+
export class GridTextColumnClass extends GridSortColumn {
|
4
|
+
get sortable() {
|
5
|
+
return this.getAttribute('sortable') === 'true';
|
6
|
+
}
|
7
|
+
|
8
|
+
_defaultHeaderRenderer(root, _column) {
|
9
|
+
if (this.sortable) {
|
10
|
+
super._defaultHeaderRenderer(root, _column);
|
11
|
+
|
12
|
+
return;
|
13
|
+
}
|
14
|
+
|
15
|
+
// eslint-disable-next-line no-param-reassign
|
16
|
+
root.innerHTML = this.__getHeader(this.header, this.path);
|
17
|
+
}
|
18
|
+
}
|
@@ -1,15 +1,6 @@
|
|
1
|
-
import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
|
2
|
-
|
3
|
-
// if we do not want the sort column, we should import this class
|
4
|
-
// import { GridColumn } from '@vaadin/grid/vaadin-grid-column';
|
5
|
-
|
6
|
-
import '../../descope-button';
|
7
1
|
import { getComponentName } from '../../../helpers/componentHelpers';
|
2
|
+
import { GridTextColumnClass } from './GridTextColumnClass';
|
8
3
|
|
9
4
|
export const componentName = getComponentName('grid-text-column');
|
10
5
|
|
11
|
-
class GridTextColumnClass extends GridSortColumn {}
|
12
|
-
|
13
6
|
customElements.define(componentName, GridTextColumnClass);
|
14
|
-
|
15
|
-
export { GridTextColumnClass };
|
package/src/index.cjs.js
CHANGED
@@ -31,3 +31,4 @@ export { ButtonSelectionGroupClass } from './components/descope-button-selection
|
|
31
31
|
export { ButtonSelectionGroupItemClass } from './components/descope-button-selection-group/descope-button-selection-group-item/ButtonSelectionGroupItemClass';
|
32
32
|
export { ModalClass } from './components/descope-modal/ModalClass';
|
33
33
|
export { NotificationClass } from './components/descope-notification/NotificationClass';
|
34
|
+
export { BadgeClass } from './components/descope-badge/BadgeClass';
|
package/src/index.d.ts
CHANGED
@@ -38,6 +38,7 @@ export { GridTextColumnClass } from './components/descope-grid/descope-grid-text
|
|
38
38
|
export { GridSelectionColumnClass } from './components/descope-grid/descope-grid-selection-column/index';
|
39
39
|
export { ModalClass } from './components/descope-modal/ModalClass';
|
40
40
|
export { NotificationClass } from './components/descope-notification/';
|
41
|
+
export { BadgeClass } from './components/descope-badge/';
|
41
42
|
|
42
43
|
export type Theme = {
|
43
44
|
globals: {
|
@@ -0,0 +1,71 @@
|
|
1
|
+
import globals from '../globals';
|
2
|
+
import { getThemeRefs } from '../../helpers/themeHelpers';
|
3
|
+
import { BadgeClass } from '../../components/descope-badge/BadgeClass';
|
4
|
+
|
5
|
+
const globalRefs = getThemeRefs(globals);
|
6
|
+
const vars = BadgeClass.cssVarList;
|
7
|
+
|
8
|
+
const badge = {
|
9
|
+
[vars.hostWidth]: 'fit-content',
|
10
|
+
[vars.hostDirection]: globalRefs.direction,
|
11
|
+
|
12
|
+
[vars.textAlign]: 'center',
|
13
|
+
|
14
|
+
[vars.fontFamily]: globalRefs.fonts.font1.family,
|
15
|
+
[vars.fontWeight]: '400',
|
16
|
+
|
17
|
+
[vars.verticalPadding]: '0.25em',
|
18
|
+
[vars.horizontalPadding]: '0.5em',
|
19
|
+
|
20
|
+
[vars.borderWidth]: globalRefs.border.xs,
|
21
|
+
[vars.borderRadius]: globalRefs.radius.sm,
|
22
|
+
[vars.borderColor]: 'transparent',
|
23
|
+
[vars.borderStyle]: 'solid',
|
24
|
+
|
25
|
+
_fullWidth: {
|
26
|
+
[vars.hostWidth]: '100%',
|
27
|
+
},
|
28
|
+
|
29
|
+
size: {
|
30
|
+
xs: { [vars.fontSize]: '12px' },
|
31
|
+
sm: { [vars.fontSize]: '14px' },
|
32
|
+
md: { [vars.fontSize]: '16px' },
|
33
|
+
lg: { [vars.fontSize]: '18px' },
|
34
|
+
},
|
35
|
+
|
36
|
+
mode: {
|
37
|
+
default: {
|
38
|
+
[vars.textColor]: globalRefs.colors.surface.dark,
|
39
|
+
_bordered: {
|
40
|
+
[vars.borderColor]: globalRefs.colors.surface.main,
|
41
|
+
},
|
42
|
+
},
|
43
|
+
primary: {
|
44
|
+
[vars.textColor]: globalRefs.colors.primary.main,
|
45
|
+
_bordered: {
|
46
|
+
[vars.borderColor]: globalRefs.colors.primary.light,
|
47
|
+
},
|
48
|
+
},
|
49
|
+
secondary: {
|
50
|
+
[vars.textColor]: globalRefs.colors.secondary.main,
|
51
|
+
_bordered: {
|
52
|
+
[vars.borderColor]: globalRefs.colors.secondary.light,
|
53
|
+
},
|
54
|
+
},
|
55
|
+
error: {
|
56
|
+
[vars.borderColor]: globalRefs.colors.error.light,
|
57
|
+
_bordered: {
|
58
|
+
[vars.textColor]: globalRefs.colors.error.main,
|
59
|
+
},
|
60
|
+
},
|
61
|
+
success: {
|
62
|
+
[vars.textColor]: globalRefs.colors.success.main,
|
63
|
+
_bordered: {
|
64
|
+
[vars.borderColor]: globalRefs.colors.success.light,
|
65
|
+
},
|
66
|
+
},
|
67
|
+
},
|
68
|
+
};
|
69
|
+
|
70
|
+
export default badge;
|
71
|
+
export { vars };
|
@@ -26,6 +26,7 @@ import * as buttonSelectionGroup from './buttonSelectionGroup/buttonSelectionGro
|
|
26
26
|
import * as modal from './modal';
|
27
27
|
import * as grid from './grid';
|
28
28
|
import * as notificationCard from './notificationCard';
|
29
|
+
import * as badge from './badge';
|
29
30
|
|
30
31
|
const components = {
|
31
32
|
button,
|
@@ -57,6 +58,7 @@ const components = {
|
|
57
58
|
modal,
|
58
59
|
grid,
|
59
60
|
notificationCard,
|
61
|
+
badge,
|
60
62
|
};
|
61
63
|
|
62
64
|
const theme = Object.keys(components).reduce(
|
@@ -1 +0,0 @@
|
|
1
|
-
"use strict";(self.webpackChunkDescopeUI=self.webpackChunkDescopeUI||[]).push([[1383],{830:(e,t,s)=>{s.r(t),s.d(t,{GridStatusColumnClass:()=>r,componentName:()=>n});var i=s(322);const n=(0,s(4567).iY)("grid-status-column");class r extends i.n{_defaultRenderer(e,t,s){const i=this.getAttribute("status");if(!i)return void(e.innerHTML=s.item[this.path]);const[n,r]=i.split(","),a=s.item[this.path]?n:r;e.innerHTML=`<div style="padding:0 0.25em; border-radius:4px; background:${s.item[this.path]?"lightgreen":"pink"};">${a}</div>`}}customElements.define(n,r)}}]);
|
@@ -1,25 +0,0 @@
|
|
1
|
-
/* eslint-disable no-param-reassign */
|
2
|
-
import { GridSortColumn } from '@vaadin/grid/vaadin-grid-sort-column';
|
3
|
-
import { getComponentName } from '../../../helpers/componentHelpers';
|
4
|
-
|
5
|
-
export const componentName = getComponentName('grid-status-column');
|
6
|
-
class GridStatusColumnClass extends GridSortColumn {
|
7
|
-
_defaultRenderer(cell, _col, model) {
|
8
|
-
const contentAttr = this.getAttribute('status');
|
9
|
-
if (!contentAttr) {
|
10
|
-
cell.innerHTML = model.item[this.path];
|
11
|
-
return;
|
12
|
-
}
|
13
|
-
|
14
|
-
const [active, inactive] = contentAttr.split(',');
|
15
|
-
const label = model.item[this.path] ? active : inactive;
|
16
|
-
|
17
|
-
cell.innerHTML = `<div style="padding:0 0.25em; border-radius:4px; background:${
|
18
|
-
model.item[this.path] ? 'lightgreen' : 'pink'
|
19
|
-
};">${label}</div>`;
|
20
|
-
}
|
21
|
-
}
|
22
|
-
|
23
|
-
customElements.define(componentName, GridStatusColumnClass);
|
24
|
-
|
25
|
-
export { GridStatusColumnClass };
|