@phatvu/web-component-poc 1.0.5 → 1.0.7

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

@@ -0,0 +1,138 @@
+'use strict';
+
+var index = require('./index-BEvZs91D.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) {
+        index.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 (index.h("div", { class: `job-card ${this.rootClass}`.trim() }, index.h("div", { class: "job-card__header" }, index.h("h3", { class: "job-card__title" }, index.h("a", { class: "job-card__title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (index.h("span", { class: `job-card__reference ${job.reference ? '' : 'job-card__reference--empty'}` }, job.reference || '')), job.isRemote && (index.h("span", { class: this.remoteLocationText ? 'job-card__remote' : 'job-card__remote job-card__remote--empty' }, this.remoteLocationText))), distanceLabel && (index.h("div", { class: "job-card__distance" }, index.h("span", { class: "job-card__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: "job-card__distance--label" }, distanceLabel)))), index.h("div", { class: "job-card__content" }, index.h("div", { class: "job-card__info" }, index.h("div", { class: locs.length ? 'job-card__street' : 'job-card__street job-card__street--empty' }, index.h("div", { class: "job-card__street--label__wrapper" }, index.h("span", { class: "job-card__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: "job-card__street--label" }, locationLabel || '—')), hasMultipleLocations && (index.h("div", { class: "job-card__street--more-locations__wrapper" }, index.h("span", { class: "job-card__street--amount" }, "+", locs.length - 1), index.h("span", { class: "job-card__street--more-locations" }, this.multiLocationText)))), this.showBrand && (index.h("div", { class: job.brandName ? 'job-card__brand' : 'job-card__brand job-card__brand--empty' }, index.h("span", { class: "job-card__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: "job-card__brand--label" }, job.brandName || '—'))), this.showEmploymentType && (index.h("div", { class: job.employmentType?.length
+                ? 'job-card__employment-type'
+                : 'job-card__employment-type job-card__employment-type--empty' }, index.h("span", { class: "job-card__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" }))), job.employmentType?.length ? (job.employmentType?.map((type) => (index.h("span", { key: type, class: "job-card__employment-type--label" }, type)))) : (index.h("span", { class: "job-card__employment-type--label" }, "\u2014")))), (job.jobCardExtraFields ?? []).length > 0 &&
+            job.jobCardExtraFields?.map((field, idx) => (index.h("div", { key: idx, class: !this.isEmpty(field.value) ? `${field.classname}` : `${field.classname}--empty` }, Array.isArray(field.value) ? (field.value.map((item, itemIdx) => (index.h("span", { key: itemIdx, class: `${field.classname}--label` }, item)))) : (index.h("span", { class: `${field.classname}--label` }, field.value)))))), index.h("a", { class: "job-card__apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, index.h("span", { class: "job-card__apply--label" }, this.applyButtonText), index.h("span", { class: "job-card__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.5 4.5 21 12m0 0-7.5 7.5M21 12H3" })))))));
+    }
+};
+JobCard.style = jobCardCss();
+
+exports.job_card = JobCard;

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-B2BTpdbN.js');
+var index = require('./index-BEvZs91D.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_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);
+  return index.bootstrapLazy([["fast-button.cjs",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["fast-carousel.cjs",[[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]}]]],["job-card.cjs",[[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-input_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"],"showCountText":[1,"show-count-text"],"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"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[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-B2BTpdbN.js');
+var index = require('./index-BEvZs91D.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_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);
+  return index.bootstrapLazy([["fast-button.cjs",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["fast-carousel.cjs",[[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]}]]],["job-card.cjs",[[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-input_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"],"showCountText":[1,"show-count-text"],"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"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[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,8 +2,11 @@
   "entries": [
     "components/button/button.js",
     "components/fast-carousel/carousel.js",
+    "components/fast-input/fast-input.js",
+    "components/job-card/job-card.js",
     "components/jobs-item/jobs-item.js",
-    "components/jobs-list-only/jobs-list-only.js"
+    "components/jobs-list-only/jobs-list-only.js",
+    "components/jobs-list-reactive/jobs-list-reactive.js"
   ],
   "mixins": [],
   "compiler": {

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

@@ -53,7 +53,7 @@ export class CustomButton {
                     "references": {
                         "ButtonVariant": {
                             "location": "local",
-                            "path": "/Users/phat.vu/Documents/Paradox/web-component-poc/src/components/button/button.tsx",
+                            "path": "/Users/phat.vu/Documents/Paradox/ui-library/web-component-poc/src/components/button/button.tsx",
                             "id": "src/components/button/button.tsx::ButtonVariant"
                         }
                     }
@@ -79,7 +79,7 @@ export class CustomButton {
                     "references": {
                         "ButtonType": {
                             "location": "local",
-                            "path": "/Users/phat.vu/Documents/Paradox/web-component-poc/src/components/button/button.tsx",
+                            "path": "/Users/phat.vu/Documents/Paradox/ui-library/web-component-poc/src/components/button/button.tsx",
                             "id": "src/components/button/button.tsx::ButtonType"
                         }
                     }

package/dist/collection/components/fast-input/fast-input.css

@@ -0,0 +1,55 @@
+.fast-input {
+  position: relative;
+  display: inline-flex;
+  gap: 0.5rem;
+}
+
+.fast-input__field {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+.fast-input__button {
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  background: #0070f3;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+}
+
+.fast-input__dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  z-index: 100;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.fast-input__dropdown-item {
+  padding: 0.5rem 0.75rem;
+  cursor: pointer;
+}
+
+.fast-input__dropdown-item:hover {
+  background: #f0f0f0;
+}
+
+.fast-input__dropdown-loading {
+  padding: 0.5rem 0.75rem;
+  color: #999;
+  font-style: italic;
+}

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

@@ -0,0 +1,335 @@
+import { h } from "@stencil/core";
+export class FastInput {
+    placeholder = 'Search...';
+    value = '';
+    paramName = 'keyword';
+    enableAutocomplete = false;
+    autocompleteUrl = '/api/jobs/autocomplete';
+    targetPath;
+    debounceMs = 300;
+    minChars = 3;
+    searchExecuted;
+    inputChanged;
+    inputValue = '';
+    suggestions = [];
+    showDropdown = false;
+    autocompleteLoading = false;
+    debounceTimer;
+    popstateHandler;
+    connectedCallback() {
+        const urlValue = this.getUrlParam();
+        this.inputValue = urlValue !== null ? urlValue : this.value;
+        this.popstateHandler = () => {
+            this.inputValue = this.getUrlParam() ?? '';
+        };
+        window.addEventListener('popstate', this.popstateHandler);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('popstate', this.popstateHandler);
+        clearTimeout(this.debounceTimer);
+    }
+    getUrlParam() {
+        const params = new URLSearchParams(window.location.search);
+        return params.get(this.paramName);
+    }
+    updateUrlParam(value) {
+        const params = new URLSearchParams(window.location.search);
+        if (value) {
+            params.set(this.paramName, value);
+        }
+        else {
+            params.delete(this.paramName);
+        }
+        const qs = params.toString();
+        const newUrl = qs
+            ? `${window.location.pathname}?${qs}`
+            : window.location.pathname;
+        history.pushState({}, '', newUrl);
+    }
+    submit() {
+        this.updateUrlParam(this.inputValue);
+        document.dispatchEvent(new CustomEvent('search-executed', {
+            detail: { keyword: this.inputValue },
+            bubbles: true,
+            composed: true,
+        }));
+        this.searchExecuted.emit({ keyword: this.inputValue });
+        this.showDropdown = false;
+    }
+    handleInput = (e) => {
+        const value = e.target.value;
+        this.inputValue = value;
+        this.inputChanged.emit({ value });
+        if (this.enableAutocomplete) {
+            this.scheduleAutocomplete(value);
+        }
+    };
+    handleKeydown = (e) => {
+        if (e.key === 'Enter') {
+            this.submit();
+        }
+        else if (e.key === 'Escape') {
+            this.showDropdown = false;
+        }
+    };
+    handleBlur = () => {
+        this.showDropdown = false;
+    };
+    scheduleAutocomplete(value) {
+        clearTimeout(this.debounceTimer);
+        if (value.length < this.minChars) {
+            this.showDropdown = false;
+            return;
+        }
+        this.debounceTimer = setTimeout(() => this.fetchSuggestions(value), this.debounceMs);
+    }
+    async fetchSuggestions(keyword) {
+        if (!this.targetPath) {
+            console.warn('[fast-input] target-path is required for autocomplete');
+            return;
+        }
+        this.autocompleteLoading = true;
+        this.showDropdown = true;
+        try {
+            const res = await fetch(this.autocompleteUrl, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ keyword, target_path: this.targetPath }),
+            });
+            if (!res.ok)
+                throw new Error('autocomplete request failed');
+            const data = await res.json();
+            this.suggestions = data;
+        }
+        catch {
+            this.showDropdown = false;
+            this.suggestions = [];
+        }
+        finally {
+            this.autocompleteLoading = false;
+        }
+    }
+    selectSuggestion(title) {
+        this.inputValue = title;
+        this.showDropdown = false;
+        this.submit();
+    }
+    render() {
+        return (h("div", { key: '3a9d31c7b109205600addc326d63979585f10bcd', class: "fast-input" }, h("input", { key: '8f238fe9e002f367d4939616be8c06d938d76045', type: "text", class: "fast-input__field", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeydown, onBlur: this.handleBlur }), h("button", { key: '7b7404f13432750ece669da8ce68be15179921de', class: "fast-input__button", type: "button", onClick: () => this.submit() }, "Search"), this.enableAutocomplete && this.showDropdown && (h("ul", { key: '1438bacadc21c183842a8bdaa3f336bffb152e14', class: "fast-input__dropdown" }, this.autocompleteLoading ? (h("li", { class: "fast-input__dropdown-loading" }, "Loading...")) : (this.suggestions.map(s => (h("li", { class: "fast-input__dropdown-item", onMouseDown: e => { e.preventDefault(); }, onClick: () => this.selectSuggestion(s.title) }, s.title))))))));
+    }
+    static get is() { return "fast-input"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["fast-input.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["fast-input.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "placeholder",
+                "defaultValue": "'Search...'"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "''"
+            },
+            "paramName": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "param-name",
+                "defaultValue": "'keyword'"
+            },
+            "enableAutocomplete": {
+                "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-autocomplete",
+                "defaultValue": "false"
+            },
+            "autocompleteUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "autocomplete-url",
+                "defaultValue": "'/api/jobs/autocomplete'"
+            },
+            "targetPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | undefined",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target-path"
+            },
+            "debounceMs": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "debounce-ms",
+                "defaultValue": "300"
+            },
+            "minChars": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "min-chars",
+                "defaultValue": "3"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "inputValue": {},
+            "suggestions": {},
+            "showDropdown": {},
+            "autocompleteLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "searchExecuted",
+                "name": "searchExecuted",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ keyword: string }",
+                    "resolved": "{ keyword: string; }",
+                    "references": {}
+                }
+            }, {
+                "method": "inputChanged",
+                "name": "inputChanged",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ value: string }",
+                    "resolved": "{ value: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}