@phatvu/web-component-poc 1.0.5 → 1.0.7

package/hydrate/index.mjs

@@ -130,7 +130,7 @@ function hydrateFactory($stencilWindow, $stencilHydrateOpts, $stencilHydrateResu
 
 
 const NAMESPACE = 'web-component-poc';
-const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", prop: true, propChangeCallback: false, shadowDom: false, slotRelocation: true, updatable: true};
+const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", propChangeCallback: false, shadowDom: false, slotRelocation: true, state: true, updatable: true};
 
 /*
  Stencil Hydrate Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -4505,7 +4505,7 @@ var registerInstance = (lazyInstance, hostRef) => {
   if (!hostRef) return void 0;
   lazyInstance.__stencil__getHostRef = () => hostRef;
   hostRef.$lazyInstance$ = lazyInstance;
-  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.prop)) {
+  if (hostRef.$cmpMeta$.$flags$ & 512 /* hasModernPropertyDecls */ && (BUILD.state)) {
     reWireGetterSetter(lazyInstance, hostRef);
   }
   return hostRef;
@@ -6505,6 +6505,334 @@ class CustomButton {
     }; }
 }
 
+const fastInputCss = () => `.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}`;
+
+class FastInput {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchExecuted = createEvent(this, "searchExecuted");
+        this.inputChanged = createEvent(this, "inputChanged");
+    }
+    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 (hAsync("div", { key: '3a9d31c7b109205600addc326d63979585f10bcd', class: "fast-input" }, hAsync("input", { key: '8f238fe9e002f367d4939616be8c06d938d76045', type: "text", class: "fast-input__field", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeydown, onBlur: this.handleBlur }), hAsync("button", { key: '7b7404f13432750ece669da8ce68be15179921de', class: "fast-input__button", type: "button", onClick: () => this.submit() }, "Search"), this.enableAutocomplete && this.showDropdown && (hAsync("ul", { key: '1438bacadc21c183842a8bdaa3f336bffb152e14', class: "fast-input__dropdown" }, this.autocompleteLoading ? (hAsync("li", { class: "fast-input__dropdown-loading" }, "Loading...")) : (this.suggestions.map(s => (hAsync("li", { class: "fast-input__dropdown-item", onMouseDown: e => { e.preventDefault(); }, onClick: () => this.selectSuggestion(s.title) }, s.title))))))));
+    }
+    static get style() { return fastInputCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "fast-input",
+        "$members$": {
+            "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]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+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$1(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$1(job) {
+    const locs = job.locations;
+    if (!locs?.length)
+        return undefined;
+    return locs[0];
+}
+/**
+ * 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>
+ * ```
+ */
+class JobCard {
+    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$1(job);
+        const locationLabel = firstLoc ? getLocationLabel$1(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 (hAsync("div", { class: `job-card ${this.rootClass}`.trim() }, hAsync("div", { class: "job-card__header" }, hAsync("h3", { class: "job-card__title" }, hAsync("a", { class: "job-card__title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, job.title || ''), this.showReference && (hAsync("span", { class: `job-card__reference ${job.reference ? '' : 'job-card__reference--empty'}` }, job.reference || '')), job.isRemote && (hAsync("span", { class: this.remoteLocationText ? 'job-card__remote' : 'job-card__remote job-card__remote--empty' }, this.remoteLocationText))), distanceLabel && (hAsync("div", { class: "job-card__distance" }, hAsync("span", { class: "job-card__distance--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), hAsync("span", { class: "job-card__distance--label" }, distanceLabel)))), hAsync("div", { class: "job-card__content" }, hAsync("div", { class: "job-card__info" }, hAsync("div", { class: locs.length ? 'job-card__street' : 'job-card__street job-card__street--empty' }, hAsync("div", { class: "job-card__street--label__wrapper" }, hAsync("span", { class: "job-card__street--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), hAsync("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" }))), hAsync("span", { class: "job-card__street--label" }, locationLabel || '—')), hasMultipleLocations && (hAsync("div", { class: "job-card__street--more-locations__wrapper" }, hAsync("span", { class: "job-card__street--amount" }, "+", locs.length - 1), hAsync("span", { class: "job-card__street--more-locations" }, this.multiLocationText)))), this.showBrand && (hAsync("div", { class: job.brandName ? 'job-card__brand' : 'job-card__brand job-card__brand--empty' }, hAsync("span", { class: "job-card__brand--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("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" }))), hAsync("span", { class: "job-card__brand--label" }, job.brandName || '—'))), this.showEmploymentType && (hAsync("div", { class: job.employmentType?.length
+                ? 'job-card__employment-type'
+                : 'job-card__employment-type job-card__employment-type--empty' }, hAsync("span", { class: "job-card__employment-type--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, hAsync("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) => (hAsync("span", { key: type, class: "job-card__employment-type--label" }, type)))) : (hAsync("span", { class: "job-card__employment-type--label" }, "\u2014")))), (job.jobCardExtraFields ?? []).length > 0 &&
+            job.jobCardExtraFields?.map((field, idx) => (hAsync("div", { key: idx, class: !this.isEmpty(field.value) ? `${field.classname}` : `${field.classname}--empty` }, Array.isArray(field.value) ? (field.value.map((item, itemIdx) => (hAsync("span", { key: itemIdx, class: `${field.classname}--label` }, item)))) : (hAsync("span", { class: `${field.classname}--label` }, field.value)))))), hAsync("a", { class: "job-card__apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, hAsync("span", { class: "job-card__apply--label" }, this.applyButtonText), hAsync("span", { class: "job-card__apply--icon" }, hAsync("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, hAsync("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" })))))));
+    }
+    static get style() { return jobCardCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 512,
+        "$tagName$": "job-card",
+        "$members$": {
+            "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]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
 const jobsItemCss = () => `.results-list__item{list-style:none;padding:10px 0;border-bottom:1px solid #ddd;margin:15px 0;display:inline-block;width:100%;position:relative}.results-list__item:last-child{border-bottom:none}.results-list__item-header{margin:10px 0;font-size:18px;font-weight:700;display:flex;flex-direction:column}.results-list__item-title{margin:0}.results-list__item-title--link{text-decoration:none;color:#1f9755}.results-list__item-title--link:hover{text-decoration:underline}.reference{margin-left:8px;font-size:0.9em;color:#666}.reference.empty{display:none}.remote{background:#f3f3f3;color:#808285;border-radius:100px;padding:6px 16px;text-transform:uppercase;font-size:12px;font-weight:700;line-height:24px;margin-left:8px}.remote--empty{display:none}.results-list__item-distance{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:400}.results-list__item-distance--icon{display:inline-flex}.results-list__item-distance--icon svg{width:16px;height:16px}.results-list__item-content{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}.results-list__item-info{flex:1}.results-list__item-street,.results-list__item-brand,.results-list__item-employment-type{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.results-list__item-street--empty,.results-list__item-brand--empty,.results-list__item-employment-type--empty{color:#999}.results-list__item-street--icon,.results-list__item-brand--icon,.results-list__item-employment-type--icon{margin-right:6px;display:inline-flex}.results-list__item-street--icon svg,.results-list__item-brand--icon svg,.results-list__item-employment-type--icon svg{width:16px;height:16px}.results-list__item-street--more-locations__wrapper{margin-left:8px}.results-list__item-street--amount{font-weight:600}.results-list__item-apply{margin:10px 0;padding:10px 20px;display:inline-flex;align-items:center;gap:8px;background-color:#198754;color:#fff;border-radius:3px;text-decoration:none;font-weight:600;flex-shrink:0}.results-list__item-apply:hover{background-color:#1f9755;color:#fff}.results-list__item-apply--icon svg{width:14px;height:14px}`;
 
 function getLocationLabel(loc) {
@@ -6648,6 +6976,7 @@ const defaultNoResultsLine2 = 'Please refine your keywords in the search bar abo
 class JobsListOnly {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.fetchComplete = createEvent(this, "fetchComplete");
     }
     /**
      * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
@@ -6671,16 +7000,84 @@ class JobsListOnly {
     enableKilometers = false;
     /** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
     rootClass = '';
+    /** Template string for count display. Tokens: {count} = jobs on page, {total} = total from API. */
+    showCountText = '';
     showSuggestions = false;
     clearResultSuggestionsTitleText = 'Suggestions';
     clearResultSuggestionsLine1 = 'Try different keywords';
     clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';
     clearResultSuggestionsLine3 = 'Try other locations';
     clearResultSuggestionsLine4 = '';
+    /** When true, component manages its own data fetching */
+    autoFetch = false;
+    /** Jobs search endpoint */
+    apiUrl = '/api/get-jobs';
+    /** Comma-separated URL param names to watch and forward to the API */
+    watchParams = 'keyword';
+    fetchedJobs = [];
+    fetchedTotal = 0;
+    fetchLoading = false;
+    fetchComplete;
+    searchExecutedHandler;
+    popstateHandler;
+    connectedCallback() {
+        if (this.autoFetch) {
+            this.fetchJobs();
+            this.searchExecutedHandler = () => this.fetchJobs();
+            this.popstateHandler = () => this.fetchJobs();
+            document.addEventListener('search-executed', this.searchExecutedHandler);
+            window.addEventListener('popstate', this.popstateHandler);
+        }
+    }
+    disconnectedCallback() {
+        if (this.autoFetch) {
+            document.removeEventListener('search-executed', this.searchExecutedHandler);
+            window.removeEventListener('popstate', this.popstateHandler);
+        }
+    }
+    async fetchJobs() {
+        this.fetchLoading = true;
+        const params = new URLSearchParams(window.location.search);
+        const watchList = this.watchParams.split(',').map(p => p.trim()).filter(Boolean);
+        const query = new URLSearchParams();
+        for (const key of watchList) {
+            const val = params.get(key);
+            if (val !== null)
+                query.set(key, val);
+        }
+        const url = `${this.apiUrl}?${query.toString()}`;
+        try {
+            const res = await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ disable_switch_search_mode: false }),
+            });
+            if (!res.ok)
+                throw new Error('fetch failed');
+            const data = await res.json();
+            this.fetchedJobs = data.jobs;
+            this.fetchedTotal = data.totalJob;
+            this.fetchComplete.emit({ jobs: data.jobs, totalJob: data.totalJob });
+        }
+        catch {
+            // preserve stale data, just stop loading
+        }
+        finally {
+            this.fetchLoading = false;
+        }
+    }
+    renderCountText(count, total) {
+        return this.showCountText
+            .replace('{count}', String(count))
+            .replace('{total}', String(total));
+    }
     getJobsArray() {
         if (this.mockData) {
             return mockJobsListOnly;
         }
+        if (this.autoFetch) {
+            return this.fetchedJobs;
+        }
         const j = this.jobs;
         if (Array.isArray(j))
             return j;
@@ -6700,11 +7097,15 @@ class JobsListOnly {
     }
     render() {
         const jobsArray = this.getJobsArray();
-        const loading = this.mockData ? false : this.loading;
-        const totalJob = this.mockData ? jobsArray.length : (this.totalJob || jobsArray.length);
+        const loading = this.mockData ? false : (this.autoFetch ? this.fetchLoading : this.loading);
+        const totalJob = this.mockData
+            ? jobsArray.length
+            : this.autoFetch
+                ? this.fetchedTotal
+                : (this.totalJob || jobsArray.length);
         const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
         const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
-        return (hAsync("div", { key: '9e69d40c649b4f16617f522c89bc87d4cbffe1e3', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: '7daf1c09dd1d5553a335f3c81c894a331964ee96', class: "results-container" }, hAsync("div", { key: '9ab3db2b834359a64faee61f8c3dc2daca8211d9', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (hAsync("div", { key: 'c729ccdf715105b9fbc7af0a1f148c82535772c1', class: "card" }, hAsync("ul", { key: 'b0c5b6baccf7b94819cc2ad9ab970981a5294b42', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: '8f1684ddde51474e9c1699f93fb01c56e5406a51', class: "share-jobs__no-results" }, hAsync("h2", { key: '2e3bc4b6b7647e3939588102d659e777207e46e9' }, this.noResultsLine1), hAsync("h3", { key: 'f4881f19ad5db8fdd47aa4d31e1e0435f08da1ab' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: 'ed34907fd90f28571786045f21525895cef6e98a', class: "card primary-color" }, hAsync("h4", { key: '33e96147f1b427df874656c1e0647af1d97fea29', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: '570fd8e5068f1a7c809fad47347fe5f469da8bc6', class: "results-list front" }, hAsync("li", { key: 'b5d22dfb448d2888dc010d6e494d1834d3d60034', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: '77c1e8bbe9ab238e4f05fdbaf43551aef4f2a36e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: '0bd9503bf686213ae087f74a7b5f2cc62f9c96b7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: '961b2904347e1c5fc6b355a069790f0f2997917f', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        return (hAsync("div", { key: '1116855473d28d650641b9d962243bfcdcb434ec', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: 'fcef04f1da9ad4e150af9f59921688f5781d9d43', class: "results-container" }, this.autoFetch && this.fetchLoading && (hAsync("div", { key: '75b157c82c89691c7ce73d12ea0144b3b45485c3', class: "jobs-list-only__loading" }, "Loading...")), hAsync("div", { key: 'b09f9879e10ee4a93e32177611912da5f19f3526', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && this.showCountText && (hAsync("p", { key: 'd10f800fb0a33d82531d5f1728bac4ceba2ed577', class: "jobs-list-only__count" }, this.renderCountText(jobsArray.length, totalJob))), totalJob > 0 && (hAsync("div", { key: '18153ed1338bd48f7be4f043b11ce15e3271f27b', class: "card" }, hAsync("ul", { key: '766e128b1fd5adb456530ae39e92ba8eb0b5d6cf', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: 'ed6f3d2bd2bbedabd6e69d508ea1425580e6941f', class: "share-jobs__no-results" }, hAsync("h2", { key: '2302656e33340c69e84cb949afb7256b8f35f440' }, this.noResultsLine1), hAsync("h3", { key: '1c7e6642441a96c04ee26883fdec4f81b0fe6cec' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: 'be7af85f64455918545e88952ca6ff00f0a970c5', class: "card primary-color" }, hAsync("h4", { key: '2f63deb8131190eff882308544b15f767b6f3edc', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: 'cb18daaa9e2c2c442c5b906ed370dcd653b5262d', class: "results-list front" }, hAsync("li", { key: 'ff1d5c6518b75c0daa35b43df7162b0dfecde25e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: '4099fd7bf8dcf114eca28702a498ab0938f5de46', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: 'fb65b54c3c0b14bc58112977eb4c7c56c1246a45', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: '10f745e74cf68a2b1c42e6f49f810a8b59eb27b6', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
     }
     static get style() { return jobsListOnlyCss(); }
     static get cmpMeta() { return {
@@ -6726,12 +7127,136 @@ class JobsListOnly {
             "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"]
+            "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]
+        },
+        "$listeners$": undefined,
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const jobsListReactiveCss = () => `jobs-list-reactive{display:block}jobs-list-reactive.loading{opacity:0.6;pointer-events:none}`;
+
+class JobsListReactive {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.fetchComplete = createEvent(this, "fetchComplete");
+    }
+    get el() { return getElement(this); }
+    /** Jobs search endpoint */
+    apiUrl = '/api/get-jobs';
+    /** Comma-separated URL param names to watch and forward to the API */
+    watchParams = 'keyword,location_name';
+    /** CSS class added to container while fetching */
+    loadingClass = 'loading';
+    isLoading = false;
+    fetchComplete;
+    templateEl = null;
+    searchExecutedHandler;
+    popstateHandler;
+    connectedCallback() {
+        this.templateEl = this.el.querySelector('template');
+        this.searchExecutedHandler = () => this.fetchJobs();
+        this.popstateHandler = () => this.fetchJobs();
+        document.addEventListener('search-executed', this.searchExecutedHandler);
+        window.addEventListener('popstate', this.popstateHandler);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('search-executed', this.searchExecutedHandler);
+        window.removeEventListener('popstate', this.popstateHandler);
+    }
+    buildQueryString() {
+        const urlParams = new URLSearchParams(window.location.search);
+        const watchList = this.watchParams.split(',').map(p => p.trim()).filter(Boolean);
+        const query = new URLSearchParams();
+        for (const key of watchList) {
+            const val = urlParams.get(key);
+            if (val !== null && val !== '') {
+                query.set(key, val);
+            }
+        }
+        return query.toString();
+    }
+    async fetchJobs() {
+        this.isLoading = true;
+        this.el.classList.add(this.loadingClass);
+        const queryString = this.buildQueryString();
+        const url = queryString ? `${this.apiUrl}?${queryString}` : this.apiUrl;
+        try {
+            const res = await fetch(url, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ disable_switch_search_mode: false }),
+            });
+            if (!res.ok)
+                throw new Error('fetch failed');
+            const data = await res.json();
+            this.renderJobs(data.jobs);
+            this.updateCountElements(data.jobs.length, data.totalJob);
+            this.fetchComplete.emit({ jobs: data.jobs, totalJob: data.totalJob });
+        }
+        catch {
+            // Preserve stale data on error
+        }
+        finally {
+            this.isLoading = false;
+            this.el.classList.remove(this.loadingClass);
+        }
+    }
+    renderJobs(jobs) {
+        if (!this.templateEl)
+            return;
+        // Remove all children except the template
+        const children = Array.from(this.el.children);
+        for (const child of children) {
+            if (child !== this.templateEl) {
+                child.remove();
+            }
+        }
+        // Clone template and render each job
+        for (const job of jobs) {
+            const clone = this.templateEl.content.cloneNode(true);
+            const jobCard = clone.querySelector('job-card');
+            if (jobCard) {
+                jobCard.setAttribute('job', JSON.stringify(job));
+            }
+            this.el.appendChild(clone);
+        }
+    }
+    updateCountElements(count, total) {
+        const countEls = document.querySelectorAll('[data-job-count]');
+        const totalEls = document.querySelectorAll('[data-job-total]');
+        countEls.forEach(el => {
+            el.textContent = String(count);
+        });
+        totalEls.forEach(el => {
+            el.textContent = String(total);
+        });
+    }
+    render() {
+        return hAsync("slot", { key: '30a6fe9727eb877b6aafb99072c40811df121ba6' });
+    }
+    static get style() { return jobsListReactiveCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 772,
+        "$tagName$": "jobs-list-reactive",
+        "$members$": {
+            "apiUrl": [1, "api-url"],
+            "watchParams": [1, "watch-params"],
+            "loadingClass": [1, "loading-class"],
+            "isLoading": [32]
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
@@ -6742,8 +7267,11 @@ class JobsListOnly {
 registerComponents([
   AppCarousel,
   CustomButton,
+  FastInput,
+  JobCard,
   JobsItem,
   JobsListOnly,
+  JobsListReactive,
 ]);
 
 exports.hydrateApp = hydrateApp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phatvu/web-component-poc",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -32,6 +32,10 @@
       "require": "./loader/index.cjs",
       "types": "./loader/index.d.ts"
     },
+    "./fast-input": {
+      "import": "./dist/components/fast-input.js",
+      "types": "./dist/components/fast-input.d.ts"
+    },
     "./jobs-list-only": {
       "import": "./dist/components/jobs-list-only.js",
       "types": "./dist/components/jobs-list-only.d.ts"
@@ -39,6 +43,10 @@
     "./jobs-item": {
       "import": "./dist/components/jobs-item.js",
       "types": "./dist/components/jobs-item.d.ts"
+    },
+    "./job-card": {
+      "import": "./dist/components/job-card.js",
+      "types": "./dist/components/job-card.d.ts"
     }
   },
   "repository": {