@phatvu/web-component-poc 1.0.2 → 1.0.4

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-C756SOR-.js');
+var index = require('./index-B2BTpdbN.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["fast-button_2.cjs",[[769,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[512,"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"]}]]],["fast-carousel.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["fast-button_4.cjs",[[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);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/web-component-poc.cjs.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-C756SOR-.js');
+var index = require('./index-B2BTpdbN.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["fast-button_2.cjs",[[769,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[512,"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"]}]]],["fast-carousel.cjs",[[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]}]]]], options);
+  return index.bootstrapLazy([["fast-button_4.cjs",[[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);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -2,7 +2,8 @@
   "entries": [
     "components/button/button.js",
     "components/fast-carousel/carousel.js",
-    "components/jobs-list-only-ui/jobs-list-only-ui.js"
+    "components/jobs-item/jobs-item.js",
+    "components/jobs-list-only/jobs-list-only.js"
   ],
   "mixins": [],
   "compiler": {

package/dist/collection/components/button/button.js

@@ -25,14 +25,13 @@ export class CustomButton {
         this.buttonClick.emit(e);
     };
     render() {
-        return (h("button", { key: 'b373f44e11e651d0371ce3cade98b4650ccdd727', type: this.type, class: {
+        return (h("button", { key: '3b74909afe4e305dfd38f0b07657202e3d5bfccd', type: this.type, class: {
                 'custom-button': true,
                 [`custom-button--${this.variant}`]: true,
                 'custom-button--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '2a046bc70af051c04f4549def87dac7044b41e04' })));
+            }, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
     }
     static get is() { return "fast-button"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["button.css"]

package/dist/collection/components/fast-carousel/carousel.js

@@ -220,16 +220,15 @@ export class AppCarousel {
     render() {
         const itemsArray = this.getItemsArray();
         const useItems = itemsArray !== undefined && itemsArray.length > 0;
-        return (h("div", { key: '313c58e9c1ea3b9c0d0fd4b9d6354336682d9353', class: `carousel ${this.class || ''}`.trim() }, h("div", { key: '14ad75526a24ed38df053fa221e2fafef6d532ed', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, h("div", { key: '1d3a771598c382592b789289494f2439fea56918', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
+        return (h("div", { key: '3a2ea6c339bf0fe656e5a333789df7a37156b5dc', class: `carousel ${this.class || ''}`.trim() }, h("div", { key: '0a73b925095ae3188e5e40b024bc250e4c183894', class: `carousel__viewport ${this.slideClass || ''}`.trim(), ref: (el) => (this.viewportRef = el) }, h("div", { key: '7fc3b5a72e386f7fa21702aeb363e08da1b728cf', class: "carousel__container", ref: (el) => (this.containerRef = el) }, useItems && itemsArray
             ? itemsArray.map((item, i) => (h("div", { key: i, class: `carousel__slide ${this.itemClass || ''}`.trim() }, typeof item === 'object' &&
                 item !== null &&
                 'content' in item
                 ? item.content
                 : String(item))))
-            : null)), !useItems && (h("div", { key: 'cdecd3275ac3c5ffe7a0f46153d3e59ad0d4ba9d', style: { display: 'none' }, "aria-hidden": "true" }, h("slot", { key: '450dd5b90f20166a4d6ef4a0d46d208ad47bbf4b', ref: (el) => (this.slotRef = el) }))), h("div", { key: 'ad4eab3f45204170308d8021799d227eaff36d71', class: `carousel__controls ${this.controlClass || ''}`.trim() }, h("button", { key: '1a4ef7209ea768a55892f4d928da3f6100faab4b', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, h("svg", { key: '7d579cb030149947791db565bc1520ef2707c360', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: 'fdca1a876d4967c39286bddba6122351fbf0d925', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), h("div", { key: '4d9a30f1988f2ce04f271967f1dd39c5287273f2', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), h("button", { key: 'c8bc7787821f3277c6d038e3ff1240b3ce936825', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, h("svg", { key: 'e6e4eff954b1b08711cc843de558e00a8257e9f8', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: '37b394093f327bdc46f8da1dcf78ec609a585a0a', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
+            : null)), !useItems && (h("div", { key: 'dee2fc91470728c136c9853cd74ae350ad3c5676', style: { display: 'none' }, "aria-hidden": "true" }, h("slot", { key: '35dd47c03a1b9b6b73d845252c3d0482590f7da2', ref: (el) => (this.slotRef = el) }))), h("div", { key: 'df639ad86ae8533f1dc15eed30afb70d99e36e1a', class: `carousel__controls ${this.controlClass || ''}`.trim() }, h("button", { key: 'c17c0ea9bf023b5d2621e558c957d92b13425584', type: "button", "aria-label": "Previous", class: "carousel__prev", ref: (el) => (this.prevBtnRef = el) }, h("svg", { key: '5125abcae0b08ee72106d511b4c24c2d0f24187b', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: '9b7f28be56f451ad14de226d7163a5587a1cd9e6', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15.75 19.5L8.25 12l7.5-7.5" }))), h("div", { key: '9939d3496092a3f319efac9132cec8097c83b497', class: "carousel__dots", ref: (el) => (this.dotsRef = el) }), h("button", { key: 'a0b1228f6df0065885f1d272386283926e78464b', type: "button", "aria-label": "Next", class: "carousel__next", ref: (el) => (this.nextBtnRef = el) }, h("svg", { key: 'e00c92cc0485f41a30e97d5d0466aaee48a64998', class: "carousel__icon", "stroke-width": "1.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", "aria-hidden": "true" }, h("path", { key: 'a35c46fdbd1cd333d3e6f76590f45dd837546165', "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8.25 4.5l7.5 7.5-7.5 7.5" }))))));
     }
     static get is() { return "fast-carousel"; }
-    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["carousel.css"]

package/dist/collection/components/{jobs-list-only-ui/jobs-list-only-ui.css → jobs-item/jobs-item.css}

@@ -1,50 +1,4 @@
-/* Jobs list only - presentation styles (standalone / mock) */
-: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;
-}
+/* Job item card styles (extracted from jobs-list-only) */
 
 .results-list__item {
   list-style: none;
@@ -198,31 +152,3 @@
   width: 14px;
   height: 14px;
 }
-
-/* No results & suggestions */
-.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;
-}

package/dist/collection/components/jobs-item/jobs-item.js

@@ -0,0 +1,253 @@
+import { h } from "@stencil/core";
+function getLocationLabel(loc) {
+    if (loc.cityStateAbbr)
+        return loc.cityStateAbbr;
+    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
+    return parts.join(', ') || loc.locationText || '';
+}
+function getFirstLocation(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+export class JobsItem {
+    job;
+    index = 0;
+    applyButtonText = 'Apply Now';
+    showBrand = true;
+    showReference = false;
+    showEmploymentType = true;
+    multiLocationText = 'More locations';
+    remoteLocationText = 'Remote';
+    enableKilometers = false;
+    formatDistance(distance) {
+        const value = this.enableKilometers ? distance * 1.60934 : distance;
+        const unit = this.enableKilometers ? 'Km' : 'Miles';
+        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
+        return str;
+    }
+    render() {
+        if (!this.job)
+            return null;
+        const firstLoc = getFirstLocation(this.job);
+        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
+        const distance = firstLoc?.distance ?? 0;
+        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
+        const applyHref = this.job.applyURL ||
+            (this.job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${this.job.originalURL}` : '#');
+        const applyLabel = `${this.applyButtonText}, ${this.job.title || ''}`;
+        const locs = this.job.locations ?? [];
+        const hasMultipleLocations = locs.length > 1;
+        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
+                ? 'results-list__item-street'
+                : '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
+                ? 'results-list__item-brand'
+                : '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
+                ? 'results-list__item-employment-type'
+                : '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)
+                ? field.classname
+                : `${field.classname}--empty` }, Array.isArray(field.value)
+            ? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
+            : (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" })))))));
+    }
+    static get is() { return "jobs-item"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jobs-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jobs-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "job": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "JobSummary",
+                    "resolved": "JobSummary",
+                    "references": {
+                        "JobSummary": {
+                            "location": "import",
+                            "path": "../../types/jobs-list",
+                            "id": "src/types/jobs-list.ts::JobSummary",
+                            "referenceLocation": "JobSummary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false
+            },
+            "index": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "index",
+                "defaultValue": "0"
+            },
+            "applyButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-button-text",
+                "defaultValue": "'Apply Now'"
+            },
+            "showBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-brand",
+                "defaultValue": "true"
+            },
+            "showReference": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-reference",
+                "defaultValue": "false"
+            },
+            "showEmploymentType": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-employment-type",
+                "defaultValue": "true"
+            },
+            "multiLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-location-text",
+                "defaultValue": "'More locations'"
+            },
+            "remoteLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remote-location-text",
+                "defaultValue": "'Remote'"
+            },
+            "enableKilometers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-kilometers",
+                "defaultValue": "false"
+            }
+        };
+    }
+}

package/dist/collection/components/jobs-list-only/jobs-list-only.css

@@ -0,0 +1,75 @@
+/* Jobs list only - presentation styles (standalone / mock) */
+: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;
+}
+
+/* No results & suggestions */
+.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;
+}

package/dist/collection/components/{jobs-list-only-ui/jobs-list-only-ui.js → jobs-list-only/jobs-list-only.js}

@@ -2,19 +2,7 @@ import { h } from "@stencil/core";
 import { mockJobsListOnly } from "../../mock/jobs-list-only.mock";
 const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
 const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
-function getLocationLabel(loc) {
-    if (loc.cityStateAbbr)
-        return loc.cityStateAbbr;
-    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
-    return parts.join(', ') || loc.locationText || '';
-}
-function getFirstLocation(job) {
-    const locs = job.locations;
-    if (!locs?.length)
-        return undefined;
-    return locs[0];
-}
-export class JobsListOnlyUI {
+export class JobsListOnly {
     /**
      * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
      */
@@ -61,34 +49,8 @@ export class JobsListOnlyUI {
         }
         return [];
     }
-    formatDistance(distance) {
-        const value = this.enableKilometers ? distance * 1.60934 : distance;
-        const unit = this.enableKilometers ? 'Km' : 'Miles';
-        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
-        return str;
-    }
-    renderJobItem(job, _index) {
-        const firstLoc = getFirstLocation(job);
-        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
-        const distance = firstLoc?.distance ?? 0;
-        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
-        const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
-        const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
-        const locs = job.locations ?? [];
-        const hasMultipleLocations = locs.length > 1;
-        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
-                ? 'results-list__item-street'
-                : '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
-                ? 'results-list__item-brand'
-                : '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
-                ? 'results-list__item-employment-type'
-                : '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
-            ? job.employmentType
-            : ['—']).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)
-                ? field.classname
-                : `${field.classname}--empty` }, Array.isArray(field.value)
-            ? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
-            : (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" })))))));
+    renderJobItem(job, index) {
+        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 }));
     }
     render() {
         const jobsArray = this.getJobsArray();
@@ -96,17 +58,17 @@ export class JobsListOnlyUI {
         const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
         const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
         const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
-        return (h("div", { key: 'c2e9c9146a24f0869cbd75588b2718c94f62bbbc', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: 'b2f3dffe7e17797b378bd648f54e46bb31e2d374', class: "results-container" }, h("div", { key: '4733870b035ec307b6e691f1d62ed8568e93fd1f', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: 'a9438f079041e0121fafdcb42089f27482475491', class: "card" }, h("ul", { key: '3bd7dcc64f46aec24945a25df7345766606a51bd', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: '1996476568c745e0ada31b47bb1a1be2efaf6917', class: "share-jobs__no-results" }, h("h2", { key: '8d2a79881428d89d783b05f26d06abbef94f5c2e' }, this.noResultsLine1), h("h3", { key: '855704ea47b06a701c0e59a8bb43fb405ad3bb96' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: '74da6e8243423dc9770f4dc67f46f5627c352349', class: "card primary-color" }, h("h4", { key: 'd3fb2ef03a656331f97afe3692b05bbe064ed124', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: '63914647653930e6c686a38d779af20e7e5c17d5', class: "results-list front" }, h("li", { key: '82063c023701d0c42ca2787f382d42a80f569b6a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '7645d7a7435f76854b8eeb0d693a883fc341764e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: '060675d017137e8b23342c92efadc769e2bae1c2', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '0f6ef00a4f6267dc9ad2441e16f02c82b0994d03', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        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))))))));
     }
-    static get is() { return "jobs-list-only-ui"; }
+    static get is() { return "jobs-list-only"; }
     static get originalStyleUrls() {
         return {
-            "$": ["jobs-list-only-ui.css"]
+            "$": ["jobs-list-only.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["jobs-list-only-ui.css"]
+            "$": ["jobs-list-only.css"]
         };
     }
     static get properties() {

package/dist/components/fast-button.js

@@ -1 +1 @@
-import{t,p as o,H as s,c as n,h as e}from"./p-Cw2MJ5l2.js";const c=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClick=n(this,"buttonClick")}variant="primary";type="button";disabled=!1;buttonClick;handleClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.buttonClick.emit(t)};render(){return e("button",{key:"b373f44e11e651d0371ce3cade98b4650ccdd727",type:this.type,class:{"custom-button":!0,["custom-button--"+this.variant]:!0,"custom-button--disabled":this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"2a046bc70af051c04f4549def87dac7044b41e04"}))}static get style(){return":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}"}},[769,"fast-button",{variant:[1],type:[1],disabled:[4]}]);function u(){"undefined"!=typeof customElements&&["fast-button"].forEach((o=>{"fast-button"===o&&(customElements.get(t(o))||customElements.define(t(o),c))}))}u();const r=c,a=u;export{r as FastButton,a as defineCustomElement}
+import{t,p as o,H as e,c as n,h as s}from"./p-UM9TUfe3.js";const u=o(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.buttonClick=n(this,"buttonClick")}variant="primary";type="button";disabled=!1;buttonClick;handleClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.buttonClick.emit(t)};render(){return s("button",{key:"3b74909afe4e305dfd38f0b07657202e3d5bfccd",type:this.type,class:{"custom-button":!0,["custom-button--"+this.variant]:!0,"custom-button--disabled":this.disabled},disabled:this.disabled,onClick:this.handleClick},s("slot",{key:"49845d350e4665c5c66e30bd9262f788eaaa1e20"}))}static get style(){return":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}"}},[772,"fast-button",{variant:[1],type:[1],disabled:[4]}]);function c(){"undefined"!=typeof customElements&&["fast-button"].forEach((o=>{"fast-button"===o&&(customElements.get(t(o))||customElements.define(t(o),u))}))}c();const r=u,a=c;export{r as FastButton,a as defineCustomElement}