@phatvu/web-component-poc 1.0.6 → 1.0.8

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
@@ -2097,6 +2097,13 @@ var dispatchHooks = (hostRef, isInitialLoad) => {
         hostRef.$deferredConnectedCallback$ = false;
         safeCall(instance, "connectedCallback", void 0, elm);
       }
+      {
+        hostRef.$flags$ |= 256 /* isListenReady */;
+        if (hostRef.$queuedListeners$) {
+          hostRef.$queuedListeners$.map(([methodName, event]) => safeCall(instance, methodName, event, elm));
+          hostRef.$queuedListeners$ = void 0;
+        }
+      }
       if (hostRef.$fetchedCbList$.length) {
         hostRef.$fetchedCbList$.forEach((cb) => cb(elm));
       }
@@ -2476,6 +2483,7 @@ var connectedCallback = (elm) => {
         initializeComponent(elm, hostRef, cmpMeta);
       }
     } else {
+      addHostEventListeners(elm, hostRef, cmpMeta.$listeners$);
       if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
         fireConnectedCallback(hostRef.$lazyInstance$, elm);
       } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -2495,6 +2503,32 @@ var setContentReference = (elm) => {
   contentRefElm["s-cn"] = true;
   insertBefore(elm, contentRefElm, elm.firstChild);
 };
+var addHostEventListeners = (elm, hostRef, listeners, attachParentListeners) => {
+  if (listeners && win.document) {
+    listeners.map(([flags, name, method]) => {
+      const target = elm;
+      const handler = hostListenerProxy(hostRef, method);
+      const opts = hostListenerOpts(flags);
+      plt.ael(target, name, handler, opts);
+      (hostRef.$rmListeners$ = hostRef.$rmListeners$ || []).push(() => plt.rel(target, name, handler, opts));
+    });
+  }
+};
+var hostListenerProxy = (hostRef, methodName) => (ev) => {
+  var _a;
+  try {
+    {
+      if (hostRef.$flags$ & 256 /* isListenReady */) {
+        (_a = hostRef.$lazyInstance$) == null ? void 0 : _a[methodName](ev);
+      } else {
+        (hostRef.$queuedListeners$ = hostRef.$queuedListeners$ || []).push([methodName, ev]);
+      }
+    }
+  } catch (e) {
+    consoleError(e, hostRef.$hostElement$);
+  }
+};
+var hostListenerOpts = (flags) => (flags & 2 /* Capture */) !== 0;
 function transformTag(tag) {
   return tag;
 }
@@ -4275,6 +4309,7 @@ async function hydrateComponent(win2, results, tagName, elm, waitingElements) {
       if (!hostRef) {
         return;
       }
+      addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
       try {
         connectedCallback(elm);
         await elm.componentOnReady();
@@ -4505,7 +4540,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;
@@ -6452,28 +6487,16 @@ class AppCarousel {
     }; }
 }
 
-const buttonCss = () => `:host{display:inline-block}.custom-button{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1rem;font-family:inherit;font-size:0.875rem;font-weight:500;line-height:1.25;border:none;border-radius:0.375rem;cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease}.custom-button:focus{outline:2px solid var(--custom-button-focus-ring, #2563eb);outline-offset:2px}.custom-button:focus:not(:focus-visible){outline:none}.custom-button--primary{background-color:var(--custom-button-primary-bg, #2563eb);color:var(--custom-button-primary-color, #fff)}.custom-button--primary:hover:not(.custom-button--disabled){background-color:var(--custom-button-primary-hover-bg, #1d4ed8)}.custom-button--primary:active:not(.custom-button--disabled){background-color:var(--custom-button-primary-active-bg, #1e40af)}.custom-button--secondary{background-color:var(--custom-button-secondary-bg, #e5e7eb);color:var(--custom-button-secondary-color, #1f2937)}.custom-button--secondary:hover:not(.custom-button--disabled){background-color:var(--custom-button-secondary-hover-bg, #d1d5db)}.custom-button--secondary:active:not(.custom-button--disabled){background-color:var(--custom-button-secondary-active-bg, #9ca3af)}.custom-button--text{background-color:transparent;color:var(--custom-button-text-color, #2563eb)}.custom-button--text:hover:not(.custom-button--disabled){background-color:var(--custom-button-text-hover-bg, rgba(37, 99, 235, 0.08))}.custom-button--text:active:not(.custom-button--disabled){background-color:var(--custom-button-text-active-bg, rgba(37, 99, 235, 0.12))}.custom-button--disabled,.custom-button:disabled{opacity:0.6;cursor:not-allowed}`;
+const buttonCss = () => `:host{display:inline-block}.fast-button{display:inline-flex;align-items:center;justify-content:center;padding:0.5rem 1rem;font-family:inherit;font-size:0.875rem;font-weight:500;line-height:1.25;border:none;border-radius:0.375rem;cursor:pointer;transition:background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease}.fast-button:focus{outline:2px solid var(--custom-button-focus-ring, #2563eb);outline-offset:2px}.fast-button:focus:not(:focus-visible){outline:none}.fast-button--primary{background-color:var(--custom-button-primary-bg, #2563eb);color:var(--custom-button-primary-color, #fff)}.fast-button--primary:hover:not(.fast-button--disabled){background-color:var(--custom-button-primary-hover-bg, #1d4ed8)}.fast-button--primary:active:not(.fast-button--disabled){background-color:var(--custom-button-primary-active-bg, #1e40af)}.fast-button--secondary{background-color:var(--custom-button-secondary-bg, #e5e7eb);color:var(--custom-button-secondary-color, #1f2937)}.fast-button--secondary:hover:not(.fast-button--disabled){background-color:var(--custom-button-secondary-hover-bg, #d1d5db)}.fast-button--secondary:active:not(.fast-button--disabled){background-color:var(--custom-button-secondary-active-bg, #9ca3af)}.fast-button--text{background-color:transparent;color:var(--custom-button-text-color, #2563eb)}.fast-button--text:hover:not(.fast-button--disabled){background-color:var(--custom-button-text-hover-bg, rgba(37, 99, 235, 0.08))}.fast-button--text:active:not(.fast-button--disabled){background-color:var(--custom-button-text-active-bg, rgba(37, 99, 235, 0.12))}.fast-button--disabled,.fast-button:disabled{opacity:0.6;cursor:not-allowed}`;
 
-class CustomButton {
+class FastButton {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.buttonClick = createEvent(this, "buttonClick");
     }
-    /**
-     * Visual variant of the button.
-     */
     variant = 'primary';
-    /**
-     * Native button type (button or submit).
-     */
-    type = 'button';
-    /**
-     * When true, the button is disabled and does not emit events.
-     */
+    type = 'submit';
     disabled = false;
-    /**
-     * Emitted when the button is clicked (not emitted when disabled).
-     */
     buttonClick;
     handleClick = (e) => {
         if (this.disabled) {
@@ -6484,11 +6507,11 @@ class CustomButton {
         this.buttonClick.emit(e);
     };
     render() {
-        return (hAsync("button", { key: '3b74909afe4e305dfd38f0b07657202e3d5bfccd', type: this.type, class: {
-                'custom-button': true,
-                [`custom-button--${this.variant}`]: true,
-                'custom-button--disabled': this.disabled,
-            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
+        return (hAsync("button", { key: 'b8e811748ade97c941bdf197a311d69d2801a120', type: this.type, class: {
+                'fast-button': true,
+                [`fast-button--${this.variant}`]: true,
+                'fast-button--disabled': this.disabled,
+            }, disabled: this.disabled, onClick: this.handleClick }, hAsync("slot", { key: 'a6b987059cc33799abd580ea11f0fe644a3973bf' })));
     }
     static get style() { return buttonCss(); }
     static get cmpMeta() { return {
@@ -6505,6 +6528,213 @@ class CustomButton {
     }; }
 }
 
+const fastFormCss = () => `.fast-form{display:flex;gap:0.5rem;align-items:flex-start}`;
+
+class FastForm {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.searchExecuted = createEvent(this, "searchExecuted");
+    }
+    get el() { return getElement(this); }
+    searchExecuted;
+    handleInputSubmit() {
+        this.submit();
+    }
+    async submit() {
+        const inputs = this.el.querySelectorAll('fast-input');
+        const params = {};
+        for (const input of Array.from(inputs)) {
+            const paramName = await input.getParamName();
+            const value = await input.getValue();
+            if (value) {
+                params[paramName] = value;
+            }
+        }
+        this.updateUrlParams(params);
+        document.dispatchEvent(new CustomEvent('search-executed', {
+            detail: params,
+            bubbles: true,
+            composed: true,
+        }));
+        this.searchExecuted.emit(params);
+    }
+    updateUrlParams(params) {
+        const urlParams = new URLSearchParams(window.location.search);
+        // Get all param names from inputs and clear them first
+        const inputs = this.el.querySelectorAll('fast-input');
+        for (const input of Array.from(inputs)) {
+            const paramName = input.paramName;
+            if (paramName) {
+                urlParams.delete(paramName);
+            }
+        }
+        // Set new values
+        for (const [key, value] of Object.entries(params)) {
+            if (value) {
+                urlParams.set(key, value);
+            }
+        }
+        const qs = urlParams.toString();
+        const newUrl = qs
+            ? `${window.location.pathname}?${qs}`
+            : window.location.pathname;
+        history.pushState({}, '', newUrl);
+    }
+    handleFormSubmit = (e) => {
+        e.preventDefault();
+        this.submit();
+    };
+    render() {
+        return (hAsync("form", { key: '50436bb904e8b175ae0c23158812a4e4756544c0', class: "fast-form", onSubmit: this.handleFormSubmit }, hAsync("slot", { key: '2f76c4c42c15ebf389d6e0fdbcb9a2098bf1156a' })));
+    }
+    static get style() { return fastFormCss(); }
+    static get cmpMeta() { return {
+        "$flags$": 260,
+        "$tagName$": "fast-form",
+        "$members$": undefined,
+        "$listeners$": [[0, "inputSubmit", "handleInputSubmit"]],
+        "$lazyBundleId$": "-",
+        "$attrsToReflect$": []
+    }; }
+}
+
+const fastInputCss = () => `.fast-input{position:relative;display:inline-block}.fast-input__field{padding:0.5rem 0.75rem;font-size:1rem;border:1px solid #ccc;border-radius:4px;width:100%;box-sizing:border-box}.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.inputSubmit = createEvent(this, "inputSubmit");
+        this.inputChanged = createEvent(this, "inputChanged");
+    }
+    placeholder = 'Search...';
+    value = '';
+    paramName = 'keyword';
+    enableAutocomplete = false;
+    autocompleteUrl = '/api/jobs/autocomplete';
+    targetPath;
+    debounceMs = 300;
+    minChars = 3;
+    inputSubmit;
+    inputChanged;
+    inputValue = '';
+    suggestions = [];
+    showDropdown = false;
+    autocompleteLoading = false;
+    debounceTimer;
+    popstateHandler;
+    async getValue() {
+        return this.inputValue;
+    }
+    async getParamName() {
+        return this.paramName;
+    }
+    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);
+    }
+    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') {
+            e.preventDefault();
+            this.showDropdown = false;
+            this.inputSubmit.emit();
+        }
+        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.inputSubmit.emit();
+    }
+    render() {
+        return (hAsync("div", { key: 'ea03f3dd68d0da4fc30cbc18a1ef66b5974a4f89', class: "fast-input" }, hAsync("input", { key: '31d85c4c90dde0e10ea9424b960c5e4f4a3ca54a', type: "text", class: "fast-input__field", placeholder: this.placeholder, value: this.inputValue, onInput: this.handleInput, onKeyDown: this.handleKeydown, onBlur: this.handleBlur }), this.enableAutocomplete && this.showDropdown && (hAsync("ul", { key: '0de6fd68709d906bafd2fec684f0a73045be3705', 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],
+            "getValue": [64],
+            "getParamName": [64]
+        },
+        "$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}}`;
 
 /**
@@ -6827,6 +7057,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.
@@ -6850,16 +7081,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;
@@ -6879,11 +7178,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: 'c22b59e35668df06633c8c11ae8a51b463e06b19', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: 'e2b5b1bf68b75dd958b906c18c258faa8f4e1e25', class: "results-container" }, hAsync("div", { key: '923d2402d2951d9de47a69c5fd87a80fda382b6e', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (hAsync("div", { key: '000c2c2d512f1b48999d628a2517701fc061dd11', class: "card" }, hAsync("ul", { key: '7028fc4f1b007eb9ff9bc205201af986c6d0a9ae', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: '4f567c7ddbf7d393469886ce3b4865dcb9f4e761', class: "share-jobs__no-results" }, hAsync("h2", { key: '5f1ae77afeca0c37183dc681a9cc42eebaf0e510' }, this.noResultsLine1), hAsync("h3", { key: '6f8a754181cabf1befc6a9a4cf811417075af918' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: 'a09cc45fbed615bb8672f8e77c2a8793efec2dc5', class: "card primary-color" }, hAsync("h4", { key: '9e53bb60ec086f42845d90c807dbd1cb6a88721d', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: '0769ebd6367255dad56e688cd36a65cc41f1f366', class: "results-list front" }, hAsync("li", { key: '7032fc1d77ca040be7d2c949c7bc755c62ef4df3', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: '49e0c6d4cad62448abc42124708472d8c268c7d9', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: 'ad76dbdad20e8de716613baa2bd1e745b6749fa7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: 'b141b94ceeacd5de8fd430cc9e5e05063953130a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        return (hAsync("div", { key: '1974ecb7e1ded8237d851560fc4b20dd63b4e941', class: `jobs-list-root ${this.rootClass}`.trim() }, hAsync("div", { key: '3d80283e8508cbe9ec4aa4516a6f832479374e08', class: "results-container" }, this.autoFetch && this.fetchLoading && (hAsync("div", { key: 'c5d3c5362a10ce2442925093118d3436227e8058', class: "jobs-list-only__loading" }, "Loading...")), hAsync("div", { key: 'c68e5aebee17cce16947029031b63364ab25ecda', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && this.showCountText && (hAsync("p", { key: 'e353fa146040fed1aed050ed3ed833903efcdf41', class: "jobs-list-only__count" }, this.renderCountText(jobsArray.length, totalJob))), totalJob > 0 && (hAsync("div", { key: 'e38346f641a1e776a7e70525bf8f3a6a38b6eea5', class: "card" }, hAsync("ul", { key: 'db82d99df76e33ad6041d4ec8dd7908cdf8b89d7', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (hAsync("div", { key: '8bd8f45ddb9fcd534c7f386919c1e6cd7a4fb6f3', class: "share-jobs__no-results" }, hAsync("h2", { key: '228d32e9dd38f61bcec9f522d3bc4207e17b5365' }, this.noResultsLine1), hAsync("h3", { key: '4289b10974936669a00afba6f1d55e33874198b1' }, this.noResultsLine2))), showSuggestionsBlock && (hAsync("div", { key: '949e1fe01b2db39a69729a9fbc2eebaf2ea461ba', class: "card primary-color" }, hAsync("h4", { key: 'af3361f98987a3a19d45afc1174a99fc4174a65a', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), hAsync("ul", { key: 'd7b9236dbbeb9f9596d642aa588d1c1305ed658b', class: "results-list front" }, hAsync("li", { key: '0e65c9b985e5708096c8a4b0ea1455b6696db6dd', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), hAsync("li", { key: 'a7fe8459960af60acc81822b48436a32c0e4ad0c', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), hAsync("li", { key: '1e41d5730de755d6b2cb9e5fbda33704816f9096', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (hAsync("li", { key: '9ab1bee87135bfda9996b2c99134597475bfaecb', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
     }
     static get style() { return jobsListOnlyCss(); }
     static get cmpMeta() { return {
@@ -6905,12 +7208,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: '9f3ab802e19a298a790cfb5e86a4f4888e466804' });
+    }
+    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$": "-",
@@ -6920,10 +7347,13 @@ class JobsListOnly {
 
 registerComponents([
   AppCarousel,
-  CustomButton,
+  FastButton,
+  FastForm,
+  FastInput,
   JobCard,
   JobsItem,
   JobsListOnly,
+  JobsListReactive,
 ]);
 
 exports.hydrateApp = hydrateApp;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@phatvu/web-component-poc",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "description": "Stencil Component Starter",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -24,14 +24,18 @@
       "types": "./dist/components/app-carousel.d.ts"
     },
     "./fast-button": {
-      "import": "./dist/components/custom-button.js",
-      "types": "./dist/components/custom-button.d.ts"
+      "import": "./dist/components/fast-button.js",
+      "types": "./dist/components/fast-button.d.ts"
     },
     "./loader": {
       "import": "./loader/index.js",
       "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"