@phatvu/web-component-poc 1.0.7 → 1.0.8

package/dist/cjs/{fast-input_4.cjs.entry.js → fast-button_6.cjs.entry.js}

@@ -1,13 +1,104 @@
 'use strict';
 
-var index = require('./index-BEvZs91D.js');
+var index = require('./index-227GpI8K.js');
 
-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}`;
+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}`;
 
-const FastInput = class {
+const FastButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonClick = index.createEvent(this, "buttonClick");
+    }
+    variant = 'primary';
+    type = 'submit';
+    disabled = false;
+    buttonClick;
+    handleClick = (e) => {
+        if (this.disabled) {
+            e.preventDefault();
+            e.stopPropagation();
+            return;
+        }
+        this.buttonClick.emit(e);
+    };
+    render() {
+        return (index.h("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 }, index.h("slot", { key: 'a6b987059cc33799abd580ea11f0fe644a3973bf' })));
+    }
+};
+FastButton.style = buttonCss();
+
+const fastFormCss = () => `.fast-form{display:flex;gap:0.5rem;align-items:flex-start}`;
+
+const FastForm = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.searchExecuted = index.createEvent(this, "searchExecuted");
+    }
+    get el() { return index.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 (index.h("form", { key: '50436bb904e8b175ae0c23158812a4e4756544c0', class: "fast-form", onSubmit: this.handleFormSubmit }, index.h("slot", { key: '2f76c4c42c15ebf389d6e0fdbcb9a2098bf1156a' })));
+    }
+};
+FastForm.style = fastFormCss();
+
+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}`;
+
+const FastInput = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.inputSubmit = index.createEvent(this, "inputSubmit");
         this.inputChanged = index.createEvent(this, "inputChanged");
     }
     placeholder = 'Search...';
@@ -18,7 +109,7 @@ const FastInput = class {
     targetPath;
     debounceMs = 300;
     minChars = 3;
-    searchExecuted;
+    inputSubmit;
     inputChanged;
     inputValue = '';
     suggestions = [];
@@ -26,6 +117,12 @@ const FastInput = class {
     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;
@@ -42,30 +139,6 @@ const FastInput = class {
         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;
@@ -76,7 +149,9 @@ const FastInput = class {
     };
     handleKeydown = (e) => {
         if (e.key === 'Enter') {
-            this.submit();
+            e.preventDefault();
+            this.showDropdown = false;
+            this.inputSubmit.emit();
         }
         else if (e.key === 'Escape') {
             this.showDropdown = false;
@@ -122,10 +197,12 @@ const FastInput = class {
     selectSuggestion(title) {
         this.inputValue = title;
         this.showDropdown = false;
-        this.submit();
+        this.inputSubmit.emit();
     }
     render() {
-        return (index.h("div", { key: '3a9d31c7b109205600addc326d63979585f10bcd', class: "fast-input" }, index.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 }), index.h("button", { key: '7b7404f13432750ece669da8ce68be15179921de', class: "fast-input__button", type: "button", onClick: () => this.submit() }, "Search"), this.enableAutocomplete && this.showDropdown && (index.h("ul", { key: '1438bacadc21c183842a8bdaa3f336bffb152e14', class: "fast-input__dropdown" }, this.autocompleteLoading ? (index.h("li", { class: "fast-input__dropdown-loading" }, "Loading...")) : (this.suggestions.map(s => (index.h("li", { class: "fast-input__dropdown-item", onMouseDown: e => { e.preventDefault(); }, onClick: () => this.selectSuggestion(s.title) }, s.title))))))));
+        return (index.h("div", { key: 'ea03f3dd68d0da4fc30cbc18a1ef66b5974a4f89', class: "fast-input" }, index.h("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 && (index.h("ul", { key: '0de6fd68709d906bafd2fec684f0a73045be3705', class: "fast-input__dropdown" }, this.autocompleteLoading ? (index.h("li", { class: "fast-input__dropdown-loading" }, "Loading...")) : (this.suggestions.map(s => (index.h("li", { class: "fast-input__dropdown-item", onMouseDown: e => {
+                e.preventDefault();
+            }, onClick: () => this.selectSuggestion(s.title) }, s.title))))))));
     }
 };
 FastInput.style = fastInputCss();
@@ -384,7 +461,7 @@ const JobsListOnly = class {
                 : (this.totalJob || jobsArray.length);
         const showNoResults = !loading && totalJob === 0 && !this.showSuggestions;
         const showSuggestionsBlock = !loading && totalJob === 0 && this.showSuggestions;
-        return (index.h("div", { key: '1116855473d28d650641b9d962243bfcdcb434ec', class: `jobs-list-root ${this.rootClass}`.trim() }, index.h("div", { key: 'fcef04f1da9ad4e150af9f59921688f5781d9d43', class: "results-container" }, this.autoFetch && this.fetchLoading && (index.h("div", { key: '75b157c82c89691c7ce73d12ea0144b3b45485c3', class: "jobs-list-only__loading" }, "Loading...")), index.h("div", { key: 'b09f9879e10ee4a93e32177611912da5f19f3526', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && this.showCountText && (index.h("p", { key: 'd10f800fb0a33d82531d5f1728bac4ceba2ed577', class: "jobs-list-only__count" }, this.renderCountText(jobsArray.length, totalJob))), totalJob > 0 && (index.h("div", { key: '18153ed1338bd48f7be4f043b11ce15e3271f27b', class: "card" }, index.h("ul", { key: '766e128b1fd5adb456530ae39e92ba8eb0b5d6cf', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (index.h("div", { key: 'ed6f3d2bd2bbedabd6e69d508ea1425580e6941f', class: "share-jobs__no-results" }, index.h("h2", { key: '2302656e33340c69e84cb949afb7256b8f35f440' }, this.noResultsLine1), index.h("h3", { key: '1c7e6642441a96c04ee26883fdec4f81b0fe6cec' }, this.noResultsLine2))), showSuggestionsBlock && (index.h("div", { key: 'be7af85f64455918545e88952ca6ff00f0a970c5', class: "card primary-color" }, index.h("h4", { key: '2f63deb8131190eff882308544b15f767b6f3edc', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), index.h("ul", { key: 'cb18daaa9e2c2c442c5b906ed370dcd653b5262d', class: "results-list front" }, index.h("li", { key: 'ff1d5c6518b75c0daa35b43df7162b0dfecde25e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), index.h("li", { key: '4099fd7bf8dcf114eca28702a498ab0938f5de46', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), index.h("li", { key: 'fb65b54c3c0b14bc58112977eb4c7c56c1246a45', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (index.h("li", { key: '10f745e74cf68a2b1c42e6f49f810a8b59eb27b6', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+        return (index.h("div", { key: '1974ecb7e1ded8237d851560fc4b20dd63b4e941', class: `jobs-list-root ${this.rootClass}`.trim() }, index.h("div", { key: '3d80283e8508cbe9ec4aa4516a6f832479374e08', class: "results-container" }, this.autoFetch && this.fetchLoading && (index.h("div", { key: 'c5d3c5362a10ce2442925093118d3436227e8058', class: "jobs-list-only__loading" }, "Loading...")), index.h("div", { key: 'c68e5aebee17cce16947029031b63364ab25ecda', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && this.showCountText && (index.h("p", { key: 'e353fa146040fed1aed050ed3ed833903efcdf41', class: "jobs-list-only__count" }, this.renderCountText(jobsArray.length, totalJob))), totalJob > 0 && (index.h("div", { key: 'e38346f641a1e776a7e70525bf8f3a6a38b6eea5', class: "card" }, index.h("ul", { key: 'db82d99df76e33ad6041d4ec8dd7908cdf8b89d7', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (index.h("div", { key: '8bd8f45ddb9fcd534c7f386919c1e6cd7a4fb6f3', class: "share-jobs__no-results" }, index.h("h2", { key: '228d32e9dd38f61bcec9f522d3bc4207e17b5365' }, this.noResultsLine1), index.h("h3", { key: '4289b10974936669a00afba6f1d55e33874198b1' }, this.noResultsLine2))), showSuggestionsBlock && (index.h("div", { key: '949e1fe01b2db39a69729a9fbc2eebaf2ea461ba', class: "card primary-color" }, index.h("h4", { key: 'af3361f98987a3a19d45afc1174a99fc4174a65a', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), index.h("ul", { key: 'd7b9236dbbeb9f9596d642aa588d1c1305ed658b', class: "results-list front" }, index.h("li", { key: '0e65c9b985e5708096c8a4b0ea1455b6696db6dd', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), index.h("li", { key: 'a7fe8459960af60acc81822b48436a32c0e4ad0c', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), index.h("li", { key: '1e41d5730de755d6b2cb9e5fbda33704816f9096', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (index.h("li", { key: '9ab1bee87135bfda9996b2c99134597475bfaecb', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
     }
 };
 JobsListOnly.style = jobsListOnlyCss();
@@ -488,11 +565,13 @@ const JobsListReactive = class {
         });
     }
     render() {
-        return index.h("slot", { key: '30a6fe9727eb877b6aafb99072c40811df121ba6' });
+        return index.h("slot", { key: '9f3ab802e19a298a790cfb5e86a4f4888e466804' });
     }
 };
 JobsListReactive.style = jobsListReactiveCss();
 
+exports.fast_button = FastButton;
+exports.fast_form = FastForm;
 exports.fast_input = FastInput;
 exports.jobs_item = JobsItem;
 exports.jobs_list_only = JobsListOnly;

package/dist/cjs/fast-carousel.cjs.entry.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEvZs91D.js');
+var index = require('./index-227GpI8K.js');
 
 function isNumber(subject) {
   return typeof subject === 'number';

package/dist/cjs/{index-BEvZs91D.js → index-227GpI8K.js}

@@ -175,6 +175,23 @@ var plt = {
   ce: (eventName, opts) => new CustomEvent(eventName, opts)
 };
 var supportsShadow = BUILD.shadowDom;
+var supportsListenerOptions = /* @__PURE__ */ (() => {
+  var _a;
+  let supportsListenerOptions2 = false;
+  try {
+    (_a = win.document) == null ? void 0 : _a.addEventListener(
+      "e",
+      null,
+      Object.defineProperty({}, "passive", {
+        get() {
+          supportsListenerOptions2 = true;
+        }
+      })
+    );
+  } catch (e) {
+  }
+  return supportsListenerOptions2;
+})();
 var promiseResolve = (v) => Promise.resolve(v);
 var supportsConstructableStylesheets = /* @__PURE__ */ (() => {
   try {
@@ -1861,6 +1878,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));
       }
@@ -2303,6 +2327,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$) {
@@ -2330,6 +2355,12 @@ var disconnectInstance = (instance, elm) => {
 var disconnectedCallback = async (elm) => {
   if ((plt.$flags$ & 1 /* isTmpDisconnected */) === 0) {
     const hostRef = getHostRef(elm);
+    {
+      if (hostRef == null ? void 0 : hostRef.$rmListeners$) {
+        hostRef.$rmListeners$.map((rmListener) => rmListener());
+        hostRef.$rmListeners$ = void 0;
+      }
+    }
     if (hostRef == null ? void 0 : hostRef.$lazyInstance$) {
       disconnectInstance(hostRef.$lazyInstance$, elm);
     } else if (hostRef == null ? void 0 : hostRef.$onReadyPromise$) {
@@ -2381,6 +2412,9 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
       {
         cmpMeta.$members$ = compactMeta[2];
       }
+      {
+        cmpMeta.$listeners$ = compactMeta[3];
+      }
       const tagName = transformTag(cmpMeta.$tagName$);
       const HostElement = class extends HTMLElement {
         ["s-p"];
@@ -2399,6 +2433,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2468,6 +2503,35 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
   }
   endBootstrap();
 };
+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) => supportsListenerOptions ? {
+  passive: (flags & 1 /* Passive */) !== 0,
+  capture: (flags & 2 /* Capture */) !== 0
+} : (flags & 2 /* Capture */) !== 0;
 
 // src/runtime/nonce.ts
 var setNonce = (nonce) => plt.$nonce$ = nonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEvZs91D.js');
+var index = require('./index-227GpI8K.js');
 
 const jobCardCss = () => `.job-card{display:block;padding:16px;border:1px solid #e0e0e0;border-radius:8px;background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.08);transition:box-shadow 0.2s ease, border-color 0.2s ease}.job-card:hover{box-shadow:0 4px 8px rgba(0, 0, 0, 0.12);border-color:#d0d0d0}.job-card__header{margin-bottom:12px}.job-card__title{margin:0;font-size:18px;font-weight:700;display:flex;align-items:center;flex-wrap:wrap;gap:8px}.job-card__title--link{text-decoration:none;color:#1f9755;transition:color 0.2s ease}.job-card__title--link:hover{text-decoration:underline;color:#1a7a43}.job-card__reference{font-size:0.875em;color:#666;background-color:#f5f5f5;padding:2px 6px;border-radius:3px}.job-card__reference--empty{display:none}.job-card__remote{background:#e8f5e9;color:#2e7d32;border-radius:100px;padding:4px 12px;text-transform:uppercase;font-size:11px;font-weight:700;line-height:1.5;white-space:nowrap}.job-card__remote--empty{display:none}.job-card__distance{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:13px;font-weight:500;color:#555}.job-card__distance--icon{display:inline-flex;align-items:center}.job-card__distance--icon svg{width:16px;height:16px;color:#1f9755}.job-card__content{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.job-card__info{flex:1;display:flex;flex-direction:column;gap:8px}.job-card__street,.job-card__brand,.job-card__employment-type{display:flex;align-items:center;flex-wrap:wrap;gap:4px 6px;font-size:14px}.job-card__street--empty,.job-card__brand--empty,.job-card__employment-type--empty{color:#999}.job-card__street--icon,.job-card__brand--icon,.job-card__employment-type--icon{display:inline-flex;align-items:center;flex-shrink:0}.job-card__street--icon svg,.job-card__brand--icon svg,.job-card__employment-type--icon svg{width:16px;height:16px;color:#666}.job-card__street--label,.job-card__brand--label,.job-card__employment-type--label{color:#333}.job-card__street--label__wrapper{display:flex;align-items:center;gap:6px}.job-card__street--more-locations__wrapper{display:flex;align-items:center;gap:2px;font-size:12px;margin-left:2px}.job-card__street--amount{font-weight:600;color:#1f9755}.job-card__street--more-locations{color:#999}.job-card__apply{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 16px;background-color:#198754;color:#fff;border-radius:4px;text-decoration:none;font-weight:600;font-size:14px;transition:background-color 0.2s ease, transform 0.1s ease;white-space:nowrap;flex-shrink:0}.job-card__apply:hover{background-color:#1a6f47;transform:translateY(-1px)}.job-card__apply:active{transform:translateY(0)}.job-card__apply--icon{display:inline-flex;align-items:center}.job-card__apply--icon svg{width:14px;height:14px}@media (max-width: 768px){.job-card{padding:12px}.job-card__content{flex-direction:column;gap:10px}.job-card__apply{width:100%;justify-content:center}.job-card__title{font-size:16px}}@media (max-width: 480px){.job-card{padding:10px}.job-card__title{font-size:15px}.job-card__distance{font-size:12px}.job-card__street,.job-card__brand,.job-card__employment-type{font-size:13px}}`;
 

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-BEvZs91D.js');
+var index = require('./index-227GpI8K.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["fast-button.cjs",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["fast-carousel.cjs",[[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]],["job-card.cjs",[[512,"job-card",{"job":[1],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["fast-input_4.cjs",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showCountText":[1,"show-count-text"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
+  return index.bootstrapLazy([["fast-carousel.cjs",[[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]],["job-card.cjs",[[512,"job-card",{"job":[1],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["fast-button_6.cjs",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showCountText":[1,"show-count-text"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[260,"fast-form",null,[[0,"inputSubmit","handleInputSubmit"]]],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32],"getValue":[64],"getParamName":[64]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-BEvZs91D.js');
+var index = require('./index-227GpI8K.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["fast-button.cjs",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["fast-carousel.cjs",[[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]],["job-card.cjs",[[512,"job-card",{"job":[1],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["fast-input_4.cjs",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showCountText":[1,"show-count-text"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
+  return index.bootstrapLazy([["fast-carousel.cjs",[[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}]]],["job-card.cjs",[[512,"job-card",{"job":[1],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"showCommuteTime":[4,"show-commute-time"],"streetFormat":[1,"street-format"],"rootClass":[1,"root-class"],"extraFieldsConfig":[16]}]]],["fast-button_6.cjs",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showCountText":[1,"show-count-text"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"],"autoFetch":[4,"auto-fetch"],"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"fetchedJobs":[32],"fetchedTotal":[32],"fetchLoading":[32]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[260,"fast-form",null,[[0,"inputSubmit","handleInputSubmit"]]],[512,"fast-input",{"placeholder":[1],"value":[1],"paramName":[1,"param-name"],"enableAutocomplete":[4,"enable-autocomplete"],"autocompleteUrl":[1,"autocomplete-url"],"targetPath":[1,"target-path"],"debounceMs":[2,"debounce-ms"],"minChars":[2,"min-chars"],"inputValue":[32],"suggestions":[32],"showDropdown":[32],"autocompleteLoading":[32],"getValue":[64],"getParamName":[64]}],[772,"jobs-list-reactive",{"apiUrl":[1,"api-url"],"watchParams":[1,"watch-params"],"loadingClass":[1,"loading-class"],"isLoading":[32]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/collection/collection-manifest.json

@@ -2,6 +2,7 @@
   "entries": [
     "components/button/button.js",
     "components/fast-carousel/carousel.js",
+    "components/fast-form/fast-form.js",
     "components/fast-input/fast-input.js",
     "components/job-card/job-card.js",
     "components/jobs-item/jobs-item.js",

package/dist/collection/components/button/button.css

@@ -2,7 +2,7 @@
   display: inline-block;
 }
 
-.custom-button {
+.fast-button {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -17,60 +17,60 @@
   transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
 }
 
-.custom-button:focus {
+.fast-button:focus {
   outline: 2px solid var(--custom-button-focus-ring, #2563eb);
   outline-offset: 2px;
 }
 
-.custom-button:focus:not(:focus-visible) {
+.fast-button:focus:not(:focus-visible) {
   outline: none;
 }
 
 /* Primary */
-.custom-button--primary {
+.fast-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) {
+.fast-button--primary:hover:not(.fast-button--disabled) {
   background-color: var(--custom-button-primary-hover-bg, #1d4ed8);
 }
 
-.custom-button--primary:active:not(.custom-button--disabled) {
+.fast-button--primary:active:not(.fast-button--disabled) {
   background-color: var(--custom-button-primary-active-bg, #1e40af);
 }
 
 /* Secondary */
-.custom-button--secondary {
+.fast-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) {
+.fast-button--secondary:hover:not(.fast-button--disabled) {
   background-color: var(--custom-button-secondary-hover-bg, #d1d5db);
 }
 
-.custom-button--secondary:active:not(.custom-button--disabled) {
+.fast-button--secondary:active:not(.fast-button--disabled) {
   background-color: var(--custom-button-secondary-active-bg, #9ca3af);
 }
 
 /* Text */
-.custom-button--text {
+.fast-button--text {
   background-color: transparent;
   color: var(--custom-button-text-color, #2563eb);
 }
 
-.custom-button--text:hover:not(.custom-button--disabled) {
+.fast-button--text:hover:not(.fast-button--disabled) {
   background-color: var(--custom-button-text-hover-bg, rgba(37, 99, 235, 0.08));
 }
 
-.custom-button--text:active:not(.custom-button--disabled) {
+.fast-button--text:active:not(.fast-button--disabled) {
   background-color: var(--custom-button-text-active-bg, rgba(37, 99, 235, 0.12));
 }
 
 /* Disabled */
-.custom-button--disabled,
-.custom-button:disabled {
+.fast-button--disabled,
+.fast-button:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }

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

@@ -1,20 +1,8 @@
 import { h } from "@stencil/core";
-export class CustomButton {
-    /**
-     * Visual variant of the button.
-     */
+export class FastButton {
     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) {
@@ -25,11 +13,11 @@ export class CustomButton {
         this.buttonClick.emit(e);
     };
     render() {
-        return (h("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 }, h("slot", { key: '49845d350e4665c5c66e30bd9262f788eaaa1e20' })));
+        return (h("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 }, h("slot", { key: 'a6b987059cc33799abd580ea11f0fe644a3973bf' })));
     }
     static get is() { return "fast-button"; }
     static get originalStyleUrls() {
@@ -62,7 +50,7 @@ export class CustomButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Visual variant of the button."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -88,13 +76,13 @@ export class CustomButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Native button type (button or submit)."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
                 "reflect": false,
                 "attribute": "type",
-                "defaultValue": "'button'"
+                "defaultValue": "'submit'"
             },
             "disabled": {
                 "type": "boolean",
@@ -108,7 +96,7 @@ export class CustomButton {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "When true, the button is disabled and does not emit events."
+                    "text": ""
                 },
                 "getter": false,
                 "setter": false,
@@ -127,7 +115,7 @@ export class CustomButton {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the button is clicked (not emitted when disabled)."
+                    "text": ""
                 },
                 "complexType": {
                     "original": "MouseEvent",

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

@@ -0,0 +1,5 @@
+.fast-form {
+  display: flex;
+  gap: 0.5rem;
+  align-items: flex-start;
+}