@phatvu/web-component-poc 1.0.6 → 1.0.8

package/dist/esm/{fast-button_4.entry.js → fast-carousel.entry.js}

@@ -1,45 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-Dk5CvWmb.js';
-
-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 CustomButton = class {
-    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.
-     */
-    disabled = false;
-    /**
-     * Emitted when the button is clicked (not emitted when disabled).
-     */
-    buttonClick;
-    handleClick = (e) => {
-        if (this.disabled) {
-            e.preventDefault();
-            e.stopPropagation();
-            return;
-        }
-        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' })));
-    }
-};
-CustomButton.style = buttonCss();
+import { r as registerInstance, g as getElement, h } from './index-BqjrT3zA.js';
 
 function isNumber(subject) {
   return typeof subject === 'number';
@@ -1945,190 +1904,4 @@ const AppCarousel = class {
 };
 AppCarousel.style = carouselCss();
 
-const jobsItemCss = () => `.results-list__item{list-style:none;padding:10px 0;border-bottom:1px solid #ddd;margin:15px 0;display:inline-block;width:100%;position:relative}.results-list__item:last-child{border-bottom:none}.results-list__item-header{margin:10px 0;font-size:18px;font-weight:700;display:flex;flex-direction:column}.results-list__item-title{margin:0}.results-list__item-title--link{text-decoration:none;color:#1f9755}.results-list__item-title--link:hover{text-decoration:underline}.reference{margin-left:8px;font-size:0.9em;color:#666}.reference.empty{display:none}.remote{background:#f3f3f3;color:#808285;border-radius:100px;padding:6px 16px;text-transform:uppercase;font-size:12px;font-weight:700;line-height:24px;margin-left:8px}.remote--empty{display:none}.results-list__item-distance{display:inline-flex;align-items:center;gap:4px;margin-top:4px;font-size:14px;font-weight:400}.results-list__item-distance--icon{display:inline-flex}.results-list__item-distance--icon svg{width:16px;height:16px}.results-list__item-content{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-top:8px}.results-list__item-info{flex:1}.results-list__item-street,.results-list__item-brand,.results-list__item-employment-type{margin:10px 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}.results-list__item-street--empty,.results-list__item-brand--empty,.results-list__item-employment-type--empty{color:#999}.results-list__item-street--icon,.results-list__item-brand--icon,.results-list__item-employment-type--icon{margin-right:6px;display:inline-flex}.results-list__item-street--icon svg,.results-list__item-brand--icon svg,.results-list__item-employment-type--icon svg{width:16px;height:16px}.results-list__item-street--more-locations__wrapper{margin-left:8px}.results-list__item-street--amount{font-weight:600}.results-list__item-apply{margin:10px 0;padding:10px 20px;display:inline-flex;align-items:center;gap:8px;background-color:#198754;color:#fff;border-radius:3px;text-decoration:none;font-weight:600;flex-shrink:0}.results-list__item-apply:hover{background-color:#1f9755;color:#fff}.results-list__item-apply--icon svg{width:14px;height:14px}`;
-
-function getLocationLabel(loc) {
-    if (loc.cityStateAbbr)
-        return loc.cityStateAbbr;
-    const parts = [loc.streetAddress, loc.city, loc.stateAbbr || loc.state, loc.countryAbbr || loc.country].filter(Boolean);
-    return parts.join(', ') || loc.locationText || '';
-}
-function getFirstLocation(job) {
-    const locs = job.locations;
-    if (!locs?.length)
-        return undefined;
-    return locs[0];
-}
-const JobsItem = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    job;
-    index = 0;
-    applyButtonText = 'Apply Now';
-    showBrand = true;
-    showReference = false;
-    showEmploymentType = true;
-    multiLocationText = 'More locations';
-    remoteLocationText = 'Remote';
-    enableKilometers = false;
-    formatDistance(distance) {
-        const value = this.enableKilometers ? distance * 1.60934 : distance;
-        const unit = this.enableKilometers ? 'Km' : 'Miles';
-        const str = `${value.toFixed(1)} ${unit}`.replace('.0', '');
-        return str;
-    }
-    render() {
-        if (!this.job)
-            return null;
-        const firstLoc = getFirstLocation(this.job);
-        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
-        const distance = firstLoc?.distance ?? 0;
-        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
-        const applyHref = this.job.applyURL ||
-            (this.job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${this.job.originalURL}` : '#');
-        const applyLabel = `${this.applyButtonText}, ${this.job.title || ''}`;
-        const locs = this.job.locations ?? [];
-        const hasMultipleLocations = locs.length > 1;
-        return (h("li", { class: "results-list__item" }, h("div", { class: "results-list__item-header" }, h("h3", { class: "results-list__item-title" }, h("a", { class: "results-list__item-title--link", href: applyHref, target: "_blank", rel: "noopener noreferrer" }, this.job.title || ''), this.showReference && (h("span", { class: `reference ${this.job.reference ? '' : 'empty'}` }, this.job.reference || '')), this.job.isRemote && (h("span", { class: this.remoteLocationText ? 'remote' : 'remote remote--empty' }, this.remoteLocationText))), distanceLabel && (h("div", { class: "results-list__item-distance" }, h("span", { class: "results-list__item-distance--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 8v4l2 2" }))), h("span", { class: "results-list__item-distance--label" }, distanceLabel)))), h("div", { class: "results-list__item-content" }, h("div", { class: "results-list__item-info" }, h("div", { class: locs.length
-                ? 'results-list__item-street'
-                : 'results-list__item-street results-list__item-street--empty' }, h("div", { class: "results-list__item-street--label__wrapper" }, h("span", { class: "results-list__item-street--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0z" }), h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0z" }))), h("span", { class: "results-list__item-street--label" }, locationLabel || '—')), hasMultipleLocations && (h("div", { class: "results-list__item-street--more-locations__wrapper" }, h("span", { class: "results-list__item-street--amount" }, "+", locs.length - 1), h("span", { class: "results-list__item-street--more-locations" }, this.multiLocationText)))), this.showBrand && (h("div", { class: this.job.brandName
-                ? 'results-list__item-brand'
-                : 'results-list__item-brand results-list__item-brand--empty' }, h("span", { class: "results-list__item-brand--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M2.25 21h19.5m-18-18v18m10.5-18v18m6-13.5V21M6.75 6.75h.75m-.75 3h.75m-.75 3h.75m3-6h.75m-.75 3h.75m-.75 3h.75M6.75 21v-3.375c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21M3 3h12m-.75 4.5H21m-3.75 3.75h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008zm0 3h.008v.008h-.008v-.008z" }))), h("span", { class: "results-list__item-brand--label" }, this.job.brandName || '—'))), this.showEmploymentType && (h("div", { class: this.job.employmentType?.length
-                ? 'results-list__item-employment-type'
-                : 'results-list__item-employment-type results-list__item-employment-type--empty' }, h("span", { class: "results-list__item-employment-type--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "1.5" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" }))), (this.job.employmentType?.length ? this.job.employmentType : ['—']).map((type) => (h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (this.job.jobCardExtraFields ?? []).map((field, i) => (h("div", { key: i, class: (Array.isArray(field.value) ? field.value.length : field.value)
-                ? field.classname
-                : `${field.classname}--empty` }, Array.isArray(field.value)
-            ? field.value.map((v, j) => (h("span", { key: j, class: `${field.classname}--label` }, v)))
-            : (h("span", { class: `${field.classname}--label` }, String(field.value))))))), h("a", { class: "results-list__item-apply", href: applyHref, target: "_blank", rel: "noopener noreferrer", "aria-label": applyLabel }, h("span", { class: "results-list__item-apply--label" }, this.applyButtonText), h("span", { class: "results-list__item-apply--icon" }, h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M13 7l5 5m0 0l-5 5m5-5H6" })))))));
-    }
-};
-JobsItem.style = jobsItemCss();
-
-/**
- * Mock jobs for local development and docs.
- * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
- */
-const mockJobsListOnly = [
-    {
-        title: 'Senior Software Engineer',
-        reference: 'REF-001',
-        originalURL: '/jobs/senior-software-engineer',
-        applyURL: 'https://apply.example.com/1',
-        brandName: 'Engineering',
-        isRemote: false,
-        locations: [
-            {
-                city: 'San Francisco',
-                stateAbbr: 'CA',
-                countryAbbr: 'US',
-                distance: 5.2,
-                streetAddress: '123 Market St',
-                cityStateAbbr: 'San Francisco, CA',
-            },
-        ],
-        employmentType: ['Full-time', 'Permanent'],
-    },
-    {
-        title: 'Product Manager',
-        reference: '',
-        originalURL: '/jobs/product-manager',
-        brandName: 'Product',
-        isRemote: true,
-        locations: [],
-        employmentType: ['Full-time'],
-    },
-    {
-        title: 'UX Designer',
-        reference: 'REF-003',
-        originalURL: '/jobs/ux-designer',
-        brandName: 'Design',
-        isRemote: false,
-        locations: [
-            {
-                city: 'New York',
-                stateAbbr: 'NY',
-                countryAbbr: 'US',
-                distance: 0,
-                cityStateAbbr: 'New York, NY',
-            },
-            {
-                city: 'Boston',
-                stateAbbr: 'MA',
-                countryAbbr: 'US',
-                cityStateAbbr: 'Boston, MA',
-            },
-        ],
-        employmentType: ['Full-time', 'Contract'],
-    },
-];
-
-const jobsListOnlyCss = () => `:host{display:block}.jobs-list-root{list-style:none}.results-container{position:relative}.loader{display:inline-block;width:24px;height:24px;border:2px solid #ddd;border-top-color:#1f9755;border-radius:50%;animation:jobs-list-spin 0.8s linear infinite}.loader.hide{display:none}@keyframes jobs-list-spin{to{transform:rotate(360deg)}}.card{border:0}.results-list{list-style:none;margin:0;padding:0;display:block}.results-list.front{margin:3px 0}.share-jobs__no-results{padding:24px;text-align:center}.share-jobs__no-results h2,.share-jobs__no-results h3{margin:8px 0;font-weight:600}.card.primary-color{padding:16px;border-radius:4px;background:#f8f9fa}.result-suggestions-title{margin:0 0 12px 0;font-size:16px}.results-list .result-suggestions-line{list-style:none;margin:4px 0}`;
-
-const defaultNoResultsLine1 = "Sorry, we're not able to load results for your search.";
-const defaultNoResultsLine2 = 'Please refine your keywords in the search bar above and try again.';
-const JobsListOnly = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-    }
-    /**
-     * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
-     */
-    mockData = false;
-    /** List of jobs to display. Pass as JSON string from attribute or as array via property (e.g. from React). Ignored when mock-data="true". */
-    jobs = [];
-    /** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
-    loading = false;
-    /** Total job count (for screen readers / schema). */
-    totalJob = 0;
-    noResultsLine1 = defaultNoResultsLine1;
-    noResultsLine2 = defaultNoResultsLine2;
-    applyButtonText = 'Apply Now';
-    showBrand = true;
-    showReference = false;
-    showEmploymentType = true;
-    streetFormat = '{street}, {city_state_abbr}';
-    multiLocationText = 'More locations';
-    remoteLocationText = 'Remote';
-    enableKilometers = false;
-    /** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
-    rootClass = '';
-    showSuggestions = false;
-    clearResultSuggestionsTitleText = 'Suggestions';
-    clearResultSuggestionsLine1 = 'Try different keywords';
-    clearResultSuggestionsLine2 = 'Make sure everything is spelled correctly';
-    clearResultSuggestionsLine3 = 'Try other locations';
-    clearResultSuggestionsLine4 = '';
-    getJobsArray() {
-        if (this.mockData) {
-            return mockJobsListOnly;
-        }
-        const j = this.jobs;
-        if (Array.isArray(j))
-            return j;
-        if (typeof j === 'string') {
-            try {
-                const parsed = JSON.parse(j);
-                return Array.isArray(parsed) ? parsed : [];
-            }
-            catch {
-                return [];
-            }
-        }
-        return [];
-    }
-    renderJobItem(job, index) {
-        return (h("jobs-item", { job: job, index: index, applyButtonText: this.applyButtonText, showBrand: this.showBrand, showReference: this.showReference, showEmploymentType: this.showEmploymentType, multiLocationText: this.multiLocationText, remoteLocationText: this.remoteLocationText, enableKilometers: this.enableKilometers }));
-    }
-    render() {
-        const jobsArray = this.getJobsArray();
-        const loading = this.mockData ? false : this.loading;
-        const totalJob = this.mockData ? jobsArray.length : (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))))))));
-    }
-};
-JobsListOnly.style = jobsListOnlyCss();
-
-export { CustomButton as fast_button, AppCarousel as fast_carousel, JobsItem as jobs_item, JobsListOnly as jobs_list_only };
+export { AppCarousel as fast_carousel };

package/dist/esm/{index-Dk5CvWmb.js → index-BqjrT3zA.js}

@@ -1,5 +1,5 @@
 const NAMESPACE = 'web-component-poc';
-const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, prop: true, propChangeCallback: false, shadowDom: false, slotRelocation: true, updatable: true};
+const BUILD = /* web-component-poc */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: false, shadowDom: false, slotRelocation: true, state: true, updatable: true};
 
 /*
  Stencil Client Platform v4.43.2 | MIT Licensed | https://stenciljs.com
@@ -86,7 +86,7 @@ var registerInstance = (lazyInstance, hostRef) => {
   if (!hostRef) return;
   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);
   }
 };
@@ -173,6 +173,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 {
@@ -1859,6 +1876,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));
       }
@@ -2301,6 +2325,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$) {
@@ -2328,6 +2353,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$) {
@@ -2379,6 +2410,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"];
@@ -2397,6 +2431,7 @@ var bootstrapLazy = (lazyBundles, options = {}) => {
           }
           if (!this.hasRegisteredEventListeners) {
             this.hasRegisteredEventListeners = true;
+            addHostEventListeners(this, hostRef, cmpMeta.$listeners$);
           }
           if (appLoadFallback) {
             clearTimeout(appLoadFallback);
@@ -2466,6 +2501,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/esm/job-card.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-Dk5CvWmb.js';
+import { r as registerInstance, h } from './index-BqjrT3zA.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/esm/loader.js

@@ -1,11 +1,11 @@
-import { b as bootstrapLazy } from './index-Dk5CvWmb.js';
-export { s as setNonce } from './index-Dk5CvWmb.js';
+import { b as bootstrapLazy } from './index-BqjrT3zA.js';
+export { s as setNonce } from './index-BqjrT3zA.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await globalScripts();
-  return bootstrapLazy([["job-card",[[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_4",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
+  return bootstrapLazy([["fast-carousel",[[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",[[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",[[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);
 };
 
 export { defineCustomElements };

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

@@ -1,5 +1,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-Dk5CvWmb.js';
-export { s as setNonce } from './index-Dk5CvWmb.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-BqjrT3zA.js';
+export { s as setNonce } from './index-BqjrT3zA.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["job-card",[[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_4",[[512,"jobs-list-only",{"mockData":[4,"mock-data"],"jobs":[1],"loading":[4],"totalJob":[2,"total-job"],"noResultsLine1":[1,"no-results-line-1"],"noResultsLine2":[1,"no-results-line-2"],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"streetFormat":[1,"street-format"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"],"rootClass":[1,"root-class"],"showSuggestions":[4,"show-suggestions"],"clearResultSuggestionsTitleText":[1,"clear-result-suggestions-title-text"],"clearResultSuggestionsLine1":[1,"clear-result-suggestions-line-1"],"clearResultSuggestionsLine2":[1,"clear-result-suggestions-line-2"],"clearResultSuggestionsLine3":[1,"clear-result-suggestions-line-3"],"clearResultSuggestionsLine4":[1,"clear-result-suggestions-line-4"]}],[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}],[772,"fast-carousel",{"items":[1],"loop":[4],"class":[1],"controlClass":[1,"control-class"],"slideClass":[1,"slide-class"],"itemClass":[1,"item-class"],"scrollPrev":[64],"scrollNext":[64],"goToSlide":[64],"getEmbla":[64]}],[512,"jobs-item",{"job":[16],"index":[2],"applyButtonText":[1,"apply-button-text"],"showBrand":[4,"show-brand"],"showReference":[4,"show-reference"],"showEmploymentType":[4,"show-employment-type"],"multiLocationText":[1,"multi-location-text"],"remoteLocationText":[1,"remote-location-text"],"enableKilometers":[4,"enable-kilometers"]}]]]], options);
+  return bootstrapLazy([["fast-carousel",[[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",[[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",[[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);
 });

package/dist/types/components/button/button.d.ts

@@ -1,22 +1,10 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export type ButtonVariant = 'primary' | 'secondary' | 'text';
 export type ButtonType = 'button' | 'submit';
-export declare class CustomButton {
-    /**
-     * Visual variant of the button.
-     */
+export declare class FastButton {
     variant: ButtonVariant;
-    /**
-     * Native button type (button or submit).
-     */
     type: ButtonType;
-    /**
-     * When true, the button is disabled and does not emit events.
-     */
     disabled: boolean;
-    /**
-     * Emitted when the button is clicked (not emitted when disabled).
-     */
     buttonClick: EventEmitter<MouseEvent>;
     private handleClick;
     render(): any;

package/dist/types/components/fast-form/fast-form.d.ts

@@ -0,0 +1,10 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class FastForm {
+    el: HTMLElement;
+    searchExecuted: EventEmitter<Record<string, string>>;
+    handleInputSubmit(): void;
+    private submit;
+    private updateUrlParams;
+    private handleFormSubmit;
+    render(): any;
+}

package/dist/types/components/fast-input/fast-input.d.ts

@@ -0,0 +1,35 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class FastInput {
+    placeholder: string;
+    value: string;
+    paramName: string;
+    enableAutocomplete: boolean;
+    autocompleteUrl: string;
+    targetPath: string | undefined;
+    debounceMs: number;
+    minChars: number;
+    inputSubmit: EventEmitter<void>;
+    inputChanged: EventEmitter<{
+        value: string;
+    }>;
+    inputValue: string;
+    suggestions: Array<{
+        title: string;
+    }>;
+    showDropdown: boolean;
+    autocompleteLoading: boolean;
+    private debounceTimer;
+    private popstateHandler;
+    getValue(): Promise<string>;
+    getParamName(): Promise<string>;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getUrlParam;
+    private handleInput;
+    private handleKeydown;
+    private handleBlur;
+    private scheduleAutocomplete;
+    private fetchSuggestions;
+    private selectSuggestion;
+    render(): any;
+}

package/dist/types/components/jobs-list-only/jobs-list-only.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 import type { Job } from '../../types/jobs-list';
 export declare class JobsListOnly {
     /**
@@ -22,12 +23,33 @@ export declare class JobsListOnly {
     enableKilometers: boolean;
     /** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
     rootClass: string;
+    /** Template string for count display. Tokens: {count} = jobs on page, {total} = total from API. */
+    showCountText: string;
     showSuggestions: boolean;
     clearResultSuggestionsTitleText: string;
     clearResultSuggestionsLine1: string;
     clearResultSuggestionsLine2: string;
     clearResultSuggestionsLine3: string;
     clearResultSuggestionsLine4: string;
+    /** When true, component manages its own data fetching */
+    autoFetch: boolean;
+    /** Jobs search endpoint */
+    apiUrl: string;
+    /** Comma-separated URL param names to watch and forward to the API */
+    watchParams: string;
+    fetchedJobs: any[];
+    fetchedTotal: number;
+    fetchLoading: boolean;
+    fetchComplete: EventEmitter<{
+        jobs: any[];
+        totalJob: number;
+    }>;
+    private searchExecutedHandler;
+    private popstateHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private fetchJobs;
+    private renderCountText;
     private getJobsArray;
     private renderJobItem;
     render(): any;

package/dist/types/components/jobs-list-reactive/jobs-list-reactive.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Job } from '../../types/jobs-list';
+export declare class JobsListReactive {
+    el: HTMLElement;
+    /** Jobs search endpoint */
+    apiUrl: string;
+    /** Comma-separated URL param names to watch and forward to the API */
+    watchParams: string;
+    /** CSS class added to container while fetching */
+    loadingClass: string;
+    isLoading: boolean;
+    fetchComplete: EventEmitter<{
+        jobs: Job[];
+        totalJob: number;
+    }>;
+    private templateEl;
+    private searchExecutedHandler;
+    private popstateHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private buildQueryString;
+    private fetchJobs;
+    private renderJobs;
+    private updateCountElements;
+    render(): any;
+}