@aquera/nile-elements 0.1.57-beta-1.8 → 0.1.57
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 +3 -2
- package/demo/index.html +26 -10
- package/demo/index.js +0 -83
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.js +281 -275
- package/dist/nile-slider/index.cjs.js +2 -0
- package/dist/nile-slider/index.cjs.js.map +1 -0
- package/dist/nile-slider/index.esm.js +1 -0
- package/dist/nile-slider/nile-slider.cjs.js +2 -0
- package/dist/nile-slider/nile-slider.cjs.js.map +1 -0
- package/dist/nile-slider/nile-slider.css.cjs.js +2 -0
- package/dist/nile-slider/nile-slider.css.cjs.js.map +1 -0
- package/dist/nile-slider/nile-slider.css.esm.js +106 -0
- package/dist/nile-slider/nile-slider.esm.js +27 -0
- package/dist/nile-slider/nile-slider.template.cjs.js +2 -0
- package/dist/nile-slider/nile-slider.template.cjs.js.map +1 -0
- package/dist/nile-slider/nile-slider.template.esm.js +59 -0
- package/dist/nile-slider/types/nile-slider.enums.cjs.js +2 -0
- package/dist/nile-slider/types/nile-slider.enums.cjs.js.map +1 -0
- package/dist/nile-slider/types/nile-slider.enums.esm.js +1 -0
- package/dist/nile-slider/types/nile-slider.types.cjs.js +2 -0
- package/dist/nile-slider/types/nile-slider.types.cjs.js.map +1 -0
- package/dist/nile-slider/types/nile-slider.types.esm.js +1 -0
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js +2 -0
- package/dist/nile-slider/utils/nile-slider.utils.cjs.js.map +1 -0
- package/dist/nile-slider/utils/nile-slider.utils.esm.js +1 -0
- package/dist/nile-table-body/index.cjs.js +1 -1
- package/dist/nile-table-body/index.esm.js +1 -1
- 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 +2 -5
- package/dist/nile-table-body/nile-table-body.esm.js +2 -3
- package/dist/nile-table-cell-item/index.cjs.js +1 -1
- package/dist/nile-table-cell-item/index.esm.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
- package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +3 -22
- package/dist/nile-table-cell-item/nile-table-cell-item.esm.js +3 -8
- package/dist/nile-table-header-item/index.cjs.js +1 -1
- package/dist/nile-table-header-item/index.esm.js +1 -1
- 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 +2 -6
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +32 -64
- package/dist/src/index.d.ts +1 -0
- package/dist/src/index.js +1 -0
- package/dist/src/index.js.map +1 -1
- package/dist/src/nile-slider/index.d.ts +1 -0
- package/dist/src/nile-slider/index.js +2 -0
- package/dist/src/nile-slider/index.js.map +1 -0
- package/dist/src/nile-slider/nile-slider.css.d.ts +6 -0
- package/dist/src/nile-slider/nile-slider.css.js +118 -0
- package/dist/src/nile-slider/nile-slider.css.js.map +1 -0
- package/dist/src/nile-slider/nile-slider.d.ts +48 -0
- package/dist/src/nile-slider/nile-slider.js +217 -0
- package/dist/src/nile-slider/nile-slider.js.map +1 -0
- package/dist/src/nile-slider/nile-slider.template.d.ts +5 -0
- package/dist/src/nile-slider/nile-slider.template.js +73 -0
- package/dist/src/nile-slider/nile-slider.template.js.map +1 -0
- package/dist/src/nile-slider/types/nile-slider.enums.d.ts +10 -0
- package/dist/src/nile-slider/types/nile-slider.enums.js +2 -0
- package/dist/src/nile-slider/types/nile-slider.enums.js.map +1 -0
- package/dist/src/nile-slider/types/nile-slider.types.d.ts +1 -0
- package/dist/src/nile-slider/types/nile-slider.types.js +2 -0
- package/dist/src/nile-slider/types/nile-slider.types.js.map +1 -0
- package/dist/src/nile-slider/utils/nile-slider.utils.d.ts +11 -0
- package/dist/src/nile-slider/utils/nile-slider.utils.js +99 -0
- package/dist/src/nile-slider/utils/nile-slider.utils.js.map +1 -0
- package/dist/src/nile-table-body/nile-table-body.css.js +0 -4
- 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 +0 -2
- package/dist/src/nile-table-body/nile-table-body.js +0 -11
- package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +1 -21
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
- package/dist/src/nile-table-cell-item/nile-table-cell-item.d.ts +0 -3
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js +8 -27
- package/dist/src/nile-table-cell-item/nile-table-cell-item.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js +0 -5
- 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 +0 -3
- package/dist/src/nile-table-header-item/nile-table-header-item.js +35 -86
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -4
- package/src/index.ts +2 -1
- package/src/nile-slider/index.ts +1 -0
- package/src/nile-slider/nile-slider.css.ts +119 -0
- package/src/nile-slider/nile-slider.template.ts +77 -0
- package/src/nile-slider/nile-slider.ts +215 -0
- package/src/nile-slider/types/nile-slider.enums.ts +10 -0
- package/src/nile-slider/types/nile-slider.types.ts +13 -0
- package/src/nile-slider/utils/nile-slider.utils.ts +136 -0
- package/src/nile-table-body/nile-table-body.css.ts +0 -4
- package/src/nile-table-body/nile-table-body.ts +0 -10
- package/src/nile-table-cell-item/nile-table-cell-item.css.ts +1 -21
- package/src/nile-table-cell-item/nile-table-cell-item.ts +5 -22
- package/src/nile-table-header-item/nile-table-header-item.css.ts +0 -5
- package/src/nile-table-header-item/nile-table-header-item.ts +45 -94
- package/vscode-html-custom-data.json +138 -59
- package/dist/internal/resizable-table-helper.cjs.js +0 -2
- package/dist/internal/resizable-table-helper.cjs.js.map +0 -1
- package/dist/internal/resizable-table-helper.esm.js +0 -1
- package/dist/internal/resizable-table-styles.cjs.js +0 -2
- package/dist/internal/resizable-table-styles.cjs.js.map +0 -1
- package/dist/internal/resizable-table-styles.esm.js +0 -120
- package/dist/src/internal/resizable-table-helper.d.ts +0 -59
- package/dist/src/internal/resizable-table-helper.js +0 -111
- package/dist/src/internal/resizable-table-helper.js.map +0 -1
- package/dist/src/internal/resizable-table-styles.d.ts +0 -16
- package/dist/src/internal/resizable-table-styles.js +0 -137
- package/dist/src/internal/resizable-table-styles.js.map +0 -1
- package/src/internal/resizable-table-helper.ts +0 -151
- package/src/internal/resizable-table-styles.ts +0 -144
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAIL,MAAM,KAAK,CAAC;AACb,OAAO,EACL,aAAa,EACb,KAAK,EACL,KAAK,EAGL,kBAAkB,EAClB,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAC3B,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/C,OAAO,WAAW,MAAM,0BAA0B,CAAC;
|
1
|
+
{"version":3,"file":"nile-table-body.js","sourceRoot":"","sources":["../../../src/nile-table-body/nile-table-body.ts"],"names":[],"mappings":"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","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 CSSResultArray,\n TemplateResult,\n PropertyValues,\n} from 'lit';\nimport {\n customElement,\n query,\n state,\n queryAll,\n queryAssignedElements,\n queryAssignedNodes,\n property\n} from 'lit/decorators.js';\nimport { styles } from './nile-table-body.css';\nimport NileElement from '../internal/nile-element';\nimport { getInnerHTML } from '../slot';\n\n/**\n * nile-table-body component.\n *\n * @tag nile-table-body\n *\n */\n@customElement('nile-table-body')\nexport class NileTableBody extends NileElement {\n /**\n * The styles for TableBody\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\n\n @query('slot') defaultSlot: HTMLSlotElement;\n @queryAssignedNodes({ flatten: true }) _childNodes!: Array<HTMLElement>;\n @property() type: 'primary' | 'secondary' = 'primary';\n\n @state() private rows_data: any[] = [];\n @state() private header_rows_data: any[] = [];\n @state() private sort__index: number;\n @state() private search__index: number;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this.emit('nile-body-load', { value: this.type, comp:this },true,false)\n }\n\n /* #endregion */\n\n /* #region Methods */\n\n private getChildren(child: any, tagname: string) {\n return child.querySelectorAll(tagname);\n }\n\n private getIndexValue(index__value: string): number {\n return this.header_rows_data.indexOf(index__value);\n }\n\n handleSlotchange(e: any) {\n let row_data: any = [];\n this._childNodes.forEach((child: any) => {\n if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {\n let nilerows = this.getChildren(child, 'nile-table-cell-item');\n if (nilerows.length > 0) {\n nilerows.forEach((element: { innerHTML: any }) => {\n row_data.push(element.innerHTML);\n });\n this.rows_data.push(row_data);\n } else {\n let nileheaders = this.getChildren(child, 'nile-table-header-item');\n if (nileheaders.length > 0) {\n nileheaders.forEach((header: HTMLSlotElement, index: number) => {\n this.header_rows_data.push(header.innerHTML);\n });\n }\n }\n row_data = [];\n }\n });\n }\n\n private handleSort(e: any) {\n const { curr_sort_string, order } = e.detail.value;\n const header_index = this.getIndexValue(curr_sort_string);\n this.emit('nile-sort', {\n value: { header_index, curr_sort_string, order },\n });\n }\n\n private handleSearch(e: any) {\n const searchText = e.detail.value;\n this.search__index = this.getIndexValue(e.target.textContent);\n this.emit('nile-table-search', {\n index: this.search__index,\n value: searchText,\n });\n }\n\n public render(): TemplateResult {\n return html`\n <div class=\"base\" part=\"base\">\n <slot name=\"table__header\" class=\"table__header\"></slot>\n <slot\n @slotchange=${this.handleSlotchange}\n @nile-click-sort=${this.handleSort}\n class=\"nile__table__body\"\n @nile-search=${this.handleSearch}\n ></slot>\n </div>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableBody;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-body': NileTableBody;\n }\n}\n"]}
|
@@ -5,7 +5,6 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { css } from 'lit';
|
8
|
-
import { resizableHostStyles, resizerStyles, resizableSlotStyles } from '../internal/resizable-table-styles';
|
9
8
|
/**
|
10
9
|
* TableCellItem CSS
|
11
10
|
*/
|
@@ -18,20 +17,11 @@ export const styles = css `
|
|
18
17
|
box-sizing: border-box;
|
19
18
|
display: table-cell;
|
20
19
|
vertical-align: middle;
|
20
|
+
max-width: var(--max--cell-width);
|
21
21
|
padding: 16px 24px;
|
22
|
-
max-width: var(--max--cell-width);
|
23
22
|
min-height: var(--min--height);
|
24
23
|
}
|
25
24
|
|
26
|
-
.cell__wrapper {
|
27
|
-
height: 100%;
|
28
|
-
position: relative;
|
29
|
-
display: flex;
|
30
|
-
align-items: center;
|
31
|
-
overflow: hidden;
|
32
|
-
width: 100%;
|
33
|
-
}
|
34
|
-
|
35
25
|
.column {
|
36
26
|
min-width:var(--min-cell-width);
|
37
27
|
width:var(--cell-width);
|
@@ -44,17 +34,7 @@ export const styles = css `
|
|
44
34
|
/* line-height: var(--nile-type-scale-6); */
|
45
35
|
line-height: normal;
|
46
36
|
letter-spacing: 0.2px;
|
47
|
-
overflow: hidden;
|
48
|
-
text-overflow: ellipsis;
|
49
|
-
white-space: nowrap;
|
50
|
-
flex: 1;
|
51
|
-
display: block;
|
52
37
|
}
|
53
|
-
|
54
|
-
/* Import resizable styles */
|
55
|
-
${resizableHostStyles}
|
56
|
-
${resizerStyles}
|
57
|
-
${resizableSlotStyles}
|
58
38
|
`;
|
59
39
|
export default [styles];
|
60
40
|
//# sourceMappingURL=nile-table-cell-item.css.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;
|
1
|
+
{"version":3,"file":"nile-table-cell-item.css.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BxB,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';\n\n/**\n * TableCellItem CSS\n */\nexport const styles = css`\n :host {\n --min-cell-width:auto;\n --cell-width:auto;\n --min--height: 52px;\n --max--cell-width: auto;\n box-sizing: border-box;\n display: table-cell;\n vertical-align: middle;\n max-width: var(--max--cell-width);\n padding: 16px 24px;\n min-height: var(--min--height);\n }\n\n .column {\n min-width:var(--min-cell-width);\n width:var(--cell-width);\n height: 100%;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\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-6); */\n line-height: normal;\n letter-spacing: 0.2px;\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -19,9 +19,6 @@ export declare class NileTableCellItem extends NileElement {
|
|
19
19
|
* @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
|
20
20
|
*/
|
21
21
|
static get styles(): CSSResultArray;
|
22
|
-
/** Enables the resize functionality. */
|
23
|
-
resizable: boolean;
|
24
|
-
private handleResizeStart;
|
25
22
|
/**
|
26
23
|
* Render method
|
27
24
|
* @slot This is a slot test
|
@@ -6,11 +6,10 @@
|
|
6
6
|
*/
|
7
7
|
import { __decorate } from "tslib";
|
8
8
|
import { html, } from 'lit';
|
9
|
-
import { customElement
|
9
|
+
import { customElement } from 'lit/decorators.js';
|
10
10
|
import { styles } from './nile-table-cell-item.css';
|
11
11
|
import NileElement from '../internal/nile-element';
|
12
12
|
import { HasSlotController } from '../internal/slot';
|
13
|
-
import { createResizeHandler } from '../internal/resizable-table-helper';
|
14
13
|
/**
|
15
14
|
* Nile table Cell Item component.
|
16
15
|
*
|
@@ -21,11 +20,6 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
|
|
21
20
|
constructor() {
|
22
21
|
super(...arguments);
|
23
22
|
this.hasSlotController = new HasSlotController(this, '[default]');
|
24
|
-
/** Enables the resize functionality. */
|
25
|
-
this.resizable = false;
|
26
|
-
/* #endregion */
|
27
|
-
/* #region Methods */
|
28
|
-
this.handleResizeStart = createResizeHandler(this, 50);
|
29
23
|
/* #endregion */
|
30
24
|
}
|
31
25
|
/**
|
@@ -35,33 +29,20 @@ let NileTableCellItem = class NileTableCellItem extends NileElement {
|
|
35
29
|
static get styles() {
|
36
30
|
return [styles];
|
37
31
|
}
|
32
|
+
/* #endregion */
|
33
|
+
/* #region Methods */
|
38
34
|
/**
|
39
35
|
* Render method
|
40
36
|
* @slot This is a slot test
|
41
37
|
*/
|
42
38
|
render() {
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
: ''}
|
49
|
-
<div class="resizer" @mousedown=${this.handleResizeStart}></div>
|
50
|
-
</div>
|
51
|
-
`;
|
52
|
-
}
|
53
|
-
else {
|
54
|
-
return html `
|
55
|
-
${this.hasSlotController.test('[default]')
|
56
|
-
? html ` <slot class="column" part="nile__table-cell"> </slot>`
|
57
|
-
: ''}
|
58
|
-
`;
|
59
|
-
}
|
39
|
+
return html `
|
40
|
+
${this.hasSlotController.test('[default]')
|
41
|
+
? html ` <slot class="column" part="nile__table-cell"> </slot>`
|
42
|
+
: ''}
|
43
|
+
`;
|
60
44
|
}
|
61
45
|
};
|
62
|
-
__decorate([
|
63
|
-
property({ type: Boolean, reflect: true })
|
64
|
-
], NileTableCellItem.prototype, "resizable", void 0);
|
65
46
|
NileTableCellItem = __decorate([
|
66
47
|
customElement('nile-table-cell-item')
|
67
48
|
], NileTableCellItem);
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,
|
1
|
+
{"version":3,"file":"nile-table-cell-item.js","sourceRoot":"","sources":["../../../src/nile-table-cell-item/nile-table-cell-item.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD;;;;;GAKG;AAEI,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QACY,sBAAiB,GAAG,IAAI,iBAAiB,CAAC,IAAI,EAAE,WAAW,CAAC,CAAC;QAyB9E,gBAAgB;IAClB,CAAC;IAzBC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACI,MAAM;QACX,OAAO,IAAI,CAAA;QACP,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,WAAW,CAAC;YACxC,CAAC,CAAC,IAAI,CAAA,wDAAwD;YAC9D,CAAC,CAAC,EAAE;KACP,CAAC;IACJ,CAAC;CAGF,CAAA;AA3BY,iBAAiB;IAD7B,aAAa,CAAC,sBAAsB,CAAC;GACzB,iBAAiB,CA2B7B;;AAED,eAAe,iBAAiB,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 CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-cell-item.css';\nimport NileElement from '../internal/nile-element';\nimport { HasSlotController } from '../internal/slot';\n\n/**\n * Nile table Cell Item component.\n *\n * @tag nile-table-cell-item\n *\n */\n@customElement('nile-table-cell-item')\nexport class NileTableCellItem extends NileElement {\n private readonly hasSlotController = new HasSlotController(this, '[default]');\n /**\n * The styles for TableCellItem\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 /* #endregion */\n\n /* #region Methods */\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n return html`\n ${this.hasSlotController.test('[default]')\n ? html` <slot class=\"column\" part=\"nile__table-cell\"> </slot>`\n : ''}\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableCellItem;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-cell-item': NileTableCellItem;\n }\n}\n"]}
|
@@ -5,7 +5,6 @@
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
6
6
|
*/
|
7
7
|
import { css } from 'lit';
|
8
|
-
import { resizableHeaderStyles, headerResizerStyles } from '../internal/resizable-table-styles';
|
9
8
|
/**
|
10
9
|
* TableHeaderItem CSS
|
11
10
|
*/
|
@@ -66,10 +65,6 @@ export const styles = css `
|
|
66
65
|
.headers:hover .hover__arrow {
|
67
66
|
opacity: 0.3;
|
68
67
|
}
|
69
|
-
|
70
|
-
/* Import resizable styles */
|
71
|
-
${resizableHeaderStyles}
|
72
|
-
${headerResizerStyles}
|
73
68
|
`;
|
74
69
|
export default [styles];
|
75
70
|
//# 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,KAAK,CAAC;
|
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,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyDxB,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';\n\n/**\n * TableHeaderItem CSS\n */\nexport const styles = css`\n :host {\n --cell-min-width: auto;\n --cell-width: auto;\n display: table-cell;\n box-sizing: border-box;\n }\n \n .header__item__wrapper{\n min-width:var(--cell-min-width);\n width:var(--cell-width);\n display:flex;\n align-items:center;\n box-sizing: border-box;\n padding: var(--nile-spacing-spacing-lg) var(--nile-spacing-spacing-3xl);\n min-height: 44px;\n height: 44px;\n }\n\n .headers {\n overflow:hidden;\n display: flex;\n align-items: center;\n height: auto;\n width: 100%;\n gap: 8px;\n color: var(--nile-colors-gray-light-mode-600);\n font-family: var(--nile-font-family-serif);\n font-feature-settings: 'clig' off, 'liga' off;\n font-size: var(--nile-type-scale-2);\n font-weight: 500;\n font-style: normal;\n /* line-height: var(--nile-type-scale-5); */\n line-height: normal;\n }\n\n nile-icon {\n cursor: pointer;\n }\n\n .sorting__icons {\n display: flex;\n flex-direction: column;\n align-items: centre;\n }\n\n .sorting__icons nile-icon:hover {\n opacity: 0.4;\n }\n\n .hover__arrow {\n opacity: 0;\n }\n\n .headers:hover .hover__arrow {\n opacity: 0.3;\n }\n`;\n\nexport default [styles];\n"]}
|
@@ -25,8 +25,6 @@ export declare class NileTableHeaderItem extends NileElement {
|
|
25
25
|
havefilter: boolean;
|
26
26
|
/** Places the icon . */
|
27
27
|
iconName: string;
|
28
|
-
/** Enables the resize functionality. */
|
29
|
-
resizable: boolean;
|
30
28
|
sorting_ct: number;
|
31
29
|
/**
|
32
30
|
* Render method
|
@@ -34,7 +32,6 @@ export declare class NileTableHeaderItem extends NileElement {
|
|
34
32
|
*/
|
35
33
|
private handleSort;
|
36
34
|
private handleSearch;
|
37
|
-
private handleResizeStart;
|
38
35
|
render(): TemplateResult;
|
39
36
|
}
|
40
37
|
export default NileTableHeaderItem;
|
@@ -10,7 +10,6 @@ import { customElement, state, property } from 'lit/decorators.js';
|
|
10
10
|
import { styles } from './nile-table-header-item.css';
|
11
11
|
import NileElement from '../internal/nile-element';
|
12
12
|
import { HasSlotController } from '../internal/slot';
|
13
|
-
import { createResizeHandler } from '../internal/resizable-table-helper';
|
14
13
|
/**
|
15
14
|
* Nile icon component.
|
16
15
|
*
|
@@ -27,10 +26,8 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
27
26
|
this.havefilter = false;
|
28
27
|
/** Places the icon . */
|
29
28
|
this.iconName = '';
|
30
|
-
/** Enables the resize functionality. */
|
31
|
-
this.resizable = false;
|
32
29
|
this.sorting_ct = 0;
|
33
|
-
|
30
|
+
/* #endregion */
|
34
31
|
}
|
35
32
|
/**
|
36
33
|
* The styles for TableHeaderItem
|
@@ -57,95 +54,50 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
57
54
|
this.emit('nile-search', { value: e.detail.value });
|
58
55
|
}
|
59
56
|
render() {
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
57
|
+
return html ` ${this.hasSlotController.test('[default]')
|
58
|
+
? html `
|
59
|
+
<div class="header__item__wrapper" part="nile__table-header-cell">
|
60
|
+
<div class="headers">
|
61
|
+
<slot> </slot>
|
62
|
+
${this.havesort && this.sorting_ct % 3 === 0
|
66
63
|
? html `<nile-icon
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
64
|
+
name="sortdown"
|
65
|
+
size="16"
|
66
|
+
@click=${this.handleSort}
|
67
|
+
class="hover__arrow"
|
68
|
+
></nile-icon>`
|
72
69
|
: null}
|
73
|
-
|
70
|
+
${this.havesort && this.sorting_ct % 3 === 1
|
74
71
|
? html `<nile-icon
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
72
|
+
name="sortdown"
|
73
|
+
size="16"
|
74
|
+
@click=${this.handleSort}
|
75
|
+
></nile-icon>`
|
79
76
|
: null}
|
80
|
-
|
77
|
+
${this.havesort && this.sorting_ct % 3 === 2
|
81
78
|
? html `<nile-icon
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
79
|
+
name="sortup"
|
80
|
+
size="16"
|
81
|
+
@click=${this.handleSort}
|
82
|
+
></nile-icon>`
|
86
83
|
: null}
|
87
|
-
|
84
|
+
${this.iconName
|
88
85
|
? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
|
89
86
|
: html ``}
|
90
|
-
|
87
|
+
${this.havefilter
|
91
88
|
? html ` <nile-popover title="Filter" placement="bottom">
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
89
|
+
<nile-icon name="filter" size="16" slot="anchor"></nile-icon>
|
90
|
+
<nile-input
|
91
|
+
placeholder="Search"
|
92
|
+
@nile-input=${this.handleSearch}
|
93
|
+
part="filter__search"
|
94
|
+
></nile-input>
|
95
|
+
<slot name="filter__content" part="filter__content"></slot>
|
96
|
+
</nile-popover>`
|
100
97
|
: html ``}
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
}
|
105
|
-
else {
|
106
|
-
return html `
|
107
|
-
<div class="header__item__wrapper" part="nile__table-header-cell">
|
108
|
-
<div class="headers">
|
109
|
-
<slot> </slot>
|
110
|
-
${this.havesort && this.sorting_ct % 3 === 0
|
111
|
-
? html `<nile-icon
|
112
|
-
name="sortdown"
|
113
|
-
size="16"
|
114
|
-
@click=${this.handleSort}
|
115
|
-
class="hover__arrow"
|
116
|
-
></nile-icon>`
|
117
|
-
: null}
|
118
|
-
${this.havesort && this.sorting_ct % 3 === 1
|
119
|
-
? html `<nile-icon
|
120
|
-
name="sortdown"
|
121
|
-
size="16"
|
122
|
-
@click=${this.handleSort}
|
123
|
-
></nile-icon>`
|
124
|
-
: null}
|
125
|
-
${this.havesort && this.sorting_ct % 3 === 2
|
126
|
-
? html `<nile-icon
|
127
|
-
name="sortup"
|
128
|
-
size="16"
|
129
|
-
@click=${this.handleSort}
|
130
|
-
></nile-icon>`
|
131
|
-
: null}
|
132
|
-
${this.iconName
|
133
|
-
? html ` <nile-icon name="${this.iconName}" size="16"></nile-icon>`
|
134
|
-
: html ``}
|
135
|
-
${this.havefilter
|
136
|
-
? html ` <nile-popover title="Filter" placement="bottom">
|
137
|
-
<nile-icon name="filter" size="16" slot="anchor"></nile-icon>
|
138
|
-
<nile-input
|
139
|
-
placeholder="Search"
|
140
|
-
@nile-input=${this.handleSearch}
|
141
|
-
part="filter__search"
|
142
|
-
></nile-input>
|
143
|
-
<slot name="filter__content" part="filter__content"></slot>
|
144
|
-
</nile-popover>`
|
145
|
-
: html ``}
|
146
|
-
</div>
|
147
|
-
</div>`;
|
148
|
-
}
|
98
|
+
</div>
|
99
|
+
</div>`
|
100
|
+
: null}`;
|
149
101
|
}
|
150
102
|
};
|
151
103
|
__decorate([
|
@@ -157,9 +109,6 @@ __decorate([
|
|
157
109
|
__decorate([
|
158
110
|
property({ type: String, reflect: true, attribute: 'icon-name' })
|
159
111
|
], NileTableHeaderItem.prototype, "iconName", void 0);
|
160
|
-
__decorate([
|
161
|
-
property({ type: Boolean, reflect: true })
|
162
|
-
], NileTableHeaderItem.prototype, "resizable", void 0);
|
163
112
|
__decorate([
|
164
113
|
state()
|
165
114
|
], NileTableHeaderItem.prototype, "sorting_ct", 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,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;
|
1
|
+
{"version":3,"file":"nile-table-header-item.js","sourceRoot":"","sources":["../../../src/nile-table-header-item/nile-table-header-item.ts"],"names":[],"mappings":"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","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 CSSResultArray,\n TemplateResult,\n} from 'lit';\nimport { customElement, state, property } 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 @state() sorting_ct = 0;\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 this.sorting_ct++;\n let curr_sort_string = this.hasSlotController.host.innerHTML;\n const order = ['normal', 'asc', 'des'];\n this.emit('nile-click-sort', {\n value: { curr_sort_string, order: order[this.sorting_ct % 3] },\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`\n <div class=\"header__item__wrapper\" part=\"nile__table-header-cell\">\n <div class=\"headers\">\n <slot> </slot>\n ${this.havesort && this.sorting_ct % 3 === 0\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n class=\"hover__arrow\"\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 1\n ? html`<nile-icon\n name=\"sortdown\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\n : null}\n ${this.havesort && this.sorting_ct % 3 === 2\n ? html`<nile-icon\n name=\"sortup\"\n size=\"16\"\n @click=${this.handleSort}\n ></nile-icon>`\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 </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"]}
|