@phatvu/web-component-poc 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/dist/components/fast-button.d.ts +11 -0
- package/dist/components/fast-carousel.d.ts +11 -0
- package/dist/components/index.d.ts +35 -0
- package/dist/components/jobs-list-only-ui.d.ts +11 -0
- package/dist/types/components/button/button.d.ts +23 -0
- package/dist/types/components/fast-carousel/carousel.d.ts +54 -0
- package/dist/types/components/jobs-list-only-ui/jobs-list-only-ui.d.ts +35 -0
- package/dist/types/components.d.ts +398 -0
- package/dist/types/index.d.ts +11 -0
- package/dist/types/mock/jobs-list-only.mock.d.ts +7 -0
- package/dist/types/stencil-public-runtime.d.ts +1860 -0
- package/dist/types/types/jobs-list.d.ts +58 -0
- package/dist/types/utils/utils.d.ts +1 -0
- package/dist/web-component-poc/fast-button.entry.js +47 -0
- package/dist/web-component-poc/fast-button.entry.js.map +1 -0
- package/dist/web-component-poc/fast-carousel.entry.js +1910 -0
- package/dist/web-component-poc/fast-carousel.entry.js.map +1 -0
- package/dist/web-component-poc/index-B0WZf8UB.js +4585 -0
- package/dist/web-component-poc/index-B0WZf8UB.js.map +1 -0
- package/dist/web-component-poc/index.esm.js +18 -0
- package/dist/web-component-poc/index.esm.js.map +1 -0
- package/dist/web-component-poc/jobs-list-only-ui.entry.js +173 -0
- package/dist/web-component-poc/jobs-list-only-ui.entry.js.map +1 -0
- package/dist/web-component-poc/web-component-poc.esm.js +50 -0
- package/dist/web-component-poc/web-component-poc.esm.js.map +1 -0
- package/loader/cdn.js +1 -0
- package/loader/index.cjs.js +1 -0
- package/loader/index.d.ts +24 -0
- package/loader/index.es2017.js +1 -0
- package/loader/index.js +2 -0
- package/package.json +59 -0
- package/readme.md +111 -0
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
function format(first, middle, last) {
|
|
2
|
+
return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* @fileoverview entry point for your component library
|
|
7
|
+
*
|
|
8
|
+
* This is the entry point for your component library. Use this file to export utilities,
|
|
9
|
+
* constants or data structure that accompany your components.
|
|
10
|
+
*
|
|
11
|
+
* DO NOT use this file to export your components. Instead, use the recommended approaches
|
|
12
|
+
* to consume components of this package as outlined in the `README.md`.
|
|
13
|
+
*/
|
|
14
|
+
|
|
15
|
+
export { format };
|
|
16
|
+
//# sourceMappingURL=index.esm.js.map
|
|
17
|
+
|
|
18
|
+
//# sourceMappingURL=index.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":["src/utils/utils.ts","src/index.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\n return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n","/**\n * @fileoverview entry point for your component library\n *\n * This is the entry point for your component library. Use this file to export utilities,\n * constants or data structure that accompany your components.\n *\n * DO NOT use this file to export your components. Instead, use the recommended approaches\n * to consume components of this package as outlined in the `README.md`.\n */\n\nexport { format } from './utils/utils';\nexport type * from './components.d.ts';\n"],"names":[],"mappings":"SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAA,CAAA,EAAI,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAA,CAAA,EAAI,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;;ACFA;;;;;;;;AAQG;;;;"}
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
import { r as registerInstance, h } from './index-B0WZf8UB.js';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* Mock jobs for local development and docs.
|
|
5
|
+
* Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
|
|
6
|
+
*/
|
|
7
|
+
const mockJobsListOnly = [
|
|
8
|
+
{
|
|
9
|
+
title: 'Senior Software Engineer',
|
|
10
|
+
reference: 'REF-001',
|
|
11
|
+
originalURL: '/jobs/senior-software-engineer',
|
|
12
|
+
applyURL: 'https://apply.example.com/1',
|
|
13
|
+
brandName: 'Engineering',
|
|
14
|
+
isRemote: false,
|
|
15
|
+
locations: [
|
|
16
|
+
{
|
|
17
|
+
city: 'San Francisco',
|
|
18
|
+
stateAbbr: 'CA',
|
|
19
|
+
countryAbbr: 'US',
|
|
20
|
+
distance: 5.2,
|
|
21
|
+
streetAddress: '123 Market St',
|
|
22
|
+
cityStateAbbr: 'San Francisco, CA',
|
|
23
|
+
},
|
|
24
|
+
],
|
|
25
|
+
employmentType: ['Full-time', 'Permanent'],
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
title: 'Product Manager',
|
|
29
|
+
reference: '',
|
|
30
|
+
originalURL: '/jobs/product-manager',
|
|
31
|
+
brandName: 'Product',
|
|
32
|
+
isRemote: true,
|
|
33
|
+
locations: [],
|
|
34
|
+
employmentType: ['Full-time'],
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
title: 'UX Designer',
|
|
38
|
+
reference: 'REF-003',
|
|
39
|
+
originalURL: '/jobs/ux-designer',
|
|
40
|
+
brandName: 'Design',
|
|
41
|
+
isRemote: false,
|
|
42
|
+
locations: [
|
|
43
|
+
{
|
|
44
|
+
city: 'New York',
|
|
45
|
+
stateAbbr: 'NY',
|
|
46
|
+
countryAbbr: 'US',
|
|
47
|
+
distance: 0,
|
|
48
|
+
cityStateAbbr: 'New York, NY',
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
city: 'Boston',
|
|
52
|
+
stateAbbr: 'MA',
|
|
53
|
+
countryAbbr: 'US',
|
|
54
|
+
cityStateAbbr: 'Boston, MA',
|
|
55
|
+
},
|
|
56
|
+
],
|
|
57
|
+
employmentType: ['Full-time', 'Contract'],
|
|
58
|
+
},
|
|
59
|
+
];
|
|
60
|
+
function getMockJobsJson() {
|
|
61
|
+
return JSON.stringify(mockJobsListOnly);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
const jobsListOnlyUiCss = () => `:host{display:block}.jobs-list-root{list-style:none}.results-container{position:relative}.loader{display:inline-block;width:24px;height:24px;border:2px solid #ddd;border-top-color:#1f9755;border-radius:50%;animation:jobs-list-spin 0.8s linear infinite}.loader.hide{display:none}@keyframes jobs-list-spin{to{transform:rotate(360deg)}}.card{border:0}.results-list{list-style:none;margin:0;padding:0;display:block}.results-list.front{margin:3px 0}.results-list__item{list-style:none;padding:10px 0;border-bottom:1px solid #ddd;margin:15px 0;display:inline-block;width:100%;position:relative}.results-list__item:last-child{border-bottom:none}.results-list__item-header{margin:10px 0;font-size:18px;font-weight:700;display:flex;flex-direction:column}.results-list__item-title{margin:0}.results-list__item-title--link{text-decoration:none;color:#1f9755}.results-list__item-title--link:hover{text-decoration:underline}.reference{margin-left:8px;font-size:0.9em;color:#666}.reference.empty{display:none}.remote{background:#f3f3f3;color:#808285;border-radius:100px;padding:6px 16px;text-transform:uppercase;font-size:12px;font-weight:700;line-height:24px;margin-left:8px}.remote--empty{display:none}.results-list__item-distance{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:400}.results-list__item-distance--icon{display:inline-flex}.results-list__item-distance--icon svg{width:16px;height:16px}.results-list__item-content{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}.results-list__item-info{flex:1}.results-list__item-street,.results-list__item-brand,.results-list__item-employment-type{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.results-list__item-street--empty,.results-list__item-brand--empty,.results-list__item-employment-type--empty{color:#999}.results-list__item-street--icon,.results-list__item-brand--icon,.results-list__item-employment-type--icon{margin-right:6px;display:inline-flex}.results-list__item-street--icon svg,.results-list__item-brand--icon svg,.results-list__item-employment-type--icon svg{width:16px;height:16px}.results-list__item-street--more-locations__wrapper{margin-left:8px}.results-list__item-street--amount{font-weight:600}.results-list__item-apply{margin:10px 0;padding:10px 20px;display:inline-flex;align-items:center;gap:8px;background-color:#198754;color:#fff;border-radius:3px;text-decoration:none;font-weight:600;flex-shrink:0}.results-list__item-apply:hover{background-color:#1f9755;color:#fff}.results-list__item-apply--icon svg{width:14px;height:14px}.share-jobs__no-results{padding:24px;text-align:center}.share-jobs__no-results h2,.share-jobs__no-results h3{margin:8px 0;font-weight:600}.card.primary-color{padding:16px;border-radius:4px;background:#f8f9fa}.result-suggestions-title{margin:0 0 12px 0;font-size:16px}.results-list .result-suggestions-line{list-style:none;margin:4px 0}`;
|
|
65
|
+
|
|
66
|
+
const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
|
|
67
|
+
const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
|
|
68
|
+
function getLocationLabel(loc) {
|
|
69
|
+
if (loc.cityStateAbbr)
|
|
70
|
+
return loc.cityStateAbbr;
|
|
71
|
+
const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
|
|
72
|
+
return parts.join(', ') || loc.locationText || '';
|
|
73
|
+
}
|
|
74
|
+
function getFirstLocation(job) {
|
|
75
|
+
const locs = job.locations;
|
|
76
|
+
if (!locs?.length)
|
|
77
|
+
return undefined;
|
|
78
|
+
return locs[0];
|
|
79
|
+
}
|
|
80
|
+
const JobsListOnlyUI = class {
|
|
81
|
+
constructor(hostRef) {
|
|
82
|
+
registerInstance(this, hostRef);
|
|
83
|
+
}
|
|
84
|
+
/**
|
|
85
|
+
* When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
|
|
86
|
+
*/
|
|
87
|
+
mockData = false;
|
|
88
|
+
/** List of jobs to display. Pass as JSON string from attribute or as array via property (e.g. from React). Ignored when mock-data="true". */
|
|
89
|
+
jobs = [];
|
|
90
|
+
/** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
|
|
91
|
+
loading = false;
|
|
92
|
+
/** Total job count (for screen readers / schema). */
|
|
93
|
+
totalJob = 0;
|
|
94
|
+
noResultsLine1 = defaultNoResultsLine1;
|
|
95
|
+
noResultsLine2 = defaultNoResultsLine2;
|
|
96
|
+
applyButtonText = 'Apply Now';
|
|
97
|
+
showBrand = true;
|
|
98
|
+
showReference = false;
|
|
99
|
+
showEmploymentType = true;
|
|
100
|
+
streetFormat = '{street}, {city_state_abbr}';
|
|
101
|
+
multiLocationText = 'More locations';
|
|
102
|
+
remoteLocationText = 'Remote';
|
|
103
|
+
enableKilometers = false;
|
|
104
|
+
/** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
|
|
105
|
+
rootClass = '';
|
|
106
|
+
showSuggestions = false;
|
|
107
|
+
clearResultSuggestionsTitleText = 'Suggestions';
|
|
108
|
+
clearResultSuggestionsLine1 = 'Try different keywords';
|
|
109
|
+
clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';
|
|
110
|
+
clearResultSuggestionsLine3 = 'Try other locations';
|
|
111
|
+
clearResultSuggestionsLine4 = '';
|
|
112
|
+
getJobsArray() {
|
|
113
|
+
if (this.mockData) {
|
|
114
|
+
return mockJobsListOnly;
|
|
115
|
+
}
|
|
116
|
+
const j = this.jobs;
|
|
117
|
+
if (Array.isArray(j))
|
|
118
|
+
return j;
|
|
119
|
+
if (typeof j === 'string') {
|
|
120
|
+
try {
|
|
121
|
+
const parsed = JSON.parse(j);
|
|
122
|
+
return Array.isArray(parsed) ? parsed : [];
|
|
123
|
+
}
|
|
124
|
+
catch {
|
|
125
|
+
return [];
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
return [];
|
|
129
|
+
}
|
|
130
|
+
formatDistance(distance) {
|
|
131
|
+
const value = this.enableKilometers ? distance * 1.60934 : distance;
|
|
132
|
+
const unit = this.enableKilometers ? 'Km' : 'Miles';
|
|
133
|
+
const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
|
|
134
|
+
return str;
|
|
135
|
+
}
|
|
136
|
+
renderJobItem(job, _index) {
|
|
137
|
+
const firstLoc = getFirstLocation(job);
|
|
138
|
+
const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
|
|
139
|
+
const distance = firstLoc?.distance ?? 0;
|
|
140
|
+
const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
|
|
141
|
+
const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
|
|
142
|
+
const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
|
|
143
|
+
const locs = job.locations ?? [];
|
|
144
|
+
const hasMultipleLocations = locs.length > 1;
|
|
145
|
+
return (h("li", { class: "results-list__item" }, h("div", { class: "results-list__item-header" }, h("h3", { class: "results-list__item-title" }, h("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (h("span", { class: `reference ${job.reference ? '' : 'empty'}` }, job.reference || '')), job.isRemote && (h("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (h("div", { class: "results-list__item-distance" }, h("span", { class: "results-list__item-distance--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), h("span", { class: "results-list__item-distance--label" }, distanceLabel)))), h("div", { class: "results-list__item-content" }, h("div", { class: "results-list__item-info" }, h("div", { class: locs.length
|
|
146
|
+
? 'results-list__item-street'
|
|
147
|
+
: 'results-list__item-street results-list__item-street--empty' }, h("div", { class: "results-list__item-street--label__wrapper" }, h("span", { class: "results-list__item-street--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z" }))), h("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (h("div", { class: "results-list__item-street--more-locations__wrapper" }, h("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), h("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (h("div", { class: job.brandName
|
|
148
|
+
? 'results-list__item-brand'
|
|
149
|
+
: 'results-list__item-brand results-list__item-brand--empty' }, h("span", { class: "results-list__item-brand--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" }))), h("span", { class: "results-list__item-brand--label" }, job.brandName || '—'))), this.showEmploymentType && (h("div", { class: job.employmentType?.length
|
|
150
|
+
? 'results-list__item-employment-type'
|
|
151
|
+
: 'results-list__item-employment-type results-list__item-employment-type--empty' }, h("span", { class: "results-list__item-employment-type--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))), (job.employmentType?.length
|
|
152
|
+
? job.employmentType
|
|
153
|
+
: ['—']).map((type) => (h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (job.jobCardExtraFields ?? []).map((field, i) => (h("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
|
|
154
|
+
? field.classname
|
|
155
|
+
: `${field.classname}--empty` }, Array.isArray(field.value)
|
|
156
|
+
? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
|
|
157
|
+
: (h("span", { class: `${field.classname}--label` }, String(field.value))))))), h("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, h("span", { class: "results-list__item-apply--label" }, this.applyButtonText), h("span", { class: "results-list__item-apply--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
|
|
158
|
+
}
|
|
159
|
+
render() {
|
|
160
|
+
const jobsArray = this.getJobsArray();
|
|
161
|
+
const loading = this.mockData ? false : this.loading;
|
|
162
|
+
const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
|
|
163
|
+
const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
|
|
164
|
+
const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
|
|
165
|
+
return (h("div", { key: '44f0f36e2f74ad8bc624a902a73799fdd3936c90', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: '9772be003be85eb62a99f5d9f34fdc47c603b1a3', class: "results-container" }, h("div", { key: '479edda073d1718349131f83f42526ad9d8bb36e', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: '76f000851c08d039fd27de035361ec01181db1d7', class: "card" }, h("ul", { key: '205e471ade760ab6c2c2757f1167f35396443539', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: 'deb99a78f384f9a37414cad9d5efe0a8c7bd607e', class: "share-jobs__no-results" }, h("h2", { key: 'a66d46aefae4696b34bf3a5391d2b3e290909c84' }, this.noResultsLine1), h("h3", { key: '89495bb9f686c494fa7621b47ee65f246f1c27c1' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: '0f248c3e10728a5bc43086657e31139b66803ce8', class: "card primary-color" }, h("h4", { key: '7ee05c992bf6850456d83d5a2d982d92912cd5fe', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: 'b6071950497c21792afc43bbe312b4d424ed750e', class: "results-list front" }, h("li", { key: '88e781dc907654a469c000704e1e77cf0b882da1', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '4a02da6de95c55bd7cfde179b33267fc68aff473', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: '6873e011e01b3a0a074b27f73d2666aa0be6592f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '2fb8b3059abcf99e843cbffd1d8922e09152048d', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
|
|
166
|
+
}
|
|
167
|
+
};
|
|
168
|
+
JobsListOnlyUI.style = jobsListOnlyUiCss();
|
|
169
|
+
|
|
170
|
+
export { JobsListOnlyUI as jobs_list_only_ui };
|
|
171
|
+
//# sourceMappingURL=jobs-list-only-ui.entry.esm.js.map
|
|
172
|
+
|
|
173
|
+
//# sourceMappingURL=jobs-list-only-ui.entry.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"file":"jobs-list-only-ui.entry.js","mappings":"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","names":[],"sources":["src/mock/jobs-list-only.mock.ts","src/components/jobs-list-only-ui/jobs-list-only-ui.css?tag=jobs-list-only-ui&encapsulation=shadow","src/components/jobs-list-only-ui/jobs-list-only-ui.tsx"],"sourcesContent":["import type { JobSummary } from '../types/jobs-list';\n\n/**\n * Mock jobs for local development and docs.\n * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).\n */\nexport const mockJobsListOnly: JobSummary[] = [\n {\n title: 'Senior Software Engineer',\n reference: 'REF-001',\n originalURL: '/jobs/senior-software-engineer',\n applyURL: 'https://apply.example.com/1',\n brandName: 'Engineering',\n isRemote: false,\n locations: [\n {\n city: 'San Francisco',\n stateAbbr: 'CA',\n countryAbbr: 'US',\n distance: 5.2,\n streetAddress: '123 Market St',\n cityStateAbbr: 'San Francisco, CA',\n },\n ],\n employmentType: ['Full-time', 'Permanent'],\n },\n {\n title: 'Product Manager',\n reference: '',\n originalURL: '/jobs/product-manager',\n brandName: 'Product',\n isRemote: true,\n locations: [],\n employmentType: ['Full-time'],\n },\n {\n title: 'UX Designer',\n reference: 'REF-003',\n originalURL: '/jobs/ux-designer',\n brandName: 'Design',\n isRemote: false,\n locations: [\n {\n city: 'New York',\n stateAbbr: 'NY',\n countryAbbr: 'US',\n distance: 0,\n cityStateAbbr: 'New York, NY',\n },\n {\n city: 'Boston',\n stateAbbr: 'MA',\n countryAbbr: 'US',\n cityStateAbbr: 'Boston, MA',\n },\n ],\n employmentType: ['Full-time', 'Contract'],\n },\n];\n\nexport function getMockJobsJson(): string {\n return JSON.stringify(mockJobsListOnly);\n}\n","/* Jobs list only - presentation styles (standalone / mock) */\n:host {\n display: block;\n}\n\n.jobs-list-root {\n list-style: none;\n}\n\n.results-container {\n position: relative;\n}\n\n.loader {\n display: inline-block;\n width: 24px;\n height: 24px;\n border: 2px solid #ddd;\n border-top-color: #1f9755;\n border-radius: 50%;\n animation: jobs-list-spin 0.8s linear infinite;\n}\n\n.loader.hide {\n display: none;\n}\n\n@keyframes jobs-list-spin {\n to {\n transform: rotate(360deg);\n }\n}\n\n.card {\n border: 0;\n}\n\n.results-list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: block;\n}\n\n.results-list.front {\n margin: 3px 0;\n}\n\n.results-list__item {\n list-style: none;\n padding: 10px 0;\n border-bottom: 1px solid #ddd;\n margin: 15px 0;\n display: inline-block;\n width: 100%;\n position: relative;\n}\n\n.results-list__item:last-child {\n border-bottom: none;\n}\n\n.results-list__item-header {\n margin: 10px 0;\n font-size: 18px;\n font-weight: 700;\n display: flex;\n flex-direction: column;\n}\n\n.results-list__item-title {\n margin: 0;\n}\n\n.results-list__item-title--link {\n text-decoration: none;\n color: #1f9755;\n}\n\n.results-list__item-title--link:hover {\n text-decoration: underline;\n}\n\n.reference {\n margin-left: 8px;\n font-size: 0.9em;\n color: #666;\n}\n\n.reference.empty {\n display: none;\n}\n\n.remote {\n background: #f3f3f3;\n color: #808285;\n border-radius: 100px;\n padding: 6px 16px;\n text-transform: uppercase;\n font-size: 12px;\n font-weight: 700;\n line-height: 24px;\n margin-left: 8px;\n}\n\n.remote--empty {\n display: none;\n}\n\n.results-list__item-distance {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-top: 4px;\n font-size: 14px;\n font-weight: 400;\n}\n\n.results-list__item-distance--icon {\n display: inline-flex;\n}\n\n.results-list__item-distance--icon svg {\n width: 16px;\n height: 16px;\n}\n\n.results-list__item-content {\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: 16px;\n margin-top: 8px;\n}\n\n.results-list__item-info {\n flex: 1;\n}\n\n.results-list__item-street,\n.results-list__item-brand,\n.results-list__item-employment-type {\n margin: 10px 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 4px 8px;\n}\n\n.results-list__item-street--empty,\n.results-list__item-brand--empty,\n.results-list__item-employment-type--empty {\n color: #999;\n}\n\n.results-list__item-street--icon,\n.results-list__item-brand--icon,\n.results-list__item-employment-type--icon {\n margin-right: 6px;\n display: inline-flex;\n}\n\n.results-list__item-street--icon svg,\n.results-list__item-brand--icon svg,\n.results-list__item-employment-type--icon svg {\n width: 16px;\n height: 16px;\n}\n\n.results-list__item-street--more-locations__wrapper {\n margin-left: 8px;\n}\n\n.results-list__item-street--amount {\n font-weight: 600;\n}\n\n.results-list__item-apply {\n margin: 10px 0;\n padding: 10px 20px;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: #198754;\n color: #fff;\n border-radius: 3px;\n text-decoration: none;\n font-weight: 600;\n flex-shrink: 0;\n}\n\n.results-list__item-apply:hover {\n background-color: #1f9755;\n color: #fff;\n}\n\n.results-list__item-apply--icon svg {\n width: 14px;\n height: 14px;\n}\n\n/* No results & suggestions */\n.share-jobs__no-results {\n padding: 24px;\n text-align: center;\n}\n\n.share-jobs__no-results h2,\n.share-jobs__no-results h3 {\n margin: 8px 0;\n font-weight: 600;\n}\n\n.card.primary-color {\n padding: 16px;\n border-radius: 4px;\n background: #f8f9fa;\n}\n\n.result-suggestions-title {\n margin: 0 0 12px 0;\n font-size: 16px;\n}\n\n.results-list .result-suggestions-line {\n list-style: none;\n margin: 4px 0;\n}\n","import { Component, Prop, h } from '@stencil/core';\nimport type { JobSummary, JobLocationSummary } from '../../types/jobs-list';\nimport { mockJobsListOnly } from '../../mock/jobs-list-only.mock';\n\nconst defaultNoResultsLine1 = \"Sorry, we're not able to load results for your search.\";\nconst defaultNoResultsLine2 =\n 'Please refine your keywords in the search bar above and try again.';\n\nfunction getLocationLabel(loc: JobLocationSummary): string {\n if (loc.cityStateAbbr) return loc.cityStateAbbr;\n const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(\n Boolean,\n );\n return parts.join(', ') || loc.locationText || '';\n}\n\nfunction getFirstLocation(job: JobSummary): JobLocationSummary | undefined {\n const locs = job.locations;\n if (!locs?.length) return undefined;\n return locs[0];\n}\n\n@Component({\n tag: 'jobs-list-only-ui',\n styleUrl: 'jobs-list-only-ui.css',\n shadow: true,\n})\nexport class JobsListOnlyUI {\n /**\n * When \"true\", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.\n */\n @Prop() mockData = false;\n\n /** List of jobs to display. Pass as JSON string from attribute or as array via property (e.g. from React). Ignored when mock-data=\"true\". */\n @Prop() jobs: JobSummary[] | string = [];\n\n /** Show loading spinner. Ignored when mock-data=\"true\" (mock shows data immediately). */\n @Prop() loading = false;\n\n /** Total job count (for screen readers / schema). */\n @Prop() totalJob = 0;\n\n @Prop() noResultsLine1 = defaultNoResultsLine1;\n @Prop() noResultsLine2 = defaultNoResultsLine2;\n @Prop() applyButtonText = 'Apply Now';\n @Prop() showBrand = true;\n @Prop() showReference = false;\n @Prop() showEmploymentType = true;\n @Prop() streetFormat = '{street}, {city_state_abbr}';\n @Prop() multiLocationText = 'More locations';\n @Prop() remoteLocationText = 'Remote';\n @Prop() enableKilometers = false;\n /** Extra CSS class on the root element (avoid prop name \"class\" / \"classname\" reserved). */\n @Prop() rootClass = '';\n @Prop() showSuggestions = false;\n @Prop() clearResultSuggestionsTitleText = 'Suggestions';\n @Prop() clearResultSuggestionsLine1 = 'Try different keywords';\n @Prop() clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';\n @Prop() clearResultSuggestionsLine3 = 'Try other locations';\n @Prop() clearResultSuggestionsLine4 = '';\n\n private getJobsArray(): JobSummary[] {\n if (this.mockData) {\n return mockJobsListOnly;\n }\n const j = this.jobs;\n if (Array.isArray(j)) return j;\n if (typeof j === 'string') {\n try {\n const parsed = JSON.parse(j) as unknown;\n return Array.isArray(parsed) ? (parsed as JobSummary[]) : [];\n } catch {\n return [];\n }\n }\n return [];\n }\n\n private formatDistance(distance: number): string {\n const value = this.enableKilometers ? distance * 1.60934 : distance;\n const unit = this.enableKilometers ? 'Km' : 'Miles';\n const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');\n return str;\n }\n\n private renderJobItem(job: JobSummary, _index: number) {\n const firstLoc = getFirstLocation(job);\n const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';\n const distance = firstLoc?.distance ?? 0;\n const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';\n const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');\n const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;\n const locs = job.locations ?? [];\n const hasMultipleLocations = locs.length > 1;\n\n return (\n <li class=\"results-list__item\">\n <div class=\"results-list__item-header\">\n <h3 class=\"results-list__item-title\">\n <a class=\"results-list__item-title--link\" href={applyHref} target=\"_blank\" rel=\"noopener noreferrer\">\n {job.title || ''}\n </a>\n {this.showReference && (\n <span class={`reference ${job.reference ? '' : 'empty'}`}>{job.reference || ''}</span>\n )}\n {job.isRemote && (\n <span class={this.remoteLocationText ? 'remote' : 'remote remote--empty'}>\n {this.remoteLocationText}\n </span>\n )}\n </h3>\n {distanceLabel && (\n <div class=\"results-list__item-distance\">\n <span class=\"results-list__item-distance--icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z\" />\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 8v4l2 2\" />\n </svg>\n </span>\n <span class=\"results-list__item-distance--label\">{distanceLabel}</span>\n </div>\n )}\n </div>\n <div class=\"results-list__item-content\">\n <div class=\"results-list__item-info\">\n <div\n class={\n locs.length\n ? 'results-list__item-street'\n : 'results-list__item-street results-list__item-street--empty'\n }\n >\n <div class=\"results-list__item-street--label__wrapper\">\n <span class=\"results-list__item-street--icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z\"\n />\n <path\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n d=\"M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z\"\n />\n </svg>\n </span>\n <span class=\"results-list__item-street--label\">{locationLabel || '—'}</span>\n </div>\n {hasMultipleLocations && (\n <div class=\"results-list__item-street--more-locations__wrapper\">\n <span class=\"results-list__item-street--amount\">+{locs.length - 1}</span>\n <span class=\"results-list__item-street--more-locations\">{this.multiLocationText}</span>\n </div>\n )}\n </div>\n {this.showBrand && (\n <div\n class={\n job.brandName\n ? 'results-list__item-brand'\n : 'results-list__item-brand results-list__item-brand--empty'\n }\n >\n <span class=\"results-list__item-brand--icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z\" />\n </svg>\n </span>\n <span class=\"results-list__item-brand--label\">{job.brandName || '—'}</span>\n </div>\n )}\n {this.showEmploymentType && (\n <div\n class={\n job.employmentType?.length\n ? 'results-list__item-employment-type'\n : 'results-list__item-employment-type results-list__item-employment-type--empty'\n }\n >\n <span class=\"results-list__item-employment-type--icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z\" />\n </svg>\n </span>\n {(job.employmentType?.length\n ? job.employmentType\n : ['—']\n ).map((type) => (\n <span key={type} class=\"results-list__item-employment-type--label\">\n {type}\n </span>\n ))}\n </div>\n )}\n {(job.jobCardExtraFields ?? []).map((field, i) => (\n <div\n key={i}\n class={\n (Array.isArray(field.value) ? field.value.length : field.value)\n ? field.classname\n : `${field.classname}--empty`\n }\n >\n {Array.isArray(field.value)\n ? field.value.map((v, j) => (\n <span key={j} class={`${field.classname}--label`}>\n {v}\n </span>\n ))\n : (\n <span class={`${field.classname}--label`}>{String(field.value)}</span>\n )}\n </div>\n ))}\n </div>\n <a\n class=\"results-list__item-apply\"\n href={applyHref}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n aria-label={applyLabel}\n >\n <span class=\"results-list__item-apply--label\">{this.applyButtonText}</span>\n <span class=\"results-list__item-apply--icon\">\n <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M13 7l5 5m0 0l-5 5m5-5H6\" />\n </svg>\n </span>\n </a>\n </div>\n </li>\n );\n }\n\n render() {\n const jobsArray = this.getJobsArray();\n const loading = this.mockData ? false : this.loading;\n const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);\n const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;\n const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;\n\n return (\n <div class={`jobs-list-root ${this.rootClass}`.trim()}>\n <div class=\"results-container\">\n <div class={loading ? 'loader' : 'loader hide'} aria-hidden={!loading} />\n {totalJob > 0 && (\n <div class=\"card\">\n <ul class=\"results-list front\">\n {jobsArray.map((job, index) => this.renderJobItem(job, index))}\n </ul>\n </div>\n )}\n {showNoResults && (\n <div class=\"share-jobs__no-results\">\n <h2>{this.noResultsLine1}</h2>\n <h3>{this.noResultsLine2}</h3>\n </div>\n )}\n {showSuggestionsBlock && (\n <div class=\"card primary-color\">\n <h4 class=\"result-suggestions-title\">{this.clearResultSuggestionsTitleText}:</h4>\n <ul class=\"results-list front\">\n <li class=\"result-suggestions-line\">{this.clearResultSuggestionsLine1}</li>\n <li class=\"result-suggestions-line\">{this.clearResultSuggestionsLine2}</li>\n <li class=\"result-suggestions-line\">{this.clearResultSuggestionsLine3}</li>\n {this.clearResultSuggestionsLine4 && (\n <li class=\"result-suggestions-line\">{this.clearResultSuggestionsLine4}</li>\n )}\n </ul>\n </div>\n )}\n </div>\n </div>\n );\n }\n}\n"],"version":3}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { B as BUILD, c as consoleDevInfo, H, w as win, N as NAMESPACE, p as promiseResolve, g as globalScripts, b as bootstrapLazy } from './index-B0WZf8UB.js';
|
|
2
|
+
export { s as setNonce } from './index-B0WZf8UB.js';
|
|
3
|
+
|
|
4
|
+
/*
|
|
5
|
+
Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
var patchBrowser = () => {
|
|
9
|
+
if (BUILD.isDev && !BUILD.isTesting) {
|
|
10
|
+
consoleDevInfo("Running in development mode.");
|
|
11
|
+
}
|
|
12
|
+
if (BUILD.cloneNodeFix) {
|
|
13
|
+
patchCloneNodeFix(H.prototype);
|
|
14
|
+
}
|
|
15
|
+
const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll("script")).find(
|
|
16
|
+
(s) => new RegExp(`/${NAMESPACE}(\\.esm)?\\.js($|\\?|#)`).test(s.src) || s.getAttribute("data-stencil-namespace") === NAMESPACE
|
|
17
|
+
) : null;
|
|
18
|
+
const importMeta = import.meta.url;
|
|
19
|
+
const opts = BUILD.scriptDataOpts ? (scriptElm || {})["data-opts"] || {} : {};
|
|
20
|
+
if (importMeta !== "") {
|
|
21
|
+
opts.resourcesUrl = new URL(".", importMeta).href;
|
|
22
|
+
}
|
|
23
|
+
return promiseResolve(opts);
|
|
24
|
+
};
|
|
25
|
+
var patchCloneNodeFix = (HTMLElementPrototype) => {
|
|
26
|
+
const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;
|
|
27
|
+
HTMLElementPrototype.cloneNode = function(deep) {
|
|
28
|
+
if (this.nodeName === "TEMPLATE") {
|
|
29
|
+
return nativeCloneNodeFn.call(this, deep);
|
|
30
|
+
}
|
|
31
|
+
const clonedNode = nativeCloneNodeFn.call(this, false);
|
|
32
|
+
const srcChildNodes = this.childNodes;
|
|
33
|
+
if (deep) {
|
|
34
|
+
for (let i = 0; i < srcChildNodes.length; i++) {
|
|
35
|
+
if (srcChildNodes[i].nodeType !== 2) {
|
|
36
|
+
clonedNode.appendChild(srcChildNodes[i].cloneNode(true));
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return clonedNode;
|
|
41
|
+
};
|
|
42
|
+
};
|
|
43
|
+
|
|
44
|
+
patchBrowser().then(async (options) => {
|
|
45
|
+
await globalScripts();
|
|
46
|
+
return bootstrapLazy([["fast-button",[[769,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["fast-carousel",[[769,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]],["jobs-list-only-ui",[[513,"jobs-list-only-ui",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"]}]]]], options);
|
|
47
|
+
});
|
|
48
|
+
//# sourceMappingURL=web-component-poc.esm.js.map
|
|
49
|
+
|
|
50
|
+
//# sourceMappingURL=web-component-poc.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"web-component-poc.esm.js","sources":["node_modules/.pnpm/@stencil+core@4.43.2/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.43.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":[],"mappings":";;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AACzB,EAAE,IAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE;AACvC,IAAI,cAAc,CAAC,8BAA8B,CAAC;AAClD;AACA,EAAE,IAAI,KAAK,CAAC,YAAY,EAAE;AAC1B,IAAI,iBAAiB,CAAC,CAAC,CAAC,SAAS,CAAC;AAClC;AACA,EAAE,MAAM,SAAS,GAAG,KAAK,CAAC,cAAc,GAAG,GAAG,CAAC,QAAQ,IAAI,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,QAAQ,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI;AACnH,IAAI,CAAC,CAAC,KAAK,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,SAAS,CAAC,uBAAuB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,YAAY,CAAC,wBAAwB,CAAC,KAAK;AAC1H,GAAG,GAAG,IAAI;AACV,EAAE,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,GAAG;AACpC,EAAE,MAAM,IAAI,GAAG,KAAK,CAAC,cAAc,GAAG,CAAC,SAAS,IAAI,EAAE,EAAE,WAAW,CAAC,IAAI,EAAE,GAAG,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAO,cAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC","x_google_ignoreList":[0]}
|
package/loader/cdn.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('../dist/cjs/loader.cjs.js');
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
module.exports = require('../dist/cjs/loader.cjs.js');
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
export * from '../dist/types/components';
|
|
2
|
+
export interface CustomElementsDefineOptions {
|
|
3
|
+
exclude?: string[];
|
|
4
|
+
resourcesUrl?: string;
|
|
5
|
+
syncQueue?: boolean;
|
|
6
|
+
jmp?: (c: Function) => any;
|
|
7
|
+
raf?: (c: FrameRequestCallback) => number;
|
|
8
|
+
ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
9
|
+
rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
|
|
10
|
+
}
|
|
11
|
+
export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): void;
|
|
12
|
+
/**
|
|
13
|
+
* @deprecated
|
|
14
|
+
*/
|
|
15
|
+
export declare function applyPolyfills(): Promise<void>;
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
* Used to specify a nonce value that corresponds with an application's CSP.
|
|
19
|
+
* When set, the nonce will be added to all dynamically created script and style tags at runtime.
|
|
20
|
+
* Alternatively, the nonce value can be set on a meta tag in the DOM head
|
|
21
|
+
* (<meta name="csp-nonce" content="{ nonce value here }" />) which
|
|
22
|
+
* will result in the same behavior.
|
|
23
|
+
*/
|
|
24
|
+
export declare function setNonce(nonce: string): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from '../dist/esm/loader.js';
|
package/loader/index.js
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
(function(){if("undefined"!==typeof window&&void 0!==window.Reflect&&void 0!==window.customElements){var a=HTMLElement;window.HTMLElement=function(){return Reflect.construct(a,[],this.constructor)};HTMLElement.prototype=a.prototype;HTMLElement.prototype.constructor=HTMLElement;Object.setPrototypeOf(HTMLElement,a)}})();
|
|
2
|
+
export * from '../dist/esm/loader.js';
|
package/package.json
ADDED
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@phatvu/web-component-poc",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Stencil Component Starter",
|
|
5
|
+
"main": "dist/index.cjs.js",
|
|
6
|
+
"module": "dist/index.js",
|
|
7
|
+
"types": "dist/types/index.d.ts",
|
|
8
|
+
"collection": "dist/collection/collection-manifest.json",
|
|
9
|
+
"collection:main": "dist/collection/index.js",
|
|
10
|
+
"unpkg": "dist/web-component-poc/web-component-poc.esm.js",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"import": "./dist/web-component-poc/web-component-poc.esm.js",
|
|
14
|
+
"require": "./dist/web-component-poc/web-component-poc.cjs.js"
|
|
15
|
+
},
|
|
16
|
+
"./fast-carousel": {
|
|
17
|
+
"import": "./dist/components/app-carousel.js",
|
|
18
|
+
"types": "./dist/components/app-carousel.d.ts"
|
|
19
|
+
},
|
|
20
|
+
"./fast-button": {
|
|
21
|
+
"import": "./dist/components/custom-button.js",
|
|
22
|
+
"types": "./dist/components/custom-button.d.ts"
|
|
23
|
+
},
|
|
24
|
+
"./loader": {
|
|
25
|
+
"import": "./loader/index.js",
|
|
26
|
+
"require": "./loader/index.cjs",
|
|
27
|
+
"types": "./loader/index.d.ts"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://github.com/stenciljs/component-starter.git"
|
|
33
|
+
},
|
|
34
|
+
"files": [
|
|
35
|
+
"dist/",
|
|
36
|
+
"loader/"
|
|
37
|
+
],
|
|
38
|
+
"scripts": {
|
|
39
|
+
"build": "stencil build",
|
|
40
|
+
"start": "stencil build --dev --watch --serve",
|
|
41
|
+
"test": "stencil test --spec --e2e",
|
|
42
|
+
"test.watch": "stencil test --spec --e2e --watchAll",
|
|
43
|
+
"generate": "stencil generate",
|
|
44
|
+
"deploy": "pnpm build && gh-pages -d dist"
|
|
45
|
+
},
|
|
46
|
+
"dependencies": {
|
|
47
|
+
"embla-carousel": "^8.6.0"
|
|
48
|
+
},
|
|
49
|
+
"devDependencies": {
|
|
50
|
+
"@stencil/core": "^4.27.1",
|
|
51
|
+
"@types/jest": "^29.5.14",
|
|
52
|
+
"@types/node": "^22.13.5",
|
|
53
|
+
"gh-pages": "^6.3.0",
|
|
54
|
+
"jest": "^29.7.0",
|
|
55
|
+
"jest-cli": "^29.7.0",
|
|
56
|
+
"puppeteer": "^24.3.0"
|
|
57
|
+
},
|
|
58
|
+
"license": "MIT"
|
|
59
|
+
}
|
package/readme.md
ADDED
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
[](https://stenciljs.com)
|
|
2
|
+
|
|
3
|
+
# Stencil Component Starter
|
|
4
|
+
|
|
5
|
+
> This is a starter project for building a standalone Web Components using Stencil.
|
|
6
|
+
|
|
7
|
+
Stencil is a compiler for building fast web apps using Web Components.
|
|
8
|
+
|
|
9
|
+
Stencil combines the best concepts of the most popular frontend frameworks into a compile-time rather than runtime tool. Stencil takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components that run in any browser supporting the Custom Elements specification.
|
|
10
|
+
|
|
11
|
+
Stencil components are just Web Components, so they work in any major framework or with no framework at all.
|
|
12
|
+
|
|
13
|
+
## Getting Started
|
|
14
|
+
|
|
15
|
+
To start building a new web component using Stencil, clone this repo to a new directory:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
git clone https://github.com/stenciljs/component-starter.git my-component
|
|
19
|
+
cd my-component
|
|
20
|
+
git remote rm origin
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
and run:
|
|
24
|
+
|
|
25
|
+
```bash
|
|
26
|
+
npm install
|
|
27
|
+
npm start
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
To build the component for production, run:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
npm run build
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
To run the unit tests for the components, run:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm test
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
Need help? Check out our docs [here](https://stenciljs.com/docs/my-first-component).
|
|
43
|
+
|
|
44
|
+
## Naming Components
|
|
45
|
+
|
|
46
|
+
When creating new component tags, we recommend _not_ using `stencil` in the component name (ex: `<stencil-datepicker>`). This is because the generated component has little to nothing to do with Stencil; it's just a web component!
|
|
47
|
+
|
|
48
|
+
Instead, use a prefix that fits your company or any name for a group of related components. For example, all of the [Ionic-generated](https://ionicframework.com/) web components use the prefix `ion`.
|
|
49
|
+
|
|
50
|
+
## Using this component
|
|
51
|
+
|
|
52
|
+
There are two strategies we recommend for using web components built with Stencil.
|
|
53
|
+
|
|
54
|
+
The first step for all two of these strategies is to [publish to NPM](https://docs.npmjs.com/getting-started/publishing-npm-packages).
|
|
55
|
+
|
|
56
|
+
You can read more about these different approaches in the [Stencil docs](https://stenciljs.com/docs/publishing).
|
|
57
|
+
|
|
58
|
+
### Lazy Loading
|
|
59
|
+
|
|
60
|
+
If your Stencil project is built with the [`dist`](https://stenciljs.com/docs/distribution) output target, you can import a small bootstrap script that registers all components and allows you to load individual component scripts lazily.
|
|
61
|
+
|
|
62
|
+
For example, given your Stencil project namespace is called `my-design-system`, to use `my-component` on any website, inject this into your HTML:
|
|
63
|
+
|
|
64
|
+
```html
|
|
65
|
+
<script type="module" src="https://unpkg.com/my-design-system"></script>
|
|
66
|
+
<!--
|
|
67
|
+
To avoid unpkg.com redirects to the actual file, you can also directly import:
|
|
68
|
+
https://unpkg.com/foobar-design-system@0.0.1/dist/foobar-design-system/foobar-design-system.esm.js
|
|
69
|
+
-->
|
|
70
|
+
<my-component first="Stencil" middle="'Don't call me a framework'" last="JS"></my-component>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
This will only load the necessary scripts needed to render `<my-component />`. Once more components of this package are used, they will automatically be loaded lazily.
|
|
74
|
+
|
|
75
|
+
You can also import the script as part of your `node_modules` in your applications entry file:
|
|
76
|
+
|
|
77
|
+
```tsx
|
|
78
|
+
import 'foobar-design-system/dist/foobar-design-system/foobar-design-system.esm.js';
|
|
79
|
+
```
|
|
80
|
+
|
|
81
|
+
Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-y6v26a?file=src%2Fmain.tsx).
|
|
82
|
+
|
|
83
|
+
### Standalone
|
|
84
|
+
|
|
85
|
+
If you are using a Stencil component library with `dist-custom-elements`, we recommend importing Stencil components individually in those files where they are needed.
|
|
86
|
+
|
|
87
|
+
To export Stencil components as standalone components make sure you have the [`dist-custom-elements`](https://stenciljs.com/docs/custom-elements) output target defined in your `stencil.config.ts`.
|
|
88
|
+
|
|
89
|
+
For example, given you'd like to use `<my-component />` as part of a React component, you can import the component directly via:
|
|
90
|
+
|
|
91
|
+
```tsx
|
|
92
|
+
import 'foobar-design-system/my-component';
|
|
93
|
+
|
|
94
|
+
function App() {
|
|
95
|
+
return (
|
|
96
|
+
<>
|
|
97
|
+
<div>
|
|
98
|
+
<my-component
|
|
99
|
+
first="Stencil"
|
|
100
|
+
middle="'Don't call me a framework'"
|
|
101
|
+
last="JS"
|
|
102
|
+
></my-component>
|
|
103
|
+
</div>
|
|
104
|
+
</>
|
|
105
|
+
);
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
export default App;
|
|
109
|
+
```
|
|
110
|
+
|
|
111
|
+
Check out this [Live Demo](https://stackblitz.com/edit/vitejs-vite-b6zuds?file=src%2FApp.tsx).
|