@phatvu/web-component-poc 1.0.4 → 1.0.6

package/dist/esm/job-card.entry.js

@@ -0,0 +1,136 @@
+import { r as registerInstance, h } from './index-Dk5CvWmb.js';
+
+const jobCardCss = () => `.job-card{display:block;padding:16px;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, border-color 0.2s ease}.job-card:hover{box-shadow:0 4px 8px rgba(0, 0, 0, 0.12);border-color:#d0d0d0}.job-card__header{margin-bottom:12px}.job-card__title{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.job-card__title--link{text-decoration:none;color:#1f9755;transition:color 0.2s ease}.job-card__title--link:hover{text-decoration:underline;color:#1a7a43}.job-card__reference{font-size:0.875em;color:#666;background-color:#f5f5f5;padding:2px 6px;border-radius:3px}.job-card__reference--empty{display:none}.job-card__remote{background:#e8f5e9;color:#2e7d32;border-radius:100px;padding:4px 12px;text-transform:uppercase;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}.job-card__remote--empty{display:none}.job-card__distance{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;font-weight:500;color:#555}.job-card__distance--icon{display:inline-flex;align-items:center}.job-card__distance--icon svg{width:16px;height:16px;color:#1f9755}.job-card__content{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.job-card__info{flex:1;display:flex;flex-direction:column;gap:8px}.job-card__street,.job-card__brand,.job-card__employment-type{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:14px}.job-card__street--empty,.job-card__brand--empty,.job-card__employment-type--empty{color:#999}.job-card__street--icon,.job-card__brand--icon,.job-card__employment-type--icon{display:inline-flex;align-items:center;flex-shrink:0}.job-card__street--icon svg,.job-card__brand--icon svg,.job-card__employment-type--icon svg{width:16px;height:16px;color:#666}.job-card__street--label,.job-card__brand--label,.job-card__employment-type--label{color:#333}.job-card__street--label__wrapper{display:flex;align-items:center;gap:6px}.job-card__street--more-locations__wrapper{display:flex;align-items:center;gap:2px;font-size:12px;margin-left:2px}.job-card__street--amount{font-weight:600;color:#1f9755}.job-card__street--more-locations{color:#999}.job-card__apply{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background-color:#198754;color:#fff;border-radius:4px;text-decoration:none;font-weight:600;font-size:14px;transition:background-color 0.2s ease, transform 0.1s ease;white-space:nowrap;flex-shrink:0}.job-card__apply:hover{background-color:#1a6f47;transform:translateY(-1px)}.job-card__apply:active{transform:translateY(0)}.job-card__apply--icon{display:inline-flex;align-items:center}.job-card__apply--icon svg{width:14px;height:14px}@media (max-width: 768px){.job-card{padding:12px}.job-card__content{flex-direction:column;gap:10px}.job-card__apply{width:100%;justify-content:center}.job-card__title{font-size:16px}}@media (max-width: 480px){.job-card{padding:10px}.job-card__title{font-size:15px}.job-card__distance{font-size:12px}.job-card__street,.job-card__brand,.job-card__employment-type{font-size:13px}}`;
+
+/**
+ * Helper function to get formatted location label from location object
+ */
+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 || '';
+}
+/**
+ * Helper function to get the first location from job locations
+ */
+function getFirstLocation(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+const JobCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /**
+     * The job data object to display. Accepts either a Job object or a JSON string.
+     */
+    job;
+    /**
+     * Index of the job in a list (used for accessibility)
+     */
+    index = 0;
+    /**
+     * Text for the apply button
+     */
+    applyButtonText = 'Apply Now';
+    /**
+     * Whether to show the brand/company name
+     */
+    showBrand = true;
+    /**
+     * Whether to show the reference number
+     */
+    showReference = false;
+    /**
+     * Whether to show employment type
+     */
+    showEmploymentType = true;
+    /**
+     * Text shown for multiple locations
+     */
+    multiLocationText = 'More locations';
+    /**
+     * Text shown for remote jobs
+     */
+    remoteLocationText = 'Remote';
+    /**
+     * Whether to show distances in kilometers instead of miles
+     */
+    enableKilometers = false;
+    /**
+     * Whether to show commute time
+     */
+    showCommuteTime = false;
+    /**
+     * Format string for street address (not used in base web component)
+     */
+    streetFormat = '{street}, {city_state_abbr}';
+    /** Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement). */
+    rootClass = '';
+    /**
+     * Custom extra fields configuration
+     */
+    extraFieldsConfig = [];
+    /**
+     * Format distance with unit
+     */
+    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;
+    }
+    /**
+     * Is Empty utility
+     */
+    isEmpty(value) {
+        if (value === null || value === undefined || value === '') {
+            return true;
+        }
+        if (Array.isArray(value) && value.length === 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Parse job data from prop - handles both object and JSON string
+     */
+    getJobData() {
+        if (!this.job)
+            return null;
+        if (typeof this.job === 'string') {
+            try {
+                return JSON.parse(this.job);
+            }
+            catch {
+                console.warn('job-card: Failed to parse job JSON string');
+                return null;
+            }
+        }
+        return this.job;
+    }
+    render() {
+        const job = this.getJobData();
+        if (!job)
+            return null;
+        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("div", { class: `job-card ${this.rootClass}`.trim() }, h("div", { class: "job-card__header" }, h("h3", { class: "job-card__title" }, h("a", { class: "job-card__title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (h("span", { class: `job-card__reference ${job.reference ? '' : 'job-card__reference--empty'}` }, job.reference || '')), job.isRemote && (h("span", { class: this.remoteLocationText ? 'job-card__remote' : 'job-card__remote job-card__remote--empty' }, this.remoteLocationText))), distanceLabel && (h("div", { class: "job-card__distance" }, h("span", { class: "job-card__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: "job-card__distance--label" }, distanceLabel)))), h("div", { class: "job-card__content" }, h("div", { class: "job-card__info" }, h("div", { class: locs.length ? 'job-card__street' : 'job-card__street job-card__street--empty' }, h("div", { class: "job-card__street--label__wrapper" }, h("span", { class: "job-card__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: "job-card__street--label" }, locationLabel || '—')), hasMultipleLocations && (h("div", { class: "job-card__street--more-locations__wrapper" }, h("span", { class: "job-card__street--amount" }, "+", locs.length - 1), h("span", { class: "job-card__street--more-locations" }, this.multiLocationText)))), this.showBrand && (h("div", { class: job.brandName ? 'job-card__brand' : 'job-card__brand job-card__brand--empty' }, h("span", { class: "job-card__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: "job-card__brand--label" }, job.brandName || '—'))), this.showEmploymentType && (h("div", { class: job.employmentType?.length
+                ? 'job-card__employment-type'
+                : 'job-card__employment-type job-card__employment-type--empty' }, h("span", { class: "job-card__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: "job-card__employment-type--label" }, type)))) : (h("span", { class: "job-card__employment-type--label" }, "\u2014")))), (job.jobCardExtraFields ?? []).length > 0 &&
+            job.jobCardExtraFields?.map((field, idx) => (h("div", { key: idx, class: !this.isEmpty(field.value) ? `${field.classname}` : `${field.classname}--empty` }, Array.isArray(field.value) ? (field.value.map((item, itemIdx) => (h("span", { key: itemIdx, class: `${field.classname}--label` }, item)))) : (h("span", { class: `${field.classname}--label` }, field.value)))))), h("a", { class: "job-card__apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, h("span", { class: "job-card__apply--label" }, this.applyButtonText), h("span", { class: "job-card__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.5 4.5 21 12m0 0-7.5 7.5M21 12H3" })))))));
+    }
+};
+JobCard.style = jobCardCss();
+
+export { JobCard as job_card };

package/dist/esm/loader.js

@@ -5,7 +5,7 @@ import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  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);
+  return bootstrapLazy([["job-card",[[512,"job-card",{"job":[1],"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"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["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);
 };
 
 export { defineCustomElements };

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

@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  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);
+  return bootstrapLazy([["job-card",[[512,"job-card",{"job":[1],"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"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["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);
 });

package/dist/types/components/job-card/job-card.d.ts

@@ -0,0 +1,93 @@
+import type { Job } from '../../types/jobs-list';
+/**
+ * JobCard Component
+ *
+ * A reusable card component for displaying job information based on the React JobItem component.
+ * Features include:
+ * - Job title with apply link
+ * - Location with distance
+ * - Brand/company name
+ * - Employment type
+ * - Reference number (optional)
+ * - Remote indicator (optional)
+ * - Multi-location support
+ * - Custom extra fields
+ *
+ * @example
+ * ```html
+ * <job-card
+ *   .job={jobData}
+ *   applyButtonText="Apply"
+ *   showBrand="true"
+ *   showEmploymentType="true"
+ * ></job-card>
+ * ```
+ */
+export declare class JobCard {
+    /**
+     * The job data object to display. Accepts either a Job object or a JSON string.
+     */
+    job: Job | string;
+    /**
+     * Index of the job in a list (used for accessibility)
+     */
+    index: number;
+    /**
+     * Text for the apply button
+     */
+    applyButtonText: string;
+    /**
+     * Whether to show the brand/company name
+     */
+    showBrand: boolean;
+    /**
+     * Whether to show the reference number
+     */
+    showReference: boolean;
+    /**
+     * Whether to show employment type
+     */
+    showEmploymentType: boolean;
+    /**
+     * Text shown for multiple locations
+     */
+    multiLocationText: string;
+    /**
+     * Text shown for remote jobs
+     */
+    remoteLocationText: string;
+    /**
+     * Whether to show distances in kilometers instead of miles
+     */
+    enableKilometers: boolean;
+    /**
+     * Whether to show commute time
+     */
+    showCommuteTime: boolean;
+    /**
+     * Format string for street address (not used in base web component)
+     */
+    streetFormat: string;
+    /** Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement). */
+    rootClass: string;
+    /**
+     * Custom extra fields configuration
+     */
+    extraFieldsConfig: Array<{
+        name: string;
+        value: string;
+    }>;
+    /**
+     * Format distance with unit
+     */
+    private formatDistance;
+    /**
+     * Is Empty utility
+     */
+    private isEmpty;
+    /**
+     * Parse job data from prop - handles both object and JSON string
+     */
+    private getJobData;
+    render(): any;
+}

package/dist/types/components/jobs-item/jobs-item.d.ts

@@ -1,6 +1,6 @@
-import type { JobSummary } from '../../types/jobs-list';
+import type { Job } from '../../types/jobs-list';
 export declare class JobsItem {
-    job: JobSummary;
+    job: Job;
     index: number;
     applyButtonText: string;
     showBrand: boolean;

package/dist/types/components/jobs-list-only/jobs-list-only.d.ts

@@ -1,11 +1,11 @@
-import type { JobSummary } from '../../types/jobs-list';
+import type { Job } from '../../types/jobs-list';
 export declare class JobsListOnly {
     /**
      * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
      */
     mockData: boolean;
     /** 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". */
-    jobs: JobSummary[] | string;
+    jobs: Job[] | string;
     /** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
     loading: boolean;
     /** Total job count (for screen readers / schema). */

package/dist/types/components.d.ts

@@ -6,9 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ButtonType, ButtonVariant } from "./components/button/button";
-import { JobSummary } from "./types/jobs-list";
+import { Job } from "./types/jobs-list";
 export { ButtonType, ButtonVariant } from "./components/button/button";
-export { JobSummary } from "./types/jobs-list";
+export { Job } from "./types/jobs-list";
 export namespace Components {
     interface FastButton {
         /**
@@ -70,6 +70,93 @@ export namespace Components {
          */
         "slideClass": string;
     }
+    /**
+     * JobCard Component
+     * A reusable card component for displaying job information based on the React JobItem component.
+     * Features include:
+     * - Job title with apply link
+     * - Location with distance
+     * - Brand/company name
+     * - Employment type
+     * - Reference number (optional)
+     * - Remote indicator (optional)
+     * - Multi-location support
+     * - Custom extra fields
+     * @example ```html
+     * <job-card
+     *   .job={jobData}
+     *   applyButtonText="Apply"
+     *   showBrand="true"
+     *   showEmploymentType="true"
+     * ></job-card>
+     * ```
+     */
+    interface JobCard {
+        /**
+          * Text for the apply button
+          * @default 'Apply Now'
+         */
+        "applyButtonText": string;
+        /**
+          * Whether to show distances in kilometers instead of miles
+          * @default false
+         */
+        "enableKilometers": boolean;
+        /**
+          * Custom extra fields configuration
+          * @default []
+         */
+        "extraFieldsConfig": Array<{ name: string; value: string }>;
+        /**
+          * Index of the job in a list (used for accessibility)
+          * @default 0
+         */
+        "index": number;
+        /**
+          * The job data object to display. Accepts either a Job object or a JSON string.
+         */
+        "job": Job | string;
+        /**
+          * Text shown for multiple locations
+          * @default 'More locations'
+         */
+        "multiLocationText": string;
+        /**
+          * Text shown for remote jobs
+          * @default 'Remote'
+         */
+        "remoteLocationText": string;
+        /**
+          * Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement).
+          * @default ''
+         */
+        "rootClass": string;
+        /**
+          * Whether to show the brand/company name
+          * @default true
+         */
+        "showBrand": boolean;
+        /**
+          * Whether to show commute time
+          * @default false
+         */
+        "showCommuteTime": boolean;
+        /**
+          * Whether to show employment type
+          * @default true
+         */
+        "showEmploymentType": boolean;
+        /**
+          * Whether to show the reference number
+          * @default false
+         */
+        "showReference": boolean;
+        /**
+          * Format string for street address (not used in base web component)
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat": string;
+    }
     interface JobsItem {
         /**
           * @default 'Apply Now'
@@ -83,7 +170,7 @@ export namespace Components {
           * @default 0
          */
         "index": number;
-        "job": JobSummary;
+        "job": Job;
         /**
           * @default 'More locations'
          */
@@ -138,7 +225,7 @@ export namespace Components {
           * 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".
           * @default []
          */
-        "jobs": JobSummary[] | string;
+        "jobs": Job[] | string;
         /**
           * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
           * @default false
@@ -225,6 +312,33 @@ declare global {
         prototype: HTMLFastCarouselElement;
         new (): HTMLFastCarouselElement;
     };
+    /**
+     * JobCard Component
+     * A reusable card component for displaying job information based on the React JobItem component.
+     * Features include:
+     * - Job title with apply link
+     * - Location with distance
+     * - Brand/company name
+     * - Employment type
+     * - Reference number (optional)
+     * - Remote indicator (optional)
+     * - Multi-location support
+     * - Custom extra fields
+     * @example ```html
+     * <job-card
+     *   .job={jobData}
+     *   applyButtonText="Apply"
+     *   showBrand="true"
+     *   showEmploymentType="true"
+     * ></job-card>
+     * ```
+     */
+    interface HTMLJobCardElement extends Components.JobCard, HTMLStencilElement {
+    }
+    var HTMLJobCardElement: {
+        prototype: HTMLJobCardElement;
+        new (): HTMLJobCardElement;
+    };
     interface HTMLJobsItemElement extends Components.JobsItem, HTMLStencilElement {
     }
     var HTMLJobsItemElement: {
@@ -240,6 +354,7 @@ declare global {
     interface HTMLElementTagNameMap {
         "fast-button": HTMLFastButtonElement;
         "fast-carousel": HTMLFastCarouselElement;
+        "job-card": HTMLJobCardElement;
         "jobs-item": HTMLJobsItemElement;
         "jobs-list-only": HTMLJobsListOnlyElement;
     }
@@ -293,6 +408,93 @@ declare namespace LocalJSX {
          */
         "slideClass"?: string;
     }
+    /**
+     * JobCard Component
+     * A reusable card component for displaying job information based on the React JobItem component.
+     * Features include:
+     * - Job title with apply link
+     * - Location with distance
+     * - Brand/company name
+     * - Employment type
+     * - Reference number (optional)
+     * - Remote indicator (optional)
+     * - Multi-location support
+     * - Custom extra fields
+     * @example ```html
+     * <job-card
+     *   .job={jobData}
+     *   applyButtonText="Apply"
+     *   showBrand="true"
+     *   showEmploymentType="true"
+     * ></job-card>
+     * ```
+     */
+    interface JobCard {
+        /**
+          * Text for the apply button
+          * @default 'Apply Now'
+         */
+        "applyButtonText"?: string;
+        /**
+          * Whether to show distances in kilometers instead of miles
+          * @default false
+         */
+        "enableKilometers"?: boolean;
+        /**
+          * Custom extra fields configuration
+          * @default []
+         */
+        "extraFieldsConfig"?: Array<{ name: string; value: string }>;
+        /**
+          * Index of the job in a list (used for accessibility)
+          * @default 0
+         */
+        "index"?: number;
+        /**
+          * The job data object to display. Accepts either a Job object or a JSON string.
+         */
+        "job"?: Job | string;
+        /**
+          * Text shown for multiple locations
+          * @default 'More locations'
+         */
+        "multiLocationText"?: string;
+        /**
+          * Text shown for remote jobs
+          * @default 'Remote'
+         */
+        "remoteLocationText"?: string;
+        /**
+          * Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement).
+          * @default ''
+         */
+        "rootClass"?: string;
+        /**
+          * Whether to show the brand/company name
+          * @default true
+         */
+        "showBrand"?: boolean;
+        /**
+          * Whether to show commute time
+          * @default false
+         */
+        "showCommuteTime"?: boolean;
+        /**
+          * Whether to show employment type
+          * @default true
+         */
+        "showEmploymentType"?: boolean;
+        /**
+          * Whether to show the reference number
+          * @default false
+         */
+        "showReference"?: boolean;
+        /**
+          * Format string for street address (not used in base web component)
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat"?: string;
+    }
     interface JobsItem {
         /**
           * @default 'Apply Now'
@@ -306,7 +508,7 @@ declare namespace LocalJSX {
           * @default 0
          */
         "index"?: number;
-        "job"?: JobSummary;
+        "job"?: Job;
         /**
           * @default 'More locations'
          */
@@ -361,7 +563,7 @@ declare namespace LocalJSX {
           * 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".
           * @default []
          */
-        "jobs"?: JobSummary[] | string;
+        "jobs"?: Job[] | string;
         /**
           * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
           * @default false
@@ -433,6 +635,20 @@ declare namespace LocalJSX {
         "slideClass": string;
         "itemClass": string;
     }
+    interface JobCardAttributes {
+        "job": Job | string;
+        "index": number;
+        "applyButtonText": string;
+        "showBrand": boolean;
+        "showReference": boolean;
+        "showEmploymentType": boolean;
+        "multiLocationText": string;
+        "remoteLocationText": string;
+        "enableKilometers": boolean;
+        "showCommuteTime": boolean;
+        "streetFormat": string;
+        "rootClass": string;
+    }
     interface JobsItemAttributes {
         "index": number;
         "applyButtonText": string;
@@ -445,7 +661,7 @@ declare namespace LocalJSX {
     }
     interface JobsListOnlyAttributes {
         "mockData": boolean;
-        "jobs": JobSummary[] | string;
+        "jobs": Job[] | string;
         "loading": boolean;
         "totalJob": number;
         "noResultsLine1": string;
@@ -470,6 +686,7 @@ declare namespace LocalJSX {
     interface IntrinsicElements {
         "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] };
         "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] };
+        "job-card": Omit<JobCard, keyof JobCardAttributes> & { [K in keyof JobCard & keyof JobCardAttributes]?: JobCard[K] } & { [K in keyof JobCard & keyof JobCardAttributes as `attr:${K}`]?: JobCardAttributes[K] } & { [K in keyof JobCard & keyof JobCardAttributes as `prop:${K}`]?: JobCard[K] };
         "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] };
         "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] };
     }
@@ -480,6 +697,28 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "fast-button": LocalJSX.IntrinsicElements["fast-button"] & JSXBase.HTMLAttributes<HTMLFastButtonElement>;
             "fast-carousel": LocalJSX.IntrinsicElements["fast-carousel"] & JSXBase.HTMLAttributes<HTMLFastCarouselElement>;
+            /**
+             * JobCard Component
+             * A reusable card component for displaying job information based on the React JobItem component.
+             * Features include:
+             * - Job title with apply link
+             * - Location with distance
+             * - Brand/company name
+             * - Employment type
+             * - Reference number (optional)
+             * - Remote indicator (optional)
+             * - Multi-location support
+             * - Custom extra fields
+             * @example ```html
+             * <job-card
+             *   .job={jobData}
+             *   applyButtonText="Apply"
+             *   showBrand="true"
+             *   showEmploymentType="true"
+             * ></job-card>
+             * ```
+             */
+            "job-card": LocalJSX.IntrinsicElements["job-card"] & JSXBase.HTMLAttributes<HTMLJobCardElement>;
             "jobs-item": LocalJSX.IntrinsicElements["jobs-item"] & JSXBase.HTMLAttributes<HTMLJobsItemElement>;
             "jobs-list-only": LocalJSX.IntrinsicElements["jobs-list-only"] & JSXBase.HTMLAttributes<HTMLJobsListOnlyElement>;
         }

package/dist/types/mock/jobs-list-only.mock.d.ts

@@ -1,7 +1,7 @@
-import type { JobSummary } from '../types/jobs-list';
+import type { Job } from '../types/jobs-list';
 /**
  * Mock jobs for local development and docs.
  * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
  */
-export declare const mockJobsListOnly: JobSummary[];
+export declare const mockJobsListOnly: Job[];
 export declare function getMockJobsJson(): string;