@openremote/or-mwc-components 1.8.0-snapshot.20250723094757 → 1.8.0-snapshot.20250725070921
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/or-mwc-dialog.js +14 -14
- package/lib/or-mwc-drawer.js +4 -4
- package/lib/or-mwc-input.js +85 -85
- package/lib/or-mwc-list.js +25 -25
- package/lib/or-mwc-menu.js +13 -13
- package/lib/or-mwc-snackbar.d.ts +1 -1
- package/lib/or-mwc-snackbar.js +5 -5
- package/lib/or-mwc-table.js +56 -56
- package/lib/or-mwc-table.js.map +1 -1
- package/lib/or-mwc-tabs.js +15 -15
- package/lib/style.js +2 -2
- package/package.json +5 -5
- package/tsconfig.tsbuildinfo +1 -1
- /package/{webpack.config.js → rspack.config.js} +0 -0
package/lib/or-mwc-list.js
CHANGED
|
@@ -1,33 +1,33 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,s,i){var r,
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,s,i){var r,a=arguments.length,c=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,s):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,s,i);else for(var o=t.length-1;o>=0;o--)(r=t[o])&&(c=(a<3?r(c):a>3?r(e,s,c):r(e,s))||c);return a>3&&c&&Object.defineProperty(e,s,c),c};import{css as t,html as e,LitElement as s,unsafeCSS as i}from"lit";import{customElement as r,property as a,query as c}from"lit/decorators.js";import{styleMap as o}from"lit/directives/style-map.js";import{ifDefined as l}from"lit/directives/if-defined.js";import{MDCList as n}from"@material/list";import{DefaultColor8 as d,DefaultColor4 as m,Util as p}from"@openremote/core";import"@openremote/or-translate";import{i18next as h}from"@openremote/or-translate";let listStyle=require("@material/list/dist/mdc.list.css"),checkboxStyle=require("@material/checkbox/dist/mdc.checkbox.css");export class OrMwcListChangedEvent extends CustomEvent{constructor(t){super(OrMwcListChangedEvent.NAME,{detail:t,bubbles:!0,composed:!0})}}OrMwcListChangedEvent.NAME="or-mwc-list-changed";export var ListType;!function(t){t.PLAIN="PLAIN",t.SELECT="SELECT",t.RADIO="RADIO",t.MULTI_CHECKBOX="MULTI_CHECKBOX",t.MULTI_TICK="MULTI_TICK"}(ListType||(ListType={}));export function createListGroup(t){return e`
|
|
2
2
|
<div class="mdc-list-group">
|
|
3
|
-
${t.map(
|
|
3
|
+
${t.map(t=>e`
|
|
4
4
|
<h3 class="mdc-list-group__subheader">${t.heading}</h3>
|
|
5
5
|
${t.list}
|
|
6
|
-
`)
|
|
6
|
+
`)}
|
|
7
7
|
</div>
|
|
8
|
-
`}export function getListTemplate(t,
|
|
9
|
-
<ul id="list" class="mdc-list${
|
|
10
|
-
${
|
|
8
|
+
`}export function getListTemplate(t,s,i,r,a){switch(r=r||"listbox",t){case ListType.RADIO:r="radiogroup";break;case ListType.MULTI_CHECKBOX:r="group"}return e`
|
|
9
|
+
<ul id="list" class="mdc-list${i?" mdc-list--two-line":""}" role="${l(r)}" @MDCList:action="${t=>a&&a(t)}" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
|
|
10
|
+
${s}
|
|
11
11
|
</ul>
|
|
12
|
-
`}export function getItemTemplate(t,
|
|
12
|
+
`}export function getItemTemplate(t,s,i,r,a,c){let n,d,m;if(null===t)return e`<li role="separator" class="mdc-list-divider"></li>`;let p=r===ListType.MULTI_CHECKBOX||r===ListType.MULTI_TICK,u=t.value,_=r!==ListType.PLAIN&&i.length>0&&i.some(t=>t===u),v=void 0!==t.text?t.text:t.value,y=t.secondaryText,L="menuitem",I="",T="",x="",C=t.icon,f="mdc-list-item--selected";switch(a=a||t.translate,p&&r===ListType.MULTI_TICK&&(C=_?"checkbox-marked":"checkbox-blank-outline"),(r===ListType.MULTI_TICK||C)&&(T=e`
|
|
13
13
|
<span class="mdc-list-item__graphic">
|
|
14
|
-
<or-icon icon="${
|
|
14
|
+
<or-icon icon="${C}"></or-icon>
|
|
15
15
|
</span>
|
|
16
|
-
`),
|
|
16
|
+
`),t.trailingIcon&&(x=e`
|
|
17
17
|
<span class="mdc-list-item__meta" aria-hidden="true">
|
|
18
|
-
<or-icon icon="${
|
|
18
|
+
<or-icon icon="${t.trailingIcon}"></or-icon>
|
|
19
19
|
</span>
|
|
20
|
-
`),
|
|
20
|
+
`),r){case ListType.SELECT:n=_?"true":"false",m=_||(!i||0===i.length)&&0===s?"0":void 0,L="option";break;case ListType.RADIO:d=_?"true":"false",L="radio",T=e`
|
|
21
21
|
<span class="mdc-list-item__graphic">
|
|
22
22
|
<div class="mdc-radio">
|
|
23
|
-
<input class="mdc-radio__native-control" id="radio-item-${
|
|
23
|
+
<input class="mdc-radio__native-control" id="radio-item-${s+1}" type="radio" value="${u}" />
|
|
24
24
|
<div class="mdc-radio__background">
|
|
25
25
|
<div class="mdc-radio__outer-circle"></div>
|
|
26
26
|
<div class="mdc-radio__inner-circle"></div>
|
|
27
27
|
</div>
|
|
28
28
|
</div>
|
|
29
29
|
</span>
|
|
30
|
-
`;break;case ListType.MULTI_CHECKBOX:
|
|
30
|
+
`;break;case ListType.MULTI_CHECKBOX:d=_?"true":"false",L="checkbox",T=e`
|
|
31
31
|
<div class="mdc-checkbox">
|
|
32
32
|
<input type="checkbox" class="mdc-checkbox__native-control" />
|
|
33
33
|
<div class="mdc-checkbox__background">
|
|
@@ -37,23 +37,23 @@ var __decorate=this&&this.__decorate||function(t,e,s,i){var r,l=arguments.length
|
|
|
37
37
|
<div class="mdc-checkbox__mixedmark"></div>
|
|
38
38
|
</div>
|
|
39
39
|
</div>
|
|
40
|
-
`;break;case ListType.MULTI_TICK:
|
|
40
|
+
`;break;case ListType.MULTI_TICK:d=_?"true":"false",f="mdc-list-item--selected"}return v&&(I=void 0!==y?e`
|
|
41
41
|
<span class="mdc-list-item__text">
|
|
42
|
-
<span class="mdc-list-item__primary-text">${
|
|
43
|
-
<span class="mdc-list-item__secondary-text">${
|
|
42
|
+
<span class="mdc-list-item__primary-text">${a&&v?e`<or-translate value="${v}"></or-translate>`:v}</span>
|
|
43
|
+
<span class="mdc-list-item__secondary-text">${a&&y?e`<or-translate value="${y}"></or-translate>`:y}</span>
|
|
44
44
|
</span>
|
|
45
|
-
`:
|
|
46
|
-
<li @click="${e=>{
|
|
45
|
+
`:r===ListType.RADIO?e`<label class="mdc-list-item__text" for="radio-item-${s+1}">${a&&v?e`<or-translate value="${v}"></or-translate>`:v}</label>`:e`<span class="mdc-list-item__text" title="${a&&v?h.t(v):v}">${a&&v?e`<or-translate value="${v}"></or-translate>`:v}</span>`),e`
|
|
46
|
+
<li @click="${e=>{c&&c(e,t)}}" style="${t.styleMap?o(t.styleMap):""}" class="mdc-list-item ${_?f:""}" role="${l(L)}" tabindex="${l(m)}" aria-checked="${l(d)}" aria-selected="${l(n)}" data-value="${u}">
|
|
47
47
|
<span class="mdc-list-item__ripple"></span>
|
|
48
|
-
${
|
|
49
|
-
${
|
|
50
|
-
${
|
|
48
|
+
${T}
|
|
49
|
+
${I}
|
|
50
|
+
${x}
|
|
51
51
|
</li>
|
|
52
|
-
`}
|
|
52
|
+
`}let style=t`
|
|
53
53
|
:host {
|
|
54
54
|
white-space: nowrap;
|
|
55
|
-
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${
|
|
56
|
-
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${
|
|
55
|
+
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${i(m)}));
|
|
56
|
+
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${i(d)}));
|
|
57
57
|
|
|
58
58
|
--mdc-theme-primary: var(--internal-or-mwc-input-color);
|
|
59
59
|
--mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
|
|
@@ -68,4 +68,4 @@ var __decorate=this&&this.__decorate||function(t,e,s,i){var r,l=arguments.length
|
|
|
68
68
|
text-decoration: none;
|
|
69
69
|
color: rgba(0, 0, 0, 0.87);
|
|
70
70
|
}
|
|
71
|
-
|
|
71
|
+
`,OrMwcList=class extends s{static get styles(){return[t`${i(listStyle)}`,t`${i(checkboxStyle)}`,style]}constructor(){super(),this.type=ListType.SELECT}disconnectedCallback(){super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0)}shouldUpdate(t){if(this._mdcComponent&&t.has("values")&&!p.objectsEqual(this.values,t.get("values"))){let t=this.values?Array.isArray(this.values)?this.values:[this.values]:[];this.setSelectedItems(this.values&&this.listItems?this.listItems.filter(e=>e&&(null==t?void 0:t.includes(e.value))):void 0)}return!0}render(){let t=this.listItems?e`${this.listItems.map((t,e)=>getItemTemplate(t,e,Array.isArray(this.values)?this.values:this.values?[this.values]:[],this.type))}`:e``,s=this.listItems&&this.listItems.some(t=>t&&!!t.secondaryText);return getListTemplate(this.type,t,s,void 0,t=>this._onSelected(t))}firstUpdated(t){super.firstUpdated(t),this._mdcElem&&(this._mdcComponent=new n(this._mdcElem),(this.type===ListType.SELECT||this.type===ListType.RADIO)&&(this._mdcComponent.singleSelection=!0))}get selectedItems(){if(!this._mdcComponent)return[];let t=Array.isArray(this._mdcComponent.selectedIndex)?this._mdcComponent.selectedIndex:[this._mdcComponent.selectedIndex],e=this.listItems?this.listItems.filter(t=>null!==t):[];return t.map(t=>e[t])}setSelectedItems(t){if(!this._mdcComponent||!this.listItems)return;if(!t){this._mdcComponent.selectedIndex=-1;return}let e=(!Array.isArray(t)?[t]:t).map(t=>"string"==typeof t?t:t.value),s=this.listItems.filter(t=>null!==t).reduce((t,s,i)=>(s&&e.includes(s.value)&&t.push(i),t),[]);this._mdcComponent.selectedIndex=this.type===ListType.MULTI_CHECKBOX?s:s.length>=1?s[0]:-1}_onSelected(t){this.values=this.selectedItems.map(t=>t.value),t.stopPropagation(),this.dispatchEvent(new OrMwcListChangedEvent(this.selectedItems))}};__decorate([a({type:Array})],OrMwcList.prototype,"listItems",void 0),__decorate([a({type:Array})],OrMwcList.prototype,"values",void 0),__decorate([a({type:String,attribute:!0})],OrMwcList.prototype,"type",void 0),__decorate([c("#wrapper")],OrMwcList.prototype,"_wrapperElem",void 0),__decorate([c("#list")],OrMwcList.prototype,"_mdcElem",void 0),OrMwcList=__decorate([r("or-mwc-list")],OrMwcList);export{OrMwcList};
|
package/lib/or-mwc-menu.js
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(e,t,r,o){var n,
|
|
1
|
+
var __decorate=this&&this.__decorate||function(e,t,r,o){var n,i=arguments.length,s=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(e,t,r,o);else for(var c=e.length-1;c>=0;c--)(n=e[c])&&(s=(i<3?n(s):i>3?n(t,r,s):n(t,r))||s);return i>3&&s&&Object.defineProperty(t,r,s),s};import{css as e,html as t,LitElement as r,unsafeCSS as o}from"lit";import{customElement as n,property as i,query as s}from"lit/decorators.js";import{classMap as c}from"lit/directives/class-map.js";import{MDCMenu as a}from"@material/menu";import{DefaultColor4 as m,DefaultColor8 as l}from"@openremote/core";import u from"@material/list/dist/mdc.list.css";import d from"@material/menu-surface/dist/mdc.menu-surface.css";import{getItemTemplate as p,getListTemplate as h,ListType as v}from"./or-mwc-list";import{ref as M}from"lit/directives/ref.js";let menuStyle=require("@material/menu/dist/mdc.menu.css");export class OrMwcMenuChangedEvent extends CustomEvent{constructor(e){super(OrMwcMenuChangedEvent.NAME,{detail:e,bubbles:!0,composed:!0})}}OrMwcMenuChangedEvent.NAME="or-mwc-menu-changed";export class OrMwcMenuClosedEvent extends CustomEvent{constructor(){super(OrMwcMenuClosedEvent.NAME,{bubbles:!0,composed:!0})}}OrMwcMenuClosedEvent.NAME="or-mwc-menu-closed";export function positionMenuAtElement(e,t){t||(t=document.body);let r=t.getBoundingClientRect();return Object.assign(e.style,{position:"fixed",top:`${r.bottom}px`,left:`${r.left}px`,zIndex:"1000",display:"block"}),e}export function getContentWithMenuTemplate(e,r,o,n,i,s=!1,c=!0,a=!1,m=!1,l="menu",u=!1){let d=null;return t`
|
|
2
2
|
<span>
|
|
3
|
-
<span @click="${e=>{if(
|
|
4
|
-
${t
|
|
3
|
+
<span @click="${e=>{if(r){if(u&&d){let t=e.currentTarget;positionMenuAtElement(d,t)}e.currentTarget.parentElement.lastElementChild.open()}}}">${e}</span>
|
|
4
|
+
${r?t`<or-mwc-menu ?multiselect="${s}" @or-mwc-menu-closed="${()=>{i&&i()}}" @or-mwc-menu-changed="${e=>{n&&n(e.detail)}}" .translateValues="${c}" .values="${o}" .menuItems="${r}" .midHeight="${a}" .fullWidth="${m}" id="${l}" ${M(e=>d=e)}></or-mwc-menu>`:""}
|
|
5
5
|
</span>
|
|
6
|
-
`}
|
|
6
|
+
`}let style=e`
|
|
7
7
|
:host {
|
|
8
8
|
white-space: nowrap;
|
|
9
|
-
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${
|
|
10
|
-
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${
|
|
9
|
+
--internal-or-mwc-input-color: var(--or-mwc-input-color, var(--or-app-color4, ${o(m)}));
|
|
10
|
+
--internal-or-mwc-input-text-color: var(--or-mwc-input-text-color, var(--or-app-color8, ${o(l)}));
|
|
11
11
|
|
|
12
12
|
--mdc-theme-primary: var(--internal-or-mwc-input-color);
|
|
13
13
|
--mdc-theme-on-primary: var(--internal-or-mwc-input-text-color);
|
|
@@ -29,17 +29,17 @@ var __decorate=this&&this.__decorate||function(e,t,r,o){var n,s=arguments.length
|
|
|
29
29
|
.mdc-menu-surface-full-width {
|
|
30
30
|
width: 100%;
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
`,OrMwcMenu=class extends r{static get styles(){return[e`${o(u)}`,e`${o(menuStyle)}`,e`${o(d)}`,style]}open(){this._mdcComponent.open=!0}disconnectedCallback(){super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0)}render(){if(!this.menuItems||0===this.menuItems.length)return t``;let e=this.getItemsTemplate(this.menuItems,this.translateValues),r=this.menuItems&&this.menuItems.some(e=>e&&!Array.isArray(e)&&!!e.secondaryText),o={"mdc-menu-surface-mid-height":+!!this.midHeight,"mdc-menu-surface-full-width":+!!this.fullWidth};return t`
|
|
33
33
|
<div id="wrapper" class="mdc-menu-surface--anchor">
|
|
34
|
-
<div class="mdc-menu mdc-menu-surface ${
|
|
35
|
-
${
|
|
34
|
+
<div class="mdc-menu mdc-menu-surface ${c(o)}" id="menu" @MDCMenuSurface:closed="${this._onMenuClosed}">
|
|
35
|
+
${h(v.MULTI_TICK,e,r,"menu")}
|
|
36
36
|
</div>
|
|
37
37
|
</div>
|
|
38
|
-
`}getItemsTemplate(e,
|
|
39
|
-
${e.map((
|
|
38
|
+
`}getItemsTemplate(e,r){let o=this.multiSelect?v.MULTI_TICK:v.PLAIN;return t`
|
|
39
|
+
${e.map((e,n)=>Array.isArray(e)?t`
|
|
40
40
|
<li>
|
|
41
41
|
<ul class="mdc-menu__selection-group">
|
|
42
|
-
${this.getItemsTemplate(e,
|
|
42
|
+
${this.getItemsTemplate(e,r)}
|
|
43
43
|
</ul>
|
|
44
44
|
</li>
|
|
45
|
-
`:
|
|
45
|
+
`:p(e,n,Array.isArray(this.values)?this.values:this.values?[this.values]:[],o,r,(e,t)=>this._itemClicked(e,t)))}`}firstUpdated(e){super.firstUpdated(e),this._mdcElem&&(this._mdcComponent=new a(this._mdcElem),this._mdcComponent.menuSurface_.foundation.handleBodyClick=function(e){let t=e.composedPath()[0];this.adapter.isElementInContainer(t)||this.close()},this._mdcComponent.quickOpen=!0)}updated(e){e.has("visible")&&(this._mdcComponent.open=this.visible||!1)}_onMenuClosed(){this.dispatchEvent(new OrMwcMenuClosedEvent)}_itemClicked(e,t){e.stopPropagation();let r=t.value;if(this.multiSelect){Array.isArray(this.values)||(this.values=this.values?[this.values]:[]);let e=this.values.findIndex(e=>e===r);e>=0?this.values.splice(e,1):this.values.push(r),this.requestUpdate()}else this.values=r,this._mdcComponent.open=!1;this.dispatchEvent(new OrMwcMenuChangedEvent(this.values))}};__decorate([i({type:Array})],OrMwcMenu.prototype,"menuItems",void 0),__decorate([i({type:Array})],OrMwcMenu.prototype,"values",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"multiSelect",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"visible",void 0),__decorate([i({type:Boolean,attribute:!0})],OrMwcMenu.prototype,"translateValues",void 0),__decorate([i({type:Boolean,attribute:!1})],OrMwcMenu.prototype,"midHeight",void 0),__decorate([i({type:Boolean,attribute:!1})],OrMwcMenu.prototype,"fullWidth",void 0),__decorate([s("#wrapper")],OrMwcMenu.prototype,"_wrapperElem",void 0),__decorate([s("#menu")],OrMwcMenu.prototype,"_mdcElem",void 0),OrMwcMenu=__decorate([n("or-mwc-menu")],OrMwcMenu);export{OrMwcMenu};
|
package/lib/or-mwc-snackbar.d.ts
CHANGED
|
@@ -32,7 +32,7 @@ export declare class OrMwcSnackbar extends LitElement {
|
|
|
32
32
|
open(): void;
|
|
33
33
|
close(action?: string): void;
|
|
34
34
|
disconnectedCallback(): void;
|
|
35
|
-
protected render(): import("lit
|
|
35
|
+
protected render(): import("lit").TemplateResult<1>;
|
|
36
36
|
protected updated(_changedProperties: PropertyValues): void;
|
|
37
37
|
protected onClose(reason: string | undefined): void;
|
|
38
38
|
protected onOpen(): void;
|
package/lib/or-mwc-snackbar.js
CHANGED
|
@@ -1,17 +1,17 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,n,o){var r
|
|
2
|
-
`]}get isOpen(){return!!this._mdcComponent&&this._mdcComponent.isOpen}set isOpen(t){this._open=!0}open(){this._mdcElem&&!this._mdcComponent&&(this._mdcComponent=new
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,n,o){var a,r=arguments.length,c=r<3?e:null===o?o=Object.getOwnPropertyDescriptor(e,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,n,o);else for(var s=t.length-1;s>=0;s--)(a=t[s])&&(c=(r<3?a(c):r>3?a(e,n,c):a(e,n))||c);return r>3&&c&&Object.defineProperty(e,n,c),c};import{css as t,html as e,LitElement as n,unsafeCSS as o}from"lit";import{customElement as a,property as r,query as c}from"lit/decorators.js";import{MDCSnackbar as s}from"@material/snackbar";let drawerStyle=require("@material/snackbar/dist/mdc.snackbar.css");export class OrMwcSnackbarChangedEvent extends CustomEvent{constructor(t){super(OrMwcSnackbarChangedEvent.NAME,{detail:t,bubbles:!0,composed:!0})}}OrMwcSnackbarChangedEvent.NAME="or-mwc-snackbar-changed";export function showSnackbar(t,e,n,o){t||(t=OrMwcSnackbar.DialogHostElement||document.body);let a=new OrMwcSnackbar;return a.text=e,a.buttonText=n,a.buttonAction=o,a.isOpen=!0,a.addEventListener(OrMwcSnackbarChangedEvent.NAME,t=>{t.stopPropagation(),t.detail.opened||window.setTimeout(()=>{a.parentElement&&a.parentElement.removeChild(a)},0)}),t.append(a),a}let OrMwcSnackbar=class extends n{constructor(){super(...arguments),this._open=!1}static get styles(){return[t`${o(drawerStyle)}`,t`
|
|
2
|
+
`]}get isOpen(){return!!this._mdcComponent&&this._mdcComponent.isOpen}set isOpen(t){this._open=!0}open(){this._mdcElem&&!this._mdcComponent&&(this._mdcComponent=new s(this._mdcElem),this._mdcComponent.timeoutMs=this.timeout||4e3),this._mdcComponent&&this._mdcComponent.open()}close(t){this._mdcComponent&&this._mdcComponent.close(t)}disconnectedCallback(){super.disconnectedCallback(),this._mdcComponent&&(this._mdcComponent.destroy(),this._mdcComponent=void 0)}render(){return e`
|
|
3
3
|
<div id="mdc-snackbar" class="mdc-snackbar" @MDCSnackbar:opened="${()=>this.onOpen()}"
|
|
4
4
|
@MDCSnackbar:closed="${t=>this.onClose(t.detail.reason)}">
|
|
5
5
|
<div class="mdc-snackbar__surface" role="status" aria-relevant="additions">
|
|
6
6
|
<div class="mdc-snackbar__label" aria-atomic="false">
|
|
7
7
|
<or-translate value="${this.text}"></or-translate>
|
|
8
8
|
</div>
|
|
9
|
-
${this.buttonText?
|
|
9
|
+
${!this.buttonText?e``:e`
|
|
10
10
|
<div class="mdc-snackbar__actions" aria-atomic="true">
|
|
11
11
|
<or-mwc-input type="button" class="mdc-button mdc-snackbar__action" label="${this.buttonText}">
|
|
12
12
|
</or-mwc-input>
|
|
13
13
|
</div>
|
|
14
|
-
|
|
14
|
+
`}
|
|
15
15
|
</div>
|
|
16
16
|
</div>
|
|
17
|
-
`}updated(t){super.updated(t),t.has("_open")&&this._open&&this.open()}onClose(t){this.buttonAction&&this.buttonAction(),this.dispatchChangedEvent({opened:!1,closeReason:t})}onOpen(){this.dispatchChangedEvent({opened:!0})}dispatchChangedEvent(t){this.dispatchEvent(new OrMwcSnackbarChangedEvent(t))}};__decorate([
|
|
17
|
+
`}updated(t){super.updated(t),t.has("_open")&&this._open&&this.open()}onClose(t){this.buttonAction&&this.buttonAction(),this.dispatchChangedEvent({opened:!1,closeReason:t})}onOpen(){this.dispatchChangedEvent({opened:!0})}dispatchChangedEvent(t){this.dispatchEvent(new OrMwcSnackbarChangedEvent(t))}};__decorate([r({type:String,attribute:!1})],OrMwcSnackbar.prototype,"text",void 0),__decorate([r({type:String})],OrMwcSnackbar.prototype,"buttonText",void 0),__decorate([r({type:Object,attribute:!1})],OrMwcSnackbar.prototype,"buttonAction",void 0),__decorate([r({type:Number})],OrMwcSnackbar.prototype,"timeout",void 0),__decorate([r({type:Boolean})],OrMwcSnackbar.prototype,"_open",void 0),__decorate([c("#mdc-snackbar")],OrMwcSnackbar.prototype,"_mdcElem",void 0),OrMwcSnackbar=__decorate([a("or-mwc-snackbar")],OrMwcSnackbar);export{OrMwcSnackbar};
|
package/lib/or-mwc-table.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var __decorate=this&&this.__decorate||function(t,e,i,
|
|
1
|
+
var __decorate=this&&this.__decorate||function(t,e,i,a){var o,n=arguments.length,l=n<3?e:null===a?a=Object.getOwnPropertyDescriptor(e,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,i,a);else for(var r=t.length-1;r>=0;r--)(o=t[r])&&(l=(n<3?o(l):n>3?o(e,i,l):o(e,i))||l);return n>3&&l&&Object.defineProperty(e,i,l),l},__awaiter=this&&this.__awaiter||function(t,e,i,a){return new(i||(i=Promise))(function(o,n){function l(t){try{s(a.next(t))}catch(t){n(t)}}function r(t){try{s(a.throw(t))}catch(t){n(t)}}function s(t){var e;t.done?o(t.value):((e=t.value)instanceof i?e:new i(function(t){t(e)})).then(l,r)}s((a=a.apply(t,e||[])).next())})};import{css as t,html as e,LitElement as i,unsafeCSS as a}from"lit";import{customElement as o,property as n,state as l}from"lit/decorators.js";import{classMap as r}from"lit/directives/class-map.js";import{until as s}from"lit/directives/until.js";import{MDCDataTable as c}from"@material/data-table";import{when as d}from"lit/directives/when.js";import{DefaultColor3 as h,DefaultColor2 as u,DefaultColor1 as m}from"@openremote/core";import{i18next as p}from"@openremote/or-translate";import{InputType as b}from"./or-mwc-input";import{styleMap as w}from"lit/directives/style-map.js";import g from"moment";let dataTableStyle=require("@material/data-table/dist/mdc.data-table.css"),style=t`
|
|
2
2
|
|
|
3
3
|
:host {
|
|
4
4
|
width: 100%;
|
|
@@ -31,7 +31,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
31
31
|
z-index: 1;
|
|
32
32
|
position: sticky;
|
|
33
33
|
left: 0;
|
|
34
|
-
background-color: ${
|
|
34
|
+
background-color: ${a(u)};
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
.mdc-data-table.has-sticky-first-column tr th:first-of-type {
|
|
@@ -53,7 +53,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
53
53
|
th {
|
|
54
54
|
position: sticky;
|
|
55
55
|
top: 0;
|
|
56
|
-
background-color: ${
|
|
56
|
+
background-color: ${a(m)};
|
|
57
57
|
}
|
|
58
58
|
|
|
59
59
|
th, td {
|
|
@@ -62,7 +62,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
62
62
|
|
|
63
63
|
.mdc-data-table__header-cell {
|
|
64
64
|
font-weight: bold;
|
|
65
|
-
color: ${
|
|
65
|
+
color: ${a(h)};
|
|
66
66
|
font-size: 14px;
|
|
67
67
|
}
|
|
68
68
|
|
|
@@ -81,7 +81,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
81
81
|
.sort-button {
|
|
82
82
|
padding-right: 0;
|
|
83
83
|
border: none;
|
|
84
|
-
color: ${
|
|
84
|
+
color: ${a(h)};
|
|
85
85
|
background-color: transparent;
|
|
86
86
|
cursor: pointer;
|
|
87
87
|
}
|
|
@@ -89,7 +89,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
89
89
|
.sort-button-reverse {
|
|
90
90
|
padding-left: 0;
|
|
91
91
|
border: none;
|
|
92
|
-
color: ${
|
|
92
|
+
color: ${a(h)};
|
|
93
93
|
cursor: pointer;
|
|
94
94
|
}
|
|
95
95
|
|
|
@@ -143,124 +143,124 @@ var __decorate=this&&this.__decorate||function(t,e,i,o){var a,n=arguments.length
|
|
|
143
143
|
display: none;
|
|
144
144
|
}
|
|
145
145
|
}
|
|
146
|
-
`;export class OrMwcTableRowClickEvent extends CustomEvent{constructor(t){super(OrMwcTableRowClickEvent.NAME,{detail:{index:t},bubbles:!0,composed:!0})}}OrMwcTableRowClickEvent.NAME="or-mwc-table-row-click";export class OrMwcTableRowSelectEvent extends CustomEvent{constructor(t,e){super(OrMwcTableRowSelectEvent.NAME,{detail:{index:t,state:e},bubbles:!0,composed:!0})}}OrMwcTableRowSelectEvent.NAME="or-mwc-table-row-select";let OrMwcTable=class extends
|
|
147
|
-
<div class="${
|
|
146
|
+
`;export class OrMwcTableRowClickEvent extends CustomEvent{constructor(t){super(OrMwcTableRowClickEvent.NAME,{detail:{index:t},bubbles:!0,composed:!0})}}OrMwcTableRowClickEvent.NAME="or-mwc-table-row-click";export class OrMwcTableRowSelectEvent extends CustomEvent{constructor(t,e){super(OrMwcTableRowSelectEvent.NAME,{detail:{index:t,state:e},bubbles:!0,composed:!0})}}OrMwcTableRowSelectEvent.NAME="or-mwc-table-row-select";let OrMwcTable=class extends i{constructor(){super(...arguments),this.config={columnFilter:[],stickyFirstColumn:!0,fullHeight:!1,pagination:{enable:!1}},this.paginationIndex=0,this.paginationSize=10,this.sortDirection="ASC",this.sortIndex=-1,this.selectedRows=[]}static get styles(){return[t`${a(dataTableStyle)}`,style]}firstUpdated(t){let e=this.shadowRoot.querySelector(".mdc-data-table");this._dataTable=new c(e)}updated(t){var e;if((t.has("paginationIndex")||t.has("paginationSize"))&&(null==(e=this.config.pagination)?void 0:e.enable)){let t=this._dataTable?this._dataTable.root.children[0]:this.shadowRoot.querySelector(".mdc-data-table__table-container");new IntersectionObserver((t,e)=>{t[0].target.scrollTop=0,e.unobserve(t[0].target)}).observe(t),this.selectedRows=[]}}render(){var t,i,a,o;let n={"mdc-data-table":!0,"mdc-data-table__paginated":!!(null==(t=this.config.pagination)?void 0:t.enable),"mdc-data-table__fullheight":!!this.config.fullHeight,"has-sticky-first-column":!!this.config.stickyFirstColumn},l=(null==(i=this.config.pagination)?void 0:i.enable)&&(!!this.rowsTemplate||this.rows&&this.rows.length>this.paginationSize),c=null==(o=null==(a=this.shadowRoot)?void 0:a.firstElementChild)?void 0:o.clientWidth;return e`
|
|
147
|
+
<div class="${r(n)}">
|
|
148
148
|
<div class="mdc-data-table__table-container" style="flex: 1;">
|
|
149
149
|
<table class="mdc-data-table__table">
|
|
150
150
|
<!-- Header row that normally includes entries like 'id' and 'name'. You can use either a template or a list of columns -->
|
|
151
|
-
${
|
|
151
|
+
${d(this.columnsTemplate,()=>this.columnsTemplate,()=>this.columns?e`
|
|
152
152
|
<thead>
|
|
153
153
|
<tr class="mdc-data-table__header-row">
|
|
154
|
-
${this.columns.map((
|
|
154
|
+
${this.columns.map((t,i)=>{var a,o;let n={width:this.getColumnWidth(i,this.columns,c),maxWidth:this.getMaxColumnWidth(i,this.columns,c)};if(0===i&&this.config.multiSelect){let n=this.rows&&this.rows.length>0&&(null==(a=this.selectedRows)?void 0:a.length)===(null==(o=this.rows)?void 0:o.length),l=!n&&this.selectedRows&&this.selectedRows.length>0;return e`
|
|
155
155
|
<th class="mdc-data-table__header-cell mdc-data-table__header-cell--checkbox"
|
|
156
156
|
role="columnheader" scope="col">
|
|
157
|
-
<or-mwc-input type="${
|
|
158
|
-
.indeterminate="${
|
|
157
|
+
<or-mwc-input type="${b.CHECKBOX}" id="checkbox"
|
|
158
|
+
.indeterminate="${l}" .value="${n}"
|
|
159
159
|
@or-mwc-input-changed="${t=>this.onCheckChanged(t,t.detail.value,"all")}">
|
|
160
160
|
</or-mwc-input>
|
|
161
161
|
</th>
|
|
162
|
-
${"string"==typeof t?
|
|
163
|
-
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${
|
|
162
|
+
${"string"==typeof t?e`
|
|
163
|
+
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${i+1}"
|
|
164
164
|
role="columnheader" scope="col"
|
|
165
165
|
title="${t}">
|
|
166
166
|
column
|
|
167
167
|
</th>
|
|
168
|
-
`:
|
|
169
|
-
<th class="mdc-data-table__header-cell ${
|
|
168
|
+
`:e`
|
|
169
|
+
<th class="mdc-data-table__header-cell ${r({"mdc-data-table__cell--numeric":!!t.isNumeric,"hide-mobile":!!t.hideMobile,"mdc-data-table__header-cell--with-sort":!!t.isSortable})}"
|
|
170
170
|
role="columnheader" scope="col" title="${t.title}" data-column-id="${t.title}"
|
|
171
|
-
@click="${
|
|
172
|
-
${t.isSortable?
|
|
171
|
+
@click="${e=>t.isSortable?this.onColumnSort(e,i,this.sortDirection):""}">
|
|
172
|
+
${!t.isSortable?t.title:s(this.getSortHeader(i,t.title,this.sortDirection),e`${p.t("loading")}`)}
|
|
173
173
|
</th>
|
|
174
|
-
`}`}return"string"==typeof t?
|
|
175
|
-
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${
|
|
174
|
+
`}`}return"string"==typeof t?e`
|
|
175
|
+
<th class="mdc-data-table__header-cell ${this.config.multiSelect?"mdc-data-table__header-cell":""}" id="column-${i+1}" role="columnheader" scope="col"
|
|
176
176
|
title="${t}">
|
|
177
177
|
${t}
|
|
178
178
|
</th>
|
|
179
|
-
`:
|
|
180
|
-
<th class="mdc-data-table__header-cell ${
|
|
181
|
-
style="${
|
|
179
|
+
`:e`
|
|
180
|
+
<th class="mdc-data-table__header-cell ${r({"mdc-data-table__cell--numeric":!!t.isNumeric,"hide-mobile":!!t.hideMobile,"mdc-data-table__header-cell--with-sort":!!t.isSortable})}"
|
|
181
|
+
style="${w(n)}"
|
|
182
182
|
role="columnheader" scope="col" title="${t.title}" data-column-id="${t.title}"
|
|
183
|
-
@click="${
|
|
184
|
-
${t.isSortable?
|
|
183
|
+
@click="${e=>t.isSortable?this.onColumnSort(e,i,this.sortDirection?this.sortDirection:"ASC"):""}">
|
|
184
|
+
${!t.isSortable?t.title:s(this.getSortHeader(i,t.title,this.sortDirection,!!t.isNumeric),e`${p.t("loading")}`)}
|
|
185
185
|
</th>
|
|
186
|
-
`})
|
|
186
|
+
`})}
|
|
187
187
|
</tr>
|
|
188
188
|
</thead>
|
|
189
|
-
`:void 0)
|
|
189
|
+
`:void 0)}
|
|
190
190
|
<!-- Table content, where either the template or an array of rows is displayed -->
|
|
191
191
|
<tbody class="mdc-data-table__content">
|
|
192
|
-
${
|
|
192
|
+
${d(this.rowsTemplate,()=>{var t;return(null==(t=this.config.pagination)?void 0:t.enable)&&this.updateComplete.then(()=>__awaiter(this,void 0,void 0,function*(){let t=yield this.getTableElem(!1),e=null==t?void 0:t.querySelectorAll("tr");null==e||e.forEach((t,e)=>{let i=(e<=this.paginationIndex*this.paginationSize||e>this.paginationIndex*this.paginationSize+this.paginationSize)&&!t.classList.contains("mdc-data-table__header-row");t.style.display=i?"none":"table-row"})})),e`${this.rowsTemplate}`},()=>this.rows?this.rows.filter((t,e)=>{var i;return!(null==(i=this.config.pagination)?void 0:i.enable)||e>=this.paginationIndex*this.paginationSize&&e<this.paginationIndex*this.paginationSize+this.paginationSize}).map(t=>{let i=Array.isArray(t)?t:t.content;return e`
|
|
193
193
|
<tr class="mdc-data-table__row" @click="${e=>this.onRowClick(e,t)}">
|
|
194
|
-
${null==
|
|
195
|
-
${
|
|
194
|
+
${null==i?void 0:i.map((i,a)=>{let o={"mdc-data-table__cell":!0,"mdc-data-table__cell--numeric":"number"==typeof i,"mdc-data-table__cell--clickable":!Array.isArray(t)&&t.clickable,"hide-mobile":this.columns&&"string"!=typeof this.columns[a]&&this.columns[a].hideMobile},n={maxWidth:this.getMaxColumnWidth(a,this.columns,c)};return e`
|
|
195
|
+
${d(0===a&&this.config.multiSelect,()=>{var i;return e`
|
|
196
196
|
<td class="mdc-data-table__cell mdc-data-table__cell--checkbox" >
|
|
197
197
|
<div class="">
|
|
198
|
-
<or-mwc-input type="${
|
|
198
|
+
<or-mwc-input type="${b.CHECKBOX}" id="checkbox-${a}"
|
|
199
199
|
@or-mwc-input-changed="${e=>this.onCheckChanged(e,e.detail.value,"single",t)}"
|
|
200
|
-
.value="${null
|
|
200
|
+
.value="${null==(i=this.selectedRows)?void 0:i.includes(t)}"
|
|
201
201
|
></or-mwc-input>
|
|
202
202
|
</div>
|
|
203
203
|
</td>
|
|
204
|
-
`})
|
|
205
|
-
<td class="${
|
|
206
|
-
${
|
|
204
|
+
`})}
|
|
205
|
+
<td class="${r(o)}" title="${"object"==typeof i?"":i}" style="${w(n)}">
|
|
206
|
+
${s(this.getTableContent(i))}
|
|
207
207
|
</td>
|
|
208
|
-
`})
|
|
208
|
+
`})}
|
|
209
209
|
</tr>
|
|
210
|
-
`})
|
|
210
|
+
`}):void 0)}
|
|
211
211
|
</tbody>
|
|
212
212
|
</table>
|
|
213
213
|
</div>
|
|
214
214
|
<!-- Pagination HTML, shown on the bottom right. Same as Material Design spec -->
|
|
215
|
-
${
|
|
215
|
+
${d(l,()=>{var t;let i=(null==(t=this.config.pagination)?void 0:t.options)||[10,25,100];return e`
|
|
216
216
|
<div class="mdc-data-table__pagination">
|
|
217
217
|
<div class="mdc-data-table__pagination-trailing">
|
|
218
218
|
<div class="mdc-data-table__pagination-rows-per-page">
|
|
219
219
|
<div class="mdc-data-table__pagination-rows-per-page-label">
|
|
220
|
-
${
|
|
220
|
+
${p.t("rowsPerPage")}
|
|
221
221
|
</div>
|
|
222
222
|
<or-mwc-input class="mdc-data-table__pagination-rows-per-page-select"
|
|
223
|
-
.type="${
|
|
224
|
-
.value="${this.paginationSize}" .options="${
|
|
223
|
+
.type="${b.SELECT}" compact comfortable outlined .readonly="${1===i.length}"
|
|
224
|
+
.value="${this.paginationSize}" .options="${i}"
|
|
225
225
|
@or-mwc-input-changed="${t=>{this.paginationSize=t.detail.value,this.paginationIndex=0}}"
|
|
226
226
|
></or-mwc-input>
|
|
227
227
|
</div>
|
|
228
|
-
${
|
|
228
|
+
${s(this.getPaginationControls(),e`${p.t("loading")}`)}
|
|
229
229
|
</div>
|
|
230
230
|
</div>
|
|
231
|
-
`})
|
|
231
|
+
`})}
|
|
232
232
|
</div>
|
|
233
|
-
`}getTableContent(t){return"string"==typeof t||"number"==typeof t?t:t instanceof Date?
|
|
233
|
+
`}getTableContent(t){return"string"==typeof t||"number"==typeof t?t:t instanceof Date?g(t).format("lll"):t}onRowClick(t,e){if(this.config.multiSelect){let e=t.target;if("OR-MWC-INPUT"===e.nodeName&&e.id.includes("checkbox"))return}this.dispatchEvent(new OrMwcTableRowClickEvent(this.rows.indexOf(e)))}onCheckChanged(t,e,i,a){var o,n,l;if(t.stopPropagation(),"all"===i)e?this.selectedRows=this.rows:this.selectedRows=[],null==(o=this.rows)||o.forEach((t,i)=>this.dispatchEvent(new OrMwcTableRowSelectEvent(i,e)));else{e?void 0===this.selectedRows?this.selectedRows=[a]:-1===this.selectedRows.indexOf(a)&&(this.selectedRows.push(a),this.requestUpdate("selectedRows")):this.selectedRows=null==(n=this.selectedRows)?void 0:n.filter(t=>t!==a);let t=null==(l=this.rows)?void 0:l.indexOf(a);void 0!==t&&t>-1&&this.dispatchEvent(new OrMwcTableRowSelectEvent(t,e))}}onColumnSort(t,e,i){return __awaiter(this,void 0,void 0,function*(){if(this.config.multiSelect){let e=t.target;if("OR-MWC-INPUT"===e.nodeName&&e.id.includes("checkbox"))return}let a="ASC"==i?"DESC":"ASC";this.sortDirection=a,this.sortIndex=e,this.rows&&this.rows.length>0&&(Array.isArray(this.rows[0])?this.rows.sort((t,i)=>this.sortPrimitiveRows(t,i,e,a)):this.rows.sort((t,i)=>this.sortObjectRows(t,i,e,a)))})}sortPrimitiveRows(t,e,i,a){let o=t[i],n=e[i];if(!o&&!n)return 0;if(!o||0===o.toString().length)return"DESC"===a?1:-1;if(!n||0===n.toString().length)return"DESC"===a?-1:1;if("string"==typeof o&&"string"==typeof n)if("DESC"===a)return n.localeCompare(o,"en",{numeric:!0});else return o.localeCompare(n,"en",{numeric:!0});if("number"!=typeof o||"number"!=typeof n)return console.warn("sortPrimitiveRows() was called using neither a number nor a string."),1;else if("DESC"===a)return o>n?-1:1;else return o>n?1:-1}sortObjectRows(t,e,i,a){var o,n;let l=null==(o=t.content)?void 0:o[i],r=null==(n=e.content)?void 0:n[i],s=t=>"string"==typeof t||"number"==typeof t,c=t=>void 0!==t.strings&&void 0!==t.values;return!l||!r||s(l)||s(r)?this.sortPrimitiveRows([l],[r],0,a):l instanceof Date&&r instanceof Date?this.sortDateRows(l,r,0,a):c(l)||c(r)?this.sortTemplateRows(l,r,0,a):1}sortDateRows(t,e,i,a){return"DESC"===a?t>e?-1:1:t>e?1:-1}sortTemplateRows(t,e,i,a){var o,n;let l=null==(o=t.values.filter(t=>"string"==typeof t||"number"==typeof t).map(t=>t.toString()))?void 0:o[0],r=null==(n=e.values.filter(t=>"string"==typeof t||"number"==typeof t).map(t=>t.toString()))?void 0:n[0];return void 0!==l&&void 0!==r?this.sortPrimitiveRows([l],[r],0,a):1}getSortHeader(t,i,a){return __awaiter(this,arguments,void 0,function*(t,i,a,o=!1){return -1===this.sortIndex&&(this.sortIndex=t),e`
|
|
234
234
|
<div class="mdc-data-table__header-cell-wrapper ${o?"sortable-reverse":"sortable"}">
|
|
235
235
|
<div class="mdc-data-table__header-cell-label">
|
|
236
|
-
${
|
|
236
|
+
${i}
|
|
237
237
|
</div>
|
|
238
238
|
<button class="mdc-icon-button material-icons ${o?"sort-button-reverse":"sort-button"} ${this.sortIndex===t?"":"hidden"}"
|
|
239
|
-
aria-label="Sort by ${
|
|
240
|
-
<or-icon icon="${"ASC"==
|
|
239
|
+
aria-label="Sort by ${i}" aria-describedby="${i}-status-label" aria-hidden="${this.sortIndex!==t}">
|
|
240
|
+
<or-icon icon="${"ASC"==a?"arrow-up":"arrow-down"}"></or-icon>
|
|
241
241
|
</button>
|
|
242
|
-
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="${
|
|
242
|
+
<div class="mdc-data-table__sort-status-label" aria-hidden="true" id="${i}-status-label">
|
|
243
243
|
</div>
|
|
244
244
|
</div>
|
|
245
|
-
`})
|
|
245
|
+
`})}getPaginationControls(){return __awaiter(this,void 0,void 0,function*(){let t=yield this.getRowCount(),i=this.paginationIndex*this.paginationSize+1,a=this.paginationIndex*this.paginationSize+this.paginationSize;return a>t&&(a=t),e`
|
|
246
246
|
<div class="mdc-data-table__pagination-navigation">
|
|
247
247
|
<div class="mdc-data-table__pagination-total">
|
|
248
|
-
<span>${
|
|
248
|
+
<span>${i}-${a} of ${t}</span>
|
|
249
249
|
</div>
|
|
250
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${
|
|
250
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
251
251
|
data-first-page="true" icon="page-first" .disabled="${0==this.paginationIndex}"
|
|
252
252
|
@or-mwc-input-changed="${()=>this.paginationIndex=0}"></or-mwc-input>
|
|
253
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${
|
|
253
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
254
254
|
data-prev-page="true" icon="chevron-left" .disabled="${0==this.paginationIndex}"
|
|
255
255
|
@or-mwc-input-changed="${()=>this.paginationIndex--}"></or-mwc-input>
|
|
256
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${
|
|
256
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
257
257
|
data-next-page="true" icon="chevron-right"
|
|
258
258
|
.disabled="${this.paginationIndex*this.paginationSize+this.paginationSize>=t}"
|
|
259
259
|
@or-mwc-input-changed="${()=>this.paginationIndex++}"></or-mwc-input>
|
|
260
|
-
<or-mwc-input class="mdc-data-table__pagination-button" .type="${
|
|
260
|
+
<or-mwc-input class="mdc-data-table__pagination-button" .type="${b.BUTTON}"
|
|
261
261
|
data-last-page="true" icon="page-last"
|
|
262
262
|
.disabled="${this.paginationIndex*this.paginationSize+this.paginationSize>=t}"
|
|
263
|
-
@or-mwc-input-changed="${()=>__awaiter(this,void 0,void 0,
|
|
263
|
+
@or-mwc-input-changed="${()=>__awaiter(this,void 0,void 0,function*(){let e=t/this.paginationSize;e=e.toString().includes(".")?Math.floor(e):e-1,this.paginationIndex=e})}"
|
|
264
264
|
></or-mwc-input>
|
|
265
265
|
</div>
|
|
266
|
-
`})
|
|
266
|
+
`})}getRowCount(){return __awaiter(this,arguments,void 0,function*(t=!0,e){var i,a;return(null==(i=this.rows)?void 0:i.length)?null==(a=this.rows)?void 0:a.length:(e||(e=yield this.getTableElem(t)),(null==e?void 0:e.querySelectorAll("tr")).length)})}getTableElem(){return __awaiter(this,arguments,void 0,function*(t=!1){return t&&(yield this.updateComplete),this._dataTable?this._dataTable.root:this.shadowRoot.querySelector(".mdc-data-table")})}getColumnWidth(t,e,i){}getMaxColumnWidth(t,e,i){return i?`${i/((null==e?void 0:e.length)||2)}px`:void 0}};__decorate([n({type:Array})],OrMwcTable.prototype,"columns",void 0),__decorate([n({type:Object})],OrMwcTable.prototype,"columnsTemplate",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"rows",void 0),__decorate([n({type:Object})],OrMwcTable.prototype,"rowsTemplate",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"config",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"paginationIndex",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"paginationSize",void 0),__decorate([l()],OrMwcTable.prototype,"_dataTable",void 0),__decorate([n({type:String})],OrMwcTable.prototype,"sortDirection",void 0),__decorate([n({type:Number})],OrMwcTable.prototype,"sortIndex",void 0),__decorate([n({type:Array})],OrMwcTable.prototype,"selectedRows",void 0),OrMwcTable=__decorate([o("or-mwc-table")],OrMwcTable);export{OrMwcTable};
|