@aquera/nile-elements 0.1.32-beta-1.5 → 0.1.32
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 +2 -8
- package/demo/index.html +27 -262
- package/demo/variables.css +0 -17
- package/demo/variables_v2.css +0 -17
- package/dist/{fixture-d5b55278.cjs.js → fixture-161dee0b.cjs.js} +3 -3
- package/dist/fixture-161dee0b.cjs.js.map +1 -0
- package/dist/{fixture-df8b52d7.esm.js → fixture-372df3b0.esm.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/internal/animate.cjs.js +1 -1
- package/dist/internal/animate.cjs.js.map +1 -1
- package/dist/internal/animate.esm.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.cjs.js +1 -1
- package/dist/nile-accordion/nile-accordian.test.esm.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.cjs.js +1 -1
- package/dist/nile-auto-complete/nile-auto-complete.test.esm.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.cjs.js +1 -1
- package/dist/nile-avatar/nile-avatar.test.esm.js +1 -1
- package/dist/nile-badge/nile-badge.test.cjs.js +1 -1
- package/dist/nile-badge/nile-badge.test.esm.js +1 -1
- package/dist/nile-button/nile-button.test.cjs.js +1 -1
- package/dist/nile-button/nile-button.test.esm.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.cjs.js +1 -1
- package/dist/nile-button-toggle-group/nile-button-toggle-group.test.esm.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.cjs.js +1 -1
- package/dist/nile-calendar/nile-calendar.test.esm.js +1 -1
- package/dist/nile-card/nile-card.test.cjs.js +1 -1
- package/dist/nile-card/nile-card.test.esm.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.cjs.js +1 -1
- package/dist/nile-checkbox/nile-checkbox.test.esm.js +1 -1
- package/dist/nile-chip/nile-chip.test.cjs.js +1 -1
- package/dist/nile-chip/nile-chip.test.esm.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.cjs.js +1 -1
- package/dist/nile-dialog/nile-dialog.test.esm.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.cjs.js +1 -1
- package/dist/nile-drawer/nile-drawer.test.esm.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.cjs.js +1 -1
- package/dist/nile-dropdown/nile-dropdown.test.esm.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.cjs.js +1 -1
- package/dist/nile-empty-state/nile-empty-state.test.esm.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.cjs.js +1 -1
- package/dist/nile-error-message/nile-error-message.test.esm.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.cjs.js +1 -1
- package/dist/nile-form-group/nile-form-group.test.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-hero/nile-hero.test.cjs.js +1 -1
- package/dist/nile-hero/nile-hero.test.esm.js +1 -1
- package/dist/nile-icon/nile-icon.test.cjs.js +1 -1
- package/dist/nile-icon/nile-icon.test.esm.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js +1 -1
- package/dist/nile-input/nile-input.css.cjs.js.map +1 -1
- package/dist/nile-input/nile-input.css.esm.js +0 -8
- package/dist/nile-input/nile-input.test.cjs.js +1 -1
- package/dist/nile-input/nile-input.test.esm.js +1 -1
- package/dist/nile-link/nile-link.test.cjs.js +1 -1
- package/dist/nile-link/nile-link.test.esm.js +1 -1
- package/dist/nile-loader/nile-loader.test.cjs.js +1 -1
- package/dist/nile-loader/nile-loader.test.esm.js +1 -1
- package/dist/nile-popover/nile-popover.test.cjs.js +1 -1
- package/dist/nile-popover/nile-popover.test.esm.js +1 -1
- package/dist/nile-popup/nile-popup.test.cjs.js +1 -1
- package/dist/nile-popup/nile-popup.test.esm.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.cjs.js +1 -1
- package/dist/nile-progress-bar/nile-progress-bar.test.esm.js +1 -1
- package/dist/nile-radio/nile-radio.test.cjs.js +1 -1
- package/dist/nile-radio/nile-radio.test.esm.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.cjs.js +1 -1
- package/dist/nile-radio-group/nile-radio-group.test.esm.js +1 -1
- package/dist/nile-select/nile-select.test.cjs.js +1 -1
- package/dist/nile-select/nile-select.test.esm.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.cjs.js +1 -1
- package/dist/nile-slide-toggle/nile-slide-toggle.test.esm.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.cjs.js +1 -1
- package/dist/nile-tab-group/nile-tab-group.test.esm.js +1 -1
- package/dist/nile-table/index.cjs.js +2 -0
- package/dist/nile-table/index.cjs.js.map +1 -0
- package/dist/nile-table/index.esm.js +1 -0
- package/dist/nile-table/nile-table.cjs.js +2 -0
- package/dist/nile-table/nile-table.cjs.js.map +1 -0
- package/dist/nile-table/nile-table.css.cjs.js +2 -0
- package/dist/nile-table/nile-table.css.cjs.js.map +1 -0
- package/dist/nile-table/nile-table.css.esm.js +6 -0
- package/dist/nile-table/nile-table.esm.js +3 -0
- 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.esm.js +2 -2
- 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 +8 -4
- 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 +5 -0
- package/dist/nile-table-header-item/nile-table-header-item.esm.js +9 -9
- package/dist/nile-table-row/nile-table-row.cjs.js.map +1 -1
- package/dist/nile-textarea/nile-textarea.test.cjs.js +1 -1
- package/dist/nile-textarea/nile-textarea.test.esm.js +1 -1
- package/dist/nile-tooltip/index.cjs.js +1 -1
- package/dist/nile-tooltip/index.esm.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.cjs.js.map +1 -1
- package/dist/nile-tooltip/nile-tooltip.css.esm.js +56 -59
- package/dist/nile-tooltip/nile-tooltip.esm.js +28 -23
- 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-input/nile-input.css.js +0 -8
- package/dist/src/nile-input/nile-input.css.js.map +1 -1
- package/dist/src/nile-table/index.d.ts +1 -0
- package/dist/src/nile-table/index.js +2 -0
- package/dist/src/nile-table/index.js.map +1 -0
- package/dist/src/nile-table/nile-table.css.d.ts +12 -0
- package/dist/src/nile-table/nile-table.css.js +18 -0
- package/dist/src/nile-table/nile-table.css.js.map +1 -0
- package/dist/src/nile-table/nile-table.d.ts +48 -0
- package/dist/src/nile-table/nile-table.js +143 -0
- package/dist/src/nile-table/nile-table.js.map +1 -0
- package/dist/src/nile-table-body/nile-table-body.d.ts +3 -1
- package/dist/src/nile-table-body/nile-table-body.js +8 -1
- 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 +6 -2
- package/dist/src/nile-table-cell-item/nile-table-cell-item.css.js.map +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.css.js +5 -0
- 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.js +1 -1
- package/dist/src/nile-table-header-item/nile-table-header-item.js.map +1 -1
- package/dist/src/nile-table-row/nile-table-row.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.css.js +45 -48
- package/dist/src/nile-tooltip/nile-tooltip.css.js.map +1 -1
- package/dist/src/nile-tooltip/nile-tooltip.d.ts +44 -23
- package/dist/src/nile-tooltip/nile-tooltip.js +227 -157
- package/dist/src/nile-tooltip/nile-tooltip.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +4 -3
- package/src/index.ts +2 -1
- package/src/nile-input/nile-input.css.ts +0 -8
- package/src/nile-table/index.ts +1 -0
- package/src/nile-table/nile-table.css.ts +20 -0
- package/src/nile-table/nile-table.ts +161 -0
- package/src/nile-table-body/nile-table-body.ts +7 -2
- package/src/nile-table-cell-item/nile-table-cell-item.css.ts +6 -2
- package/src/nile-table-header-item/nile-table-header-item.css.ts +5 -0
- package/src/nile-table-header-item/nile-table-header-item.ts +1 -1
- package/src/nile-table-row/nile-table-row.ts +1 -2
- package/src/nile-tooltip/nile-tooltip.css.ts +46 -49
- package/src/nile-tooltip/nile-tooltip.ts +237 -155
- package/vscode-html-custom-data.json +101 -83
- package/dist/fixture-d5b55278.cjs.js.map +0 -1
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js +0 -2
- package/dist/nile-tooltip/nile-tooltip-utils.cjs.js.map +0 -1
- package/dist/nile-tooltip/nile-tooltip-utils.esm.js +0 -1
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js +0 -2
- package/dist/nile-tooltip/nile-tooltip.test.cjs.js.map +0 -1
- package/dist/nile-tooltip/nile-tooltip.test.esm.js +0 -51
- package/dist/src/nile-tooltip/nile-tooltip-utils.d.ts +0 -18
- package/dist/src/nile-tooltip/nile-tooltip-utils.js +0 -151
- package/dist/src/nile-tooltip/nile-tooltip-utils.js.map +0 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.d.ts +0 -1
- package/dist/src/nile-tooltip/nile-tooltip.test.js +0 -158
- package/dist/src/nile-tooltip/nile-tooltip.test.js.map +0 -1
- package/src/nile-tooltip/nile-tooltip-utils.ts +0 -190
- package/src/nile-tooltip/nile-tooltip.test.ts +0 -178
@@ -10,11 +10,15 @@ import { css } from 'lit';
|
|
10
10
|
*/
|
11
11
|
export const styles = css `
|
12
12
|
:host {
|
13
|
+
--cell-min-width: auto;
|
14
|
+
--cell-width: auto;
|
13
15
|
display: table-cell;
|
14
16
|
box-sizing: border-box;
|
15
17
|
}
|
16
18
|
|
17
19
|
.header__item__wrapper{
|
20
|
+
min-width:var(--cell-min-width);
|
21
|
+
width:var(--cell-width);
|
18
22
|
display:flex;
|
19
23
|
align-items:center;
|
20
24
|
box-sizing: border-box;
|
@@ -24,6 +28,7 @@ export const styles = css `
|
|
24
28
|
}
|
25
29
|
|
26
30
|
.headers {
|
31
|
+
overflow:hidden;
|
27
32
|
display: flex;
|
28
33
|
align-items: center;
|
29
34
|
height: auto;
|
@@ -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
|
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"]}
|
@@ -56,7 +56,7 @@ let NileTableHeaderItem = class NileTableHeaderItem extends NileElement {
|
|
56
56
|
render() {
|
57
57
|
return html ` ${this.hasSlotController.test('[default]')
|
58
58
|
? html `
|
59
|
-
<div class="header__item__wrapper">
|
59
|
+
<div class="header__item__wrapper" part="nile__table-header-cell">
|
60
60
|
<div class="headers">
|
61
61
|
<slot> </slot>
|
62
62
|
${this.havesort && this.sorting_ct % 3 === 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":"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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\">\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"]}
|
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;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;QAEI,eAAU,GAAG,CAAC,CAAC;QAqExB,gBAAgB;IAClB,CAAC;IAxFC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAcD,gBAAgB;IAEhB,qBAAqB;IAErB;;;OAGG;IACK,UAAU,CAAC,CAAM;QACvB,IAAI,CAAC,UAAU,EAAE,CAAC;QAClB,IAAI,gBAAgB,GAAG,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC;QAC7D,MAAM,KAAK,GAAG,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,iBAAiB,EAAE;YAC3B,KAAK,EAAE,EAAE,gBAAgB,EAAE,KAAK,EAAE,KAAK,CAAC,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,EAAE;SAC/D,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;;;;YAIA,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;;4BAEZ;gBAChB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;4BACZ;gBAChB,CAAC,CAAC,IAAI;YACN,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,UAAU,GAAG,CAAC,KAAK,CAAC;gBAC1C,CAAC,CAAC,IAAI,CAAA;;;yBAGO,IAAI,CAAC,UAAU;4BACZ;gBAChB,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;;aAEP;YACP,CAAC,CAAC,IAAI,EAAE,CAAC;IACb,CAAC;CAEF,CAAA;AA/E6C;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;AAEI;IAAR,KAAK,EAAE;uDAAgB;AApBb,mBAAmB;IAD/B,aAAa,CAAC,wBAAwB,CAAC;GAC3B,mBAAmB,CA0F/B;;AAED,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 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"]}
|
@@ -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,
|
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,63 +9,60 @@ 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;
|
12
16
|
|
17
|
+
display: contents;
|
18
|
+
}
|
13
19
|
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
.tooltip {
|
19
|
-
position: fixed;
|
20
|
-
z-index: 1000;
|
21
|
-
background-color: var(--nile-tooltip-color-background, #333);
|
22
|
-
color: var(--nile-colors-white-base, #fff);
|
23
|
-
padding: 6px 10px;
|
24
|
-
border-radius: 4px;
|
25
|
-
font-size: var(--nile-tooltip-font-size-sm, 14px);
|
26
|
-
line-height: var(--nile-tooltip-line-height-sm, 1.5);
|
27
|
-
opacity: 0;
|
28
|
-
transition: opacity 0.2s, transform 0.2s;
|
29
|
-
pointer-events: none;
|
30
|
-
white-space: normal;
|
31
|
-
visibility: hidden;
|
32
|
-
overflow: visible;
|
33
|
-
|
34
|
-
}
|
35
|
-
:host([open]) .tooltip {
|
36
|
-
opacity: 1;
|
37
|
-
visibility: visible;
|
38
|
-
pointer-events: auto;
|
39
|
-
}
|
40
|
-
.tooltip__body--large {
|
41
|
-
font-size: var(--nile-tooltip-font-size-lg, 16px);
|
42
|
-
line-height: var(--nile-tooltip-line-height-lg, 1.75);
|
43
|
-
}
|
44
|
-
.tooltip-content {
|
45
|
-
overflow: auto;
|
46
|
-
max-width: 252px;
|
47
|
-
max-height: 116px;
|
48
|
-
}
|
49
|
-
.tooltip-caret {
|
50
|
-
position: absolute;
|
51
|
-
width: calc(2 * var(--caret-size, 6px));
|
52
|
-
height: calc(2 * var(--caret-size, 6px));
|
53
|
-
background-color: inherit;
|
54
|
-
transform: rotate(45deg);
|
55
|
-
z-index: -1;
|
56
|
-
}
|
57
|
-
.trigger-container {
|
58
|
-
display: inline-block;
|
59
|
-
}
|
60
|
-
|
20
|
+
.tooltip {
|
21
|
+
--arrow-size: 6px;
|
22
|
+
--arrow-color: var(--nile-tooltip-color-background);
|
23
|
+
}
|
61
24
|
|
25
|
+
.tooltip::part(popup) {
|
26
|
+
pointer-events: none;
|
27
|
+
z-index: 1000;
|
28
|
+
}
|
62
29
|
|
30
|
+
.tooltip[placement^='top']::part(popup) {
|
31
|
+
transform-origin: bottom;
|
32
|
+
}
|
63
33
|
|
34
|
+
.tooltip[placement^='bottom']::part(popup) {
|
35
|
+
transform-origin: top;
|
36
|
+
}
|
64
37
|
|
38
|
+
.tooltip[placement^='left']::part(popup) {
|
39
|
+
transform-origin: right;
|
40
|
+
}
|
65
41
|
|
42
|
+
.tooltip[placement^='right']::part(popup) {
|
43
|
+
transform-origin: left;
|
44
|
+
}
|
66
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
|
+
}
|
67
60
|
|
68
|
-
|
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
|
+
}
|
69
66
|
`;
|
70
67
|
export default [styles];
|
71
68
|
//# 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
|
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"]}
|
@@ -4,8 +4,10 @@
|
|
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 } from 'lit';
|
7
|
+
import { CSSResultArray, TemplateResult } from 'lit';
|
8
|
+
import '../nile-popup/nile-popup';
|
8
9
|
import NileElement from '../internal/nile-element';
|
10
|
+
import type NilePopup from '../nile-popup/nile-popup';
|
9
11
|
/**
|
10
12
|
* Nile icon component.
|
11
13
|
*
|
@@ -13,45 +15,64 @@ import NileElement from '../internal/nile-element';
|
|
13
15
|
*
|
14
16
|
*/
|
15
17
|
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. */
|
16
28
|
content: string;
|
29
|
+
/** Size Property to decide the tool tip size */
|
17
30
|
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
|
+
*/
|
18
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. */
|
19
37
|
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. */
|
20
41
|
open: boolean;
|
42
|
+
/** The distance in pixels from which to offset the tooltip along its target. */
|
43
|
+
skidding: number;
|
21
44
|
/**
|
22
45
|
* Controls how the tooltip is activated. Possible options include `click`, `hover`, `focus`, and `manual`. Multiple
|
23
46
|
* options can be passed by separating them with a space. When manual is used, the tooltip must be activated
|
24
47
|
* programmatically.
|
25
48
|
*/
|
26
49
|
trigger: string;
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
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
|
+
*/
|
31
55
|
hoist: boolean;
|
32
|
-
tooltip: HTMLElement;
|
33
|
-
triggerContainer: HTMLElement;
|
34
|
-
caret: HTMLElement;
|
35
|
-
tooltipSlot: HTMLSlotElement;
|
36
|
-
private hasTooltipSlot;
|
37
|
-
private hoverTimeout;
|
38
|
-
private caretSize;
|
39
|
-
private originalPlacement;
|
40
|
-
static get styles(): CSSResultArray;
|
41
56
|
connectedCallback(): void;
|
42
|
-
|
57
|
+
firstUpdated(): void;
|
43
58
|
disconnectedCallback(): void;
|
44
|
-
private
|
45
|
-
private updateTooltipPosition;
|
46
|
-
private showTooltip;
|
47
|
-
private hideTooltip;
|
48
|
-
private handleMouseOver;
|
49
|
-
private handleMouseOut;
|
59
|
+
private handleBlur;
|
50
60
|
private handleClick;
|
51
61
|
private handleFocus;
|
52
|
-
private
|
53
|
-
|
62
|
+
private handleKeyDown;
|
63
|
+
private handleMouseOver;
|
64
|
+
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>;
|
54
74
|
}
|
75
|
+
export default NileTooltip;
|
55
76
|
declare global {
|
56
77
|
interface HTMLElementTagNameMap {
|
57
78
|
'nile-tooltip': NileTooltip;
|