@xplor-education/core-stencil-components 3.0.0 → 3.1.1
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/components/index.js.map +1 -1
- package/components/{p-DxxjL3sU.js → p-B49oUO_9.js} +3 -3
- package/components/{p-DxxjL3sU.js.map → p-B49oUO_9.js.map} +1 -1
- package/components/{p-DURNLP66.js → p-VIJbFoA4.js} +3 -3
- package/components/{p-DURNLP66.js.map → p-VIJbFoA4.js.map} +1 -1
- package/components/xplor-chat-widget.js +1 -1
- package/components/xplor-date-picker.js +1 -1
- package/components/xplor-drag-and-drop-input.js +3 -3
- package/components/xplor-drag-and-drop-input.js.map +1 -1
- package/components/xplor-dropdown.js +1 -1
- package/components/xplor-expansion-panel.js +4 -4
- package/components/xplor-expansion-panels.js +1 -1
- package/components/xplor-inline-checkbox.js +2 -2
- package/components/xplor-inline-date-picker.js +1 -1
- package/components/xplor-inline-switch.js +1 -1
- package/components/xplor-input-file.js +1 -1
- package/components/xplor-input-search.js +2 -2
- package/components/xplor-input-send.js +2 -2
- package/components/xplor-input-text-area.js +2 -2
- package/components/xplor-input-text-secondary.js +2 -2
- package/components/xplor-input-text.js +2 -2
- package/components/xplor-input-title.js +1 -1
- package/components/xplor-links.js +1 -1
- package/components/xplor-modal-persistent.js +1 -1
- package/components/xplor-radio-btn.js +2 -2
- package/components/xplor-section-card.js +2 -2
- package/components/xplor-section-heading.js +2 -2
- package/components/xplor-table.js +5 -5
- package/components/xplor-text-bubble.js +2 -2
- package/components/xplor-text-field.js +2 -2
- package/components/xplor-time-picker.js +6 -6
- package/dist/cjs/index-BjAapk2n.js.map +1 -1
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js +48 -48
- package/dist/cjs/xplor-alert-dialog_58.cjs.entry.js.map +1 -1
- package/dist/collection/components/xplor-autocomplete/xplor-autocomplete.js +4 -4
- package/dist/collection/components/xplor-badge-session-booking/xplor-badge-session-booking.js +2 -2
- package/dist/collection/components/xplor-btn-menu/xplor-btn-menu.js +2 -2
- package/dist/collection/components/xplor-combobox/xplor-combobox.js +2 -2
- package/dist/collection/components/xplor-datatable/xplor-datatable.js +3 -3
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.css +3 -8
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js +2 -2
- package/dist/collection/components/xplor-drag-and-drop-input/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/collection/components/xplor-dropdown/xplor-dropdown.js +1 -1
- package/dist/collection/components/xplor-expansion-panel/xplor-expansion-panel.js +4 -4
- package/dist/collection/components/xplor-expansion-panels/xplor-expansion-panels.js +1 -1
- package/dist/collection/components/xplor-file-upload/xplor-file-upload.js +2 -2
- package/dist/collection/components/xplor-inline-checkbox/xplor-inline-checkbox.js +2 -2
- package/dist/collection/components/xplor-inline-date-picker/xplor-inline-date-picker.js +1 -1
- package/dist/collection/components/xplor-inline-switch/xplor-inline-switch.js +1 -1
- package/dist/collection/components/xplor-input-file/xplor-input-file.js +1 -1
- package/dist/collection/components/xplor-input-search/xplor-input-search.js +2 -2
- package/dist/collection/components/xplor-input-select/xplor-input-select.js +1 -1
- package/dist/collection/components/xplor-input-send/xplor-input-send.js +2 -2
- package/dist/collection/components/xplor-input-text/xplor-input-text.js +2 -2
- package/dist/collection/components/xplor-input-text-area/xplor-input-text-area.js +2 -2
- package/dist/collection/components/xplor-input-text-secondary/xplor-input-text-secondary.js +2 -2
- package/dist/collection/components/xplor-input-title/xplor-input-title.js +1 -1
- package/dist/collection/components/xplor-links/xplor-links.js +1 -1
- package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js +1 -1
- package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js +1 -1
- package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js +2 -2
- package/dist/collection/components/xplor-section-card/xplor-section-card.js +2 -2
- package/dist/collection/components/xplor-section-heading/xplor-section-heading.js +2 -2
- package/dist/collection/components/xplor-table/xplor-table.js +5 -5
- package/dist/collection/components/xplor-text-bubble/xplor-text-bubble.js +2 -2
- package/dist/collection/components/xplor-text-field/xplor-text-field.js +2 -2
- package/dist/collection/components/xplor-time-picker/xplor-time-picker.js +6 -6
- package/dist/collection/components/xplor-tooltip/xplor-tooltip.js +2 -2
- package/dist/collection/test-utils/index.js +3 -0
- package/dist/collection/test-utils/index.js.map +1 -0
- package/dist/collection/test-utils/mocks.js +46 -0
- package/dist/collection/test-utils/mocks.js.map +1 -0
- package/dist/collection/test-utils/spec-helpers.js +43 -0
- package/dist/collection/test-utils/spec-helpers.js.map +1 -0
- package/dist/components/index.js.map +1 -1
- package/dist/components/{p-Dh0wQJt6.js → p-DQ8MCJFX.js} +3 -3
- package/dist/components/{p-Dh0wQJt6.js.map → p-DQ8MCJFX.js.map} +1 -1
- package/dist/components/{p-oOSnPjGy.js → p-J41B2nOt.js} +3 -3
- package/dist/components/{p-oOSnPjGy.js.map → p-J41B2nOt.js.map} +1 -1
- package/dist/components/xplor-chat-widget.js +1 -1
- package/dist/components/xplor-date-picker.js +1 -1
- package/dist/components/xplor-drag-and-drop-input.js +3 -3
- package/dist/components/xplor-drag-and-drop-input.js.map +1 -1
- package/dist/components/xplor-dropdown.js +1 -1
- package/dist/components/xplor-expansion-panel.js +4 -4
- package/dist/components/xplor-expansion-panels.js +1 -1
- package/dist/components/xplor-inline-checkbox.js +2 -2
- package/dist/components/xplor-inline-date-picker.js +1 -1
- package/dist/components/xplor-inline-switch.js +1 -1
- package/dist/components/xplor-input-file.js +1 -1
- package/dist/components/xplor-input-search.js +2 -2
- package/dist/components/xplor-input-send.js +2 -2
- package/dist/components/xplor-input-text-area.js +2 -2
- package/dist/components/xplor-input-text-secondary.js +2 -2
- package/dist/components/xplor-input-text.js +2 -2
- package/dist/components/xplor-input-title.js +1 -1
- package/dist/components/xplor-links.js +1 -1
- package/dist/components/xplor-modal-persistent.js +1 -1
- package/dist/components/xplor-radio-btn.js +2 -2
- package/dist/components/xplor-section-card.js +2 -2
- package/dist/components/xplor-section-heading.js +2 -2
- package/dist/components/xplor-table.js +5 -5
- package/dist/components/xplor-text-bubble.js +2 -2
- package/dist/components/xplor-text-field.js +2 -2
- package/dist/components/xplor-time-picker.js +6 -6
- package/dist/esm/index-KRfMjDC2.js.map +1 -1
- package/dist/esm/xplor-alert-dialog_58.entry.js +48 -48
- package/dist/esm/xplor-alert-dialog_58.entry.js.map +1 -1
- package/dist/hydrate/index.js +48 -48
- package/dist/hydrate/index.mjs +48 -48
- package/dist/types/test-utils/index.d.ts +2 -0
- package/dist/types/test-utils/mocks.d.ts +16 -0
- package/dist/types/test-utils/spec-helpers.d.ts +26 -0
- package/dist/xplor-component-library/{p-0df9ea5d.entry.js → p-5b0cee73.entry.js} +2 -2
- package/dist/xplor-component-library/p-5b0cee73.entry.js.map +1 -0
- package/dist/xplor-component-library/p-KRfMjDC2.js.map +1 -1
- package/dist/xplor-component-library/xplor-component-library.esm.js +1 -1
- package/package.json +7 -3
- package/dist/xplor-component-library/p-0df9ea5d.entry.js.map +0 -1
|
@@ -102,7 +102,7 @@ export class XplorNavTabs {
|
|
|
102
102
|
"references": {
|
|
103
103
|
"NavTabItem": {
|
|
104
104
|
"location": "local",
|
|
105
|
-
"path": "/Users/
|
|
105
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
|
|
106
106
|
"id": "src/components/xplor-nav-tabs/xplor-nav-tabs.tsx::NavTabItem"
|
|
107
107
|
}
|
|
108
108
|
}
|
|
@@ -76,10 +76,10 @@ export class XplorRadioBtn {
|
|
|
76
76
|
return all.filter(radio => radio !== this.el);
|
|
77
77
|
}
|
|
78
78
|
render() {
|
|
79
|
-
return (h("label", { key: '
|
|
79
|
+
return (h("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
|
|
80
80
|
'radio-wrapper': true,
|
|
81
81
|
'radio-wrapper--disabled': this.disabled,
|
|
82
|
-
} }, h("div", { key: '
|
|
82
|
+
} }, h("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
|
|
83
83
|
}
|
|
84
84
|
static get is() { return "xplor-radio-btn"; }
|
|
85
85
|
static get encapsulation() { return "shadow"; }
|
|
@@ -6,11 +6,11 @@ export class XplorSectionCard {
|
|
|
6
6
|
this.padding = '1.5rem';
|
|
7
7
|
}
|
|
8
8
|
render() {
|
|
9
|
-
return (h(Host, { key: '
|
|
9
|
+
return (h(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, h("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
|
|
10
10
|
'section-card': true,
|
|
11
11
|
'section-card--outlined': this.outlined,
|
|
12
12
|
'section-card--rounded': this.rounded,
|
|
13
|
-
}, style: { padding: this.padding } }, h("slot", { key: '
|
|
13
|
+
}, style: { padding: this.padding } }, h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" }), h("slot", { key: '75faafcde4f79d7c7df0be49986420f147ccfde5' })), h("div", { key: 'f1f14d4cacef1580309321953d95d6b64825332e', class: "section-card__actions" }, h("slot", { key: '8e0520be390119389ac64f7fddd86c9e81ccd47c', name: "actions" })))));
|
|
14
14
|
}
|
|
15
15
|
static get is() { return "xplor-section-card"; }
|
|
16
16
|
static get encapsulation() { return "scoped"; }
|
|
@@ -9,11 +9,11 @@ export class XplorSectionHeading {
|
|
|
9
9
|
}
|
|
10
10
|
render() {
|
|
11
11
|
const HeadingTag = `h${this.level}`;
|
|
12
|
-
return (h(Host, { key: '
|
|
12
|
+
return (h(Host, { key: '8d792fa1f7111c3de496e616c6c0d59a9f3bff0d' }, h(HeadingTag, { key: '56cc9b857b645d2b6de1d9b736b77c47011bc0aa', class: {
|
|
13
13
|
'section-heading': true,
|
|
14
14
|
'section-heading--small': this.size === 'small',
|
|
15
15
|
'section-heading--large': this.size === 'large',
|
|
16
|
-
} }, h("slot", { key: '
|
|
16
|
+
} }, h("slot", { key: 'c5820f563cbb67872c43018493553d9f1fe703f3' }, this.text))));
|
|
17
17
|
}
|
|
18
18
|
static get is() { return "xplor-section-heading"; }
|
|
19
19
|
static get encapsulation() { return "scoped"; }
|
|
@@ -180,11 +180,11 @@ export class XplorTable {
|
|
|
180
180
|
if (this.hasScrolled)
|
|
181
181
|
className += ' xpl-table--has-scrolled';
|
|
182
182
|
const paginatedData = this.getPaginatedData();
|
|
183
|
-
return (h(Host, { key: '
|
|
183
|
+
return (h(Host, { key: '34a091e309fac05f19d2e895d6eaf9bcd6bd52b2', class: "xplor-table" }, h("div", { key: '63f1baa12c4a579a94e88b6afa955cedc55ebcbc', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a51f74e5a00e6286dc69d1cf63cbedbc52cf2323', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
|
|
184
184
|
this.container = el;
|
|
185
|
-
} }, h("div", { key: '
|
|
185
|
+
} }, h("div", { key: 'dd162973f151d437264803738951403fd118a325', class: "mb-6" }, h("h1", { key: 'cd20f65851fe73c7e22eca544c19460d1e8cfa41', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '4ccbb826c4d36a04d7abb229cb30b33b721302aa', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '2ec4358cab245173935bfd10750d426a95327649', class: "flex items-center gap-2" }, h("label", { key: '8a42d1fc73b38675efbb4d489ef52f490d355155', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'bf158ae8de2d8350cb4a17882e876374f56d1191', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
|
|
186
186
|
// value={this.selectedDateRange}
|
|
187
|
-
onInput: this.handleDateRangeChange }, h("option", { key: '
|
|
187
|
+
onInput: this.handleDateRangeChange }, h("option", { key: '8d30107e14b3ae11283eab5c0dc5bb5e1625f206', value: "All" }, "All"), h("option", { key: 'e6ff573c014679027844de6fa074987c2af2747b', value: "Today" }, "Today"), h("option", { key: 'b2442d598fd4901bee4864d5eafb73fc36defed6', value: "This Week" }, "This Week"), h("option", { key: 'b8d65f2882d81ba062e005c19d8969df2ddf541b', value: "This Month" }, "This Month"), h("option", { key: 'e64697e70ba6daa1cedb3d4b35318cd473ad55ff', value: "Custom" }, "Custom Range")), h("button", { key: '5aca4cd7f522efa1fb6669a281c2f124a5f3c08a', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'c64b7b245059c5c93abb2f8d1fba598d59d2697e', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'd7f81604c3df7684dd33105f369ece2f25002426', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: '77e48fda9b868095074045507842dcb32a7ac3fb', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '7f7a214ecb2e66828438dce866e134fe75910ebb', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: 'af830e634d4115487fb3e5ebc4ab085a864990ff', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '396c756b2fbe057f019872573f0fb44a6ef882f2', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: '984119ef9ca031d2cf21f40f888653e508157176', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'a3ffca2c981bfbc8323d537507c2b416f4f39306' }, this.columns.map((column, i) => {
|
|
188
188
|
const iconType = getIconType(this.sortTypeArray[i]);
|
|
189
189
|
const isColumnSortable = !!(this.isSortable &&
|
|
190
190
|
this.sortableColumns[i]);
|
|
@@ -222,11 +222,11 @@ export class XplorTable {
|
|
|
222
222
|
// id="__xpl-icon-sort"
|
|
223
223
|
// ></xpl-icon>
|
|
224
224
|
)))));
|
|
225
|
-
}))), h("tbody", { key: '
|
|
225
|
+
}))), h("tbody", { key: 'b1794bf469839753599bca48a72153c8f53544e6' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
|
|
226
226
|
.length > 0
|
|
227
227
|
? this
|
|
228
228
|
.selectedValues[rowNum]
|
|
229
|
-
: `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '
|
|
229
|
+
: `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '130cceed1d88934092f1a3a92a67d984b8bd465b', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: '616ce36b0aa536f161eb9aa30b41acb18153208b', class: "flex items-center gap-2" }, h("button", { key: '10977dacc1cf364504c1cff031beb62a423f48be', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '3e7fe6e2411178be935d7c210eb5c6cf081a2d54', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '167a9ccaac38d293a86ff3983e5d0d6a222c91b4', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: '9ee908d6b52468a365c7173e3e3367b7b1945061', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '286915694ecc0b480bf25e15baf3eb6423b68919', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f6983747c83e973f777bcadb9045c53da5d10674', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '1c619cd20140f8d73d461b4f2b661116b0059353', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '1201039d99ac6d48f1075b36a602333dfe6d54e5', class: "flex items-center gap-2" }, h("button", { key: '828195335b1064d85f625f476b63da21ff37af71', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '7c2770e6e31871e8ded8b3831695f1f39bd5b7ec', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '2f260f911a89596b76826930f2d4c5f25aab180a', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: 'aed318f01b51e8f78ab7b2d10543b00154970b0e', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '70e04a5ce5106d5c1b3c3f653d156608c03dc0f8', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '25d7d949b2aa75ce8d268d8a472becd75b9eb3cb', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
|
|
230
230
|
}
|
|
231
231
|
static get is() { return "xplor-table"; }
|
|
232
232
|
static get encapsulation() { return "shadow"; }
|
|
@@ -4,11 +4,11 @@ export class XplorTextBubble {
|
|
|
4
4
|
this.color = 'orange';
|
|
5
5
|
}
|
|
6
6
|
render() {
|
|
7
|
-
return (h(Host, { key: '
|
|
7
|
+
return (h(Host, { key: '935620a5fe11efe0b04bb35b1f2a61782f628fef' }, h("div", { key: '54efffa810a98239e535863a74bbcaa13dddb01e', class: {
|
|
8
8
|
'text-bubble': true,
|
|
9
9
|
'text-bubble--green': this.color === 'green',
|
|
10
10
|
'text-bubble--orange': this.color === 'orange',
|
|
11
|
-
} }, h("slot", { key: '
|
|
11
|
+
} }, h("slot", { key: 'c44912756dc8798305a68fa9ef2496610e0b73dd' }))));
|
|
12
12
|
}
|
|
13
13
|
static get is() { return "xplor-text-bubble"; }
|
|
14
14
|
static get encapsulation() { return "scoped"; }
|
|
@@ -124,10 +124,10 @@ export class XplorTextField {
|
|
|
124
124
|
}
|
|
125
125
|
render() {
|
|
126
126
|
const labelFloating = this.isFocused || this.hasValue;
|
|
127
|
-
return (h(Host, { key: '
|
|
127
|
+
return (h(Host, { key: '7f96fd0fd49e24f55f29c839ce949ed4852ccd09' }, h("div", { key: 'a92aff2394b383f4e2189d239928b09e83df69c9', class: this.computedClasses }, h("div", { key: '80a9df3c874ba25b6d9072b01f113bd3615291de', class: "xplor-text-field__wrapper", style: { backgroundColor: this.bgColor } }, h("div", { key: '42de5abcd54384fd509d9788eb9534a1de2cc65a', class: "xplor-text-field__input-wrapper" }, this.label && (h("label", { key: '4668b75b97b1e95c3817924bd8d3a9c1355ba7ab', class: {
|
|
128
128
|
'xplor-text-field__label': true,
|
|
129
129
|
'xplor-text-field__label--floating': labelFloating,
|
|
130
|
-
} }, h("slot", { key: '
|
|
130
|
+
} }, h("slot", { key: 'c6f596aa30b8d263072a43f133bd2f049c22ed36', name: "label" }, this.label), this.required && h("span", { key: '4efc5c1726c5e0841502bb85726eb638391c60d1', class: "xplor-text-field__required" }, "*"))), h("input", { key: '2f226f284910e76ecc23e6cc3416c32782678a73', ref: (el) => (this.inputElement = el), class: "xplor-text-field__input", type: this.type, value: this.value, placeholder: this.isFocused ? this.placeholder : '', disabled: this.disabled, readonly: this.readonly, required: this.required, maxlength: this.maxlength, min: this.min, max: this.max, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-invalid": this.hasError ? 'true' : 'false', "aria-describedby": this.hasError ? 'error-messages' : undefined }), h("div", { key: '6068500f640c4144b8bbf1dcaaf8b216de9281c1', class: "xplor-text-field__append-inner" }, this.clearable && this.hasValue && !this.disabled && !this.readonly && (h("button", { key: '94eedd8a810932066690bf5dc6613d54dc7377e6', type: "button", class: "xplor-text-field__clear-btn", onClick: this.handleClear, "aria-label": "Clear" }, h("svg", { key: 'c325d1129f9987992183ffd1ce7e585e70fb3db3', width: "20", height: "20", viewBox: "0 0 24 24", fill: "currentColor" }, h("path", { key: '02845166093ed8edc7670149cedb4e042d8626f4', d: "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" })))), h("slot", { key: 'af66e74670e30d12a5dc2f94bce768fc32a9716a', name: "append-inner" })), h("fieldset", { key: '3c4b60c284876a8c198d9a332db6fca5e9d91c81', class: "xplor-text-field__outline" }, h("legend", { key: '9d97a8b65d1787f5e8f4d0a4892fb9c85f839553', class: { 'xplor-text-field__outline-legend': true, 'xplor-text-field__outline-legend--floating': labelFloating } }, labelFloating && this.label ? h("span", null, this.label, this.required && '*') : h("span", null, "\u200B")))), h("div", { key: '53440d0311b2147598fa1dbf241629d7ec401d82', class: "xplor-text-field__append" }, h("slot", { key: '71caef9c6e34db94282fcb36ee341477c7523023', name: "append" }))), this.showDetails && (h("div", { key: '2b468deb8dabcd038e7728512cf68702cfad7d02', class: "xplor-text-field__details" }, this.hasError && (h("div", { key: '103e96cac4c46e52bbb5700fc9c64fc3ef7dc114', id: "error-messages", class: "xplor-text-field__error-messages" }, this.errorMessages.map((error) => (h("div", { class: "xplor-text-field__error" }, error))))))))));
|
|
131
131
|
}
|
|
132
132
|
static get is() { return "xplor-text-field"; }
|
|
133
133
|
static get encapsulation() { return "scoped"; }
|
|
@@ -282,16 +282,16 @@ export class XplorTimePicker {
|
|
|
282
282
|
}
|
|
283
283
|
render() {
|
|
284
284
|
const showDetails = this.hideDetails === false || (this.hideDetails === 'auto' && this.error);
|
|
285
|
-
const clockIcon = (h("svg", { key: '
|
|
286
|
-
return (h(Host, { key: '
|
|
285
|
+
const clockIcon = (h("svg", { key: '17e815e14889cbd5a7b8d9f2fc7a119c38978245', class: "time-picker__icon-svg", viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("circle", { key: 'f2dd15cf2d0e2dd5e83665b268729ad42bd2f691', cx: "12", cy: "12", r: "10" }), h("polyline", { key: '1a75a6347d834e0709e4dd44ad0afd32520615ff', points: "12 6 12 12 16 14" })));
|
|
286
|
+
return (h(Host, { key: '0b7f26197f0e8a6b6b26aa07f623cc4a64ba0ea4' }, h("div", { key: 'f6e15abeed537c65f0e690d44cd8ce8412426a23', class: {
|
|
287
287
|
'time-picker': true,
|
|
288
288
|
'time-picker--disabled': this.disabled,
|
|
289
289
|
'time-picker--error': !!this.error,
|
|
290
290
|
'time-picker--open': this.isOpen,
|
|
291
|
-
} }, this.label && (h("label", { key: '
|
|
292
|
-
h("div", { key: '
|
|
293
|
-
h("div", { key: '
|
|
294
|
-
], h("div", { key: '
|
|
291
|
+
} }, this.label && (h("label", { key: '3a824d847af9373e93bb72026fddaa899633462f', class: "time-picker__label" }, this.label, this.required && h("span", { key: '70a02a316b6a610178d0d67912d285585f778d35', class: "time-picker__required" }, "*"))), h("div", { key: '99f32b42a52ab84ad9399b5eebd4fc3dd52c03c7', class: "time-picker__field" }, h("input", { key: '48ad49c0173ebfebdb2cf328cd8658df40824068', type: "text", class: "time-picker__input", value: this.inputText, placeholder: this.placeholder, disabled: this.disabled, readonly: this.readonly, onFocus: this.handleInputFocus, onBlur: this.handleInputBlur, onInput: this.handleInputChange, style: { backgroundColor: this.bgColor } }), h("div", { key: '375560c783c400b52bcf96ac3b14ac285ab26b40', class: "time-picker__actions" }, this.clearable && this.value && !this.disabled && !this.readonly && (h("button", { key: '0716d483500bd91e0ae289568b6e22d80e667cd5', type: "button", class: "time-picker__clear", onClick: this.handleClear, "aria-label": "Clear" }, "\u00D7")), h("button", { key: '118766793e1c508c0acccc1b9a3ea486c4e2d1dc', type: "button", class: "time-picker__icon-btn", onClick: this.toggleDropdown, disabled: this.disabled, "aria-label": "Open time picker" }, clockIcon))), showDetails && (h("div", { key: 'b758cd4077af9f46c95ae9aee64cca1610cc6246', class: "time-picker__details" }, this.error && h("div", { key: '37f5fe76dbb2c39147202e549ed24ceaf74da530', class: "time-picker__error-message" }, this.error))), this.isOpen && (h("div", { key: 'cad94d2b88058f488951c437e6a1c77601f7fc2e', class: "time-picker__dropdown" }, h("div", { key: '1a2a60fc179eeacaf4891a8e99cbb7d0a871686c', class: "time-picker__columns" }, h("div", { key: 'e9b84703525a010884064c1b7a61f5db726b7dff', class: "time-picker__column" }, h("button", { key: '155f2c76f63b8ad0be071456fc1ac8ed36c28912', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementHours, "aria-label": "Increase hours" }, this.renderChevronUp()), h("div", { key: '6f49e3b3ebed597ef27b61e0144bf65f288620a8', class: "time-picker__value" }, String(this.hours).padStart(2, '0')), h("button", { key: '7d14a1f6dd7ab392a76d936e054ca3c308da7666', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementHours, "aria-label": "Decrease hours" }, this.renderChevronDown())), h("div", { key: '9244f886b97f2ae29e71ada6070b75bcec71e22b', class: "time-picker__separator" }, ":"), h("div", { key: '34a8f59c8fa8486c947e0d6079b6df773a86f187', class: "time-picker__column" }, h("button", { key: 'f996fa4638ae84bbcd3bce34c0c40669021a0e61', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementMinutes, "aria-label": "Increase minutes" }, this.renderChevronUp()), h("div", { key: '161581c941572a3d0390b0efdbbf6c24e0ca4830', class: "time-picker__value" }, String(this.minutes).padStart(2, '0')), h("button", { key: '9fa3ee821b78caf94b388b335980ab7cc28110a5', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementMinutes, "aria-label": "Decrease minutes" }, this.renderChevronDown())), this.showSeconds && [
|
|
292
|
+
h("div", { key: '4362983fe6d9ce187354b5423ff352ac13ee8917', class: "time-picker__separator" }, ":"),
|
|
293
|
+
h("div", { key: '8dda8c23ab9774bd946136054c537dd0adb8e45b', class: "time-picker__column" }, h("button", { key: '40338612d17dc3a8cf323e6c29942cb0cc0233c7', type: "button", class: "time-picker__spinner-btn", onClick: this.incrementSeconds, "aria-label": "Increase seconds" }, this.renderChevronUp()), h("div", { key: 'ff2d19c8f91070d5b53264266ff6541924613c38', class: "time-picker__value" }, String(this.seconds).padStart(2, '0')), h("button", { key: '985894586447b8e62c4c7c4075cfae8f8cc2eacf', type: "button", class: "time-picker__spinner-btn", onClick: this.decrementSeconds, "aria-label": "Decrease seconds" }, this.renderChevronDown()))
|
|
294
|
+
], h("div", { key: '22ea57820f5e2fb0beea1f2302efc009daf9b687', class: "time-picker__column time-picker__column--period" }, h("button", { key: '2d9bd33e505e980debd0fc692ddf072b3bb3eacd', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronUp()), h("div", { key: 'd7540347cfa54e16f25e506701d1f1ff03452537', class: "time-picker__value time-picker__value--period" }, this.period), h("button", { key: '31b927a17b3be2749ac62968539fb7873bcd2f0e', type: "button", class: "time-picker__spinner-btn", onClick: this.togglePeriod, "aria-label": "Toggle AM/PM" }, this.renderChevronDown()))))))));
|
|
295
295
|
}
|
|
296
296
|
static get is() { return "xplor-time-picker"; }
|
|
297
297
|
static get encapsulation() { return "scoped"; }
|
|
@@ -184,7 +184,7 @@ export class XplorTooltip {
|
|
|
184
184
|
"references": {
|
|
185
185
|
"TooltipPosition": {
|
|
186
186
|
"location": "local",
|
|
187
|
-
"path": "/Users/
|
|
187
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
|
|
188
188
|
"id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipPosition"
|
|
189
189
|
}
|
|
190
190
|
}
|
|
@@ -210,7 +210,7 @@ export class XplorTooltip {
|
|
|
210
210
|
"references": {
|
|
211
211
|
"TooltipTrigger": {
|
|
212
212
|
"location": "local",
|
|
213
|
-
"path": "/Users/
|
|
213
|
+
"path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-tooltip/xplor-tooltip.tsx",
|
|
214
214
|
"id": "src/components/xplor-tooltip/xplor-tooltip.tsx::TooltipTrigger"
|
|
215
215
|
}
|
|
216
216
|
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/test-utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,YAAY,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACzG,OAAO,EAAE,cAAc,EAAE,sBAAsB,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { renderComponent, triggerEvent, triggerKeyboard, typeIntoInput, eventSpy } from './spec-helpers';\nexport { createMockFile, mockBoundingClientRect, mockFetch, mockRequestAnimationFrame } from './mocks';\n"]}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a mock File object for testing file upload components.
|
|
3
|
+
*/
|
|
4
|
+
export function createMockFile(name = 'test.txt', size = 1024, type = 'text/plain', lastModified) {
|
|
5
|
+
const content = new Array(size).fill('a').join('');
|
|
6
|
+
const file = new File([content], name, { type, lastModified: lastModified !== null && lastModified !== void 0 ? lastModified : Date.now() });
|
|
7
|
+
return file;
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Mocks getBoundingClientRect for positioning tests (tooltip, picker, dropdown).
|
|
11
|
+
*/
|
|
12
|
+
export function mockBoundingClientRect(el, rect = {}) {
|
|
13
|
+
const defaultRect = {
|
|
14
|
+
top: 100,
|
|
15
|
+
left: 100,
|
|
16
|
+
bottom: 200,
|
|
17
|
+
right: 300,
|
|
18
|
+
width: 200,
|
|
19
|
+
height: 100,
|
|
20
|
+
x: 100,
|
|
21
|
+
y: 100,
|
|
22
|
+
toJSON: () => ({}),
|
|
23
|
+
};
|
|
24
|
+
jest.spyOn(el, 'getBoundingClientRect').mockReturnValue(Object.assign(Object.assign({}, defaultRect), rect));
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Mocks global fetch for API-calling components like xplor-assistant.
|
|
28
|
+
*/
|
|
29
|
+
export function mockFetch(response, ok = true) {
|
|
30
|
+
return jest.spyOn(global, 'fetch').mockResolvedValue({
|
|
31
|
+
ok,
|
|
32
|
+
status: ok ? 200 : 500,
|
|
33
|
+
json: () => Promise.resolve(response),
|
|
34
|
+
text: () => Promise.resolve(JSON.stringify(response)),
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
/**
|
|
38
|
+
* Mocks requestAnimationFrame for JSDOM environments.
|
|
39
|
+
*/
|
|
40
|
+
export function mockRequestAnimationFrame() {
|
|
41
|
+
global.requestAnimationFrame = ((cb) => {
|
|
42
|
+
cb(0);
|
|
43
|
+
return 0;
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
//# sourceMappingURL=mocks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"mocks.js","sourceRoot":"","sources":["../../src/test-utils/mocks.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,UAAU,cAAc,CAC5B,OAAe,UAAU,EACzB,OAAe,IAAI,EACnB,OAAe,YAAY,EAC3B,YAAqB;IAErB,MAAM,OAAO,GAAG,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACnD,MAAM,IAAI,GAAG,IAAI,IAAI,CAAC,CAAC,OAAO,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,YAAY,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,IAAI,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;IAC3F,OAAO,IAAI,CAAC;AACd,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,sBAAsB,CACpC,EAAW,EACX,OAAyB,EAAE;IAE3B,MAAM,WAAW,GAAY;QAC3B,GAAG,EAAE,GAAG;QACR,IAAI,EAAE,GAAG;QACT,MAAM,EAAE,GAAG;QACX,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,GAAG;QACX,CAAC,EAAE,GAAG;QACN,CAAC,EAAE,GAAG;QACN,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC;KACnB,CAAC;IACF,IAAI,CAAC,KAAK,CAAC,EAAE,EAAE,uBAAuB,CAAC,CAAC,eAAe,CAAC,gCAAK,WAAW,GAAK,IAAI,CAAa,CAAC,CAAC;AAClG,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,SAAS,CAAC,QAAa,EAAE,KAAc,IAAI;IACzD,OAAO,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,iBAAiB,CAAC;QACnD,EAAE;QACF,MAAM,EAAE,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG;QACtB,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;QACrC,IAAI,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;KAC1C,CAAC,CAAC;AACjB,CAAC;AAED;;GAEG;AACH,MAAM,UAAU,yBAAyB;IACvC,MAAM,CAAC,qBAAqB,GAAG,CAAC,CAAC,EAAwB,EAAE,EAAE;QAC3D,EAAE,CAAC,CAAC,CAAC,CAAC;QACN,OAAO,CAAC,CAAC;IACX,CAAC,CAAQ,CAAC;AACZ,CAAC","sourcesContent":["/**\n * Creates a mock File object for testing file upload components.\n */\nexport function createMockFile(\n name: string = 'test.txt',\n size: number = 1024,\n type: string = 'text/plain',\n lastModified?: number\n): File {\n const content = new Array(size).fill('a').join('');\n const file = new File([content], name, { type, lastModified: lastModified ?? Date.now() });\n return file;\n}\n\n/**\n * Mocks getBoundingClientRect for positioning tests (tooltip, picker, dropdown).\n */\nexport function mockBoundingClientRect(\n el: Element,\n rect: Partial<DOMRect> = {}\n): void {\n const defaultRect: DOMRect = {\n top: 100,\n left: 100,\n bottom: 200,\n right: 300,\n width: 200,\n height: 100,\n x: 100,\n y: 100,\n toJSON: () => ({}),\n };\n jest.spyOn(el, 'getBoundingClientRect').mockReturnValue({ ...defaultRect, ...rect } as DOMRect);\n}\n\n/**\n * Mocks global fetch for API-calling components like xplor-assistant.\n */\nexport function mockFetch(response: any, ok: boolean = true): jest.SpyInstance {\n return jest.spyOn(global, 'fetch').mockResolvedValue({\n ok,\n status: ok ? 200 : 500,\n json: () => Promise.resolve(response),\n text: () => Promise.resolve(JSON.stringify(response)),\n } as Response);\n}\n\n/**\n * Mocks requestAnimationFrame for JSDOM environments.\n */\nexport function mockRequestAnimationFrame(): void {\n global.requestAnimationFrame = ((cb: FrameRequestCallback) => {\n cb(0);\n return 0;\n }) as any;\n}\n"]}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import { newSpecPage } from "@stencil/core/testing";
|
|
2
|
+
/**
|
|
3
|
+
* Wraps newSpecPage to reduce boilerplate. Renders a single component with the given HTML.
|
|
4
|
+
*/
|
|
5
|
+
export async function renderComponent(opts) {
|
|
6
|
+
return newSpecPage({
|
|
7
|
+
components: opts.components,
|
|
8
|
+
html: opts.html,
|
|
9
|
+
autoApplyChanges: opts.autoApplyChanges,
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Dispatches a DOM event on the given element and waits for Stencil to process changes.
|
|
14
|
+
*/
|
|
15
|
+
export async function triggerEvent(page, el, eventName, eventInit) {
|
|
16
|
+
el.dispatchEvent(new Event(eventName, Object.assign({ bubbles: true, cancelable: true }, eventInit)));
|
|
17
|
+
await page.waitForChanges();
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Dispatches a keyboard event on the given element and waits for changes.
|
|
21
|
+
*/
|
|
22
|
+
export async function triggerKeyboard(page, el, eventName, key, options) {
|
|
23
|
+
el.dispatchEvent(new KeyboardEvent(eventName, Object.assign({ key, bubbles: true, cancelable: true }, options)));
|
|
24
|
+
await page.waitForChanges();
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* Simulates typing into an input element by setting its value and dispatching an input event.
|
|
28
|
+
*/
|
|
29
|
+
export async function typeIntoInput(page, input, value) {
|
|
30
|
+
input.value = value;
|
|
31
|
+
input.dispatchEvent(new Event('input', { bubbles: true }));
|
|
32
|
+
await page.waitForChanges();
|
|
33
|
+
}
|
|
34
|
+
/**
|
|
35
|
+
* Attaches a Jest spy to capture events emitted by a Stencil component.
|
|
36
|
+
* Returns the spy which can be used to check calls.
|
|
37
|
+
*/
|
|
38
|
+
export function eventSpy(el, eventName) {
|
|
39
|
+
const spy = jest.fn();
|
|
40
|
+
el.addEventListener(eventName, spy);
|
|
41
|
+
return spy;
|
|
42
|
+
}
|
|
43
|
+
//# sourceMappingURL=spec-helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"spec-helpers.js","sourceRoot":"","sources":["../../src/test-utils/spec-helpers.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAY,MAAM,uBAAuB,CAAC;AAE9D;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CAAC,IAIrC;IACC,OAAO,WAAW,CAAC;QACjB,UAAU,EAAE,IAAI,CAAC,UAAU;QAC3B,IAAI,EAAE,IAAI,CAAC,IAAI;QACf,gBAAgB,EAAE,IAAI,CAAC,gBAAgB;KACxC,CAAC,CAAC;AACL,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,YAAY,CAChC,IAAc,EACd,EAAW,EACX,SAAiB,EACjB,SAAqB;IAErB,EAAE,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,SAAS,kBAAI,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,IAAK,SAAS,EAAG,CAAC,CAAC;IAC1F,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,eAAe,CACnC,IAAc,EACd,EAAW,EACX,SAA2C,EAC3C,GAAW,EACX,OAAoC;IAEpC,EAAE,CAAC,aAAa,CAAC,IAAI,aAAa,CAAC,SAAS,kBAAI,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,IAAK,OAAO,EAAG,CAAC,CAAC;IACrG,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,CAAC;AAED;;GAEG;AACH,MAAM,CAAC,KAAK,UAAU,aAAa,CACjC,IAAc,EACd,KAA6C,EAC7C,KAAa;IAEb,KAAK,CAAC,KAAK,GAAG,KAAK,CAAC;IACpB,KAAK,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IAC3D,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;AAC9B,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,QAAQ,CAAC,EAAW,EAAE,SAAiB;IACrD,MAAM,GAAG,GAAG,IAAI,CAAC,EAAE,EAAE,CAAC;IACtB,EAAE,CAAC,gBAAgB,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC;IACpC,OAAO,GAAG,CAAC;AACb,CAAC","sourcesContent":["import { newSpecPage, SpecPage } from '@stencil/core/testing';\n\n/**\n * Wraps newSpecPage to reduce boilerplate. Renders a single component with the given HTML.\n */\nexport async function renderComponent(opts: {\n components: any[];\n html: string;\n autoApplyChanges?: boolean;\n}): Promise<SpecPage> {\n return newSpecPage({\n components: opts.components,\n html: opts.html,\n autoApplyChanges: opts.autoApplyChanges,\n });\n}\n\n/**\n * Dispatches a DOM event on the given element and waits for Stencil to process changes.\n */\nexport async function triggerEvent(\n page: SpecPage,\n el: Element,\n eventName: string,\n eventInit?: EventInit\n): Promise<void> {\n el.dispatchEvent(new Event(eventName, { bubbles: true, cancelable: true, ...eventInit }));\n await page.waitForChanges();\n}\n\n/**\n * Dispatches a keyboard event on the given element and waits for changes.\n */\nexport async function triggerKeyboard(\n page: SpecPage,\n el: Element,\n eventName: 'keydown' | 'keyup' | 'keypress',\n key: string,\n options?: Partial<KeyboardEventInit>\n): Promise<void> {\n el.dispatchEvent(new KeyboardEvent(eventName, { key, bubbles: true, cancelable: true, ...options }));\n await page.waitForChanges();\n}\n\n/**\n * Simulates typing into an input element by setting its value and dispatching an input event.\n */\nexport async function typeIntoInput(\n page: SpecPage,\n input: HTMLInputElement | HTMLTextAreaElement,\n value: string\n): Promise<void> {\n input.value = value;\n input.dispatchEvent(new Event('input', { bubbles: true }));\n await page.waitForChanges();\n}\n\n/**\n * Attaches a Jest spy to capture events emitted by a Stencil component.\n * Returns the spy which can be used to check calls.\n */\nexport function eventSpy(el: Element, eventName: string): jest.Mock {\n const spy = jest.fn();\n el.addEventListener(eventName, spy);\n return spy;\n}\n"]}
|