@phatvu/web-component-poc 1.0.3 → 1.0.4
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/dist/cjs/{fast-button_3.cjs.entry.js → fast-button_4.cjs.entry.js} +68 -45
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/web-component-poc.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/{jobs-list-only-ui/jobs-list-only-ui.css → jobs-item/jobs-item.css} +1 -75
- package/dist/collection/components/jobs-item/jobs-item.js +253 -0
- package/dist/collection/components/jobs-list-only/jobs-list-only.css +75 -0
- package/dist/collection/components/{jobs-list-only-ui/jobs-list-only-ui.js → jobs-list-only/jobs-list-only.js} +7 -45
- package/dist/components/{jobs-list-only-ui.d.ts → jobs-item.d.ts} +4 -4
- package/dist/components/jobs-item.js +1 -0
- package/dist/components/jobs-list-only.d.ts +11 -0
- package/dist/components/jobs-list-only.js +1 -0
- package/dist/components/p-ClQDwJJB.js +1 -0
- package/dist/esm/{fast-button_3.entry.js → fast-button_4.entry.js} +67 -45
- package/dist/esm/loader.js +1 -1
- package/dist/esm/web-component-poc.js +1 -1
- package/dist/types/components/jobs-item/jobs-item.d.ts +14 -0
- package/dist/types/components/{jobs-list-only-ui/jobs-list-only-ui.d.ts → jobs-list-only/jobs-list-only.d.ts} +1 -2
- package/dist/types/components.d.ts +99 -10
- package/dist/types/types/jobs-list.d.ts +2 -2
- package/dist/web-component-poc/index-pJKMKO-T.js.map +1 -0
- package/dist/web-component-poc/index.esm.js.map +1 -0
- package/dist/web-component-poc/p-df843533.entry.js +1 -0
- package/dist/web-component-poc/web-component-poc.esm.js +1 -1
- package/dist/web-component-poc/web-component-poc.esm.js.map +1 -0
- package/hydrate/index.js +87 -46
- package/hydrate/index.mjs +87 -46
- package/package.json +9 -1
- package/readme.md +11 -0
- package/dist/components/jobs-list-only-ui.js +0 -1
- package/dist/web-component-poc/p-3d68d559.entry.js +0 -1
|
@@ -2,19 +2,7 @@ import { h } from "@stencil/core";
|
|
|
2
2
|
import { mockJobsListOnly } from "../../mock/jobs-list-only.mock";
|
|
3
3
|
const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
|
|
4
4
|
const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
|
|
5
|
-
|
|
6
|
-
if (loc.cityStateAbbr)
|
|
7
|
-
return loc.cityStateAbbr;
|
|
8
|
-
const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
|
|
9
|
-
return parts.join(', ') || loc.locationText || '';
|
|
10
|
-
}
|
|
11
|
-
function getFirstLocation(job) {
|
|
12
|
-
const locs = job.locations;
|
|
13
|
-
if (!locs?.length)
|
|
14
|
-
return undefined;
|
|
15
|
-
return locs[0];
|
|
16
|
-
}
|
|
17
|
-
export class JobsListOnlyUI {
|
|
5
|
+
export class JobsListOnly {
|
|
18
6
|
/**
|
|
19
7
|
* When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
|
|
20
8
|
*/
|
|
@@ -61,34 +49,8 @@ export class JobsListOnlyUI {
|
|
|
61
49
|
}
|
|
62
50
|
return [];
|
|
63
51
|
}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
const unit = this.enableKilometers ? 'Km' : 'Miles';
|
|
67
|
-
const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
|
|
68
|
-
return str;
|
|
69
|
-
}
|
|
70
|
-
renderJobItem(job, _index) {
|
|
71
|
-
const firstLoc = getFirstLocation(job);
|
|
72
|
-
const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
|
|
73
|
-
const distance = firstLoc?.distance ?? 0;
|
|
74
|
-
const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
|
|
75
|
-
const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
|
|
76
|
-
const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
|
|
77
|
-
const locs = job.locations ?? [];
|
|
78
|
-
const hasMultipleLocations = locs.length > 1;
|
|
79
|
-
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
|
|
80
|
-
? 'results-list__item-street'
|
|
81
|
-
: '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
|
|
82
|
-
? 'results-list__item-brand'
|
|
83
|
-
: '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
|
|
84
|
-
? 'results-list__item-employment-type'
|
|
85
|
-
: '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
|
|
86
|
-
? job.employmentType
|
|
87
|
-
: ['—']).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)
|
|
88
|
-
? field.classname
|
|
89
|
-
: `${field.classname}--empty` }, Array.isArray(field.value)
|
|
90
|
-
? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
|
|
91
|
-
: (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" })))))));
|
|
52
|
+
renderJobItem(job, index) {
|
|
53
|
+
return (h("jobs-item", { job: job, index: index, applyButtonText: this.applyButtonText, showBrand: this.showBrand, showReference: this.showReference, showEmploymentType: this.showEmploymentType, multiLocationText: this.multiLocationText, remoteLocationText: this.remoteLocationText, enableKilometers: this.enableKilometers }));
|
|
92
54
|
}
|
|
93
55
|
render() {
|
|
94
56
|
const jobsArray = this.getJobsArray();
|
|
@@ -96,17 +58,17 @@ export class JobsListOnlyUI {
|
|
|
96
58
|
const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
|
|
97
59
|
const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
|
|
98
60
|
const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
|
|
99
|
-
return (h("div", { key: '
|
|
61
|
+
return (h("div", { key: '9e69d40c649b4f16617f522c89bc87d4cbffe1e3', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: '7daf1c09dd1d5553a335f3c81c894a331964ee96', class: "results-container" }, h("div", { key: '9ab3db2b834359a64faee61f8c3dc2daca8211d9', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: 'c729ccdf715105b9fbc7af0a1f148c82535772c1', class: "card" }, h("ul", { key: 'b0c5b6baccf7b94819cc2ad9ab970981a5294b42', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: '8f1684ddde51474e9c1699f93fb01c56e5406a51', class: "share-jobs__no-results" }, h("h2", { key: '2e3bc4b6b7647e3939588102d659e777207e46e9' }, this.noResultsLine1), h("h3", { key: 'f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: 'ed34907fd90f28571786045f21525895cef6e98a', class: "card primary-color" }, h("h4", { key: '33e96147f1b427df874656c1e0647af1d97fea29', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: '570fd8e5068f1a7c809fad47347fe5f469da8bc6', class: "results-list front" }, h("li", { key: 'b5d22dfb448d2888dc010d6e494d1834d3d60034', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: '0bd9503bf686213ae087f74a7b5f2cc62f9c96b7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '961b2904347e1c5fc6b355a069790f0f2997917f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
|
|
100
62
|
}
|
|
101
|
-
static get is() { return "jobs-list-only
|
|
63
|
+
static get is() { return "jobs-list-only"; }
|
|
102
64
|
static get originalStyleUrls() {
|
|
103
65
|
return {
|
|
104
|
-
"$": ["jobs-list-only
|
|
66
|
+
"$": ["jobs-list-only.css"]
|
|
105
67
|
};
|
|
106
68
|
}
|
|
107
69
|
static get styleUrls() {
|
|
108
70
|
return {
|
|
109
|
-
"$": ["jobs-list-only
|
|
71
|
+
"$": ["jobs-list-only.css"]
|
|
110
72
|
};
|
|
111
73
|
}
|
|
112
74
|
static get properties() {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import type { Components, JSX } from "../types/components";
|
|
2
2
|
|
|
3
|
-
interface
|
|
4
|
-
export const
|
|
5
|
-
prototype:
|
|
6
|
-
new ():
|
|
3
|
+
interface JobsItem extends Components.JobsItem, HTMLElement {}
|
|
4
|
+
export const JobsItem: {
|
|
5
|
+
prototype: JobsItem;
|
|
6
|
+
new (): JobsItem;
|
|
7
7
|
};
|
|
8
8
|
/**
|
|
9
9
|
* Used to define this component and all nested components recursively.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{J as o,d as s}from"./p-ClQDwJJB.js";const p=o,r=s;export{p as JobsItem,r as defineCustomElement}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Components, JSX } from "../types/components";
|
|
2
|
+
|
|
3
|
+
interface JobsListOnly extends Components.JobsListOnly, HTMLElement {}
|
|
4
|
+
export const JobsListOnly: {
|
|
5
|
+
prototype: JobsListOnly;
|
|
6
|
+
new (): JobsListOnly;
|
|
7
|
+
};
|
|
8
|
+
/**
|
|
9
|
+
* Used to define this component and all nested components recursively.
|
|
10
|
+
*/
|
|
11
|
+
export const defineCustomElement: () => void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t as e,p as t,H as s,h as o}from"./p-UM9TUfe3.js";import{d as r}from"./p-ClQDwJJB.js";const i=[{title:"Senior Software Engineer",reference:"REF-001",originalURL:"/jobs/senior-software-engineer",applyURL:"https://apply.example.com/1",brandName:"Engineering",isRemote:!1,locations:[{city:"San Francisco",stateAbbr:"CA",countryAbbr:"US",distance:5.2,streetAddress:"123 Market St",cityStateAbbr:"San Francisco, CA"}],employmentType:["Full-time","Permanent"]},{title:"Product Manager",reference:"",originalURL:"/jobs/product-manager",brandName:"Product",isRemote:!0,locations:[],employmentType:["Full-time"]},{title:"UX Designer",reference:"REF-003",originalURL:"/jobs/ux-designer",brandName:"Design",isRemote:!1,locations:[{city:"New York",stateAbbr:"NY",countryAbbr:"US",distance:0,cityStateAbbr:"New York, NY"},{city:"Boston",stateAbbr:"MA",countryAbbr:"US",cityStateAbbr:"Boston, MA"}],employmentType:["Full-time","Contract"]}],n=t(class extends s{constructor(e){super(),!1!==e&&this.__registerHost()}mockData=!1;jobs=[];loading=!1;totalJob=0;noResultsLine1="Sorry, we're not able to load results for your search.";noResultsLine2="Please refine your keywords in the search bar above and try again.";applyButtonText="Apply Now";showBrand=!0;showReference=!1;showEmploymentType=!0;streetFormat="{street}, {city_state_abbr}";multiLocationText="More locations";remoteLocationText="Remote";enableKilometers=!1;rootClass="";showSuggestions=!1;clearResultSuggestionsTitleText="Suggestions";clearResultSuggestionsLine1="Try different keywords";clearResultSuggestionsLine2="Make sure everything is spelled correctly";clearResultSuggestionsLine3="Try other locations";clearResultSuggestionsLine4="";getJobsArray(){if(this.mockData)return i;const e=this.jobs;if(Array.isArray(e))return e;if("string"==typeof e)try{const t=JSON.parse(e);return Array.isArray(t)?t:[]}catch{return[]}return[]}renderJobItem(e,t){return o("jobs-item",{job:e,index:t,applyButtonText:this.applyButtonText,showBrand:this.showBrand,showReference:this.showReference,showEmploymentType:this.showEmploymentType,multiLocationText:this.multiLocationText,remoteLocationText:this.remoteLocationText,enableKilometers:this.enableKilometers})}render(){const e=this.getJobsArray(),t=!this.mockData&&this.loading,s=this.mockData?e.length:this.totalJob||e.length,r=!t&&0===s&&!this.showSuggestions,i=!t&&0===s&&this.showSuggestions;return o("div",{key:"9e69d40c649b4f16617f522c89bc87d4cbffe1e3",class:("jobs-list-root "+this.rootClass).trim()},o("div",{key:"7daf1c09dd1d5553a335f3c81c894a331964ee96",class:"results-container"},o("div",{key:"9ab3db2b834359a64faee61f8c3dc2daca8211d9",class:t?"loader":"loader hide","aria-hidden":!t}),s>0&&o("div",{key:"c729ccdf715105b9fbc7af0a1f148c82535772c1",class:"card"},o("ul",{key:"b0c5b6baccf7b94819cc2ad9ab970981a5294b42",class:"results-list front"},e.map(((e,t)=>this.renderJobItem(e,t))))),r&&o("div",{key:"8f1684ddde51474e9c1699f93fb01c56e5406a51",class:"share-jobs__no-results"},o("h2",{key:"2e3bc4b6b7647e3939588102d659e777207e46e9"},this.noResultsLine1),o("h3",{key:"f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab"},this.noResultsLine2)),i&&o("div",{key:"ed34907fd90f28571786045f21525895cef6e98a",class:"card primary-color"},o("h4",{key:"33e96147f1b427df874656c1e0647af1d97fea29",class:"result-suggestions-title"},this.clearResultSuggestionsTitleText,":"),o("ul",{key:"570fd8e5068f1a7c809fad47347fe5f469da8bc6",class:"results-list front"},o("li",{key:"b5d22dfb448d2888dc010d6e494d1834d3d60034",class:"result-suggestions-line"},this.clearResultSuggestionsLine1),o("li",{key:"77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e",class:"result-suggestions-line"},this.clearResultSuggestionsLine2),o("li",{key:"0bd9503bf686213ae087f74a7b5f2cc62f9c96b7",class:"result-suggestions-line"},this.clearResultSuggestionsLine3),this.clearResultSuggestionsLine4&&o("li",{key:"961b2904347e1c5fc6b355a069790f0f2997917f",class:"result-suggestions-line"},this.clearResultSuggestionsLine4)))))}static get style(){return":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}.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}"}},[512,"jobs-list-only",{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"]}]);function a(){"undefined"!=typeof customElements&&["jobs-list-only","jobs-item"].forEach((t=>{switch(t){case"jobs-list-only":customElements.get(e(t))||customElements.define(e(t),n);break;case"jobs-item":customElements.get(e(t))||r()}}))}a();const l=n,c=a;export{l as JobsListOnly,c as defineCustomElement}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{t,p as e,H as s,h as i}from"./p-UM9TUfe3.js";const l=e(class extends s{constructor(t){super(),!1!==t&&this.__registerHost()}job;index=0;applyButtonText="Apply Now";showBrand=!0;showReference=!1;showEmploymentType=!0;multiLocationText="More locations";remoteLocationText="Remote";enableKilometers=!1;formatDistance(t){const e=this.enableKilometers?"Km":"Miles";return`${(this.enableKilometers?1.60934*t:t).toFixed(1)} ${e}`.replace(".0","")}render(){if(!this.job)return null;const t=function(t){const e=t.locations;if(e?.length)return e[0]}(this.job),e=t?(s=t).cityStateAbbr?s.cityStateAbbr:[s.streetAddress,s.city,s.stateAbbr||s.state,s.countryAbbr||s.country].filter(Boolean).join(", ")||s.locationText||"":"";var s;const l=t?.distance??0,r=l>0?this.formatDistance(l):"",n=this.job.applyURL||(this.job.originalURL?`${"undefined"!=typeof window?window.location.origin:""}${this.job.originalURL}`:"#"),o=`${this.applyButtonText}, ${this.job.title||""}`,a=this.job.locations??[],m=a.length>1;return i("li",{class:"results-list__item"},i("div",{class:"results-list__item-header"},i("h3",{class:"results-list__item-title"},i("a",{class:"results-list__item-title--link",href:n,target:"_blank",rel:"noopener noreferrer"},this.job.title||""),this.showReference&&i("span",{class:"reference "+(this.job.reference?"":"empty")},this.job.reference||""),this.job.isRemote&&i("span",{class:this.remoteLocationText?"remote":"remote remote--empty"},this.remoteLocationText)),r&&i("div",{class:"results-list__item-distance"},i("span",{class:"results-list__item-distance--icon"},i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z"}),i("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M12 8v4l2 2"}))),i("span",{class:"results-list__item-distance--label"},r))),i("div",{class:"results-list__item-content"},i("div",{class:"results-list__item-info"},i("div",{class:a.length?"results-list__item-street":"results-list__item-street results-list__item-street--empty"},i("div",{class:"results-list__item-street--label__wrapper"},i("span",{class:"results-list__item-street--icon"},i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"}),i("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"}))),i("span",{class:"results-list__item-street--label"},e||"—")),m&&i("div",{class:"results-list__item-street--more-locations__wrapper"},i("span",{class:"results-list__item-street--amount"},"+",a.length-1),i("span",{class:"results-list__item-street--more-locations"},this.multiLocationText))),this.showBrand&&i("div",{class:this.job.brandName?"results-list__item-brand":"results-list__item-brand results-list__item-brand--empty"},i("span",{class:"results-list__item-brand--icon"},i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},i("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"}))),i("span",{class:"results-list__item-brand--label"},this.job.brandName||"—")),this.showEmploymentType&&i("div",{class:this.job.employmentType?.length?"results-list__item-employment-type":"results-list__item-employment-type results-list__item-employment-type--empty"},i("span",{class:"results-list__item-employment-type--icon"},i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"1.5"},i("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"}))),(this.job.employmentType?.length?this.job.employmentType:["—"]).map((t=>i("span",{key:t,class:"results-list__item-employment-type--label"},t)))),(this.job.jobCardExtraFields??[]).map(((t,e)=>i("div",{key:e,class:(Array.isArray(t.value)?t.value.length:t.value)?t.classname:`${t.classname}--empty`},Array.isArray(t.value)?t.value.map(((e,s)=>i("span",{key:s,class:`${t.classname}--label`},e))):i("span",{class:`${t.classname}--label`},String(t.value)))))),i("a",{class:"results-list__item-apply",href:n,target:"_blank",rel:"noopener noreferrer","aria-label":o},i("span",{class:"results-list__item-apply--label"},this.applyButtonText),i("span",{class:"results-list__item-apply--icon"},i("svg",{viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":"2"},i("path",{"stroke-linecap":"round","stroke-linejoin":"round",d:"M13 7l5 5m0 0l-5 5m5-5H6"}))))))}static get style(){return".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}"}},[512,"jobs-item",{job:[16],index:[2],applyButtonText:[1,"apply-button-text"],showBrand:[4,"show-brand"],showReference:[4,"show-reference"],showEmploymentType:[4,"show-employment-type"],multiLocationText:[1,"multi-location-text"],remoteLocationText:[1,"remote-location-text"],enableKilometers:[4,"enable-kilometers"]}]);function r(){"undefined"!=typeof customElements&&["jobs-item"].forEach((e=>{"jobs-item"===e&&(customElements.get(t(e))||customElements.define(t(e),l))}))}r();export{l as J,r as d}
|
|
@@ -1945,6 +1945,66 @@ const AppCarousel = class {
|
|
|
1945
1945
|
};
|
|
1946
1946
|
AppCarousel.style = carouselCss();
|
|
1947
1947
|
|
|
1948
|
+
const jobsItemCss = () => `.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}`;
|
|
1949
|
+
|
|
1950
|
+
function getLocationLabel(loc) {
|
|
1951
|
+
if (loc.cityStateAbbr)
|
|
1952
|
+
return loc.cityStateAbbr;
|
|
1953
|
+
const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
|
|
1954
|
+
return parts.join(', ') || loc.locationText || '';
|
|
1955
|
+
}
|
|
1956
|
+
function getFirstLocation(job) {
|
|
1957
|
+
const locs = job.locations;
|
|
1958
|
+
if (!locs?.length)
|
|
1959
|
+
return undefined;
|
|
1960
|
+
return locs[0];
|
|
1961
|
+
}
|
|
1962
|
+
const JobsItem = class {
|
|
1963
|
+
constructor(hostRef) {
|
|
1964
|
+
registerInstance(this, hostRef);
|
|
1965
|
+
}
|
|
1966
|
+
job;
|
|
1967
|
+
index = 0;
|
|
1968
|
+
applyButtonText = 'Apply Now';
|
|
1969
|
+
showBrand = true;
|
|
1970
|
+
showReference = false;
|
|
1971
|
+
showEmploymentType = true;
|
|
1972
|
+
multiLocationText = 'More locations';
|
|
1973
|
+
remoteLocationText = 'Remote';
|
|
1974
|
+
enableKilometers = false;
|
|
1975
|
+
formatDistance(distance) {
|
|
1976
|
+
const value = this.enableKilometers ? distance * 1.60934 : distance;
|
|
1977
|
+
const unit = this.enableKilometers ? 'Km' : 'Miles';
|
|
1978
|
+
const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
|
|
1979
|
+
return str;
|
|
1980
|
+
}
|
|
1981
|
+
render() {
|
|
1982
|
+
if (!this.job)
|
|
1983
|
+
return null;
|
|
1984
|
+
const firstLoc = getFirstLocation(this.job);
|
|
1985
|
+
const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
|
|
1986
|
+
const distance = firstLoc?.distance ?? 0;
|
|
1987
|
+
const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
|
|
1988
|
+
const applyHref = this.job.applyURL ||
|
|
1989
|
+
(this.job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${this.job.originalURL}` : '#');
|
|
1990
|
+
const applyLabel = `${this.applyButtonText}, ${this.job.title || ''}`;
|
|
1991
|
+
const locs = this.job.locations ?? [];
|
|
1992
|
+
const hasMultipleLocations = locs.length > 1;
|
|
1993
|
+
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" }, this.job.title || ''), this.showReference && (h("span", { class: `reference ${this.job.reference ? '' : 'empty'}` }, this.job.reference || '')), this.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
|
|
1994
|
+
? 'results-list__item-street'
|
|
1995
|
+
: '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: this.job.brandName
|
|
1996
|
+
? 'results-list__item-brand'
|
|
1997
|
+
: '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" }, this.job.brandName || '—'))), this.showEmploymentType && (h("div", { class: this.job.employmentType?.length
|
|
1998
|
+
? 'results-list__item-employment-type'
|
|
1999
|
+
: '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" }))), (this.job.employmentType?.length ? this.job.employmentType : ['—']).map((type) => (h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (this.job.jobCardExtraFields ?? []).map((field, i) => (h("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
|
|
2000
|
+
? field.classname
|
|
2001
|
+
: `${field.classname}--empty` }, Array.isArray(field.value)
|
|
2002
|
+
? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
|
|
2003
|
+
: (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" })))))));
|
|
2004
|
+
}
|
|
2005
|
+
};
|
|
2006
|
+
JobsItem.style = jobsItemCss();
|
|
2007
|
+
|
|
1948
2008
|
/**
|
|
1949
2009
|
* Mock jobs for local development and docs.
|
|
1950
2010
|
* Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
|
|
@@ -2003,23 +2063,11 @@ const mockJobsListOnly = [
|
|
|
2003
2063
|
},
|
|
2004
2064
|
];
|
|
2005
2065
|
|
|
2006
|
-
const
|
|
2066
|
+
const jobsListOnlyCss = () => `: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}.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}`;
|
|
2007
2067
|
|
|
2008
2068
|
const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
|
|
2009
2069
|
const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
|
|
2010
|
-
|
|
2011
|
-
if (loc.cityStateAbbr)
|
|
2012
|
-
return loc.cityStateAbbr;
|
|
2013
|
-
const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
|
|
2014
|
-
return parts.join(', ') || loc.locationText || '';
|
|
2015
|
-
}
|
|
2016
|
-
function getFirstLocation(job) {
|
|
2017
|
-
const locs = job.locations;
|
|
2018
|
-
if (!locs?.length)
|
|
2019
|
-
return undefined;
|
|
2020
|
-
return locs[0];
|
|
2021
|
-
}
|
|
2022
|
-
const JobsListOnlyUI = class {
|
|
2070
|
+
const JobsListOnly = class {
|
|
2023
2071
|
constructor(hostRef) {
|
|
2024
2072
|
registerInstance(this, hostRef);
|
|
2025
2073
|
}
|
|
@@ -2069,34 +2117,8 @@ const JobsListOnlyUI = class {
|
|
|
2069
2117
|
}
|
|
2070
2118
|
return [];
|
|
2071
2119
|
}
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
const unit = this.enableKilometers ? 'Km' : 'Miles';
|
|
2075
|
-
const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
|
|
2076
|
-
return str;
|
|
2077
|
-
}
|
|
2078
|
-
renderJobItem(job, _index) {
|
|
2079
|
-
const firstLoc = getFirstLocation(job);
|
|
2080
|
-
const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
|
|
2081
|
-
const distance = firstLoc?.distance ?? 0;
|
|
2082
|
-
const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
|
|
2083
|
-
const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
|
|
2084
|
-
const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
|
|
2085
|
-
const locs = job.locations ?? [];
|
|
2086
|
-
const hasMultipleLocations = locs.length > 1;
|
|
2087
|
-
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
|
|
2088
|
-
? 'results-list__item-street'
|
|
2089
|
-
: '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
|
|
2090
|
-
? 'results-list__item-brand'
|
|
2091
|
-
: '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
|
|
2092
|
-
? 'results-list__item-employment-type'
|
|
2093
|
-
: '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
|
|
2094
|
-
? job.employmentType
|
|
2095
|
-
: ['—']).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)
|
|
2096
|
-
? field.classname
|
|
2097
|
-
: `${field.classname}--empty` }, Array.isArray(field.value)
|
|
2098
|
-
? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
|
|
2099
|
-
: (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" })))))));
|
|
2120
|
+
renderJobItem(job, index) {
|
|
2121
|
+
return (h("jobs-item", { job: job, index: index, applyButtonText: this.applyButtonText, showBrand: this.showBrand, showReference: this.showReference, showEmploymentType: this.showEmploymentType, multiLocationText: this.multiLocationText, remoteLocationText: this.remoteLocationText, enableKilometers: this.enableKilometers }));
|
|
2100
2122
|
}
|
|
2101
2123
|
render() {
|
|
2102
2124
|
const jobsArray = this.getJobsArray();
|
|
@@ -2104,9 +2126,9 @@ const JobsListOnlyUI = class {
|
|
|
2104
2126
|
const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
|
|
2105
2127
|
const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
|
|
2106
2128
|
const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
|
|
2107
|
-
return (h("div", { key: '
|
|
2129
|
+
return (h("div", { key: '9e69d40c649b4f16617f522c89bc87d4cbffe1e3', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: '7daf1c09dd1d5553a335f3c81c894a331964ee96', class: "results-container" }, h("div", { key: '9ab3db2b834359a64faee61f8c3dc2daca8211d9', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: 'c729ccdf715105b9fbc7af0a1f148c82535772c1', class: "card" }, h("ul", { key: 'b0c5b6baccf7b94819cc2ad9ab970981a5294b42', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: '8f1684ddde51474e9c1699f93fb01c56e5406a51', class: "share-jobs__no-results" }, h("h2", { key: '2e3bc4b6b7647e3939588102d659e777207e46e9' }, this.noResultsLine1), h("h3", { key: 'f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: 'ed34907fd90f28571786045f21525895cef6e98a', class: "card primary-color" }, h("h4", { key: '33e96147f1b427df874656c1e0647af1d97fea29', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: '570fd8e5068f1a7c809fad47347fe5f469da8bc6', class: "results-list front" }, h("li", { key: 'b5d22dfb448d2888dc010d6e494d1834d3d60034', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: '0bd9503bf686213ae087f74a7b5f2cc62f9c96b7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '961b2904347e1c5fc6b355a069790f0f2997917f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
|
|
2108
2130
|
}
|
|
2109
2131
|
};
|
|
2110
|
-
|
|
2132
|
+
JobsListOnly.style = jobsListOnlyCss();
|
|
2111
2133
|
|
|
2112
|
-
export { CustomButton as fast_button, AppCarousel as fast_carousel,
|
|
2134
|
+
export { CustomButton as fast_button, AppCarousel as fast_carousel, JobsItem as jobs_item, JobsListOnly as jobs_list_only };
|
package/dist/esm/loader.js
CHANGED
|
@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await globalScripts();
|
|
8
|
-
return bootstrapLazy([["fast-
|
|
8
|
+
return bootstrapLazy([["fast-button_4",[[512,"jobs-list-only",{"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"]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[772,"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]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
export { defineCustomElements };
|
|
@@ -17,5 +17,5 @@ var patchBrowser = () => {
|
|
|
17
17
|
|
|
18
18
|
patchBrowser().then(async (options) => {
|
|
19
19
|
await globalScripts();
|
|
20
|
-
return bootstrapLazy([["fast-
|
|
20
|
+
return bootstrapLazy([["fast-button_4",[[512,"jobs-list-only",{"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"]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[772,"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]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
|
|
21
21
|
});
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import type { JobSummary } from '../../types/jobs-list';
|
|
2
|
+
export declare class JobsItem {
|
|
3
|
+
job: JobSummary;
|
|
4
|
+
index: number;
|
|
5
|
+
applyButtonText: string;
|
|
6
|
+
showBrand: boolean;
|
|
7
|
+
showReference: boolean;
|
|
8
|
+
showEmploymentType: boolean;
|
|
9
|
+
multiLocationText: string;
|
|
10
|
+
remoteLocationText: string;
|
|
11
|
+
enableKilometers: boolean;
|
|
12
|
+
private formatDistance;
|
|
13
|
+
render(): any;
|
|
14
|
+
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { JobSummary } from '../../types/jobs-list';
|
|
2
|
-
export declare class
|
|
2
|
+
export declare class JobsListOnly {
|
|
3
3
|
/**
|
|
4
4
|
* When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
|
|
5
5
|
*/
|
|
@@ -29,7 +29,6 @@ export declare class JobsListOnlyUI {
|
|
|
29
29
|
clearResultSuggestionsLine3: string;
|
|
30
30
|
clearResultSuggestionsLine4: string;
|
|
31
31
|
private getJobsArray;
|
|
32
|
-
private formatDistance;
|
|
33
32
|
private renderJobItem;
|
|
34
33
|
render(): any;
|
|
35
34
|
}
|
|
@@ -70,7 +70,42 @@ export namespace Components {
|
|
|
70
70
|
*/
|
|
71
71
|
"slideClass": string;
|
|
72
72
|
}
|
|
73
|
-
interface
|
|
73
|
+
interface JobsItem {
|
|
74
|
+
/**
|
|
75
|
+
* @default 'Apply Now'
|
|
76
|
+
*/
|
|
77
|
+
"applyButtonText": string;
|
|
78
|
+
/**
|
|
79
|
+
* @default false
|
|
80
|
+
*/
|
|
81
|
+
"enableKilometers": boolean;
|
|
82
|
+
/**
|
|
83
|
+
* @default 0
|
|
84
|
+
*/
|
|
85
|
+
"index": number;
|
|
86
|
+
"job": JobSummary;
|
|
87
|
+
/**
|
|
88
|
+
* @default 'More locations'
|
|
89
|
+
*/
|
|
90
|
+
"multiLocationText": string;
|
|
91
|
+
/**
|
|
92
|
+
* @default 'Remote'
|
|
93
|
+
*/
|
|
94
|
+
"remoteLocationText": string;
|
|
95
|
+
/**
|
|
96
|
+
* @default true
|
|
97
|
+
*/
|
|
98
|
+
"showBrand": boolean;
|
|
99
|
+
/**
|
|
100
|
+
* @default true
|
|
101
|
+
*/
|
|
102
|
+
"showEmploymentType": boolean;
|
|
103
|
+
/**
|
|
104
|
+
* @default false
|
|
105
|
+
*/
|
|
106
|
+
"showReference": boolean;
|
|
107
|
+
}
|
|
108
|
+
interface JobsListOnly {
|
|
74
109
|
/**
|
|
75
110
|
* @default 'Apply Now'
|
|
76
111
|
*/
|
|
@@ -190,16 +225,23 @@ declare global {
|
|
|
190
225
|
prototype: HTMLFastCarouselElement;
|
|
191
226
|
new (): HTMLFastCarouselElement;
|
|
192
227
|
};
|
|
193
|
-
interface
|
|
228
|
+
interface HTMLJobsItemElement extends Components.JobsItem, HTMLStencilElement {
|
|
194
229
|
}
|
|
195
|
-
var
|
|
196
|
-
prototype:
|
|
197
|
-
new ():
|
|
230
|
+
var HTMLJobsItemElement: {
|
|
231
|
+
prototype: HTMLJobsItemElement;
|
|
232
|
+
new (): HTMLJobsItemElement;
|
|
233
|
+
};
|
|
234
|
+
interface HTMLJobsListOnlyElement extends Components.JobsListOnly, HTMLStencilElement {
|
|
235
|
+
}
|
|
236
|
+
var HTMLJobsListOnlyElement: {
|
|
237
|
+
prototype: HTMLJobsListOnlyElement;
|
|
238
|
+
new (): HTMLJobsListOnlyElement;
|
|
198
239
|
};
|
|
199
240
|
interface HTMLElementTagNameMap {
|
|
200
241
|
"fast-button": HTMLFastButtonElement;
|
|
201
242
|
"fast-carousel": HTMLFastCarouselElement;
|
|
202
|
-
"jobs-
|
|
243
|
+
"jobs-item": HTMLJobsItemElement;
|
|
244
|
+
"jobs-list-only": HTMLJobsListOnlyElement;
|
|
203
245
|
}
|
|
204
246
|
}
|
|
205
247
|
declare namespace LocalJSX {
|
|
@@ -251,7 +293,42 @@ declare namespace LocalJSX {
|
|
|
251
293
|
*/
|
|
252
294
|
"slideClass"?: string;
|
|
253
295
|
}
|
|
254
|
-
interface
|
|
296
|
+
interface JobsItem {
|
|
297
|
+
/**
|
|
298
|
+
* @default 'Apply Now'
|
|
299
|
+
*/
|
|
300
|
+
"applyButtonText"?: string;
|
|
301
|
+
/**
|
|
302
|
+
* @default false
|
|
303
|
+
*/
|
|
304
|
+
"enableKilometers"?: boolean;
|
|
305
|
+
/**
|
|
306
|
+
* @default 0
|
|
307
|
+
*/
|
|
308
|
+
"index"?: number;
|
|
309
|
+
"job"?: JobSummary;
|
|
310
|
+
/**
|
|
311
|
+
* @default 'More locations'
|
|
312
|
+
*/
|
|
313
|
+
"multiLocationText"?: string;
|
|
314
|
+
/**
|
|
315
|
+
* @default 'Remote'
|
|
316
|
+
*/
|
|
317
|
+
"remoteLocationText"?: string;
|
|
318
|
+
/**
|
|
319
|
+
* @default true
|
|
320
|
+
*/
|
|
321
|
+
"showBrand"?: boolean;
|
|
322
|
+
/**
|
|
323
|
+
* @default true
|
|
324
|
+
*/
|
|
325
|
+
"showEmploymentType"?: boolean;
|
|
326
|
+
/**
|
|
327
|
+
* @default false
|
|
328
|
+
*/
|
|
329
|
+
"showReference"?: boolean;
|
|
330
|
+
}
|
|
331
|
+
interface JobsListOnly {
|
|
255
332
|
/**
|
|
256
333
|
* @default 'Apply Now'
|
|
257
334
|
*/
|
|
@@ -356,7 +433,17 @@ declare namespace LocalJSX {
|
|
|
356
433
|
"slideClass": string;
|
|
357
434
|
"itemClass": string;
|
|
358
435
|
}
|
|
359
|
-
interface
|
|
436
|
+
interface JobsItemAttributes {
|
|
437
|
+
"index": number;
|
|
438
|
+
"applyButtonText": string;
|
|
439
|
+
"showBrand": boolean;
|
|
440
|
+
"showReference": boolean;
|
|
441
|
+
"showEmploymentType": boolean;
|
|
442
|
+
"multiLocationText": string;
|
|
443
|
+
"remoteLocationText": string;
|
|
444
|
+
"enableKilometers": boolean;
|
|
445
|
+
}
|
|
446
|
+
interface JobsListOnlyAttributes {
|
|
360
447
|
"mockData": boolean;
|
|
361
448
|
"jobs": JobSummary[] | string;
|
|
362
449
|
"loading": boolean;
|
|
@@ -383,7 +470,8 @@ declare namespace LocalJSX {
|
|
|
383
470
|
interface IntrinsicElements {
|
|
384
471
|
"fast-button": Omit<FastButton, keyof FastButtonAttributes> & { [K in keyof FastButton & keyof FastButtonAttributes]?: FastButton[K] } & { [K in keyof FastButton & keyof FastButtonAttributes as `attr:${K}`]?: FastButtonAttributes[K] } & { [K in keyof FastButton & keyof FastButtonAttributes as `prop:${K}`]?: FastButton[K] };
|
|
385
472
|
"fast-carousel": Omit<FastCarousel, keyof FastCarouselAttributes> & { [K in keyof FastCarousel & keyof FastCarouselAttributes]?: FastCarousel[K] } & { [K in keyof FastCarousel & keyof FastCarouselAttributes as `attr:${K}`]?: FastCarouselAttributes[K] } & { [K in keyof FastCarousel & keyof FastCarouselAttributes as `prop:${K}`]?: FastCarousel[K] };
|
|
386
|
-
"jobs-
|
|
473
|
+
"jobs-item": Omit<JobsItem, keyof JobsItemAttributes> & { [K in keyof JobsItem & keyof JobsItemAttributes]?: JobsItem[K] } & { [K in keyof JobsItem & keyof JobsItemAttributes as `attr:${K}`]?: JobsItemAttributes[K] } & { [K in keyof JobsItem & keyof JobsItemAttributes as `prop:${K}`]?: JobsItem[K] };
|
|
474
|
+
"jobs-list-only": Omit<JobsListOnly, keyof JobsListOnlyAttributes> & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes]?: JobsListOnly[K] } & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes as `attr:${K}`]?: JobsListOnlyAttributes[K] } & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes as `prop:${K}`]?: JobsListOnly[K] };
|
|
387
475
|
}
|
|
388
476
|
}
|
|
389
477
|
export { LocalJSX as JSX };
|
|
@@ -392,7 +480,8 @@ declare module "@stencil/core" {
|
|
|
392
480
|
interface IntrinsicElements {
|
|
393
481
|
"fast-button": LocalJSX.IntrinsicElements["fast-button"] & JSXBase.HTMLAttributes<HTMLFastButtonElement>;
|
|
394
482
|
"fast-carousel": LocalJSX.IntrinsicElements["fast-carousel"] & JSXBase.HTMLAttributes<HTMLFastCarouselElement>;
|
|
395
|
-
"jobs-
|
|
483
|
+
"jobs-item": LocalJSX.IntrinsicElements["jobs-item"] & JSXBase.HTMLAttributes<HTMLJobsItemElement>;
|
|
484
|
+
"jobs-list-only": LocalJSX.IntrinsicElements["jobs-list-only"] & JSXBase.HTMLAttributes<HTMLJobsListOnlyElement>;
|
|
396
485
|
}
|
|
397
486
|
}
|
|
398
487
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Minimal job shape for jobs-list-only
|
|
2
|
+
* Minimal job shape for jobs-list-only presentation.
|
|
3
3
|
* Compatible with IJob from career-sites-renderer for React integration.
|
|
4
4
|
*/
|
|
5
5
|
export interface JobLocationSummary {
|
|
@@ -33,7 +33,7 @@ export interface JobSummary {
|
|
|
33
33
|
jobCardExtraFields?: JobCardExtraFieldSummary[];
|
|
34
34
|
[key: string]: unknown;
|
|
35
35
|
}
|
|
36
|
-
export interface
|
|
36
|
+
export interface JobsListOnlyProps {
|
|
37
37
|
jobs?: JobSummary[];
|
|
38
38
|
loading?: boolean;
|
|
39
39
|
totalJob?: number;
|