@aquera/nile-elements 0.1.31 → 0.1.32-beta-1.0

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.
Files changed (168) hide show
  1. package/README.md +17 -5
  2. package/demo/index.html +5 -9
  3. package/dist/axe.min-5bf06036.esm.js +12 -0
  4. package/dist/axe.min-ff35bfba.cjs.js +12 -0
  5. package/dist/axe.min-ff35bfba.cjs.js.map +1 -0
  6. package/dist/{fixture-161dee0b.cjs.js → fixture-3acb409b.cjs.js} +2 -2
  7. package/dist/{fixture-161dee0b.cjs.js.map → fixture-3acb409b.cjs.js.map} +1 -1
  8. package/dist/{fixture-372df3b0.esm.js → fixture-db35a8ae.esm.js} +1 -1
  9. package/dist/index.cjs.js +1 -1
  10. package/dist/index.esm.js +1 -1
  11. package/dist/internal/animate.cjs.js +1 -1
  12. package/dist/internal/animate.cjs.js.map +1 -1
  13. package/dist/internal/animate.esm.js +1 -1
  14. package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
  15. package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
  16. package/dist/nile-accordion/nile-accordion.cjs.js +1 -1
  17. package/dist/nile-accordion/nile-accordion.cjs.js.map +1 -1
  18. package/dist/nile-accordion/nile-accordion.css.cjs.js +1 -1
  19. package/dist/nile-accordion/nile-accordion.css.cjs.js.map +1 -1
  20. package/dist/nile-accordion/nile-accordion.css.esm.js +1 -1
  21. package/dist/nile-accordion/nile-accordion.esm.js +4 -4
  22. package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
  23. package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
  24. package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
  25. package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
  26. package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
  27. package/dist/nile-badge/nile-badge.test.esm.js +1 -1
  28. package/dist/nile-button/nile-button.test.cjs.js +1 -1
  29. package/dist/nile-button/nile-button.test.esm.js +1 -1
  30. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
  31. package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
  32. package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
  33. package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
  34. package/dist/nile-card/nile-card.test.cjs.js +1 -1
  35. package/dist/nile-card/nile-card.test.esm.js +1 -1
  36. package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
  37. package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
  38. package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
  39. package/dist/nile-chip/nile-chip.test.esm.js +1 -1
  40. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js +1 -1
  41. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.cjs.js.map +1 -1
  42. package/dist/nile-circular-progressbar/nile-circular-progressbar.css.esm.js +49 -49
  43. package/dist/nile-code-editor/extensionSetup.cjs.js +7 -7
  44. package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
  45. package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
  46. package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
  47. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  48. package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
  49. package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
  50. package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
  51. package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
  52. package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
  53. package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
  54. package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
  55. package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
  56. package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
  57. package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
  58. package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
  59. package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
  60. package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
  61. package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
  62. package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
  63. package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
  64. package/dist/nile-hero/nile-hero.test.esm.js +1 -1
  65. package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
  66. package/dist/nile-icon/nile-icon.test.esm.js +1 -1
  67. package/dist/nile-input/nile-input.test.cjs.js +1 -1
  68. package/dist/nile-input/nile-input.test.esm.js +1 -1
  69. package/dist/nile-link/nile-link.test.cjs.js +1 -1
  70. package/dist/nile-link/nile-link.test.esm.js +1 -1
  71. package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
  72. package/dist/nile-loader/nile-loader.test.esm.js +1 -1
  73. package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
  74. package/dist/nile-popover/nile-popover.test.esm.js +1 -1
  75. package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
  76. package/dist/nile-popup/nile-popup.test.esm.js +1 -1
  77. package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
  78. package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
  79. package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
  80. package/dist/nile-radio/nile-radio.test.esm.js +1 -1
  81. package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
  82. package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
  83. package/dist/nile-select/nile-select.test.cjs.js +1 -1
  84. package/dist/nile-select/nile-select.test.esm.js +1 -1
  85. package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
  86. package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
  87. package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
  88. package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
  89. package/dist/nile-table/index.cjs.js +2 -0
  90. package/dist/nile-table/index.cjs.js.map +1 -0
  91. package/dist/nile-table/index.esm.js +1 -0
  92. package/dist/nile-table/nile-table.cjs.js +2 -0
  93. package/dist/nile-table/nile-table.cjs.js.map +1 -0
  94. package/dist/nile-table/nile-table.css.cjs.js +2 -0
  95. package/dist/nile-table/nile-table.css.cjs.js.map +1 -0
  96. package/dist/nile-table/nile-table.css.esm.js +5 -0
  97. package/dist/nile-table/nile-table.esm.js +3 -0
  98. package/dist/nile-table-body/nile-table-body.cjs.js +1 -1
  99. package/dist/nile-table-body/nile-table-body.cjs.js.map +1 -1
  100. package/dist/nile-table-body/nile-table-body.esm.js +2 -2
  101. package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js +1 -1
  102. package/dist/nile-table-cell-item/nile-table-cell-item.css.cjs.js.map +1 -1
  103. package/dist/nile-table-cell-item/nile-table-cell-item.css.esm.js +4 -2
  104. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js +1 -1
  105. package/dist/nile-table-header-item/nile-table-header-item.css.cjs.js.map +1 -1
  106. package/dist/nile-table-header-item/nile-table-header-item.css.esm.js +2 -0
  107. package/dist/nile-table-row/nile-table-row.cjs.js.map +1 -1
  108. package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
  109. package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
  110. package/dist/nile-tooltip/index.cjs.js +1 -1
  111. package/dist/nile-tooltip/index.esm.js +1 -1
  112. package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
  113. package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
  114. package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
  115. package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
  116. package/dist/nile-tooltip/nile-tooltip.css.esm.js +115 -56
  117. package/dist/nile-tooltip/nile-tooltip.esm.js +13 -30
  118. package/dist/src/index.d.ts +1 -0
  119. package/dist/src/index.js +1 -0
  120. package/dist/src/index.js.map +1 -1
  121. package/dist/src/nile-accordion/nile-accordion.css.js +1 -1
  122. package/dist/src/nile-accordion/nile-accordion.css.js.map +1 -1
  123. package/dist/src/nile-accordion/nile-accordion.d.ts +6 -5
  124. package/dist/src/nile-accordion/nile-accordion.js +21 -8
  125. package/dist/src/nile-accordion/nile-accordion.js.map +1 -1
  126. package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js +49 -49
  127. package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map +1 -1
  128. package/dist/src/nile-table/index.d.ts +1 -0
  129. package/dist/src/nile-table/index.js +2 -0
  130. package/dist/src/nile-table/index.js.map +1 -0
  131. package/dist/src/nile-table/nile-table.css.d.ts +12 -0
  132. package/dist/src/nile-table/nile-table.css.js +17 -0
  133. package/dist/src/nile-table/nile-table.css.js.map +1 -0
  134. package/dist/src/nile-table/nile-table.d.ts +44 -0
  135. package/dist/src/nile-table/nile-table.js +122 -0
  136. package/dist/src/nile-table/nile-table.js.map +1 -0
  137. package/dist/src/nile-table-body/nile-table-body.d.ts +3 -1
  138. package/dist/src/nile-table-body/nile-table-body.js +9 -1
  139. package/dist/src/nile-table-body/nile-table-body.js.map +1 -1
  140. package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js +4 -2
  141. package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
  142. package/dist/src/nile-table-header-item/nile-table-header-item.css.js +2 -0
  143. package/dist/src/nile-table-header-item/nile-table-header-item.css.js.map +1 -1
  144. package/dist/src/nile-table-row/nile-table-row.js.map +1 -1
  145. package/dist/src/nile-tooltip/nile-tooltip.css.js +113 -54
  146. package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
  147. package/dist/src/nile-tooltip/nile-tooltip.d.ts +22 -62
  148. package/dist/src/nile-tooltip/nile-tooltip.js +180 -244
  149. package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
  150. package/dist/tsconfig.tsbuildinfo +1 -1
  151. package/package.json +3 -3
  152. package/src/index.ts +2 -1
  153. package/src/nile-accordion/nile-accordion.css.ts +1 -1
  154. package/src/nile-accordion/nile-accordion.ts +15 -4
  155. package/src/nile-circular-progressbar/nile-circular-progressbar.css.ts +55 -56
  156. package/src/nile-table/index.ts +1 -0
  157. package/src/nile-table/nile-table.css.ts +19 -0
  158. package/src/nile-table/nile-table.ts +137 -0
  159. package/src/nile-table-body/nile-table-body.ts +8 -2
  160. package/src/nile-table-cell-item/nile-table-cell-item.css.ts +4 -2
  161. package/src/nile-table-header-item/nile-table-header-item.css.ts +2 -0
  162. package/src/nile-table-row/nile-table-row.ts +1 -2
  163. package/src/nile-tooltip/nile-tooltip.css.ts +113 -54
  164. package/src/nile-tooltip/nile-tooltip.ts +207 -269
  165. package/vscode-html-custom-data.json +36 -18
  166. package/dist/axe.min-2b379f29.cjs.js +0 -12
  167. package/dist/axe.min-2b379f29.cjs.js.map +0 -1
  168. package/dist/axe.min-c2cd8733.esm.js +0 -12
@@ -0,0 +1,122 @@
1
+ /**
2
+ * Copyright Aquera Inc 2023
3
+ *
4
+ * This source code is licensed under the BSD-3-Clause license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ */
7
+ import { __decorate } from "tslib";
8
+ import { html } from 'lit';
9
+ import { customElement, query } from 'lit/decorators.js';
10
+ import { styles } from './nile-table.css';
11
+ import NileElement from '../internal/nile-element';
12
+ /**
13
+ * Nile table component.
14
+ *
15
+ * @tag nile-table
16
+ *
17
+ */
18
+ let NileTable = class NileTable extends NileElement {
19
+ constructor() {
20
+ super(...arguments);
21
+ this.rows = [];
22
+ this.primaryRowWidths = [];
23
+ /* #endregion */
24
+ }
25
+ /**
26
+ * The styles for nile-table
27
+ * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
28
+ */
29
+ static get styles() {
30
+ return [styles];
31
+ }
32
+ connectedCallback() {
33
+ super.connectedCallback();
34
+ this.addEventListener('nile-body-load', this.handleRows);
35
+ }
36
+ firstUpdated(_changedProperties) {
37
+ this.updateComplete.then(() => {
38
+ this.handleBodyCssUpdate();
39
+ });
40
+ }
41
+ /* #endregion */
42
+ /* #region Methods */
43
+ /**
44
+ * Render method
45
+ * @slot This is a slot test
46
+ */
47
+ render() {
48
+ return html `
49
+ <slot @slotchange="${this.repaintTable}"></slot>
50
+ `;
51
+ }
52
+ repaintTable() {
53
+ this.realignStructure();
54
+ this.handleBodyCssUpdate();
55
+ }
56
+ handleRows(e) {
57
+ this.rows = [...this.rows, e.detail.comp];
58
+ }
59
+ handleBodyCssUpdate() {
60
+ const tableBodies = this.rows;
61
+ if (!tableBodies.length)
62
+ return;
63
+ const firstEl = tableBodies[0].shadowRoot?.querySelector('div.base');
64
+ if (firstEl) {
65
+ firstEl.style.borderTopRightRadius = "var(--nile-radius-radius-xl)";
66
+ firstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';
67
+ firstEl.style.borderBottomRightRadius = "0px";
68
+ firstEl.style.borderBottomLeftRadius = '0px';
69
+ firstEl.style.borderBottom = 'none';
70
+ }
71
+ tableBodies.forEach((tb, i) => {
72
+ if (i > 0 && i < tableBodies.length - 1) {
73
+ const el = tb.shadowRoot?.querySelector('div.base');
74
+ if (el) {
75
+ el.style.borderTopRightRadius = "0px";
76
+ el.style.borderTopLeftRadius = "0px";
77
+ el.style.borderBottomRightRadius = "0px";
78
+ el.style.borderBottomLeftRadius = "0px";
79
+ el.style.borderBottom = 'none';
80
+ }
81
+ }
82
+ });
83
+ const lastEl = tableBodies[tableBodies.length - 1].shadowRoot?.querySelector('div.base');
84
+ if (lastEl) {
85
+ lastEl.style.borderTopRightRadius = "0px";
86
+ lastEl.style.borderTopLeftRadius = '0px';
87
+ lastEl.style.borderBottomRightRadius = "var(--nile-radius-radius-xl)";
88
+ lastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';
89
+ }
90
+ }
91
+ getPrimaryColumnWidths() {
92
+ const primaryTb = this.rows.find(tb => tb.type == 'primary');
93
+ const widthArray = this.getTableCellFetchQuery(primaryTb).map((e) => e.clientWidth);
94
+ return widthArray;
95
+ }
96
+ realignStructure() {
97
+ const primaryRowWidths = this.getPrimaryColumnWidths();
98
+ const secondaryRows = this.rows.filter(tb => tb.type != 'primary');
99
+ secondaryRows.forEach((row) => {
100
+ let elements = this.getTableCellFetchQuery(row);
101
+ elements?.forEach((el, ind) => {
102
+ el.style.setProperty('--cell-width', primaryRowWidths.at(ind) + 'px');
103
+ });
104
+ });
105
+ }
106
+ getTableCellFetchQuery(row) {
107
+ return row?.shadowRoot?.
108
+ querySelector('slot:not([name])')?.
109
+ assignedElements()[0]
110
+ .shadowRoot?.querySelector('slot')?.
111
+ assignedElements();
112
+ }
113
+ };
114
+ __decorate([
115
+ query('slot')
116
+ ], NileTable.prototype, "defaultSlot", void 0);
117
+ NileTable = __decorate([
118
+ customElement('nile-table')
119
+ ], NileTable);
120
+ export { NileTable };
121
+ export default NileTable;
122
+ //# sourceMappingURL=nile-table.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"nile-table.js","sourceRoot":"","sources":["../../../src/nile-table/nile-table.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 {LitElement, html, CSSResultArray, TemplateResult, PropertyValues} from 'lit';\nimport { customElement, property, query, state} from 'lit/decorators.js';\nimport {styles} from './nile-table.css';\nimport NileElement from '../internal/nile-element';\nimport { NileTableBody } from '../nile-table-body';\nimport { NileTableCellItem } from '../nile-table-cell-item';\nimport { NileTableHeaderItem } from '../nile-table-header-item';\n\n\n/**\n * Nile table component.\n *\n * @tag nile-table\n *\n */\n@customElement('nile-table')\nexport class NileTable extends NileElement {\n @query('slot') defaultSlot: HTMLSlotElement;\n\tprivate rows:Array<NileTableBody>=[];\n\tprivate primaryRowWidths:Array<number>=[]\n\n\n\t/**\n\t * The styles for nile-table\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\tconnectedCallback(): void {\n\t\tsuper.connectedCallback()\n\t\tthis.addEventListener('nile-body-load',this.handleRows)\n\t}\n\n\tprotected firstUpdated(_changedProperties: PropertyValues): void {\n\t\tthis.updateComplete.then(()=>{\n\t\t\tthis.handleBodyCssUpdate();\n\t\t})\n\t}\n\n\n\t/* #endregion */\n\n\t/* #region Methods */\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n\tpublic render(): TemplateResult {\n\t\treturn html`\n\t\t\t<slot @slotchange=\"${this.repaintTable}\"></slot>\n\t\t\t`;\n\t}\n\n\trepaintTable(){\n\t\tthis.realignStructure();\n\t\tthis.handleBodyCssUpdate();\n\t}\n\n\thandleRows(e:CustomEvent){\n\t\tthis.rows=[...this.rows,e.detail.comp]\n\t}\n\n\thandleBodyCssUpdate(){\n const tableBodies = this.rows;\n if (!tableBodies.length) return;\n\t\tconst firstEl=tableBodies[0].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(firstEl) {\n\t\t\tfirstEl.style.borderTopRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tfirstEl.style.borderTopLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t\tfirstEl.style.borderBottomRightRadius=\"0px\";\n\t\t\tfirstEl.style.borderBottomLeftRadius = '0px';\n\t\t\tfirstEl.style.borderBottom = 'none';\n\t\t}\n\t\ttableBodies.forEach((tb,i)=>{\n\t\t\tif(i>0 && i<tableBodies.length-1){\n\t\t\t\tconst el=tb.shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\t\t\tif(el) {\n\t\t\t\t\tel.style.borderTopRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderTopLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottomRightRadius=\"0px\";\n\t\t\t\t\tel.style.borderBottomLeftRadius = \"0px\";\n\t\t\t\t\tel.style.borderBottom = 'none';\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t\tconst lastEl=tableBodies[tableBodies.length - 1].shadowRoot?.querySelector<HTMLDivElement>('div.base')\n\t\tif(lastEl){\n\t\t\tlastEl.style.borderTopRightRadius=\"0px\";\n\t\t\tlastEl.style.borderTopLeftRadius = '0px';\n\t\t\tlastEl.style.borderBottomRightRadius=\"var(--nile-radius-radius-xl)\";\n\t\t\tlastEl.style.borderBottomLeftRadius = 'var(--nile-radius-radius-xl)';\n\t\t}\n\t}\n\n\tgetPrimaryColumnWidths(){\n\t\tconst primaryTb=this.rows.find(tb=>tb.type=='primary')!;\n\t\tconst widthArray=this.getTableCellFetchQuery(primaryTb).map((e:LitElement)=>e.clientWidth) as Array<number>\n\t\treturn widthArray;\n\t}\n\t\n\trealignStructure(){\n\t\tconst primaryRowWidths=this.getPrimaryColumnWidths();\n\t\tconst secondaryRows=this.rows.filter(tb=>tb.type!='primary');\n\t\tsecondaryRows.forEach((row)=>{\n\t\t\tlet elements=this.getTableCellFetchQuery(row)\n\t\t\telements?.forEach((el:NileTableCellItem|NileTableHeaderItem,ind)=>{\n\t\t\t\tel.style.setProperty('--cell-width',primaryRowWidths.at(ind)+'px')\n\t\t\t})\n\t\t})\n\t}\n\n\tgetTableCellFetchQuery(row:NileTableBody):Array<Element>{\n\t\treturn row?.shadowRoot?.\n\t\t\tquerySelector<HTMLSlotElement>('slot:not([name])')?.\n\t\t\tassignedElements()[0]\n\t\t\t.shadowRoot?.querySelector<HTMLSlotElement>('slot')?.\n\t\t\tassignedElements()!\n\t}\n\t/* #endregion */\n}\n\nexport default NileTable;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table': NileTable;\n }\n}"]}
@@ -4,7 +4,7 @@
4
4
  * This source code is licensed under the BSD-3-Clause license found in the
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
- import { CSSResultArray, TemplateResult } from 'lit';
7
+ import { CSSResultArray, TemplateResult, PropertyValues } from 'lit';
8
8
  import NileElement from '../internal/nile-element';
9
9
  /**
10
10
  * nile-table-body component.
@@ -19,11 +19,13 @@ export declare class NileTableBody extends NileElement {
19
19
  */
20
20
  defaultSlot: HTMLSlotElement;
21
21
  _childNodes: Array<HTMLElement>;
22
+ type: 'primary' | 'secondary';
22
23
  private rows_data;
23
24
  private header_rows_data;
24
25
  private sort__index;
25
26
  private search__index;
26
27
  static get styles(): CSSResultArray;
28
+ protected firstUpdated(_changedProperties: PropertyValues): void;
27
29
  private getChildren;
28
30
  private getIndexValue;
29
31
  handleSlotchange(e: any): void;
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import { __decorate } from "tslib";
8
8
  import { html, } from 'lit';
9
- import { customElement, query, state, queryAssignedNodes } from 'lit/decorators.js';
9
+ import { customElement, query, state, queryAssignedNodes, property } from 'lit/decorators.js';
10
10
  import { styles } from './nile-table-body.css';
11
11
  import NileElement from '../internal/nile-element';
12
12
  /**
@@ -22,6 +22,7 @@ let NileTableBody = class NileTableBody extends NileElement {
22
22
  * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
23
23
  */
24
24
  super(...arguments);
25
+ this.type = 'primary';
25
26
  this.rows_data = [];
26
27
  this.header_rows_data = [];
27
28
  /* #endregion */
@@ -29,6 +30,9 @@ let NileTableBody = class NileTableBody extends NileElement {
29
30
  static get styles() {
30
31
  return [styles];
31
32
  }
33
+ firstUpdated(_changedProperties) {
34
+ this.emit('nile-body-load', { value: this.type, comp: this }, true, false);
35
+ }
32
36
  /* #endregion */
33
37
  /* #region Methods */
34
38
  getChildren(child, tagname) {
@@ -38,6 +42,7 @@ let NileTableBody = class NileTableBody extends NileElement {
38
42
  return this.header_rows_data.indexOf(index__value);
39
43
  }
40
44
  handleSlotchange(e) {
45
+ this.emit('nile-body-content-changed', { value: this.type, comp: this }, true, false);
41
46
  let row_data = [];
42
47
  this._childNodes.forEach((child) => {
43
48
  if (child.tagName && child?.tagName?.toLowerCase() === 'nile-table-row') {
@@ -95,6 +100,9 @@ __decorate([
95
100
  __decorate([
96
101
  queryAssignedNodes({ flatten: true })
97
102
  ], NileTableBody.prototype, "_childNodes", void 0);
103
+ __decorate([
104
+ property()
105
+ ], NileTableBody.prototype, "type", void 0);
98
106
  __decorate([
99
107
  state()
100
108
  ], NileTableBody.prototype, "rows_data", void 0);
@@ -1 +1 @@
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} 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 })\n _childNodes!: Array<HTMLElement>;\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 /* #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"]}
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 this.emit('nile-body-content-changed', { value: this.type, comp:this },true,false)\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"]}
@@ -10,17 +10,19 @@ import { css } from 'lit';
10
10
  */
11
11
  export const styles = css `
12
12
  :host {
13
+ --cell-width:auto;
14
+ --min--height: 52px;
15
+ --max--cell-width: auto;
13
16
  box-sizing: border-box;
14
17
  display: table-cell;
15
18
  vertical-align: middle;
16
- --min--height: 52px;
17
- --max--cell-width: auto;
18
19
  max-width: var(--max--cell-width);
19
20
  padding: 16px 24px;
20
21
  min-height: var(--min--height);
21
22
  }
22
23
 
23
24
  .column {
25
+ min-width:var(--cell-width);
24
26
  height: 100%;
25
27
  color: var(--nile-colors-gray-light-mode-600);
26
28
  font-family: var(--nile-font-family-serif);
@@ -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;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;CAuBxB,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 box-sizing: border-box;\n display: table-cell;\n vertical-align: middle;\n --min--height: 52px;\n --max--cell-width: auto;\n max-width: var(--max--cell-width);\n padding: 16px 24px;\n min-height: var(--min--height);\n }\n\n .column {\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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,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 --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(--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"]}
@@ -10,11 +10,13 @@ import { css } from 'lit';
10
10
  */
11
11
  export const styles = css `
12
12
  :host {
13
+ --cell-width:auto;
13
14
  display: table-cell;
14
15
  box-sizing: border-box;
15
16
  }
16
17
 
17
18
  .header__item__wrapper{
19
+ min-width:var(--cell-width);
18
20
  display:flex;
19
21
  align-items:center;
20
22
  box-sizing: border-box;
@@ -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;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDxB,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 display: table-cell;\n box-sizing: border-box;\n }\n \n .header__item__wrapper{\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 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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDxB,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-width:auto;\n display: table-cell;\n box-sizing: border-box;\n }\n \n .header__item__wrapper{\n min-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 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"]}
@@ -1 +1 @@
1
- {"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;;;OAGG;IAEI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,kBAAkB,CAAC,KAAkB;QAC3C,MAAM,YAAY,GAAQ;YACxB,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;SACnD,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,QAAQ,GACZ,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC5D,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,kBAAkB;;KAE9C,CAAC;IACJ,CAAC;CAGF,CAAA;AA3CY,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA2CxB;;AAED,eAAe,YAAY,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, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n *nile-table-row component.\n *\n * @tag nile-table-row\n *\n */\n@customElement('nile-table-row')\nexport class NileTableRow extends NileElement {\n /**\n * The styles for TableRow\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\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\n private handleSortingAlter(event: CustomEvent) {\n const header_items: any = [\n ...this.querySelectorAll('nile-table-header-item'),\n ];\n for (let i = 0; i < header_items.length; i++) {\n const header = header_items[i];\n const haveIcon =\n header.textContent == event.detail.value.curr_sort_string;\n if (!haveIcon) {\n header.sorting_ct = 0;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <slot\n part=\"nile-row\"\n @nile-click-sort=\"${this.handleSortingAlter}\"\n ></slot>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableRow;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-row': NileTableRow;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-table-row.js","sourceRoot":"","sources":["../../../src/nile-table-row/nile-table-row.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,aAAa,EAAmB,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAC9C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;;;OAGG;IAEI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAED,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IAEK,kBAAkB,CAAC,KAAkB;QAC3C,MAAM,YAAY,GAAQ;YACxB,GAAG,IAAI,CAAC,gBAAgB,CAAC,wBAAwB,CAAC;SACnD,CAAC;QACF,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,YAAY,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7C,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,CAAC;YAC/B,MAAM,QAAQ,GAAG,MAAM,CAAC,WAAW,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,gBAAgB,CAAC;YAC3E,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACd,MAAM,CAAC,UAAU,GAAG,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC;IAEM,MAAM;QACX,OAAO,IAAI,CAAA;;;4BAGa,IAAI,CAAC,kBAAkB;;KAE9C,CAAC;IACJ,CAAC;CAGF,CAAA;AA1CY,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA0CxB;;AAED,eAAe,YAAY,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, query, property } from 'lit/decorators.js';\nimport { styles } from './nile-table-row.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n *nile-table-row component.\n *\n * @tag nile-table-row\n *\n */\n@customElement('nile-table-row')\nexport class NileTableRow extends NileElement {\n /**\n * The styles for TableRow\n * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n */\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\n private handleSortingAlter(event: CustomEvent) {\n const header_items: any = [\n ...this.querySelectorAll('nile-table-header-item'),\n ];\n for (let i = 0; i < header_items.length; i++) {\n const header = header_items[i];\n const haveIcon = header.textContent == event.detail.value.curr_sort_string;\n if (!haveIcon) {\n header.sorting_ct = 0;\n }\n }\n }\n\n public render(): TemplateResult {\n return html`\n <slot\n part=\"nile-row\"\n @nile-click-sort=\"${this.handleSortingAlter}\"\n ></slot>\n `;\n }\n\n /* #endregion */\n}\n\nexport default NileTableRow;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-table-row': NileTableRow;\n }\n}\n"]}
@@ -9,60 +9,119 @@ import { css } from 'lit';
9
9
  * Tooltip CSS
10
10
  */
11
11
  export const styles = css `
12
- :host {
13
- --max-width: 20rem;
14
- --hide-delay: 0ms;
15
- --show-delay: 150ms;
16
-
17
- display: contents;
18
- }
19
-
20
- .tooltip {
21
- --arrow-size: 6px;
22
- --arrow-color: var(--nile-tooltip-color-background);
23
- }
24
-
25
- .tooltip::part(popup) {
26
- pointer-events: none;
27
- z-index: 1000;
28
- }
29
-
30
- .tooltip[placement^='top']::part(popup) {
31
- transform-origin: bottom;
32
- }
33
-
34
- .tooltip[placement^='bottom']::part(popup) {
35
- transform-origin: top;
36
- }
37
-
38
- .tooltip[placement^='left']::part(popup) {
39
- transform-origin: right;
40
- }
41
-
42
- .tooltip[placement^='right']::part(popup) {
43
- transform-origin: left;
44
- }
45
-
46
- .tooltip__body {
47
- display: block;
48
- width: max-content;
49
- max-width: var(--max-width);
50
- border-radius: 4px;
51
- background-color: var(--nile-tooltip-color-background);
52
- font-size: var(--nile-tooltip-font-size-sm);
53
- font-weight: var(--nile-tooltip-font-weight-sm);
54
- line-height: var(--nile-tooltip-line-height-sm);
55
- padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);
56
- color: var(--nile-colors-white-base);
57
- pointer-events: none;
58
- word-break: break-word;
59
- }
60
-
61
- .tooltip__body--large {
62
- font-size: var(--nile-tooltip-font-size-lg);
63
- line-height: var(--nile-tooltip-line-height-lg);
64
- font-weight: var(--nile-tooltip-font-weight-lg);
65
- }
12
+
13
+
14
+ :host {
15
+ position: relative;
16
+ display: inline-block;
17
+ }
18
+
19
+ .tooltip {
20
+ position: fixed;
21
+ z-index: 1000;
22
+ background-color: var(--nile-tooltip-color-background, #333);
23
+ color: var(--nile-colors-white-base, #fff);
24
+ padding: 6px 10px;
25
+ border-radius: 4px;
26
+ font-size: var(--nile-tooltip-font-size-sm, 14px);
27
+ line-height: var(--nile-tooltip-line-height-sm, 1.5);
28
+ opacity: 0;
29
+ transition: opacity 0.2s, transform 0.2s;
30
+ pointer-events: none;
31
+ white-space: nowrap;
32
+ visibility: hidden;
33
+ transform: scale(0.95);
34
+ transition: opacity 0.2s ease-out, transform 0.2s ease-out;
35
+ }
36
+
37
+ .tooltip[open] {
38
+ opacity: 1;
39
+ transform: scale(1);
40
+ }
41
+
42
+ :host([open]) .tooltip {
43
+ opacity: 1;
44
+ visibility: visible;
45
+ pointer-events: auto;
46
+ }
47
+
48
+ .tooltip__body--large {
49
+ font-size: var(--nile-type-scale-4, 16px);
50
+ line-height: var(--nile-tooltip-line-height-lg, 1.75);
51
+ }
52
+
53
+ /* Tooltip Arrow */
54
+ .tooltip::after {
55
+ content: '';
56
+ position: absolute;
57
+ width: 0;
58
+ height: 0;
59
+ border-style: solid;
60
+ }
61
+
62
+ /* Basic Arrow Positions */
63
+ .tooltip[data-placement^="top"]::after {
64
+ bottom: -6px;
65
+ border-width: 6px 6px 0 6px;
66
+ border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;
67
+ }
68
+
69
+ .tooltip[data-placement^="bottom"]::after {
70
+ top: -6px;
71
+ border-width: 0 6px 6px 6px;
72
+ border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;
73
+ }
74
+
75
+ .tooltip[data-placement^="left"]::after {
76
+ right: -6px;
77
+ border-width: 6px 0 6px 6px;
78
+ border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);
79
+ }
80
+
81
+ .tooltip[data-placement^="right"]::after {
82
+ left: -6px;
83
+ border-width: 6px 6px 6px 0;
84
+ border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;
85
+ }
86
+
87
+ /* Arrow Horizontal Alignment for top/bottom placements */
88
+ .tooltip[data-placement="top"]::after,
89
+ .tooltip[data-placement="bottom"]::after {
90
+ left: 50%;
91
+ transform: translateX(-50%);
92
+ }
93
+
94
+ .tooltip[data-placement="top-start"]::after,
95
+ .tooltip[data-placement="bottom-start"]::after {
96
+ left: 12px;
97
+ }
98
+
99
+ .tooltip[data-placement="top-end"]::after,
100
+ .tooltip[data-placement="bottom-end"]::after {
101
+ right: 12px;
102
+ left: auto;
103
+ }
104
+
105
+ /* Arrow Vertical Alignment for left/right placements */
106
+ .tooltip[data-placement="left"]::after,
107
+ .tooltip[data-placement="right"]::after {
108
+ top: 50%;
109
+ transform: translateY(-50%);
110
+ }
111
+
112
+ .tooltip[data-placement="left-start"]::after,
113
+ .tooltip[data-placement="right-start"]::after {
114
+ top: 12px;
115
+ transform: none;
116
+ }
117
+
118
+ .tooltip[data-placement="left-end"]::after,
119
+ .tooltip[data-placement="right-end"]::after {
120
+ bottom: 12px;
121
+ top: auto;
122
+ transform: none;
123
+ }
124
+
66
125
  `;
67
126
  export default [styles];
68
127
  //# sourceMappingURL=nile-tooltip.css.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuDxB,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 * Tooltip CSS\n */\nexport const styles = css`\n :host {\n --max-width: 20rem;\n --hide-delay: 0ms;\n --show-delay: 150ms;\n\n display: contents;\n }\n\n .tooltip {\n --arrow-size: 6px;\n --arrow-color: var(--nile-tooltip-color-background);\n }\n\n .tooltip::part(popup) {\n pointer-events: none;\n z-index: 1000;\n }\n\n .tooltip[placement^='top']::part(popup) {\n transform-origin: bottom;\n }\n\n .tooltip[placement^='bottom']::part(popup) {\n transform-origin: top;\n }\n\n .tooltip[placement^='left']::part(popup) {\n transform-origin: right;\n }\n\n .tooltip[placement^='right']::part(popup) {\n transform-origin: left;\n }\n\n .tooltip__body {\n display: block;\n width: max-content;\n max-width: var(--max-width);\n border-radius: 4px;\n background-color: var(--nile-tooltip-color-background);\n font-size: var(--nile-tooltip-font-size-sm);\n font-weight: var(--nile-tooltip-font-weight-sm);\n line-height: var(--nile-tooltip-line-height-sm);\n padding: var(--nile-tooltip-padding-y) var(--nile-tooltip-padding-x);\n color: var(--nile-colors-white-base);\n pointer-events: none;\n word-break: break-word;\n }\n\n .tooltip__body--large {\n font-size: var(--nile-tooltip-font-size-lg);\n line-height: var(--nile-tooltip-line-height-lg);\n font-weight: var(--nile-tooltip-font-weight-lg);\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-tooltip.css.js","sourceRoot":"","sources":["../../../src/nile-tooltip/nile-tooltip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkHxB,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 * Tooltip CSS\n */\nexport const styles = css`\n\n\n:host {\n position: relative;\n display: inline-block;\n }\n\n .tooltip {\n position: fixed;\n z-index: 1000;\n background-color: var(--nile-tooltip-color-background, #333);\n color: var(--nile-colors-white-base, #fff);\n padding: 6px 10px;\n border-radius: 4px;\n font-size: var(--nile-tooltip-font-size-sm, 14px);\n line-height: var(--nile-tooltip-line-height-sm, 1.5);\n opacity: 0;\n transition: opacity 0.2s, transform 0.2s;\n pointer-events: none;\n white-space: nowrap;\n visibility: hidden;\n transform: scale(0.95);\n transition: opacity 0.2s ease-out, transform 0.2s ease-out;\n }\n\n .tooltip[open] {\n opacity: 1;\n transform: scale(1);\n}\n\n :host([open]) .tooltip {\n opacity: 1;\n visibility: visible;\n pointer-events: auto;\n }\n\n .tooltip__body--large {\n font-size: var(--nile-type-scale-4, 16px);\n line-height: var(--nile-tooltip-line-height-lg, 1.75);\n }\n\n /* Tooltip Arrow */\n .tooltip::after {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-style: solid;\n }\n\n /* Basic Arrow Positions */\n .tooltip[data-placement^=\"top\"]::after {\n bottom: -6px;\n border-width: 6px 6px 0 6px;\n border-color: var(--nile-tooltip-color-background, #333) transparent transparent transparent;\n }\n\n .tooltip[data-placement^=\"bottom\"]::after {\n top: -6px;\n border-width: 0 6px 6px 6px;\n border-color: transparent transparent var(--nile-tooltip-color-background, #333) transparent;\n }\n\n .tooltip[data-placement^=\"left\"]::after {\n right: -6px;\n border-width: 6px 0 6px 6px;\n border-color: transparent transparent transparent var(--nile-tooltip-color-background, #333);\n }\n\n .tooltip[data-placement^=\"right\"]::after {\n left: -6px;\n border-width: 6px 6px 6px 0;\n border-color: transparent var(--nile-tooltip-color-background, #333) transparent transparent;\n }\n\n /* Arrow Horizontal Alignment for top/bottom placements */\n .tooltip[data-placement=\"top\"]::after,\n .tooltip[data-placement=\"bottom\"]::after {\n left: 50%;\n transform: translateX(-50%);\n }\n\n .tooltip[data-placement=\"top-start\"]::after,\n .tooltip[data-placement=\"bottom-start\"]::after {\n left: 12px;\n }\n\n .tooltip[data-placement=\"top-end\"]::after,\n .tooltip[data-placement=\"bottom-end\"]::after {\n right: 12px;\n left: auto;\n }\n\n /* Arrow Vertical Alignment for left/right placements */\n .tooltip[data-placement=\"left\"]::after,\n .tooltip[data-placement=\"right\"]::after {\n top: 50%;\n transform: translateY(-50%);\n }\n\n .tooltip[data-placement=\"left-start\"]::after,\n .tooltip[data-placement=\"right-start\"]::after {\n top: 12px;\n transform: none;\n }\n\n .tooltip[data-placement=\"left-end\"]::after,\n .tooltip[data-placement=\"right-end\"]::after {\n bottom: 12px;\n top: auto;\n transform: none;\n }\n \n`;\n\nexport default [styles];\n"]}
@@ -1,80 +1,40 @@
1
- /**
2
- * Copyright Aquera Inc 2023
3
- *
4
- * This source code is licensed under the BSD-3-Clause license found in the
5
- * LICENSE file in the root directory of this source tree.
6
- */
7
- import { CSSResultArray, TemplateResult } from 'lit';
8
- import '../nile-popup/nile-popup';
1
+ import { CSSResultArray } from 'lit';
9
2
  import NileElement from '../internal/nile-element';
10
- import type NilePopup from '../nile-popup/nile-popup';
11
- /**
12
- * Nile icon component.
13
- *
14
- * @tag nile-tooltip
15
- *
16
- */
3
+ type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
17
4
  export declare class NileTooltip extends NileElement {
18
- /**
19
- * The styles for Tooltip
20
- * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
21
- */
22
- static get styles(): CSSResultArray;
23
- private hoverTimeout;
24
- defaultSlot: HTMLSlotElement;
25
- body: HTMLElement;
26
- popup: NilePopup;
27
- /** The tooltip's content. If you need to display HTML, use the `content` slot instead. */
28
5
  content: string;
29
- /** Size Property to decide the tool tip size */
30
6
  size: 'small' | 'large';
31
- /**
32
- * The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip
33
- * inside of the viewport.
34
- */
35
- placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
36
- /** Disables the tooltip so it won't show when triggered. */
7
+ placement: TooltipPlacement;
37
8
  disabled: boolean;
38
- /** The distance in pixels from which to offset the tooltip away from its target. */
39
- distance: number;
40
- /** Indicates whether or not the tooltip is open. You can use this in lieu of the show/hide methods. */
41
9
  open: boolean;
42
- /** The distance in pixels from which to offset the tooltip along its target. */
43
- skidding: number;
44
- /**
45
- * Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
46
- * options can be passed by separating them with a space. When manual is used, the tooltip must be activated
47
- * programmatically.
48
- */
49
10
  trigger: string;
50
- /**
51
- * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
52
- * `overflow: auto|hidden|scroll`. Hoisting uses a fixed positioning strategy that works in many, but not all,
53
- * scenarios.
54
- */
11
+ distance: number;
12
+ skidding: number;
55
13
  hoist: boolean;
14
+ tooltip: HTMLElement;
15
+ slotElement: HTMLSlotElement;
16
+ private hoverTimeout;
17
+ static get styles(): CSSResultArray;
56
18
  connectedCallback(): void;
57
- firstUpdated(): void;
58
19
  disconnectedCallback(): void;
59
- private handleBlur;
60
- private handleClick;
61
- private handleFocus;
62
- private handleKeyDown;
20
+ private getBasePlacement;
21
+ private getAlignmentModifier;
22
+ private updateTooltipPosition;
23
+ private showTooltip;
24
+ private handleAfterShow;
25
+ private hideTooltip;
26
+ private handleAfterHide;
63
27
  private handleMouseOver;
64
28
  private handleMouseOut;
65
- private hasTrigger;
66
- handleOpenChange(): Promise<void>;
67
- handleOptionsChange(): Promise<void>;
68
- handleDisabledChange(): void;
69
- /** Shows the tooltip. */
70
- show(): Promise<void>;
71
- /** Hides the tooltip */
72
- hide(): Promise<void>;
73
- render(): TemplateResult<1>;
29
+ private handleClick;
30
+ updated(changedProperties: Map<string, any>): void;
31
+ private handleFocus;
32
+ private handleBlur;
33
+ render(): import("lit-html").TemplateResult<1>;
74
34
  }
75
- export default NileTooltip;
76
35
  declare global {
77
36
  interface HTMLElementTagNameMap {
78
37
  'nile-tooltip': NileTooltip;
79
38
  }
80
39
  }
40
+ export {};