@aquera/nile-elements 0.0.62 → 0.0.63
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/README.md +5 -0
- package/dist/index.iife.js +62 -30
- package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.css.cjs.js +1 -1
- package/dist/nile-table-body/nile-table-body.css.cjs.js.map +1 -1
- package/dist/nile-table-body/nile-table-body.css.esm.js +3 -3
- package/dist/nile-table-body/nile-table-body.esm.js +4 -3
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
- package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +16 -7
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +25 -4
- package/dist/nile-table-row/nile-table-row.css.cjs.js +1 -1
- package/dist/nile-table-row/nile-table-row.css.cjs.js.map +1 -1
- package/dist/nile-table-row/nile-table-row.css.esm.js +1 -0
- package/dist/src/nile-table-body/nile-table-body.css.js +3 -3
- package/dist/src/nile-table-body/nile-table-body.css.js.map +1 -1
- package/dist/src/nile-table-body/nile-table-body.d.ts +3 -2
- package/dist/src/nile-table-body/nile-table-body.js +24 -16
- package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js +16 -7
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.d.ts +4 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.js +43 -9
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/src/nile-table-row/nile-table-row.css.js +1 -0
- package/dist/src/nile-table-row/nile-table-row.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-table-body/nile-table-body.css.ts +3 -3
- package/src/nile-table-body/nile-table-body.ts +24 -15
- package/src/nile-table-header-item/nile-table-header-item.css.ts +16 -7
- package/src/nile-table-header-item/nile-table-header-item.ts +45 -12
- package/src/nile-table-row/nile-table-row.css.ts +1 -0
|
@@ -12,8 +12,7 @@ export const styles = css `
|
|
|
12
12
|
:host {
|
|
13
13
|
display: table-cell;
|
|
14
14
|
box-sizing: border-box;
|
|
15
|
-
--min
|
|
16
|
-
--min--width: 180px;
|
|
15
|
+
--min-height: 52px;
|
|
17
16
|
}
|
|
18
17
|
|
|
19
18
|
.headers {
|
|
@@ -21,26 +20,36 @@ export const styles = css `
|
|
|
21
20
|
padding: 0 var(--nile-type-scale-4);
|
|
22
21
|
align-items: center;
|
|
23
22
|
height: auto;
|
|
24
|
-
min-height: var(--min
|
|
25
|
-
width:
|
|
26
|
-
min-width: var(--min--width);
|
|
23
|
+
min-height: var(--min-height);
|
|
24
|
+
width: 100%;
|
|
27
25
|
gap: 8px;
|
|
28
26
|
color: var(--nile-colors-dark-900);
|
|
29
27
|
font-feature-settings: 'clig' off, 'liga' off;
|
|
30
28
|
font-size: var(--nile-type-scale-3);
|
|
31
29
|
font-style: normal;
|
|
32
30
|
font-weight: var(--nile-font-weight-regular);
|
|
33
|
-
line-height: var(--nile-type-scale-3);
|
|
31
|
+
line-height: var(--nile-type-scale-3);
|
|
34
32
|
letter-spacing: 0.2px;
|
|
35
33
|
}
|
|
36
34
|
|
|
37
35
|
slot {
|
|
38
36
|
cursor: pointer;
|
|
39
37
|
}
|
|
40
|
-
|
|
38
|
+
|
|
41
39
|
nile-icon {
|
|
42
40
|
cursor: pointer;
|
|
43
41
|
}
|
|
42
|
+
|
|
43
|
+
.sorting__icons {
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
justify-content: space-between;
|
|
47
|
+
align-items: centre;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.sorting__icons nile-icon:hover {
|
|
51
|
+
opacity: 0.4;
|
|
52
|
+
}
|
|
44
53
|
`;
|
|
45
54
|
export default [styles];
|
|
46
55
|
//# sourceMappingURL=nile-table-header-item.css.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-table-header-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0CxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n :host {\n display: table-cell;\n box-sizing: border-box;\n --min-height: 52px;\n }\n\n .headers {\n display: flex;\n padding: 0 var(--nile-type-scale-4);\n align-items: center;\n height: auto;\n min-height: var(--min-height);\n width: 100%;\n gap: 8px;\n color: var(--nile-colors-dark-900);\n font-feature-settings: 'clig' off, 'liga' off;\n font-size: var(--nile-type-scale-3);\n font-style: normal;\n font-weight: var(--nile-font-weight-regular);\n line-height: var(--nile-type-scale-3);\n letter-spacing: 0.2px;\n }\n\n slot {\n cursor: pointer;\n }\n\n nile-icon {\n cursor: pointer;\n }\n\n .sorting__icons {\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: centre;\n }\n\n .sorting__icons nile-icon:hover {\n opacity: 0.4;\n }\n`;\n\nexport default [styles];\n"]}
|
|
@@ -21,13 +21,16 @@ export declare class NileTableHeaderItem extends NileElement {
|
|
|
21
21
|
static get styles(): CSSResultArray;
|
|
22
22
|
/** Enables the sort functionality. */
|
|
23
23
|
havesort: boolean;
|
|
24
|
+
/** Enables the sort functionality. */
|
|
25
|
+
havefilter: boolean;
|
|
24
26
|
/** Places the icon . */
|
|
25
27
|
iconName: string;
|
|
26
28
|
/**
|
|
27
29
|
* Render method
|
|
28
30
|
* @slot This is a slot test
|
|
29
31
|
*/
|
|
30
|
-
private
|
|
32
|
+
private handleSort;
|
|
33
|
+
private handleSearch;
|
|
31
34
|
render(): TemplateResult;
|
|
32
35
|
}
|
|
33
36
|
export default NileTableHeaderItem;
|
|
@@ -22,6 +22,8 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
|
22
22
|
this.hasSlotController = new HasSlotController(this, '[default]');
|
|
23
23
|
/** Enables the sort functionality. */
|
|
24
24
|
this.havesort = false;
|
|
25
|
+
/** Enables the sort functionality. */
|
|
26
|
+
this.havefilter = false;
|
|
25
27
|
/** Places the icon . */
|
|
26
28
|
this.iconName = '';
|
|
27
29
|
/* #endregion */
|
|
@@ -39,27 +41,59 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
|
39
41
|
* Render method
|
|
40
42
|
* @slot This is a slot test
|
|
41
43
|
*/
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
44
|
+
handleSort(e) {
|
|
45
|
+
const clickedIcon = e.target;
|
|
46
|
+
const order = clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';
|
|
47
|
+
let curr_sort_string = this.hasSlotController.host.innerHTML;
|
|
48
|
+
this.emit('nile-click-sort', {
|
|
49
|
+
value: { curr_sort_string, order },
|
|
50
|
+
});
|
|
51
|
+
}
|
|
52
|
+
handleSearch(e) {
|
|
53
|
+
this.emit('nile-search', { value: e.detail.value });
|
|
48
54
|
}
|
|
49
55
|
render() {
|
|
50
56
|
return html ` ${this.hasSlotController.test('[default]')
|
|
51
57
|
? html ` <div class="headers">
|
|
52
|
-
<slot
|
|
58
|
+
<slot> </slot>
|
|
59
|
+
${this.havesort
|
|
60
|
+
? html ` <span class="sorting__icons">
|
|
61
|
+
<nile-icon
|
|
62
|
+
name="arrowdropup"
|
|
63
|
+
size="16"
|
|
64
|
+
@click=${this.handleSort}
|
|
65
|
+
></nile-icon>
|
|
66
|
+
<nile-icon
|
|
67
|
+
name="arrowdropdown"
|
|
68
|
+
size="16"
|
|
69
|
+
@click=${this.handleSort}
|
|
70
|
+
></nile-icon>
|
|
71
|
+
</span>`
|
|
72
|
+
: null}
|
|
53
73
|
${this.iconName
|
|
54
|
-
? html ` <nile-icon name="${this.iconName}" size="16"
|
|
74
|
+
? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
|
|
75
|
+
: html ``}
|
|
76
|
+
${this.havefilter
|
|
77
|
+
? html ` <nile-popover title="Filter" placement="bottom">
|
|
78
|
+
<nile-icon name="filter" size="16" slot="anchor"></nile-icon>
|
|
79
|
+
<nile-input
|
|
80
|
+
placeholder="Search"
|
|
81
|
+
@nile-input=${this.handleSearch}
|
|
82
|
+
part="filter__search"
|
|
83
|
+
></nile-input>
|
|
84
|
+
<slot name="filter__content" part="filter__content"></slot>
|
|
85
|
+
</nile-popover>`
|
|
55
86
|
: html ``}
|
|
56
87
|
</div>`
|
|
57
|
-
:
|
|
88
|
+
: null}`;
|
|
58
89
|
}
|
|
59
90
|
};
|
|
60
91
|
__decorate([
|
|
61
92
|
property({ type: Boolean, reflect: true })
|
|
62
93
|
], NileTableHeaderItem.prototype, "havesort", void 0);
|
|
94
|
+
__decorate([
|
|
95
|
+
property({ type: Boolean, reflect: true })
|
|
96
|
+
], NileTableHeaderItem.prototype, "havefilter", void 0);
|
|
63
97
|
__decorate([
|
|
64
98
|
property({ type: String, reflect: true, attribute: 'icon-name' })
|
|
65
99
|
], NileTableHeaderItem.prototype, "iconName", void 0);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,WAAW;IAA7C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAS9E,sCAAsC;QACM,aAAQ,GAAG,KAAK,CAAC;QAE7D,sCAAsC;QACM,eAAU,GAAG,KAAK,CAAC;QAE/D,wBAAwB;QAC2C,aAAQ,GACzE,EAAE,CAAC;QA2DL,gBAAgB;IAClB,CAAC;IA5EC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAYD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,UAAU,CAAC,CAAM;QACvB,MAAM,WAAW,GAAG,CAAC,CAAC,MAAM,CAAC;QAC7B,MAAM,KAAK,GACT,WAAW,CAAC,YAAY,CAAC,MAAM,CAAC,KAAK,aAAa,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;QACtE,IAAI,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7D,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE;SACnC,CAAC,CAAC;IACL,CAAC;IAEO,YAAY,CAAC,CAAM;QACzB,IAAI,CAAC,IAAI,CAAC,aAAa,EAAE,EAAE,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC,CAAC;IACtD,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA,IAAI,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACrD,CAAC,CAAC,IAAI,CAAA;;YAEA,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA;;;;2BAIS,IAAI,CAAC,UAAU;;;;;2BAKf,IAAI,CAAC,UAAU;;sBAEpB;gBACV,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ;gBACb,CAAC,CAAC,IAAI,CAAA,qBAAqB,IAAI,CAAC,QAAQ,0BAA0B;gBAClE,CAAC,CAAC,IAAI,CAAA,EAAE;YACR,IAAI,CAAC,UAAU;gBACf,CAAC,CAAC,IAAI,CAAA;;;;gCAIc,IAAI,CAAC,YAAY;;;;8BAInB;gBAClB,CAAC,CAAC,IAAI,CAAA,EAAE;eACL;YACT,CAAC,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;CAEF,CAAA;AAnE6C;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uDAAoB;AAGI;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;qDAC7D;AAlBM,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA8E/B;SA9EY,mBAAmB;AAgFhC,eAAe,mBAAmB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n LitElement,\n html,\n property,\n CSSResultArray,\n TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-table-header-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile icon component.\n *\n * @tag nile-table-header-item\n *\n */\n@customElement('nile-table-header-item')\nexport class NileTableHeaderItem extends NileElement {\n private readonly hasSlotController = new HasSlotController(this, '[default]');\n /**\n * The styles for TableHeaderItem\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n /** Enables the sort functionality. */\n @property({ type: Boolean, reflect: true }) havesort = false;\n\n /** Enables the sort functionality. */\n @property({ type: Boolean, reflect: true }) havefilter = false;\n\n /** Places the icon . */\n @property({ type: String, reflect: true, attribute: 'icon-name' }) iconName =\n '';\n\n /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n private handleSort(e: any) {\n const clickedIcon = e.target;\n const order =\n clickedIcon.getAttribute('name') === 'arrowdropup' ? 'asc' : 'desc';\n let curr_sort_string = this.hasSlotController.host.innerHTML;\n this.emit('nile-click-sort', {\n value: { curr_sort_string, order },\n });\n }\n\n private handleSearch(e: any) {\n this.emit('nile-search', { value: e.detail.value });\n }\n\n public render(): TemplateResult {\n return html` ${this.hasSlotController.test('[default]')\n ? html` <div class=\"headers\">\n <slot> </slot>\n ${this.havesort\n ? html` <span class=\"sorting__icons\">\n <nile-icon\n name=\"arrowdropup\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>\n <nile-icon\n name=\"arrowdropdown\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>\n </span>`\n : null}\n ${this.iconName\n ? html` <nile-icon name=\"${this.iconName}\" size=\"16\"></nile-icon>`\n : html``}\n ${this.havefilter\n ? html` <nile-popover title=\"Filter\" placement=\"bottom\">\n <nile-icon name=\"filter\" size=\"16\" slot=\"anchor\"></nile-icon>\n <nile-input\n placeholder=\"Search\"\n @nile-input=${this.handleSearch}\n part=\"filter__search\"\n ></nile-input>\n <slot name=\"filter__content\" part=\"filter__content\"></slot>\n </nile-popover>`\n : html``}\n </div>`\n : null}`;\n }\n /* #endregion */\n}\n\nexport default NileTableHeaderItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-header-item': NileTableHeaderItem;\n }\n}\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-table-row.css.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;CAWxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * TableRow CSS\n */\nexport const styles = css`\n :host {\n display: table-row;\n width:100%;\n --nile-header-background:var(--nile-table-header-background-color);\n border-bottom: 1px solid var(--nile-table-row-border-color);\n }\n\n slot::slotted(nile-table-header-item) {\n background-color: var(--nile-header-background);\n }\n`;\n\nexport default [styles];\n"]}
|