@aquera/nile-elements 0.1.11 → 0.1.13
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 +8 -0
- package/dist/nile-code-editor/extensionSetup.cjs.js +5 -5
- package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
- package/dist/nile-code-editor/extensionSetup.esm.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js +2 -2
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +3 -3
- package/dist/nile-code-editor/theme.cjs.js +1 -1
- package/dist/nile-code-editor/theme.cjs.js.map +1 -1
- package/dist/nile-code-editor/theme.esm.js +1 -1
- package/dist/nile-form-help-text/index.cjs.js +1 -1
- package/dist/nile-form-help-text/index.esm.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.cjs.js.map +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.css.cjs.js.map +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.css.esm.js +22 -6
- package/dist/nile-form-help-text/nile-form-help-text.esm.js +20 -16
- 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.cjs.js.map +1 -1
- package/dist/nile-form-help-text/nile-form-help-text.test.esm.js +1 -1
- package/dist/nile-tour/nile-tour.css.cjs.js +1 -1
- package/dist/nile-tour/nile-tour.css.cjs.js.map +1 -1
- package/dist/nile-tour/nile-tour.css.esm.js +12 -11
- package/dist/src/nile-code-editor/extensionSetup.js +1 -3
- package/dist/src/nile-code-editor/extensionSetup.js.map +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.d.ts +4 -0
- package/dist/src/nile-code-editor/nile-code-editor.js +24 -2
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-code-editor/theme.d.ts +14 -0
- package/dist/src/nile-code-editor/theme.js +14 -0
- package/dist/src/nile-code-editor/theme.js.map +1 -1
- package/dist/src/nile-form-help-text/nile-form-help-text.css.js +22 -6
- package/dist/src/nile-form-help-text/nile-form-help-text.css.js.map +1 -1
- package/dist/src/nile-form-help-text/nile-form-help-text.d.ts +13 -10
- package/dist/src/nile-form-help-text/nile-form-help-text.js +61 -82
- package/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
- package/dist/src/nile-form-help-text/nile-form-help-text.test.js +73 -52
- package/dist/src/nile-form-help-text/nile-form-help-text.test.js.map +1 -1
- package/dist/src/nile-tour/nile-tour.css.js +12 -11
- package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-code-editor/extensionSetup.ts +0 -6
- package/src/nile-code-editor/nile-code-editor.ts +25 -2
- package/src/nile-code-editor/theme.ts +15 -0
- package/src/nile-form-help-text/nile-form-help-text.css.ts +22 -6
- package/src/nile-form-help-text/nile-form-help-text.test.ts +83 -59
- package/src/nile-form-help-text/nile-form-help-text.ts +64 -82
- package/src/nile-tour/nile-tour.css.ts +12 -11
- package/vscode-html-custom-data.json +2 -14
|
@@ -5,9 +5,10 @@
|
|
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
|
6
6
|
*/
|
|
7
7
|
import { __decorate } from "tslib";
|
|
8
|
-
import { LitElement, html } from 'lit';
|
|
9
|
-
import { customElement, query, property } from 'lit/decorators.js';
|
|
8
|
+
import { LitElement, html, nothing } from 'lit';
|
|
9
|
+
import { customElement, query, property, state } from 'lit/decorators.js';
|
|
10
10
|
import { styles } from './nile-form-help-text.css';
|
|
11
|
+
import { classMap } from 'lit/directives/class-map.js';
|
|
11
12
|
/**
|
|
12
13
|
* Nile icon component.
|
|
13
14
|
*
|
|
@@ -18,9 +19,7 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
|
|
|
18
19
|
constructor() {
|
|
19
20
|
super(...arguments);
|
|
20
21
|
this.isExpanded = false;
|
|
21
|
-
this.
|
|
22
|
-
this.textLimit = 47;
|
|
23
|
-
this.displayedText = '';
|
|
22
|
+
this.showButton = false;
|
|
24
23
|
}
|
|
25
24
|
/**
|
|
26
25
|
* The styles for FormHelpText
|
|
@@ -29,104 +28,84 @@ let NileFormHelpText = class NileFormHelpText extends LitElement {
|
|
|
29
28
|
static get styles() {
|
|
30
29
|
return [styles];
|
|
31
30
|
}
|
|
32
|
-
connectedCallback() {
|
|
33
|
-
super.connectedCallback();
|
|
34
|
-
requestAnimationFrame(() => {
|
|
35
|
-
this.slotElement?.addEventListener('slotchange', this.handleSlotChange.bind(this));
|
|
36
|
-
});
|
|
37
|
-
}
|
|
38
|
-
firstUpdated() {
|
|
39
|
-
this.handleSlotChange();
|
|
40
|
-
}
|
|
41
|
-
handleSlotChange() {
|
|
42
|
-
const nodes = this.slotElement.assignedNodes({ flatten: true });
|
|
43
|
-
const textContent = nodes.map(node => node.textContent).join('');
|
|
44
|
-
this.fullText = textContent.trim();
|
|
45
|
-
this.updateDisplayedText();
|
|
46
|
-
}
|
|
47
|
-
toggleExpanded() {
|
|
48
|
-
this.isExpanded = !this.isExpanded;
|
|
49
|
-
this.updateDisplayedText();
|
|
50
|
-
}
|
|
51
|
-
updateDisplayedText() {
|
|
52
|
-
if (this.isExpanded) {
|
|
53
|
-
this.displayedText = this.fullText;
|
|
54
|
-
}
|
|
55
|
-
else {
|
|
56
|
-
const validConcatNumber = concatSentence(this.fullText, this.textLimit);
|
|
57
|
-
const truncatedText = this.fullText.slice(0, validConcatNumber);
|
|
58
|
-
const ellipsis = this.fullText.length > validConcatNumber ? '...' : '';
|
|
59
|
-
this.displayedText = `${truncatedText}${ellipsis}`;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
31
|
/* #endregion */
|
|
63
32
|
/* #region Methods */
|
|
33
|
+
firstUpdated(_changedProperties) {
|
|
34
|
+
this.resizeObserver = this.observeWidthChange(this.textContainer);
|
|
35
|
+
}
|
|
36
|
+
disconnectedCallback() {
|
|
37
|
+
this.resizeObserver.disconnect();
|
|
38
|
+
}
|
|
64
39
|
/**
|
|
65
40
|
* Render method
|
|
66
41
|
* @slot This is a slot test
|
|
67
42
|
*/
|
|
68
43
|
render() {
|
|
69
|
-
const showMoreButton = this.fullText.length > this.textLimit;
|
|
70
44
|
const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';
|
|
71
45
|
return html `
|
|
72
|
-
<div
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
46
|
+
<div
|
|
47
|
+
class="${classMap({
|
|
48
|
+
'nile-form-help-text': true,
|
|
49
|
+
"nile-form-help-text--expanded": this.isExpanded
|
|
50
|
+
})}"
|
|
51
|
+
part="container"
|
|
52
|
+
>
|
|
53
|
+
<span
|
|
54
|
+
class="${classMap({
|
|
55
|
+
"help__text__full": true,
|
|
56
|
+
"help__text__full--expanded": this.isExpanded
|
|
57
|
+
})}"
|
|
58
|
+
>
|
|
59
|
+
<slot @slotchange="${this.decideToToggleShowButton}"></slot>
|
|
60
|
+
</span>
|
|
61
|
+
${this.showButton ? html `
|
|
62
|
+
<span
|
|
63
|
+
class="nile-form-help-text__more-button"
|
|
64
|
+
part="toggle-button"
|
|
65
|
+
@click=${this.toggleExpanded}
|
|
66
|
+
>${this.isExpanded ? 'View Less' : 'View More'}
|
|
67
|
+
<nile-icon color="#005EA6" part="icon" size="14" name="${iconName}"></nile-icon>
|
|
68
|
+
</span>
|
|
69
|
+
` : nothing}
|
|
86
70
|
</div>
|
|
87
71
|
`;
|
|
88
72
|
}
|
|
73
|
+
toggleExpanded() {
|
|
74
|
+
this.isExpanded = !this.isExpanded;
|
|
75
|
+
}
|
|
76
|
+
decideToToggleShowButton() {
|
|
77
|
+
if (!this.textContainer)
|
|
78
|
+
return;
|
|
79
|
+
this.showButton = this.textContainer.clientWidth < this.textContainer.scrollWidth;
|
|
80
|
+
}
|
|
81
|
+
/**
|
|
82
|
+
* Logs whenever the width of an element changes.
|
|
83
|
+
* @param {HTMLElement} element - The element to observe for width changes.
|
|
84
|
+
*/
|
|
85
|
+
observeWidthChange(element) {
|
|
86
|
+
const resizeObserver = new ResizeObserver(entries => {
|
|
87
|
+
for (let entry of entries) {
|
|
88
|
+
const newWidth = entry.contentRect.width;
|
|
89
|
+
if (newWidth)
|
|
90
|
+
this.decideToToggleShowButton();
|
|
91
|
+
}
|
|
92
|
+
});
|
|
93
|
+
resizeObserver.observe(element);
|
|
94
|
+
return resizeObserver; // Return observer to allow disconnection if needed
|
|
95
|
+
}
|
|
89
96
|
};
|
|
90
97
|
__decorate([
|
|
91
98
|
property({ type: Boolean, reflect: true })
|
|
92
99
|
], NileFormHelpText.prototype, "isExpanded", void 0);
|
|
93
100
|
__decorate([
|
|
94
|
-
|
|
95
|
-
], NileFormHelpText.prototype, "
|
|
96
|
-
__decorate([
|
|
97
|
-
property({ type: Number, reflect: true })
|
|
98
|
-
], NileFormHelpText.prototype, "textLimit", void 0);
|
|
99
|
-
__decorate([
|
|
100
|
-
property({ type: String, reflect: true })
|
|
101
|
-
], NileFormHelpText.prototype, "displayedText", void 0);
|
|
101
|
+
state()
|
|
102
|
+
], NileFormHelpText.prototype, "showButton", void 0);
|
|
102
103
|
__decorate([
|
|
103
|
-
query('
|
|
104
|
-
], NileFormHelpText.prototype, "
|
|
104
|
+
query('.help__text__full')
|
|
105
|
+
], NileFormHelpText.prototype, "textContainer", void 0);
|
|
105
106
|
NileFormHelpText = __decorate([
|
|
106
107
|
customElement('nile-form-help-text')
|
|
107
108
|
], NileFormHelpText);
|
|
108
109
|
export { NileFormHelpText };
|
|
109
110
|
export default NileFormHelpText;
|
|
110
|
-
function concatSentence(sentence, n) {
|
|
111
|
-
if (n < 0 || n > sentence.length) {
|
|
112
|
-
return n;
|
|
113
|
-
}
|
|
114
|
-
// Adjust n if it falls in the middle of a word
|
|
115
|
-
if (sentence[n] !== " " && n !== 0 && n !== sentence.length) {
|
|
116
|
-
// Move left until the start of the word or the beginning of the sentence
|
|
117
|
-
let left = n;
|
|
118
|
-
while (left > 0 && sentence[left - 1] !== " ") {
|
|
119
|
-
left--;
|
|
120
|
-
}
|
|
121
|
-
// Move right until the end of the word or the end of the sentence
|
|
122
|
-
let right = n;
|
|
123
|
-
while (right < sentence.length && sentence[right] !== " ") {
|
|
124
|
-
right++;
|
|
125
|
-
}
|
|
126
|
-
// Adjust n to the closer boundary
|
|
127
|
-
n = (n - left <= right - n) ? left : right;
|
|
128
|
-
}
|
|
129
|
-
// Return the substring from the start to the adjusted n
|
|
130
|
-
return n;
|
|
131
|
-
}
|
|
132
111
|
//# sourceMappingURL=nile-form-help-text.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,
|
|
1
|
+
{"version":3,"file":"nile-form-help-text.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAAC,UAAU,EAAE,IAAI,EAAkC,OAAO,EAAiB,MAAM,KAAK,CAAC;AAC9F,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1E,OAAO,EAAC,MAAM,EAAC,MAAM,2BAA2B,CAAC;AACjD,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAEvD;;;;;GAKG;AAEI,IAAM,gBAAgB,GAAtB,MAAM,gBAAiB,SAAQ,UAAU;IAAzC;;QASwC,eAAU,GAAY,KAAK,CAAC;QAEhE,eAAU,GAAY,KAAK,CAAC;IAgFvC,CAAC;IA1FC;;;OAGG;IACI,MAAM,KAAK,MAAM;QACtB,OAAO,CAAC,MAAM,CAAC,CAAC;IAClB,CAAC;IAUD,gBAAgB;IAEhB,qBAAqB;IAEX,YAAY,CAAC,kBAAkC;QACvD,IAAI,CAAC,cAAc,GAAC,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IAClE,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;IACnC,CAAC;IAED;;;OAGG;IACI,MAAM;QACX,MAAM,QAAQ,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,CAAC;QAE3D,OAAO,IAAI,CAAA;;eAEA,QAAQ,CAAC;YAChB,qBAAqB,EAAC,IAAI;YAC1B,+BAA+B,EAAC,IAAI,CAAC,UAAU;SAC9C,CAAC;;;;iBAIO,QAAQ,CAAC;YAChB,kBAAkB,EAAC,IAAI;YACvB,4BAA4B,EAAC,IAAI,CAAC,UAAU;SAC3C,CAAC;;6BAEiB,IAAI,CAAC,wBAAwB;;QAElD,IAAI,CAAC,UAAU,CAAA,CAAC,CAAA,IAAI,CAAA;;;;mBAIT,IAAI,CAAC,cAAc;WAC3B,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW;mEACa,QAAQ;;OAEpE,CAAA,CAAC,CAAA,OAAO;;GAEZ,CAAC;IACF,CAAC;IAED,cAAc;QACZ,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC;IACrC,CAAC;IAED,wBAAwB;QACtB,IAAG,CAAC,IAAI,CAAC,aAAa;YAAE,OAAO;QAC/B,IAAI,CAAC,UAAU,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,GAAC,IAAI,CAAC,aAAa,CAAC,WAAW,CAAA;IAC/E,CAAC;IAED;;;OAGG;IACH,kBAAkB,CAAC,OAAmB;QAEpC,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,OAAO,CAAC,EAAE;YAClD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;gBAC1B,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;gBACzC,IAAI,QAAQ;oBAAE,IAAI,CAAC,wBAAwB,EAAE,CAAC;YAChD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAEhC,OAAO,cAAc,CAAC,CAAC,mDAAmD;IAC5E,CAAC;CACF,CAAA;AAlF8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAG,CAAC;oDAA6B;AAEhE;IAAR,KAAK,EAAE;oDAA6B;AAET;IAA3B,KAAK,CAAC,mBAAmB,CAAC;uDAA+B;AAb/C,gBAAgB;IAD5B,aAAa,CAAC,qBAAqB,CAAC;GACxB,gBAAgB,CA2F5B;;AAED,eAAe,gBAAgB,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 {LitElement, html, CSSResultArray, TemplateResult, nothing, PropertyValues} from 'lit';\nimport { customElement, query, property, state } from 'lit/decorators.js';\nimport {styles} from './nile-form-help-text.css';\nimport { classMap } from 'lit/directives/class-map.js';\n\n/**\n * Nile icon component.\n *\n * @tag nile-form-help-text\n *\n */\n@customElement('nile-form-help-text')\nexport class NileFormHelpText extends LitElement {\n /**\n * The styles for FormHelpText\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 @property({ type: Boolean, reflect: true }) isExpanded: boolean = false;\n\n @state() showButton: boolean = false;\n\n @query('.help__text__full') textContainer:HTMLSpanElement;\n\n private resizeObserver:ResizeObserver;\n\n /* #endregion */\n\n /* #region Methods */\n\n protected firstUpdated(_changedProperties: PropertyValues): void {\n this.resizeObserver=this.observeWidthChange(this.textContainer);\n }\n\n disconnectedCallback(): void {\n this.resizeObserver.disconnect();\n }\n\n /**\n * Render method\n * @slot This is a slot test\n */\n public render(): TemplateResult {\n const iconName = this.isExpanded ? 'arrowup' : 'arrowdown';\n\n return html`\n <div \n class=\"${classMap({\n 'nile-form-help-text':true,\n \"nile-form-help-text--expanded\":this.isExpanded\n })}\" \n part=\"container\"\n >\n <span\n class=\"${classMap({\n \"help__text__full\":true,\n \"help__text__full--expanded\":this.isExpanded\n })}\"\n >\n <slot @slotchange=\"${this.decideToToggleShowButton}\"></slot>\n </span>\n ${this.showButton?html`\n <span\n class=\"nile-form-help-text__more-button\"\n part=\"toggle-button\"\n @click=${this.toggleExpanded}\n >${this.isExpanded ? 'View Less' : 'View More'}\n <nile-icon color=\"#005EA6\" part=\"icon\" size=\"14\" name=\"${iconName}\"></nile-icon>\n </span>\n `:nothing}\n </div>\n `;\n }\n\n toggleExpanded() {\n this.isExpanded = !this.isExpanded;\n }\n \n decideToToggleShowButton(){\n if(!this.textContainer) return;\n this.showButton=this.textContainer.clientWidth<this.textContainer.scrollWidth\n }\n\n /**\n * Logs whenever the width of an element changes.\n * @param {HTMLElement} element - The element to observe for width changes.\n */\n observeWidthChange(element:HTMLElement) {\n\n const resizeObserver = new ResizeObserver(entries => {\n for (let entry of entries) {\n const newWidth = entry.contentRect.width;\n if (newWidth) this.decideToToggleShowButton();\n }\n });\n\n resizeObserver.observe(element);\n\n return resizeObserver; // Return observer to allow disconnection if needed\n }\n}\n\nexport default NileFormHelpText;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-form-help-text': NileFormHelpText;\n }\n}"]}
|
|
@@ -1,67 +1,88 @@
|
|
|
1
|
-
import { fixture, expect, html } from '@open-wc/testing';
|
|
1
|
+
import { fixture, expect, html, elementUpdated } from '@open-wc/testing';
|
|
2
2
|
import './nile-form-help-text';
|
|
3
|
+
import { NileFormHelpText } from './nile-form-help-text';
|
|
3
4
|
const wait = (ms = 50000) => new Promise(resolve => setTimeout(resolve, ms));
|
|
4
5
|
describe('NileFormHelpText', () => {
|
|
5
6
|
it('should render with default properties', async () => {
|
|
6
|
-
const el = await fixture(html `<nile-form-help-text>This is a
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
7
|
+
const el = await fixture(html `<nile-form-help-text>This is a short text</nile-form-help-text>`);
|
|
8
|
+
expect(el).to.be.instanceOf(NileFormHelpText);
|
|
9
|
+
expect(el.isExpanded).to.be.false;
|
|
10
|
+
// Check if text content matches
|
|
11
|
+
const textContent = el?.textContent?.trim();
|
|
12
|
+
expect(textContent).to.equal('This is a short text');
|
|
10
13
|
});
|
|
11
|
-
it('should
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
expect(
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
it('should not show "View More" button if the text fits within the container', async () => {
|
|
15
|
+
const el = await fixture(html `<nile-form-help-text>This is a short text</nile-form-help-text>`);
|
|
16
|
+
await elementUpdated(el);
|
|
17
|
+
const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
|
|
18
|
+
expect(moreButton).to.be.null;
|
|
19
|
+
expect(el.showButton).to.be.false;
|
|
20
|
+
});
|
|
21
|
+
it('should show "View More" button if the text overflows the container', async () => {
|
|
22
|
+
const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
|
|
23
|
+
const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
|
|
24
|
+
// Simulate overflow
|
|
25
|
+
const textContainer = el.shadowRoot?.querySelector('.help__text__full');
|
|
26
|
+
Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
|
|
27
|
+
Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
|
|
28
|
+
el.decideToToggleShowButton();
|
|
29
|
+
await elementUpdated(el);
|
|
30
|
+
const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
|
|
19
31
|
expect(moreButton).to.exist;
|
|
20
|
-
expect(
|
|
32
|
+
expect(el.showButton).to.be.true;
|
|
21
33
|
});
|
|
22
34
|
it('should expand to show full text when "View More" is clicked', async () => {
|
|
23
|
-
const longText =
|
|
24
|
-
const el = await fixture(html `<nile-form-help-text
|
|
25
|
-
// Simulate
|
|
26
|
-
const
|
|
35
|
+
const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
|
|
36
|
+
const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
|
|
37
|
+
// Simulate overflow
|
|
38
|
+
const textContainer = el.shadowRoot?.querySelector('.help__text__full');
|
|
39
|
+
Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
|
|
40
|
+
Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
|
|
41
|
+
el.decideToToggleShowButton();
|
|
42
|
+
await elementUpdated(el);
|
|
43
|
+
// Click "View More"
|
|
44
|
+
const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
|
|
27
45
|
moreButton?.click();
|
|
28
|
-
await el
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
expect(textContent).to.
|
|
32
|
-
// Check if the "View Less" button is now visible
|
|
33
|
-
const lessButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
|
|
34
|
-
expect(lessButton).to.exist;
|
|
35
|
-
expect(lessButton?.textContent).to.include('View Less');
|
|
46
|
+
await elementUpdated(el);
|
|
47
|
+
expect(el.isExpanded).to.be.true;
|
|
48
|
+
expect(textContainer).to.have.class('help__text__full--expanded');
|
|
49
|
+
expect(moreButton?.textContent).to.include('View Less');
|
|
36
50
|
});
|
|
37
51
|
it('should collapse back to truncated text when "View Less" is clicked', async () => {
|
|
38
|
-
const longText =
|
|
39
|
-
const el = await fixture(html `<nile-form-help-text
|
|
40
|
-
//
|
|
41
|
-
const
|
|
52
|
+
const longText = 'This is a very long help text that exceeds the container width and should show a "View More" button.';
|
|
53
|
+
const el = await fixture(html `<nile-form-help-text>${longText}</nile-form-help-text>`);
|
|
54
|
+
// Simulate overflow
|
|
55
|
+
const textContainer = el.shadowRoot?.querySelector('.help__text__full');
|
|
56
|
+
Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
|
|
57
|
+
Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
|
|
58
|
+
el.decideToToggleShowButton();
|
|
59
|
+
await elementUpdated(el);
|
|
60
|
+
// Expand and then collapse
|
|
61
|
+
const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');
|
|
42
62
|
moreButton?.click();
|
|
43
|
-
await el
|
|
44
|
-
// Collapse
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
|
|
50
|
-
expect(textContent?.endsWith('...')).to.be.true;
|
|
51
|
-
// Check if the "View More" button is visible again
|
|
52
|
-
const viewMoreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
|
|
53
|
-
expect(viewMoreButton).to.exist;
|
|
54
|
-
expect(viewMoreButton?.textContent).to.include('View More');
|
|
55
|
-
});
|
|
56
|
-
it('should not show "View More" button when text is within limit', async () => {
|
|
57
|
-
const shortText = "Short help text.";
|
|
58
|
-
const el = await fixture(html `<nile-form-help-text><span>${shortText}</span></nile-form-help-text>`);
|
|
59
|
-
// Check if the displayed text is not truncated
|
|
60
|
-
const textContent = el.shadowRoot.querySelector('div>span:first-child')?.textContent?.trim();
|
|
61
|
-
expect(textContent).to.equal(shortText);
|
|
62
|
-
// Verify that "View More" button is not rendered
|
|
63
|
-
const moreButton = el.shadowRoot.querySelector('.nile-form-help-text__more-button');
|
|
64
|
-
expect(moreButton).to.be.null;
|
|
63
|
+
await elementUpdated(el);
|
|
64
|
+
moreButton?.click(); // Collapse
|
|
65
|
+
await elementUpdated(el);
|
|
66
|
+
expect(el.isExpanded).to.be.false;
|
|
67
|
+
expect(textContainer).not.to.have.class('help__text__full--expanded');
|
|
68
|
+
expect(moreButton?.textContent).to.include('View More');
|
|
65
69
|
});
|
|
70
|
+
// it('should dynamically adjust "View More" visibility on text change', async () => {
|
|
71
|
+
// const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);
|
|
72
|
+
// await elementUpdated(el);
|
|
73
|
+
// const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;
|
|
74
|
+
// Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });
|
|
75
|
+
// Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
|
|
76
|
+
// el.decideToToggleShowButton();
|
|
77
|
+
// await elementUpdated(el);
|
|
78
|
+
// expect(el.showButton).to.be.true;
|
|
79
|
+
// // Change slot content to short text
|
|
80
|
+
// textContainer.textContent = 'Short text';
|
|
81
|
+
// Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });
|
|
82
|
+
// Object.defineProperty(textContainer, 'clientWidth', { value: 200 });
|
|
83
|
+
// el.decideToToggleShowButton();
|
|
84
|
+
// await elementUpdated(el);
|
|
85
|
+
// expect(el.showButton).to.be.false;
|
|
86
|
+
// });
|
|
66
87
|
});
|
|
67
88
|
//# sourceMappingURL=nile-form-help-text.test.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-form-help-text.test.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"nile-form-help-text.test.js","sourceRoot":"","sources":["../../../src/nile-form-help-text/nile-form-help-text.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, expect, html, elementUpdated } from '@open-wc/testing';\nimport './nile-form-help-text';\nimport { NileFormHelpText } from './nile-form-help-text';\n\nconst wait = (ms: number = 50000) => new Promise(resolve => setTimeout(resolve, ms))\n\n\ndescribe('NileFormHelpText', () => {\n it('should render with default properties', async () => {\n const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);\n expect(el).to.be.instanceOf(NileFormHelpText);\n expect(el.isExpanded).to.be.false;\n\n // Check if text content matches\n const textContent = el?.textContent?.trim();\n expect(textContent).to.equal('This is a short text');\n });\n\n it('should not show \"View More\" button if the text fits within the container', async () => {\n const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>This is a short text</nile-form-help-text>`);\n await elementUpdated(el);\n\n const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');\n expect(moreButton).to.be.null;\n expect(el.showButton).to.be.false;\n });\n\n it('should show \"View More\" button if the text overflows the container', async () => {\n const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n \n // Simulate overflow\n const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n el.decideToToggleShowButton();\n await elementUpdated(el);\n\n const moreButton = el.shadowRoot?.querySelector('.nile-form-help-text__more-button');\n expect(moreButton).to.exist;\n expect(el.showButton).to.be.true;\n });\n\n it('should expand to show full text when \"View More\" is clicked', async () => {\n const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n\n // Simulate overflow\n const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n el.decideToToggleShowButton();\n await elementUpdated(el);\n\n // Click \"View More\"\n const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n moreButton?.click();\n await elementUpdated(el);\n\n expect(el.isExpanded).to.be.true;\n expect(textContainer).to.have.class('help__text__full--expanded');\n expect(moreButton?.textContent).to.include('View Less');\n });\n\n it('should collapse back to truncated text when \"View Less\" is clicked', async () => {\n const longText = 'This is a very long help text that exceeds the container width and should show a \"View More\" button.';\n const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>${longText}</nile-form-help-text>`);\n\n // Simulate overflow\n const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n el.decideToToggleShowButton();\n await elementUpdated(el);\n\n // Expand and then collapse\n const moreButton = el.shadowRoot?.querySelector<HTMLElement>('.nile-form-help-text__more-button');\n moreButton?.click();\n await elementUpdated(el);\n\n moreButton?.click(); // Collapse\n await elementUpdated(el);\n\n expect(el.isExpanded).to.be.false;\n expect(textContainer).not.to.have.class('help__text__full--expanded');\n expect(moreButton?.textContent).to.include('View More');\n });\n\n // it('should dynamically adjust \"View More\" visibility on text change', async () => {\n // const el = await fixture<NileFormHelpText>(html`<nile-form-help-text>Initial text</nile-form-help-text>`);\n // await elementUpdated(el);\n\n // const textContainer = el.shadowRoot?.querySelector('.help__text__full') as HTMLSpanElement;\n // Object.defineProperty(textContainer, 'scrollWidth', { value: 300 });\n // Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n // el.decideToToggleShowButton();\n // await elementUpdated(el);\n\n // expect(el.showButton).to.be.true;\n\n // // Change slot content to short text\n // textContainer.textContent = 'Short text';\n // Object.defineProperty(textContainer, 'scrollWidth', { value: 100 });\n // Object.defineProperty(textContainer, 'clientWidth', { value: 200 });\n // el.decideToToggleShowButton();\n // await elementUpdated(el);\n\n // expect(el.showButton).to.be.false;\n // });\n});\n"]}
|
|
@@ -13,20 +13,20 @@ export const styles = css `
|
|
|
13
13
|
}
|
|
14
14
|
|
|
15
15
|
.introjs-tooltip {
|
|
16
|
-
background-color: var(--nile-tour-background-color, #
|
|
16
|
+
background-color: var(--nile-tour-background-color, #1978B8);
|
|
17
17
|
color: var(--nile-tour-text-color, #fff);
|
|
18
18
|
width: 300px;
|
|
19
19
|
max-width: 300px;
|
|
20
20
|
border-radius: 4px;
|
|
21
|
-
border: 1px solid var(--Neutral-30, #
|
|
22
|
-
background: var(--White-Normal, #
|
|
21
|
+
border: 1px solid var(--Neutral-30, #1978B8);
|
|
22
|
+
background: var(--White-Normal, #1978B8);
|
|
23
23
|
|
|
24
24
|
/* Elevation/Lifted */
|
|
25
25
|
box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
.introjs-tooltip-title {
|
|
29
|
-
color: #
|
|
29
|
+
color: #ffffff;
|
|
30
30
|
font-size: 16px;
|
|
31
31
|
font-style: normal;
|
|
32
32
|
font-weight: 500;
|
|
@@ -41,7 +41,7 @@ export const styles = css `
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
.introjs-tooltiptext {
|
|
44
|
-
color: #
|
|
44
|
+
color: #ffffff;
|
|
45
45
|
font-size: 14px;
|
|
46
46
|
font-style: normal;
|
|
47
47
|
font-weight: 400;
|
|
@@ -53,7 +53,7 @@ export const styles = css `
|
|
|
53
53
|
.introjs-arrow {
|
|
54
54
|
width: 15px;
|
|
55
55
|
height: 20px;
|
|
56
|
-
background-image: url('data:image/svg+xml,%3Csvg
|
|
56
|
+
background-image: url('data:image/svg+xml,%3Csvg width="15" height="20" viewBox="0 0 15 20" fill="none" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z" fill="%231978B8"/%3E%3C/svg%3E');
|
|
57
57
|
background-repeat: no-repeat;
|
|
58
58
|
background-size: contain;
|
|
59
59
|
background-position: center;
|
|
@@ -116,13 +116,14 @@ export const styles = css `
|
|
|
116
116
|
padding: 0;
|
|
117
117
|
cursor: pointer;
|
|
118
118
|
text-shadow: none;
|
|
119
|
-
background: var(--Primary-Normal, #
|
|
119
|
+
background: var(--Primary-Normal, #1978B8);
|
|
120
120
|
border-color: transparent;
|
|
121
121
|
display: flex;
|
|
122
122
|
padding: 12px;
|
|
123
123
|
align-items: center;
|
|
124
124
|
gap: 12px;
|
|
125
125
|
border-radius: 4px;
|
|
126
|
+
font-weight: 500;
|
|
126
127
|
}
|
|
127
128
|
|
|
128
129
|
.introjs-button:hover {
|
|
@@ -133,7 +134,7 @@ export const styles = css `
|
|
|
133
134
|
padding: 0;
|
|
134
135
|
cursor: pointer;
|
|
135
136
|
text-shadow: none;
|
|
136
|
-
background: var(--Primary-Normal, #
|
|
137
|
+
background: var(--Primary-Normal, #1978B8);
|
|
137
138
|
border-color: transparent;
|
|
138
139
|
display: flex;
|
|
139
140
|
padding: 12px;
|
|
@@ -150,7 +151,7 @@ export const styles = css `
|
|
|
150
151
|
cursor: pointer;
|
|
151
152
|
text-shadow: none;
|
|
152
153
|
box-shadow: none;
|
|
153
|
-
background: var(--Primary-Normal, #
|
|
154
|
+
background: var(--Primary-Normal, #1978B8);
|
|
154
155
|
border-color: transparent;
|
|
155
156
|
display: flex;
|
|
156
157
|
padding: 12px;
|
|
@@ -197,9 +198,9 @@ export const styles = css `
|
|
|
197
198
|
padding: 0 10px;
|
|
198
199
|
display: flex;
|
|
199
200
|
align-items: center;
|
|
200
|
-
color: var(--Color-Text-
|
|
201
|
+
color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
|
|
201
202
|
font-style: normal;
|
|
202
|
-
font-weight:
|
|
203
|
+
font-weight: 500;
|
|
203
204
|
line-height: 14px;
|
|
204
205
|
letter-spacing: 0.2px;
|
|
205
206
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA
|
|
1
|
+
{"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n :host {\n }\n\n .introjs-tooltip {\n background-color: var(--nile-tour-background-color, #1978B8);\n color: var(--nile-tour-text-color, #fff);\n width: 300px;\n max-width: 300px;\n border-radius: 4px;\n border: 1px solid var(--Neutral-30, #1978B8);\n background: var(--White-Normal, #1978B8);\n\n /* Elevation/Lifted */\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .introjs-tooltip-title {\n color: #ffffff;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .introjs-tooltip-header {\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 18px;\n }\n\n .introjs-tooltiptext {\n color: #ffffff;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.2px;\n padding: 15px 18px;\n }\n\n .introjs-arrow {\n width: 15px;\n height: 20px;\n background-image: url('data:image/svg+xml,%3Csvg width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%3E%3C/svg%3E');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n position: absolute;\n border: none;\n content: none;\n }\n\n .introjs-arrow.top {\n top: -14.5px;\n transform: rotate(90deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.bottom {\n bottom: -14.5px;\n transform: rotate(270deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.left {\n left: -11.5px;\n transform: rotate(0);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.right {\n right: -12px;\n transform: rotate(180deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.left-bottom {\n transform: rotate(0);\n clip-path: inset(0px 1px 0px 0px);\n left: -13.5px;\n border-right-color: var(--nile-tour-background-color, #fff) !important;\n }\n\n .introjs-arrow.right-bottom {\n right: -12px;\n transform: rotate(180deg);\n clip-path: inset(0px 3px 0px 0px);\n border-left-color: var(--nile-tour-background-color, #fff) !important;\n }\n\n .introjs-arrow.top-middle {\n top: -14px;\n left: 50%;\n margin-left: -5px;\n transform: rotate(90deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-button {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978B8);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n border-radius: 4px;\n font-weight: 500;\n }\n\n .introjs-button:hover {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978B8);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n }\n\n .introjs-button:focus {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n box-shadow: none;\n background: var(--Primary-Normal, #1978B8);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n }\n\n .introjs-tooltipbuttons {\n border-top: none;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n }\n\n .introjs-helperNumberLayer {\n display: none;\n }\n\n .introjs-bullets {\n display: none;\n }\n\n .introjs-skipbutton {\n display: none;\n }\n\n .introjs-prev-button {\n color: #c7ced4;\n }\n\n .introjs-helperLayer {\n display: none;\n pointer-events: none;\n }\n\n .introjs-overlay {\n display: none;\n pointer-events: none;\n }\n\n .introjs-step-counter {\n margin-right: auto;\n font-size: 14px;\n padding: 0 10px;\n display: flex;\n align-items: center;\n color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));\n font-style: normal;\n font-weight: 500;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @keyframes shake {\n 0% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-5px);\n }\n 50% {\n transform: translateX(5px);\n }\n 75% {\n transform: translateX(-5px);\n }\n 100% {\n transform: translateX(0);\n }\n }\n\n .introjs-shake {\n animation: shake 0.5s ease infinite;\n }\n`;\n\nexport default [styles];\n"]}
|