@phatvu/web-component-poc 1.0.6 → 1.0.7

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": {}
+                }
+            }];
+    }
+}

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

@@ -25,16 +25,84 @@ export 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;
@@ -54,11 +122,15 @@ export 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 (h("div", { key: 'c22b59e35668df06633c8c11ae8a51b463e06b19', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: 'e2b5b1bf68b75dd958b906c18c258faa8f4e1e25', class: "results-container" }, h("div", { key: '923d2402d2951d9de47a69c5fd87a80fda382b6e', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: '000c2c2d512f1b48999d628a2517701fc061dd11', class: "card" }, h("ul", { key: '7028fc4f1b007eb9ff9bc205201af986c6d0a9ae', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: '4f567c7ddbf7d393469886ce3b4865dcb9f4e761', class: "share-jobs__no-results" }, h("h2", { key: '5f1ae77afeca0c37183dc681a9cc42eebaf0e510' }, this.noResultsLine1), h("h3", { key: '6f8a754181cabf1befc6a9a4cf811417075af918' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: 'a09cc45fbed615bb8672f8e77c2a8793efec2dc5', class: "card primary-color" }, h("h4", { key: '9e53bb60ec086f42845d90c807dbd1cb6a88721d', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: '0769ebd6367255dad56e688cd36a65cc41f1f366', class: "results-list front" }, h("li", { key: '7032fc1d77ca040be7d2c949c7bc755c62ef4df3', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '49e0c6d4cad62448abc42124708472d8c268c7d9', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: 'ad76dbdad20e8de716613baa2bd1e745b6749fa7', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: 'b141b94ceeacd5de8fd430cc9e5e05063953130a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        return (h("div", { key: '1116855473d28d650641b9d962243bfcdcb434ec', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: 'fcef04f1da9ad4e150af9f59921688f5781d9d43', class: "results-container" }, this.autoFetch && this.fetchLoading && (h("div", { key: '75b157c82c89691c7ce73d12ea0144b3b45485c3', class: "jobs-list-only__loading" }, "Loading...")), h("div", { key: 'b09f9879e10ee4a93e32177611912da5f19f3526', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && this.showCountText && (h("p", { key: 'd10f800fb0a33d82531d5f1728bac4ceba2ed577', class: "jobs-list-only__count" }, this.renderCountText(jobsArray.length, totalJob))), totalJob > 0 && (h("div", { key: '18153ed1338bd48f7be4f043b11ce15e3271f27b', class: "card" }, h("ul", { key: '766e128b1fd5adb456530ae39e92ba8eb0b5d6cf', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: 'ed6f3d2bd2bbedabd6e69d508ea1425580e6941f', class: "share-jobs__no-results" }, h("h2", { key: '2302656e33340c69e84cb949afb7256b8f35f440' }, this.noResultsLine1), h("h3", { key: '1c7e6642441a96c04ee26883fdec4f81b0fe6cec' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: 'be7af85f64455918545e88952ca6ff00f0a970c5', class: "card primary-color" }, h("h4", { key: '2f63deb8131190eff882308544b15f767b6f3edc', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: 'cb18daaa9e2c2c442c5b906ed370dcd653b5262d', class: "results-list front" }, h("li", { key: 'ff1d5c6518b75c0daa35b43df7162b0dfecde25e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '4099fd7bf8dcf114eca28702a498ab0938f5de46', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: 'fb65b54c3c0b14bc58112977eb4c7c56c1246a45', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '10f745e74cf68a2b1c42e6f49f810a8b59eb27b6', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
     }
     static get is() { return "jobs-list-only"; }
     static get originalStyleUrls() {
@@ -380,6 +452,26 @@ export class JobsListOnly {
                 "attribute": "root-class",
                 "defaultValue": "''"
             },
+            "showCountText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Template string for count display. Tokens: {count} = jobs on page, {total} = total from API."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-count-text",
+                "defaultValue": "''"
+            },
             "showSuggestions": {
                 "type": "boolean",
                 "mutable": false,
@@ -499,7 +591,92 @@ export class JobsListOnly {
                 "reflect": false,
                 "attribute": "clear-result-suggestions-line-4",
                 "defaultValue": "''"
+            },
+            "autoFetch": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true, component manages its own data fetching"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-fetch",
+                "defaultValue": "false"
+            },
+            "apiUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Jobs search endpoint"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "api-url",
+                "defaultValue": "'/api/get-jobs'"
+            },
+            "watchParams": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Comma-separated URL param names to watch and forward to the API"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "watch-params",
+                "defaultValue": "'keyword'"
             }
         };
     }
+    static get states() {
+        return {
+            "fetchedJobs": {},
+            "fetchedTotal": {},
+            "fetchLoading": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "fetchComplete",
+                "name": "fetchComplete",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ jobs: any[]; totalJob: number }",
+                    "resolved": "{ jobs: any[]; totalJob: number; }",
+                    "references": {}
+                }
+            }];
+    }
 }

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

@@ -0,0 +1,8 @@
+jobs-list-reactive {
+  display: block;
+}
+
+jobs-list-reactive.loading {
+  opacity: 0.6;
+  pointer-events: none;
+}