@phatvu/web-component-poc 1.0.2 → 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-carousel.cjs.entry.js → fast-button_4.cjs.entry.js} +233 -3
- package/dist/cjs/{index-C756SOR-.js → index-B2BTpdbN.js} +373 -114
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/web-component-poc.cjs.js +2 -2
- package/dist/collection/collection-manifest.json +2 -1
- package/dist/collection/components/button/button.js +2 -3
- package/dist/collection/components/fast-carousel/carousel.js +2 -3
- 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/fast-button.js +1 -1
- package/dist/components/fast-carousel.js +1 -1
- package/dist/components/index.js +1 -1
- 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/components/p-UM9TUfe3.js +1 -0
- package/dist/esm/{fast-carousel.entry.js → fast-button_4.entry.js} +231 -4
- package/dist/esm/{index-D7_MJBO8.js → index-Dk5CvWmb.js} +373 -114
- package/dist/esm/loader.js +3 -3
- package/dist/esm/web-component-poc.js +3 -3
- 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-xE9n11HX.js.map → index-pJKMKO-T.js.map} +1 -1
- package/dist/web-component-poc/p-Dk5CvWmb.js +2 -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/hydrate/index.js +102 -552
- package/hydrate/index.mjs +102 -552
- package/package.json +9 -1
- package/readme.md +11 -0
- package/dist/cjs/fast-button_2.cjs.entry.js +0 -211
- package/dist/components/jobs-list-only-ui.js +0 -1
- package/dist/components/p-Cw2MJ5l2.js +0 -1
- package/dist/esm/fast-button_2.entry.js +0 -208
- package/dist/web-component-poc/p-0bc6d45d.entry.js +0 -1
- package/dist/web-component-poc/p-8ab359cc.entry.js +0 -1
- package/dist/web-component-poc/p-D7_MJBO8.js +0 -2
|
@@ -1,6 +1,47 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var index = require('./index-
|
|
3
|
+
var index = require('./index-B2BTpdbN.js');
|
|
4
|
+
|
|
5
|
+
const buttonCss = () => `:host{display:inline-block}.custom-button{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1rem;font-family:inherit;font-size:0.875rem;font-weight:500;line-height:1.25;border:none;border-radius:0.375rem;cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease}.custom-button:focus{outline:2px solid var(--custom-button-focus-ring, #2563eb);outline-offset:2px}.custom-button:focus:not(:focus-visible){outline:none}.custom-button--primary{background-color:var(--custom-button-primary-bg, #2563eb);color:var(--custom-button-primary-color, #fff)}.custom-button--primary:hover:not(.custom-button--disabled){background-color:var(--custom-button-primary-hover-bg, #1d4ed8)}.custom-button--primary:active:not(.custom-button--disabled){background-color:var(--custom-button-primary-active-bg, #1e40af)}.custom-button--secondary{background-color:var(--custom-button-secondary-bg, #e5e7eb);color:var(--custom-button-secondary-color, #1f2937)}.custom-button--secondary:hover:not(.custom-button--disabled){background-color:var(--custom-button-secondary-hover-bg, #d1d5db)}.custom-button--secondary:active:not(.custom-button--disabled){background-color:var(--custom-button-secondary-active-bg, #9ca3af)}.custom-button--text{background-color:transparent;color:var(--custom-button-text-color, #2563eb)}.custom-button--text:hover:not(.custom-button--disabled){background-color:var(--custom-button-text-hover-bg, rgba(37, 99, 235, 0.08))}.custom-button--text:active:not(.custom-button--disabled){background-color:var(--custom-button-text-active-bg, rgba(37, 99, 235, 0.12))}.custom-button--disabled,.custom-button:disabled{opacity:0.6;cursor:not-allowed}`;
|
|
6
|
+
|
|
7
|
+
const CustomButton = class {
|
|
8
|
+
constructor(hostRef) {
|
|
9
|
+
index.registerInstance(this, hostRef);
|
|
10
|
+
this.buttonClick = index.createEvent(this, "buttonClick");
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Visual variant of the button.
|
|
14
|
+
*/
|
|
15
|
+
variant = 'primary';
|
|
16
|
+
/**
|
|
17
|
+
* Native button type (button or submit).
|
|
18
|
+
*/
|
|
19
|
+
type = 'button';
|
|
20
|
+
/**
|
|
21
|
+
* When true, the button is disabled and does not emit events.
|
|
22
|
+
*/
|
|
23
|
+
disabled = false;
|
|
24
|
+
/**
|
|
25
|
+
* Emitted when the button is clicked (not emitted when disabled).
|
|
26
|
+
*/
|
|
27
|
+
buttonClick;
|
|
28
|
+
handleClick = (e) => {
|
|
29
|
+
if (this.disabled) {
|
|
30
|
+
e.preventDefault();
|
|
31
|
+
e.stopPropagation();
|
|
32
|
+
return;
|
|
33
|
+
}
|
|
34
|
+
this.buttonClick.emit(e);
|
|
35
|
+
};
|
|
36
|
+
render() {
|
|
37
|
+
return (index.h("button", { key: '3b74909afe4e305dfd38f0b07657202e3d5bfccd', type: this.type, class: {
|
|
38
|
+
'custom-button': true,
|
|
39
|
+
[`custom-button--${this.variant}`]: true,
|
|
40
|
+
'custom-button--disabled': this.disabled,
|
|
41
|
+
}, disabled: this.disabled, onClick: this.handleClick }, index.h("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
CustomButton.style = buttonCss();
|
|
4
45
|
|
|
5
46
|
function isNumber(subject) {
|
|
6
47
|
return typeof subject === 'number';
|
|
@@ -1895,15 +1936,204 @@ const AppCarousel = class {
|
|
|
1895
1936
|
render() {
|
|
1896
1937
|
const itemsArray = this.getItemsArray();
|
|
1897
1938
|
const useItems = itemsArray !== undefined && itemsArray.length > 0;
|
|
1898
|
-
return (index.h("div", { key: '
|
|
1939
|
+
return (index.h("div", { key: '3a2ea6c339bf0fe656e5a333789df7a37156b5dc', class: `carousel ${this.class || ''}`.trim() }, index.h("div", { key: '0a73b925095ae3188e5e40b024bc250e4c183894', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, index.h("div", { key: '7fc3b5a72e386f7fa21702aeb363e08da1b728cf', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
|
|
1899
1940
|
? itemsArray.map((item, i) => (index.h("div", { key: i, class: `carousel__slide ${this.itemClass || ''}`.trim() }, typeof item === 'object' &&
|
|
1900
1941
|
item !== null &&
|
|
1901
1942
|
'content' in item
|
|
1902
1943
|
? item.content
|
|
1903
1944
|
: String(item))))
|
|
1904
|
-
: null)), !useItems && (index.h("div", { key: '
|
|
1945
|
+
: null)), !useItems && (index.h("div", { key: 'dee2fc91470728c136c9853cd74ae350ad3c5676', style: { display: 'none' }, "aria-hidden": "true" }, index.h("slot", { key: '35dd47c03a1b9b6b73d845252c3d0482590f7da2', ref: (el) => (this.slotRef = el) }))), index.h("div", { key: 'df639ad86ae8533f1dc15eed30afb70d99e36e1a', class: `carousel__controls ${this.controlClass || ''}`.trim() }, index.h("button", { key: 'c17c0ea9bf023b5d2621e558c957d92b13425584', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, index.h("svg", { key: '5125abcae0b08ee72106d511b4c24c2d0f24187b', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { key: '9b7f28be56f451ad14de226d7163a5587a1cd9e6', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), index.h("div", { key: '9939d3496092a3f319efac9132cec8097c83b497', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), index.h("button", { key: 'a0b1228f6df0065885f1d272386283926e78464b', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, index.h("svg", { key: 'e00c92cc0485f41a30e97d5d0466aaee48a64998', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, index.h("path", { key: 'a35c46fdbd1cd333d3e6f76590f45dd837546165', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
|
|
1905
1946
|
}
|
|
1906
1947
|
};
|
|
1907
1948
|
AppCarousel.style = carouselCss();
|
|
1908
1949
|
|
|
1950
|
+
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}`;
|
|
1951
|
+
|
|
1952
|
+
function getLocationLabel(loc) {
|
|
1953
|
+
if (loc.cityStateAbbr)
|
|
1954
|
+
return loc.cityStateAbbr;
|
|
1955
|
+
const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
|
|
1956
|
+
return parts.join(', ') || loc.locationText || '';
|
|
1957
|
+
}
|
|
1958
|
+
function getFirstLocation(job) {
|
|
1959
|
+
const locs = job.locations;
|
|
1960
|
+
if (!locs?.length)
|
|
1961
|
+
return undefined;
|
|
1962
|
+
return locs[0];
|
|
1963
|
+
}
|
|
1964
|
+
const JobsItem = class {
|
|
1965
|
+
constructor(hostRef) {
|
|
1966
|
+
index.registerInstance(this, hostRef);
|
|
1967
|
+
}
|
|
1968
|
+
job;
|
|
1969
|
+
index = 0;
|
|
1970
|
+
applyButtonText = 'Apply Now';
|
|
1971
|
+
showBrand = true;
|
|
1972
|
+
showReference = false;
|
|
1973
|
+
showEmploymentType = true;
|
|
1974
|
+
multiLocationText = 'More locations';
|
|
1975
|
+
remoteLocationText = 'Remote';
|
|
1976
|
+
enableKilometers = false;
|
|
1977
|
+
formatDistance(distance) {
|
|
1978
|
+
const value = this.enableKilometers ? distance * 1.60934 : distance;
|
|
1979
|
+
const unit = this.enableKilometers ? 'Km' : 'Miles';
|
|
1980
|
+
const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
|
|
1981
|
+
return str;
|
|
1982
|
+
}
|
|
1983
|
+
render() {
|
|
1984
|
+
if (!this.job)
|
|
1985
|
+
return null;
|
|
1986
|
+
const firstLoc = getFirstLocation(this.job);
|
|
1987
|
+
const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
|
|
1988
|
+
const distance = firstLoc?.distance ?? 0;
|
|
1989
|
+
const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
|
|
1990
|
+
const applyHref = this.job.applyURL ||
|
|
1991
|
+
(this.job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${this.job.originalURL}` : '#');
|
|
1992
|
+
const applyLabel = `${this.applyButtonText}, ${this.job.title || ''}`;
|
|
1993
|
+
const locs = this.job.locations ?? [];
|
|
1994
|
+
const hasMultipleLocations = locs.length > 1;
|
|
1995
|
+
return (index.h("li", { class: "results-list__item" }, index.h("div", { class: "results-list__item-header" }, index.h("h3", { class: "results-list__item-title" }, index.h("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, this.job.title || ''), this.showReference && (index.h("span", { class: `reference ${this.job.reference ? '' : 'empty'}` }, this.job.reference || '')), this.job.isRemote && (index.h("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (index.h("div", { class: "results-list__item-distance" }, index.h("span", { class: "results-list__item-distance--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), index.h("span", { class: "results-list__item-distance--label" }, distanceLabel)))), index.h("div", { class: "results-list__item-content" }, index.h("div", { class: "results-list__item-info" }, index.h("div", { class: locs.length
|
|
1996
|
+
? 'results-list__item-street'
|
|
1997
|
+
: 'results-list__item-street results-list__item-street--empty' }, index.h("div", { class: "results-list__item-street--label__wrapper" }, index.h("span", { class: "results-list__item-street--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.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" }), index.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" }))), index.h("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (index.h("div", { class: "results-list__item-street--more-locations__wrapper" }, index.h("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), index.h("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (index.h("div", { class: this.job.brandName
|
|
1998
|
+
? 'results-list__item-brand'
|
|
1999
|
+
: 'results-list__item-brand results-list__item-brand--empty' }, index.h("span", { class: "results-list__item-brand--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.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" }))), index.h("span", { class: "results-list__item-brand--label" }, this.job.brandName || '—'))), this.showEmploymentType && (index.h("div", { class: this.job.employmentType?.length
|
|
2000
|
+
? 'results-list__item-employment-type'
|
|
2001
|
+
: 'results-list__item-employment-type results-list__item-employment-type--empty' }, index.h("span", { class: "results-list__item-employment-type--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, index.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) => (index.h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (this.job.jobCardExtraFields ?? []).map((field, i) => (index.h("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
|
|
2002
|
+
? field.classname
|
|
2003
|
+
: `${field.classname}--empty` }, Array.isArray(field.value)
|
|
2004
|
+
? field.value.map((v, j) => (index.h("span", { key: j, class: `${field.classname}--label` }, v)))
|
|
2005
|
+
: (index.h("span", { class: `${field.classname}--label` }, String(field.value))))))), index.h("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, index.h("span", { class: "results-list__item-apply--label" }, this.applyButtonText), index.h("span", { class: "results-list__item-apply--icon" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
|
|
2006
|
+
}
|
|
2007
|
+
};
|
|
2008
|
+
JobsItem.style = jobsItemCss();
|
|
2009
|
+
|
|
2010
|
+
/**
|
|
2011
|
+
* Mock jobs for local development and docs.
|
|
2012
|
+
* Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
|
|
2013
|
+
*/
|
|
2014
|
+
const mockJobsListOnly = [
|
|
2015
|
+
{
|
|
2016
|
+
title: 'Senior Software Engineer',
|
|
2017
|
+
reference: 'REF-001',
|
|
2018
|
+
originalURL: '/jobs/senior-software-engineer',
|
|
2019
|
+
applyURL: 'https://apply.example.com/1',
|
|
2020
|
+
brandName: 'Engineering',
|
|
2021
|
+
isRemote: false,
|
|
2022
|
+
locations: [
|
|
2023
|
+
{
|
|
2024
|
+
city: 'San Francisco',
|
|
2025
|
+
stateAbbr: 'CA',
|
|
2026
|
+
countryAbbr: 'US',
|
|
2027
|
+
distance: 5.2,
|
|
2028
|
+
streetAddress: '123 Market St',
|
|
2029
|
+
cityStateAbbr: 'San Francisco, CA',
|
|
2030
|
+
},
|
|
2031
|
+
],
|
|
2032
|
+
employmentType: ['Full-time', 'Permanent'],
|
|
2033
|
+
},
|
|
2034
|
+
{
|
|
2035
|
+
title: 'Product Manager',
|
|
2036
|
+
reference: '',
|
|
2037
|
+
originalURL: '/jobs/product-manager',
|
|
2038
|
+
brandName: 'Product',
|
|
2039
|
+
isRemote: true,
|
|
2040
|
+
locations: [],
|
|
2041
|
+
employmentType: ['Full-time'],
|
|
2042
|
+
},
|
|
2043
|
+
{
|
|
2044
|
+
title: 'UX Designer',
|
|
2045
|
+
reference: 'REF-003',
|
|
2046
|
+
originalURL: '/jobs/ux-designer',
|
|
2047
|
+
brandName: 'Design',
|
|
2048
|
+
isRemote: false,
|
|
2049
|
+
locations: [
|
|
2050
|
+
{
|
|
2051
|
+
city: 'New York',
|
|
2052
|
+
stateAbbr: 'NY',
|
|
2053
|
+
countryAbbr: 'US',
|
|
2054
|
+
distance: 0,
|
|
2055
|
+
cityStateAbbr: 'New York, NY',
|
|
2056
|
+
},
|
|
2057
|
+
{
|
|
2058
|
+
city: 'Boston',
|
|
2059
|
+
stateAbbr: 'MA',
|
|
2060
|
+
countryAbbr: 'US',
|
|
2061
|
+
cityStateAbbr: 'Boston, MA',
|
|
2062
|
+
},
|
|
2063
|
+
],
|
|
2064
|
+
employmentType: ['Full-time', 'Contract'],
|
|
2065
|
+
},
|
|
2066
|
+
];
|
|
2067
|
+
|
|
2068
|
+
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}`;
|
|
2069
|
+
|
|
2070
|
+
const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
|
|
2071
|
+
const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
|
|
2072
|
+
const JobsListOnly = class {
|
|
2073
|
+
constructor(hostRef) {
|
|
2074
|
+
index.registerInstance(this, hostRef);
|
|
2075
|
+
}
|
|
2076
|
+
/**
|
|
2077
|
+
* When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
|
|
2078
|
+
*/
|
|
2079
|
+
mockData = false;
|
|
2080
|
+
/** 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". */
|
|
2081
|
+
jobs = [];
|
|
2082
|
+
/** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
|
|
2083
|
+
loading = false;
|
|
2084
|
+
/** Total job count (for screen readers / schema). */
|
|
2085
|
+
totalJob = 0;
|
|
2086
|
+
noResultsLine1 = defaultNoResultsLine1;
|
|
2087
|
+
noResultsLine2 = defaultNoResultsLine2;
|
|
2088
|
+
applyButtonText = 'Apply Now';
|
|
2089
|
+
showBrand = true;
|
|
2090
|
+
showReference = false;
|
|
2091
|
+
showEmploymentType = true;
|
|
2092
|
+
streetFormat = '{street}, {city_state_abbr}';
|
|
2093
|
+
multiLocationText = 'More locations';
|
|
2094
|
+
remoteLocationText = 'Remote';
|
|
2095
|
+
enableKilometers = false;
|
|
2096
|
+
/** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
|
|
2097
|
+
rootClass = '';
|
|
2098
|
+
showSuggestions = false;
|
|
2099
|
+
clearResultSuggestionsTitleText = 'Suggestions';
|
|
2100
|
+
clearResultSuggestionsLine1 = 'Try different keywords';
|
|
2101
|
+
clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';
|
|
2102
|
+
clearResultSuggestionsLine3 = 'Try other locations';
|
|
2103
|
+
clearResultSuggestionsLine4 = '';
|
|
2104
|
+
getJobsArray() {
|
|
2105
|
+
if (this.mockData) {
|
|
2106
|
+
return mockJobsListOnly;
|
|
2107
|
+
}
|
|
2108
|
+
const j = this.jobs;
|
|
2109
|
+
if (Array.isArray(j))
|
|
2110
|
+
return j;
|
|
2111
|
+
if (typeof j === 'string') {
|
|
2112
|
+
try {
|
|
2113
|
+
const parsed = JSON.parse(j);
|
|
2114
|
+
return Array.isArray(parsed) ? parsed : [];
|
|
2115
|
+
}
|
|
2116
|
+
catch {
|
|
2117
|
+
return [];
|
|
2118
|
+
}
|
|
2119
|
+
}
|
|
2120
|
+
return [];
|
|
2121
|
+
}
|
|
2122
|
+
renderJobItem(job, index$1) {
|
|
2123
|
+
return (index.h("jobs-item", { job: job, index: index$1, applyButtonText: this.applyButtonText, showBrand: this.showBrand, showReference: this.showReference, showEmploymentType: this.showEmploymentType, multiLocationText: this.multiLocationText, remoteLocationText: this.remoteLocationText, enableKilometers: this.enableKilometers }));
|
|
2124
|
+
}
|
|
2125
|
+
render() {
|
|
2126
|
+
const jobsArray = this.getJobsArray();
|
|
2127
|
+
const loading = this.mockData ? false : this.loading;
|
|
2128
|
+
const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
|
|
2129
|
+
const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
|
|
2130
|
+
const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
|
|
2131
|
+
return (index.h("div", { key: '9e69d40c649b4f16617f522c89bc87d4cbffe1e3', class: `jobs-list-root ${this.rootClass}`.trim() }, index.h("div", { key: '7daf1c09dd1d5553a335f3c81c894a331964ee96', class: "results-container" }, index.h("div", { key: '9ab3db2b834359a64faee61f8c3dc2daca8211d9', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (index.h("div", { key: 'c729ccdf715105b9fbc7af0a1f148c82535772c1', class: "card" }, index.h("ul", { key: 'b0c5b6baccf7b94819cc2ad9ab970981a5294b42', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (index.h("div", { key: '8f1684ddde51474e9c1699f93fb01c56e5406a51', class: "share-jobs__no-results" }, index.h("h2", { key: '2e3bc4b6b7647e3939588102d659e777207e46e9' }, this.noResultsLine1), index.h("h3", { key: 'f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab' }, this.noResultsLine2))), showSuggestionsBlock && (index.h("div", { key: 'ed34907fd90f28571786045f21525895cef6e98a', class: "card primary-color" }, index.h("h4", { key: '33e96147f1b427df874656c1e0647af1d97fea29', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), index.h("ul", { key: '570fd8e5068f1a7c809fad47347fe5f469da8bc6', class: "results-list front" }, index.h("li", { key: 'b5d22dfb448d2888dc010d6e494d1834d3d60034', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), index.h("li", { key: '77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), index.h("li", { key: '0bd9503bf686213ae087f74a7b5f2cc62f9c96b7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (index.h("li", { key: '961b2904347e1c5fc6b355a069790f0f2997917f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
|
|
2132
|
+
}
|
|
2133
|
+
};
|
|
2134
|
+
JobsListOnly.style = jobsListOnlyCss();
|
|
2135
|
+
|
|
2136
|
+
exports.fast_button = CustomButton;
|
|
1909
2137
|
exports.fast_carousel = AppCarousel;
|
|
2138
|
+
exports.jobs_item = JobsItem;
|
|
2139
|
+
exports.jobs_list_only = JobsListOnly;
|