@zywave/zui-table 4.0.1 → 4.0.2-pre.2
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/dist/base.d.ts +29 -0
- package/dist/base.js +67 -0
- package/dist/base.js.map +1 -0
- package/dist/css/zui-table.fouc.css +1 -1
- package/dist/custom-elements.json +192 -27
- package/dist/zui-table-cell-css.js +1 -1
- package/dist/zui-table-cell-css.js.map +1 -1
- package/dist/zui-table-cell.d.ts +27 -3
- package/dist/zui-table-cell.js +93 -6
- package/dist/zui-table-cell.js.map +1 -1
- package/dist/zui-table-css.js +1 -1
- package/dist/zui-table-css.js.map +1 -1
- package/dist/zui-table-footer.d.ts +6 -4
- package/dist/zui-table-footer.js +6 -4
- package/dist/zui-table-footer.js.map +1 -1
- package/dist/zui-table-row-css.js +1 -1
- package/dist/zui-table-row-css.js.map +1 -1
- package/dist/zui-table-row.d.ts +7 -4
- package/dist/zui-table-row.js +57 -11
- package/dist/zui-table-row.js.map +1 -1
- package/dist/zui-table-topbar-css.js +1 -1
- package/dist/zui-table-topbar-css.js.map +1 -1
- package/dist/zui-table-topbar.d.ts +12 -3
- package/dist/zui-table-topbar.js +105 -5
- package/dist/zui-table-topbar.js.map +1 -1
- package/dist/zui-table.d.ts +7 -5
- package/dist/zui-table.js +24 -10
- package/dist/zui-table.js.map +1 -1
- package/docs/customelement-manifest-element.html +28 -0
- package/{demo/index.html → docs/demo.html} +236 -42
- package/lab.html +347 -60
- package/package.json +9 -4
- package/src/base.ts +79 -0
- package/src/css/zui-table.fouc.scss +90 -17
- package/src/zui-table-cell-css.js +1 -1
- package/src/zui-table-cell.scss +26 -0
- package/src/zui-table-cell.ts +84 -6
- package/src/zui-table-css.js +1 -1
- package/src/zui-table-footer.ts +6 -4
- package/src/zui-table-row-css.js +1 -1
- package/src/zui-table-row.scss +11 -4
- package/src/zui-table-row.ts +51 -11
- package/src/zui-table-topbar-css.js +1 -1
- package/src/zui-table-topbar.scss +77 -9
- package/src/zui-table-topbar.ts +106 -5
- package/src/zui-table.scss +2 -2
- package/src/zui-table.ts +24 -9
- package/test/zui-table.test.ts +146 -4
package/dist/base.d.ts
ADDED
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
2
|
+
import type { ZuiTableElement } from './zui-table';
|
|
3
|
+
import type { ZuiTableCellElement } from './zui-table-cell';
|
|
4
|
+
declare class TableState {
|
|
5
|
+
elements: Set<ZuiTableBaseElement>;
|
|
6
|
+
root: ZuiTableElement;
|
|
7
|
+
sortedCell?: ZuiTableCellElement;
|
|
8
|
+
channel: EventTarget;
|
|
9
|
+
constructor(root: ZuiTableElement);
|
|
10
|
+
}
|
|
11
|
+
export declare abstract class ZuiTableBaseElement extends ZuiBaseElement {
|
|
12
|
+
#private;
|
|
13
|
+
/**
|
|
14
|
+
* This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association
|
|
15
|
+
*/
|
|
16
|
+
protected static _globalChannel: EventTarget;
|
|
17
|
+
/**
|
|
18
|
+
* Accessor for the associated table state
|
|
19
|
+
*/
|
|
20
|
+
protected get _state(): TableState;
|
|
21
|
+
constructor();
|
|
22
|
+
connectedCallback(): void;
|
|
23
|
+
disconnectedCallback(): void;
|
|
24
|
+
protected _associateElement(element: ZuiTableBaseElement): void;
|
|
25
|
+
}
|
|
26
|
+
export declare type TableElementConnectedEvent = CustomEvent<{
|
|
27
|
+
element: ZuiTableBaseElement;
|
|
28
|
+
}>;
|
|
29
|
+
export {};
|
package/dist/base.js
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
|
|
2
|
+
if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
|
|
3
|
+
if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
|
|
4
|
+
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
5
|
+
};
|
|
6
|
+
var _a, _ZuiTableBaseElement_states, _ZuiTableBaseElement_tableAssociations;
|
|
7
|
+
import { ZuiBaseElement } from '@zywave/zui-base';
|
|
8
|
+
class TableState {
|
|
9
|
+
constructor(root) {
|
|
10
|
+
this.elements = new Set();
|
|
11
|
+
this.channel = new EventTarget();
|
|
12
|
+
this.root = root;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
export class ZuiTableBaseElement extends ZuiBaseElement {
|
|
16
|
+
constructor() {
|
|
17
|
+
super();
|
|
18
|
+
if (this.tagName === 'ZUI-TABLE') {
|
|
19
|
+
__classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).set(this, new TableState(this));
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* Accessor for the associated table state
|
|
24
|
+
*/
|
|
25
|
+
get _state() {
|
|
26
|
+
if (this.tagName === 'ZUI-TABLE') {
|
|
27
|
+
return __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).get(this);
|
|
28
|
+
}
|
|
29
|
+
const table = __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).get(this);
|
|
30
|
+
if (table) {
|
|
31
|
+
return __classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).get(table);
|
|
32
|
+
}
|
|
33
|
+
return undefined;
|
|
34
|
+
}
|
|
35
|
+
connectedCallback() {
|
|
36
|
+
super.connectedCallback();
|
|
37
|
+
if (this.tagName !== 'ZUI-TABLE') {
|
|
38
|
+
ZuiTableBaseElement._globalChannel.dispatchEvent(new CustomEvent('connected', { detail: { element: this } }));
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
disconnectedCallback() {
|
|
42
|
+
var _b;
|
|
43
|
+
super.disconnectedCallback();
|
|
44
|
+
if (this.tagName === 'ZUI-TABLE') {
|
|
45
|
+
__classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_states).delete(this);
|
|
46
|
+
}
|
|
47
|
+
else {
|
|
48
|
+
__classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).delete(this);
|
|
49
|
+
(_b = this._state) === null || _b === void 0 ? void 0 : _b.elements.delete(this);
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
_associateElement(element) {
|
|
53
|
+
if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {
|
|
54
|
+
return;
|
|
55
|
+
}
|
|
56
|
+
__classPrivateFieldGet(ZuiTableBaseElement, _a, "f", _ZuiTableBaseElement_tableAssociations).set(element, this);
|
|
57
|
+
this._state.elements.add(element);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
_a = ZuiTableBaseElement;
|
|
61
|
+
/**
|
|
62
|
+
* This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association
|
|
63
|
+
*/
|
|
64
|
+
ZuiTableBaseElement._globalChannel = new EventTarget();
|
|
65
|
+
_ZuiTableBaseElement_states = { value: new WeakMap() };
|
|
66
|
+
_ZuiTableBaseElement_tableAssociations = { value: new WeakMap() };
|
|
67
|
+
//# sourceMappingURL=base.js.map
|
package/dist/base.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"base.js","sourceRoot":"","sources":["../src/base.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,UAAU;IAMd,YAAY,IAAqB;QALjC,aAAQ,GAA6B,IAAI,GAAG,EAAE,CAAC;QAG/C,YAAO,GAAG,IAAI,WAAW,EAAE,CAAC;QAG1B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;IACnB,CAAC;CACF;AAED,MAAM,OAAgB,mBAAoB,SAAQ,cAAc;IAuB9D;QACE,KAAK,EAAE,CAAC;QAER,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAC7B,IAAkC,EAClC,IAAI,UAAU,CAAC,IAAkC,CAAC,CACnD,CAAC;SACH;IACH,CAAC;IA1BD;;OAEG;IACH,IAAc,MAAM;QAClB,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,OAAO,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAAC,IAAkC,CAAC,CAAC;SAC5E;QACD,MAAM,KAAK,GAAG,uBAAA,mBAAmB,kDAAmB,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;QAC/D,IAAI,KAAK,EAAE;YACT,OAAO,uBAAA,mBAAmB,uCAAQ,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;SAC/C;QACD,OAAO,SAAS,CAAC;IACnB,CAAC;IAgBD,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAE1B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,mBAAmB,CAAC,cAAc,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,WAAW,EAAE,EAAE,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC;SAC/G;IACH,CAAC;IAED,oBAAoB;;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,EAAE;YAChC,uBAAA,mBAAmB,uCAAQ,CAAC,MAAM,CAAC,IAAkC,CAAC,CAAC;SACxE;aAAM;YACL,uBAAA,mBAAmB,kDAAmB,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;YACpD,MAAA,IAAI,CAAC,MAAM,0CAAE,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;SACpC;IACH,CAAC;IAES,iBAAiB,CAAC,OAA4B;QACtD,IAAI,IAAI,CAAC,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,OAAO,KAAK,WAAW,EAAE;YACnE,OAAO;SACR;QAED,uBAAA,mBAAmB,kDAAmB,CAAC,GAAG,CAAC,OAAO,EAAE,IAAkC,CAAC,CAAC;QACxF,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACpC,CAAC;;;AA3DD;;GAEG;AACc,kCAAc,GAAG,IAAI,WAAW,EAAG,CAAA;AAgBpD,uCAAiB,IAAI,OAAO,EAA+B,EAAC,CAAA;AAC5D,kDAA4B,IAAI,OAAO,EAAwC,EAAC,CAAA","sourcesContent":["import { ZuiBaseElement } from '@zywave/zui-base';\nimport type { ZuiTableElement } from './zui-table';\nimport type { ZuiTableCellElement } from './zui-table-cell';\n\nclass TableState {\n elements: Set<ZuiTableBaseElement> = new Set();\n root: ZuiTableElement;\n sortedCell?: ZuiTableCellElement;\n channel = new EventTarget();\n\n constructor(root: ZuiTableElement) {\n this.root = root;\n }\n}\n\nexport abstract class ZuiTableBaseElement extends ZuiBaseElement {\n /**\n * This represents a common eventing ecosystem for all ZuiTableBaseElements, regardless of association\n */\n protected static _globalChannel = new EventTarget();\n\n /**\n * Accessor for the associated table state\n */\n protected get _state() {\n if (this.tagName === 'ZUI-TABLE') {\n return ZuiTableBaseElement.#states.get(this as unknown as ZuiTableElement);\n }\n const table = ZuiTableBaseElement.#tableAssociations.get(this);\n if (table) {\n return ZuiTableBaseElement.#states.get(table);\n }\n return undefined;\n }\n\n static #states = new WeakMap<ZuiTableElement, TableState>();\n static #tableAssociations = new WeakMap<ZuiTableBaseElement, ZuiTableElement>();\n\n constructor() {\n super();\n\n if (this.tagName === 'ZUI-TABLE') {\n ZuiTableBaseElement.#states.set(\n this as unknown as ZuiTableElement,\n new TableState(this as unknown as ZuiTableElement)\n );\n }\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.tagName !== 'ZUI-TABLE') {\n ZuiTableBaseElement._globalChannel.dispatchEvent(new CustomEvent('connected', { detail: { element: this } }));\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.tagName === 'ZUI-TABLE') {\n ZuiTableBaseElement.#states.delete(this as unknown as ZuiTableElement);\n } else {\n ZuiTableBaseElement.#tableAssociations.delete(this);\n this._state?.elements.delete(this);\n }\n }\n\n protected _associateElement(element: ZuiTableBaseElement) {\n if (this.tagName !== 'ZUI-TABLE' || element.tagName === 'ZUI-TABLE') {\n return;\n }\n\n ZuiTableBaseElement.#tableAssociations.set(element, this as unknown as ZuiTableElement);\n this._state.elements.add(element);\n }\n}\n\nexport type TableElementConnectedEvent = CustomEvent<{ element: ZuiTableBaseElement }>;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;
|
|
1
|
+
zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;border-collapse:collapse;border-spacing:0}@media(min-width: 45em){zui-table:not(:defined){box-shadow:0 1px 3px rgba(0,0,0,.29)}}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table[no-results]:not(:defined) [slot=no-results-message]{box-shadow:none}}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;flex-wrap:wrap;align-items:center}@media(min-width: 45em){zui-table-topbar:not(:defined){flex-wrap:nowrap;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}}zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) *:not([slot=action]):not([slot=counter]){margin-bottom:0}}zui-table-topbar:not(:defined) zui-search{--zui-search-border-color: var(--zui-gray-50);flex:1;flex-basis:100%;order:1}@media(min-width: 30em){zui-table-topbar:not(:defined) zui-search{flex-basis:auto;order:0}}@media(min-width: 45em){zui-table-topbar:not(:defined) zui-search{flex:0;margin-right:auto}}zui-table-topbar:not(:defined) [slot=counter]{display:flex;width:100%;flex-shrink:0;justify-content:flex-end;order:2;margin-bottom:.625rem;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=counter]{width:auto;margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]{width:100%;margin-bottom:1.25rem}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]{width:auto;margin-left:.625rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]{margin-bottom:0}}zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0}@media(min-width: 30em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:1.25rem;margin-left:1.25rem}}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:first-of-type{margin-bottom:0;margin-left:.625rem}}zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:1.25rem}@media(min-width: 45em){zui-table-topbar:not(:defined) [slot=action]:last-of-type{margin-bottom:0}}@media(max-width: 30em){zui-table-topbar:not(:defined) [slot=action]+[slot=action]{margin-top:.625rem}}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:grid;grid-template-columns:auto;padding:.625rem 0;background-color:#fff;box-shadow:0 1px 3px rgba(0,0,0,.29)}@media(min-width: 45em){zui-table-row:not(:defined){display:flex;padding:0;box-shadow:none}}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:none;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}@media(min-width: 45em){zui-table-row[header]:not(:defined){display:flex}}zui-table-row[header]:not(:defined) zui-table-cell{--zui-table-cell-padding: 0.53125rem 1.25rem;font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:2px solid var(--zui-gray-100)}@media(min-width: 45em){zui-table-row:not([header]):not(:defined){border-bottom-width:1px}}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){zui-table-cell:not(:defined){padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;align-items:center}@media(min-width: 45em){zui-table-cell[action]:not(:defined){--zui-table-cell-padding: 0.375rem 1.25rem}}zui-table-cell[action]:not(:defined) zui-button:not(:first-of-type){margin-left:.625rem}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
|
|
@@ -8,18 +8,28 @@
|
|
|
8
8
|
"declarations": [
|
|
9
9
|
{
|
|
10
10
|
"kind": "class",
|
|
11
|
-
"description": "",
|
|
11
|
+
"description": "An individual table cell to be passed into a `<zui-table-row>`.",
|
|
12
12
|
"name": "ZuiTableCellElement",
|
|
13
13
|
"cssProperties": [
|
|
14
14
|
{
|
|
15
15
|
"description": "Override cell padding",
|
|
16
16
|
"name": "--zui-table-cell-padding",
|
|
17
17
|
"default": "13px 20px"
|
|
18
|
+
},
|
|
19
|
+
{
|
|
20
|
+
"description": "([sortable]): Default color of chevron when `direction` is `null`",
|
|
21
|
+
"name": "--zui-table-cell-sort-color",
|
|
22
|
+
"default": "var(--zui-gray-300)"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
"description": "Highlight color used to indicate the active sort direction",
|
|
26
|
+
"name": "--zui-table-cell-sort-active-color",
|
|
27
|
+
"default": "var(--zui-blue)"
|
|
18
28
|
}
|
|
19
29
|
],
|
|
20
30
|
"slots": [
|
|
21
31
|
{
|
|
22
|
-
"description": "
|
|
32
|
+
"description": "Unnamed slot, table cell content goes here",
|
|
23
33
|
"name": ""
|
|
24
34
|
}
|
|
25
35
|
],
|
|
@@ -34,6 +44,65 @@
|
|
|
34
44
|
"description": "Set to decrease table cell padding to accommodate action button(s)",
|
|
35
45
|
"attribute": "action",
|
|
36
46
|
"reflects": true
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
"kind": "field",
|
|
50
|
+
"name": "sort",
|
|
51
|
+
"type": {
|
|
52
|
+
"text": "null | \"ascending\" | \"descending\""
|
|
53
|
+
},
|
|
54
|
+
"description": "Current sort direction of the sortable cell",
|
|
55
|
+
"attribute": "sort",
|
|
56
|
+
"reflects": true
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
"kind": "field",
|
|
60
|
+
"name": "sortable",
|
|
61
|
+
"description": "(`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set",
|
|
62
|
+
"attribute": "sortable",
|
|
63
|
+
"reflects": true
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
"kind": "field",
|
|
67
|
+
"name": "_isAllowedSort",
|
|
68
|
+
"type": {
|
|
69
|
+
"text": "boolean"
|
|
70
|
+
},
|
|
71
|
+
"privacy": "private",
|
|
72
|
+
"default": "false",
|
|
73
|
+
"description": "This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY"
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"kind": "field",
|
|
77
|
+
"name": "#sort",
|
|
78
|
+
"privacy": "private",
|
|
79
|
+
"type": {
|
|
80
|
+
"text": "ZuiTableSortDirection"
|
|
81
|
+
},
|
|
82
|
+
"default": "null"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
"kind": "field",
|
|
86
|
+
"name": "#sortable",
|
|
87
|
+
"privacy": "private",
|
|
88
|
+
"type": {
|
|
89
|
+
"text": "boolean"
|
|
90
|
+
},
|
|
91
|
+
"default": "false"
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
"kind": "method",
|
|
95
|
+
"name": "click"
|
|
96
|
+
},
|
|
97
|
+
{
|
|
98
|
+
"kind": "method",
|
|
99
|
+
"name": "#onSortableClick"
|
|
100
|
+
}
|
|
101
|
+
],
|
|
102
|
+
"events": [
|
|
103
|
+
{
|
|
104
|
+
"description": "Event fires when a `sortable` cell is clicked",
|
|
105
|
+
"name": "sort"
|
|
37
106
|
}
|
|
38
107
|
],
|
|
39
108
|
"attributes": [
|
|
@@ -45,11 +114,24 @@
|
|
|
45
114
|
"default": "false",
|
|
46
115
|
"description": "Set to decrease table cell padding to accommodate action button(s)",
|
|
47
116
|
"fieldName": "action"
|
|
117
|
+
},
|
|
118
|
+
{
|
|
119
|
+
"name": "sort",
|
|
120
|
+
"type": {
|
|
121
|
+
"text": "null | \"ascending\" | \"descending\""
|
|
122
|
+
},
|
|
123
|
+
"description": "Current sort direction of the sortable cell",
|
|
124
|
+
"fieldName": "sort"
|
|
125
|
+
},
|
|
126
|
+
{
|
|
127
|
+
"name": "sortable",
|
|
128
|
+
"description": "(`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set",
|
|
129
|
+
"fieldName": "sortable"
|
|
48
130
|
}
|
|
49
131
|
],
|
|
50
132
|
"superclass": {
|
|
51
|
-
"name": "
|
|
52
|
-
"
|
|
133
|
+
"name": "ZuiTableBaseElement",
|
|
134
|
+
"module": "/src/base.js"
|
|
53
135
|
},
|
|
54
136
|
"tagName": "zui-table-cell",
|
|
55
137
|
"customElement": true
|
|
@@ -80,25 +162,25 @@
|
|
|
80
162
|
"declarations": [
|
|
81
163
|
{
|
|
82
164
|
"kind": "class",
|
|
83
|
-
"description": "",
|
|
165
|
+
"description": "Footer table element, should come as the last item passed into a `<zui-table>`.",
|
|
84
166
|
"name": "ZuiTableFooterElement",
|
|
85
167
|
"cssProperties": [
|
|
86
168
|
{
|
|
87
169
|
"description": "Override the margin between the table and footer of the table",
|
|
88
170
|
"name": "--zui-table-footer-margin",
|
|
89
|
-
"default": "10px"
|
|
171
|
+
"default": "0.625rem (10px)"
|
|
90
172
|
}
|
|
91
173
|
],
|
|
92
174
|
"slots": [
|
|
93
175
|
{
|
|
94
|
-
"description": "
|
|
176
|
+
"description": "Unnamed slot, table footer content goes here",
|
|
95
177
|
"name": ""
|
|
96
178
|
}
|
|
97
179
|
],
|
|
98
180
|
"members": [],
|
|
99
181
|
"superclass": {
|
|
100
|
-
"name": "
|
|
101
|
-
"
|
|
182
|
+
"name": "ZuiTableBaseElement",
|
|
183
|
+
"module": "/src/base.js"
|
|
102
184
|
},
|
|
103
185
|
"tagName": "zui-table-footer",
|
|
104
186
|
"customElement": true
|
|
@@ -129,11 +211,11 @@
|
|
|
129
211
|
"declarations": [
|
|
130
212
|
{
|
|
131
213
|
"kind": "class",
|
|
132
|
-
"description": "",
|
|
214
|
+
"description": "Pass into `<zui-table>`, `<zui-table-row>` holds a row of `<zui-table-cell>`'s.",
|
|
133
215
|
"name": "ZuiTableRowElement",
|
|
134
216
|
"cssProperties": [
|
|
135
217
|
{
|
|
136
|
-
"description": "Override the table columns template. See
|
|
218
|
+
"description": "Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.",
|
|
137
219
|
"name": "--zui-table-columns-template",
|
|
138
220
|
"default": "repeat(auto-fit, minmax(0, 1fr))"
|
|
139
221
|
},
|
|
@@ -150,7 +232,7 @@
|
|
|
150
232
|
],
|
|
151
233
|
"slots": [
|
|
152
234
|
{
|
|
153
|
-
"description": "
|
|
235
|
+
"description": "Unnamed slot, `<zui-table-cell>`s are declared here",
|
|
154
236
|
"name": ""
|
|
155
237
|
}
|
|
156
238
|
],
|
|
@@ -185,9 +267,29 @@
|
|
|
185
267
|
},
|
|
186
268
|
"privacy": "private"
|
|
187
269
|
},
|
|
270
|
+
{
|
|
271
|
+
"kind": "field",
|
|
272
|
+
"name": "#sortLock",
|
|
273
|
+
"privacy": "private",
|
|
274
|
+
"type": {
|
|
275
|
+
"text": "boolean | undefined"
|
|
276
|
+
}
|
|
277
|
+
},
|
|
278
|
+
{
|
|
279
|
+
"kind": "method",
|
|
280
|
+
"name": "#onTableSort",
|
|
281
|
+
"parameters": [
|
|
282
|
+
{
|
|
283
|
+
"name": "event",
|
|
284
|
+
"type": {
|
|
285
|
+
"text": "CustomEvent<{ cell: HTMLElement }>"
|
|
286
|
+
}
|
|
287
|
+
}
|
|
288
|
+
]
|
|
289
|
+
},
|
|
188
290
|
{
|
|
189
291
|
"kind": "method",
|
|
190
|
-
"name": "#
|
|
292
|
+
"name": "#ensureCellState"
|
|
191
293
|
}
|
|
192
294
|
],
|
|
193
295
|
"attributes": [
|
|
@@ -211,8 +313,8 @@
|
|
|
211
313
|
}
|
|
212
314
|
],
|
|
213
315
|
"superclass": {
|
|
214
|
-
"name": "
|
|
215
|
-
"
|
|
316
|
+
"name": "ZuiTableBaseElement",
|
|
317
|
+
"module": "/src/base.js"
|
|
216
318
|
},
|
|
217
319
|
"tagName": "zui-table-row",
|
|
218
320
|
"customElement": true
|
|
@@ -243,11 +345,11 @@
|
|
|
243
345
|
"declarations": [
|
|
244
346
|
{
|
|
245
347
|
"kind": "class",
|
|
246
|
-
"description": "",
|
|
348
|
+
"description": "Used to house table related pieces such as a search input or `zui-search`, and other up front information.",
|
|
247
349
|
"name": "ZuiTableTopbarElement",
|
|
248
350
|
"slots": [
|
|
249
351
|
{
|
|
250
|
-
"description": "
|
|
352
|
+
"description": "Unnamed slot, table cell content goes here",
|
|
251
353
|
"name": ""
|
|
252
354
|
},
|
|
253
355
|
{
|
|
@@ -259,10 +361,64 @@
|
|
|
259
361
|
"name": "action"
|
|
260
362
|
}
|
|
261
363
|
],
|
|
262
|
-
"members": [
|
|
364
|
+
"members": [
|
|
365
|
+
{
|
|
366
|
+
"kind": "field",
|
|
367
|
+
"name": "_actionSlottedElements",
|
|
368
|
+
"type": {
|
|
369
|
+
"text": "Array<HTMLCollection>"
|
|
370
|
+
},
|
|
371
|
+
"privacy": "private"
|
|
372
|
+
},
|
|
373
|
+
{
|
|
374
|
+
"kind": "field",
|
|
375
|
+
"name": "_counterSlottedNodes",
|
|
376
|
+
"type": {
|
|
377
|
+
"text": "Array<HTMLCollection>"
|
|
378
|
+
},
|
|
379
|
+
"privacy": "private"
|
|
380
|
+
},
|
|
381
|
+
{
|
|
382
|
+
"kind": "field",
|
|
383
|
+
"name": "_actionButtons",
|
|
384
|
+
"type": {
|
|
385
|
+
"text": "Array<ZuiButton>"
|
|
386
|
+
},
|
|
387
|
+
"privacy": "private"
|
|
388
|
+
},
|
|
389
|
+
{
|
|
390
|
+
"kind": "field",
|
|
391
|
+
"name": "#mobileBreakpoint",
|
|
392
|
+
"privacy": "private",
|
|
393
|
+
"type": {
|
|
394
|
+
"text": "MediaQueryList"
|
|
395
|
+
}
|
|
396
|
+
},
|
|
397
|
+
{
|
|
398
|
+
"kind": "field",
|
|
399
|
+
"name": "#mobileTopbarActionButtonsEvent",
|
|
400
|
+
"privacy": "private"
|
|
401
|
+
},
|
|
402
|
+
{
|
|
403
|
+
"kind": "method",
|
|
404
|
+
"name": "#addBlockStylingToButtons"
|
|
405
|
+
},
|
|
406
|
+
{
|
|
407
|
+
"kind": "method",
|
|
408
|
+
"name": "#removeBlockStylingFromButtons"
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "method",
|
|
412
|
+
"name": "#toggleCounterDivDisplay"
|
|
413
|
+
},
|
|
414
|
+
{
|
|
415
|
+
"kind": "method",
|
|
416
|
+
"name": "#toggleActionDivDisplay"
|
|
417
|
+
}
|
|
418
|
+
],
|
|
263
419
|
"superclass": {
|
|
264
|
-
"name": "
|
|
265
|
-
"
|
|
420
|
+
"name": "ZuiTableBaseElement",
|
|
421
|
+
"module": "/src/base.js"
|
|
266
422
|
},
|
|
267
423
|
"tagName": "zui-table-topbar",
|
|
268
424
|
"customElement": true
|
|
@@ -293,7 +449,7 @@
|
|
|
293
449
|
"declarations": [
|
|
294
450
|
{
|
|
295
451
|
"kind": "class",
|
|
296
|
-
"description": "",
|
|
452
|
+
"description": "A standardized responsive table component.",
|
|
297
453
|
"name": "ZuiTableElement",
|
|
298
454
|
"cssProperties": [
|
|
299
455
|
{
|
|
@@ -302,7 +458,7 @@
|
|
|
302
458
|
"default": "13px 20px"
|
|
303
459
|
},
|
|
304
460
|
{
|
|
305
|
-
"description": "Override the table columns template. See
|
|
461
|
+
"description": "Override the table columns template. See https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns for more information on valid values.",
|
|
306
462
|
"name": "--zui-table-columns-template",
|
|
307
463
|
"default": "repeat(auto-fit, minmax(0, 1fr))"
|
|
308
464
|
},
|
|
@@ -324,7 +480,7 @@
|
|
|
324
480
|
],
|
|
325
481
|
"slots": [
|
|
326
482
|
{
|
|
327
|
-
"description": "
|
|
483
|
+
"description": "Unnamed slot, all table content will appear here, such as table rows",
|
|
328
484
|
"name": ""
|
|
329
485
|
},
|
|
330
486
|
{
|
|
@@ -355,7 +511,7 @@
|
|
|
355
511
|
"text": "boolean"
|
|
356
512
|
},
|
|
357
513
|
"default": "false",
|
|
358
|
-
"description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot
|
|
514
|
+
"description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message",
|
|
359
515
|
"attribute": "no-results",
|
|
360
516
|
"reflects": true
|
|
361
517
|
},
|
|
@@ -391,6 +547,15 @@
|
|
|
391
547
|
"text": "MediaQueryList"
|
|
392
548
|
}
|
|
393
549
|
},
|
|
550
|
+
{
|
|
551
|
+
"kind": "field",
|
|
552
|
+
"name": "#sortLock",
|
|
553
|
+
"privacy": "private",
|
|
554
|
+
"type": {
|
|
555
|
+
"text": "boolean"
|
|
556
|
+
},
|
|
557
|
+
"default": "false"
|
|
558
|
+
},
|
|
394
559
|
{
|
|
395
560
|
"kind": "field",
|
|
396
561
|
"name": "#mobileHeadersEvent",
|
|
@@ -429,13 +594,13 @@
|
|
|
429
594
|
"text": "boolean"
|
|
430
595
|
},
|
|
431
596
|
"default": "false",
|
|
432
|
-
"description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot
|
|
597
|
+
"description": "Set to show or hide no results message when there are no results; use in conjunction with the assigned slot `no-results-message` to include a no results message",
|
|
433
598
|
"fieldName": "noResults"
|
|
434
599
|
}
|
|
435
600
|
],
|
|
436
601
|
"superclass": {
|
|
437
|
-
"name": "
|
|
438
|
-
"
|
|
602
|
+
"name": "ZuiTableBaseElement",
|
|
603
|
+
"module": "/src/base.js"
|
|
439
604
|
},
|
|
440
605
|
"tagName": "zui-table",
|
|
441
606
|
"customElement": true
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
export const style = css `:host{contain:none}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}`;
|
|
2
|
+
export const style = css `:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;
|
|
3
3
|
//# sourceMappingURL=zui-table-cell-css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,
|
|
1
|
+
{"version":3,"file":"zui-table-cell-css.js","sourceRoot":"","sources":["../src/zui-table-cell-css.js"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA,m/BAAm/B,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const style = css`:host{--zui-table-cell-sort-active-color: var(--zui-blue);--zui-table-cell-sort-color: var(--zui-gray-300);contain:none;overflow-wrap:break-word}:host([action]) div{display:flex}@media(min-width: 45em){:host([action]) div{--zui-table-cell-padding: 0.375rem 1.25rem;align-items:center}}:host([action]) ::slotted(zui-button:not(:first-of-type)){margin-left:.625rem}:host([sort=ascending]) zui-icon{--zui-icon-sort-ascending-color: var(--zui-table-cell-sort-active-color)}:host([sort=descending]) zui-icon{--zui-icon-sort-descending-color: var(--zui-table-cell-sort-active-color)}div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem)}@media(min-width: 45em){div{padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}}div.header{float:left;width:33.333%;font-weight:600}div.header+div{padding:var(--zui-table-cell-padding, 0.3125rem 0.9375rem 0.3125rem 0)}zui-icon{--zui-icon-size: 1.125rem;vertical-align:middle;margin-left:.625rem;fill:var(--zui-table-cell-sort-color)}.is-selectable{cursor:pointer}`;\n"]}
|
package/dist/zui-table-cell.d.ts
CHANGED
|
@@ -1,19 +1,43 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ZuiTableBaseElement } from './base.js';
|
|
2
2
|
/**
|
|
3
|
+
* An individual table cell to be passed into a `<zui-table-row>`.
|
|
4
|
+
*
|
|
3
5
|
* @element zui-table-cell
|
|
4
6
|
*
|
|
5
|
-
* @slot -
|
|
7
|
+
* @slot - Unnamed slot, table cell content goes here
|
|
6
8
|
*
|
|
7
9
|
* @cssprop [--zui-table-cell-padding=13px 20px] - Override cell padding
|
|
10
|
+
* @cssprop [--zui-table-cell-sort-color=var(--zui-gray-300)] - ([sortable]): Default color of chevron when `direction` is `null`
|
|
11
|
+
* @cssprop [--zui-table-cell-sort-active-color=var(--zui-blue)] - Highlight color used to indicate the active sort direction
|
|
12
|
+
*
|
|
13
|
+
* @event sort - Event fires when a `sortable` cell is clicked
|
|
8
14
|
*/
|
|
9
|
-
export declare class ZuiTableCellElement extends
|
|
15
|
+
export declare class ZuiTableCellElement extends ZuiTableBaseElement {
|
|
16
|
+
#private;
|
|
10
17
|
/**
|
|
11
18
|
* Set to decrease table cell padding to accommodate action button(s)
|
|
12
19
|
*/
|
|
13
20
|
action: boolean;
|
|
21
|
+
/**
|
|
22
|
+
* Current sort direction of the sortable cell
|
|
23
|
+
* @type {null | "ascending" | "descending"}
|
|
24
|
+
*/
|
|
25
|
+
get sort(): ZuiTableSortDirection;
|
|
26
|
+
set sort(val: ZuiTableSortDirection);
|
|
27
|
+
/**
|
|
28
|
+
* (`zui-table-row[header]`): Whether or not cell header is sortable; another requirement is the parent element, `<zui-table-cell header>` must have `header` attribute or property set
|
|
29
|
+
*/
|
|
30
|
+
get sortable(): boolean;
|
|
31
|
+
set sortable(val: boolean);
|
|
32
|
+
/**
|
|
33
|
+
* This private field is needed to persist state between the cell and the header row. DO NOT USE EXTERNALLY
|
|
34
|
+
*/
|
|
35
|
+
private _isAllowedSort;
|
|
14
36
|
static get styles(): import("lit").CSSResultGroup[];
|
|
15
37
|
render(): import("lit-html").TemplateResult<1>;
|
|
38
|
+
click(): void;
|
|
16
39
|
}
|
|
40
|
+
export declare type ZuiTableSortDirection = null | 'ascending' | 'descending';
|
|
17
41
|
declare global {
|
|
18
42
|
interface HTMLElementTagNameMap {
|
|
19
43
|
'zui-table-cell': ZuiTableCellElement;
|