@zywave/zui-table 4.0.5 → 4.0.6-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/zui-table-topbar.js
CHANGED
|
@@ -9,7 +9,7 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
9
9
|
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");
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
|
-
var _ZuiTableTopbarElement_instances, _ZuiTableTopbarElement_mobileBreakpoint, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, _ZuiTableTopbarElement_addBlockStylingToButtons, _ZuiTableTopbarElement_removeBlockStylingFromButtons, _ZuiTableTopbarElement_toggleCounterDivDisplay, _ZuiTableTopbarElement_toggleActionDivDisplay;
|
|
12
|
+
var _ZuiTableTopbarElement_instances, _ZuiTableTopbarElement_mobileBreakpoint, _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent, _ZuiTableTopbarElement_handleActionSlotchange, _ZuiTableTopbarElement_addBlockStylingToButtons, _ZuiTableTopbarElement_removeBlockStylingFromButtons, _ZuiTableTopbarElement_toggleCounterDivDisplay, _ZuiTableTopbarElement_toggleActionDivDisplay;
|
|
13
13
|
import { ZuiTableBaseElement } from './base.js';
|
|
14
14
|
import { html } from 'lit';
|
|
15
15
|
import { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';
|
|
@@ -63,18 +63,14 @@ export class ZuiTableTopbarElement extends ZuiTableBaseElement {
|
|
|
63
63
|
return html `<div class="topbar">
|
|
64
64
|
<div class="content"><slot></slot></div>
|
|
65
65
|
<div class="counter"><slot name="counter" @slotchange="${__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleCounterDivDisplay)}"></slot></div>
|
|
66
|
-
<div class="action"
|
|
67
|
-
><slot
|
|
68
|
-
name="action"
|
|
69
|
-
@slotchange="${__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleActionDivDisplay)} ${__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").matches
|
|
70
|
-
? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons)
|
|
71
|
-
: __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons)}"
|
|
72
|
-
></slot
|
|
73
|
-
></div>
|
|
66
|
+
<div class="action"><slot name="action" @slotchange=${__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_handleActionSlotchange)}></slot></div>
|
|
74
67
|
</div>`;
|
|
75
68
|
}
|
|
76
69
|
}
|
|
77
|
-
_ZuiTableTopbarElement_mobileBreakpoint = new WeakMap(), _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent = new WeakMap(), _ZuiTableTopbarElement_instances = new WeakSet(),
|
|
70
|
+
_ZuiTableTopbarElement_mobileBreakpoint = new WeakMap(), _ZuiTableTopbarElement_mobileTopbarActionButtonsEvent = new WeakMap(), _ZuiTableTopbarElement_instances = new WeakSet(), _ZuiTableTopbarElement_handleActionSlotchange = function _ZuiTableTopbarElement_handleActionSlotchange() {
|
|
71
|
+
__classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_toggleActionDivDisplay).call(this);
|
|
72
|
+
__classPrivateFieldGet(this, _ZuiTableTopbarElement_mobileBreakpoint, "f").matches ? __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_addBlockStylingToButtons).call(this) : __classPrivateFieldGet(this, _ZuiTableTopbarElement_instances, "m", _ZuiTableTopbarElement_removeBlockStylingFromButtons).call(this);
|
|
73
|
+
}, _ZuiTableTopbarElement_addBlockStylingToButtons = function _ZuiTableTopbarElement_addBlockStylingToButtons() {
|
|
78
74
|
if (this._actionButtons.length > 0) {
|
|
79
75
|
for (const button of this._actionButtons) {
|
|
80
76
|
if (!button.hasAttribute('block')) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAC9E,OAAO,EAAE,KAAK,EAAE,MAAM,2BAA2B,CAAC;AAClD,OAAO,EAAE,iBAAiB,EAAE,MAAM,yCAAyC,CAAC;AAG5E;;;;;;;;GAQG;AACH,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAA9D;;;QAUE,kDAAoC,MAAM,CAAC,UAAU,CAAC,+BAA+B,iBAAiB,CAAC,MAAM,GAAG,CAAC,EAAC;QAElH,gEAAkC,CAAC,CAAsB,EAAE,EAAE;YAC3D,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,uBAAA,IAAI,yFAA0B,MAA9B,IAAI,CAA4B,CAAC,CAAC,CAAC,uBAAA,IAAI,8FAA+B,MAAnC,IAAI,CAAiC,CAAC;QACvF,CAAC,EAAC;
|
|
1
|
+
{"version":3,"file":"zui-table-topbar.js","sourceRoot":"","sources":["../src/zui-table-topbar.ts"],"names":[],"mappings":"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","sourcesContent":["import { ZuiTableBaseElement } from './base.js';\nimport { html } from 'lit';\nimport { queryAssignedElements, queryAssignedNodes } from 'lit/decorators.js';\nimport { style } from './zui-table-topbar-css.js';\nimport { screenBreakpoints } from '@zywave/zui-base/dist/utils/breakpoints';\nimport type { ZuiButton } from '@zywave/zui-button/dist/zui-button.js';\n\n/**\n * Used to house table related pieces such as a search input or `zui-search`, and other up front information.\n *\n * @element zui-table-topbar\n *\n * @slot - Unnamed slot, table cell content goes here\n * @slot counter - Total number of results from table goes here\n * @slot action - Action(s) that affect the whole table goes here\n */\nexport class ZuiTableTopbarElement extends ZuiTableBaseElement {\n @queryAssignedElements({ slot: 'action' })\n private _actionSlottedElements: Array<HTMLCollection>;\n\n @queryAssignedNodes({ slot: 'counter' })\n private _counterSlottedNodes: Array<HTMLCollection>;\n\n @queryAssignedElements({ selector: 'zui-button', slot: 'action' })\n private _actionButtons: Array<ZuiButton>;\n\n #mobileBreakpoint: MediaQueryList = window.matchMedia(`only screen and (max-width: ${screenBreakpoints.xsmall})`);\n\n #mobileTopbarActionButtonsEvent = (b: MediaQueryListEvent) => {\n b.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n };\n\n static get styles() {\n return [super.styles, style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.addEventListener('change', this.#mobileTopbarActionButtonsEvent);\n } else {\n this.#mobileBreakpoint.addListener(this.#mobileTopbarActionButtonsEvent);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n\n if (this.#mobileBreakpoint.addEventListener) {\n this.#mobileBreakpoint.removeEventListener('change', this.#mobileTopbarActionButtonsEvent);\n } else if (this.#mobileBreakpoint.addListener) {\n this.#mobileBreakpoint.removeListener(this.#mobileTopbarActionButtonsEvent);\n }\n }\n\n firstUpdated() {\n this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n this.#toggleActionDivDisplay();\n this.#toggleCounterDivDisplay();\n }\n\n render() {\n return html`<div class=\"topbar\">\n <div class=\"content\"><slot></slot></div>\n <div class=\"counter\"><slot name=\"counter\" @slotchange=\"${this.#toggleCounterDivDisplay}\"></slot></div>\n <div class=\"action\"><slot name=\"action\" @slotchange=${this.#handleActionSlotchange}></slot></div>\n </div>`;\n }\n\n #handleActionSlotchange() {\n this.#toggleActionDivDisplay();\n this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();\n }\n\n #addBlockStylingToButtons() {\n if (this._actionButtons.length > 0) {\n for (const button of this._actionButtons) {\n if (!button.hasAttribute('block')) {\n button.setAttribute('block', '');\n }\n }\n }\n\n this.requestUpdate();\n }\n\n #removeBlockStylingFromButtons() {\n if (this._actionButtons.length > 0) {\n for (const button of this._actionButtons) {\n if (button.hasAttribute('block')) {\n button.removeAttribute('block');\n }\n }\n }\n\n this.requestUpdate();\n }\n\n #toggleCounterDivDisplay() {\n const counter: HTMLElement = this.shadowRoot.querySelector('.counter');\n\n if (this._counterSlottedNodes.length === 0) {\n counter.style.display = 'none';\n } else if (this._counterSlottedNodes.length > 0 && counter.style.display === 'none') {\n counter.style.removeProperty('display');\n }\n\n this.requestUpdate();\n }\n\n #toggleActionDivDisplay() {\n const action: HTMLElement = this.shadowRoot.querySelector('.action');\n\n if (this._actionSlottedElements.length === 0) {\n action.style.display = 'none';\n } else if (this._actionSlottedElements.length > 0 && action.style.display === 'none') {\n action.style.removeProperty('display');\n }\n\n this.requestUpdate();\n }\n}\n\nwindow.customElements.define('zui-table-topbar', ZuiTableTopbarElement);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'zui-table-topbar': ZuiTableTopbarElement;\n }\n}\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zywave/zui-table",
|
|
3
|
-
"version": "4.0.
|
|
3
|
+
"version": "4.0.6-pre.2",
|
|
4
4
|
"main": "dist/index.js",
|
|
5
5
|
"module": "dist/index.js",
|
|
6
6
|
"license": "UNLICENSED",
|
|
@@ -22,11 +22,11 @@
|
|
|
22
22
|
},
|
|
23
23
|
"customElements": "dist/custom-elements.json",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@zywave/zui-base": "^4.1.
|
|
26
|
-
"@zywave/zui-icons": "^4.0.
|
|
25
|
+
"@zywave/zui-base": "^4.1.24-pre.0",
|
|
26
|
+
"@zywave/zui-icons": "^4.0.30-pre.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@zywave/zui-button": "^4.0.
|
|
29
|
+
"@zywave/zui-button": "^4.0.30-pre.1"
|
|
30
30
|
},
|
|
31
|
-
"gitHead": "
|
|
31
|
+
"gitHead": "c936ae257a902f7ee18c7385390a2f15ddba28fc"
|
|
32
32
|
}
|
package/src/zui-table-topbar.ts
CHANGED
|
@@ -64,17 +64,15 @@ export class ZuiTableTopbarElement extends ZuiTableBaseElement {
|
|
|
64
64
|
return html`<div class="topbar">
|
|
65
65
|
<div class="content"><slot></slot></div>
|
|
66
66
|
<div class="counter"><slot name="counter" @slotchange="${this.#toggleCounterDivDisplay}"></slot></div>
|
|
67
|
-
<div class="action"
|
|
68
|
-
><slot
|
|
69
|
-
name="action"
|
|
70
|
-
@slotchange="${this.#toggleActionDivDisplay} ${this.#mobileBreakpoint.matches
|
|
71
|
-
? this.#addBlockStylingToButtons
|
|
72
|
-
: this.#removeBlockStylingFromButtons}"
|
|
73
|
-
></slot
|
|
74
|
-
></div>
|
|
67
|
+
<div class="action"><slot name="action" @slotchange=${this.#handleActionSlotchange}></slot></div>
|
|
75
68
|
</div>`;
|
|
76
69
|
}
|
|
77
70
|
|
|
71
|
+
#handleActionSlotchange() {
|
|
72
|
+
this.#toggleActionDivDisplay();
|
|
73
|
+
this.#mobileBreakpoint.matches ? this.#addBlockStylingToButtons() : this.#removeBlockStylingFromButtons();
|
|
74
|
+
}
|
|
75
|
+
|
|
78
76
|
#addBlockStylingToButtons() {
|
|
79
77
|
if (this._actionButtons.length > 0) {
|
|
80
78
|
for (const button of this._actionButtons) {
|