@phatvu/web-component-poc 1.0.5 → 1.0.7

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-C_ZLQIpp.js';
+export { s as setNonce } from './index-C_ZLQIpp.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([["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-button",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["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-input_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"],"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);
 };
 
 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-C_ZLQIpp.js';
+export { s as setNonce } from './index-C_ZLQIpp.js';
 import { g as globalScripts } from './app-globals-DQuL1Twl.js';
 
 /*
@@ -17,5 +17,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["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-button",[[772,"fast-button",{"variant":[1],"type":[1],"disabled":[4]}]]],["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-input_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"],"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);
 });

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

@@ -0,0 +1,37 @@
+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;
+    searchExecuted: EventEmitter<{
+        keyword: string;
+    }>;
+    inputChanged: EventEmitter<{
+        value: string;
+    }>;
+    inputValue: string;
+    suggestions: Array<{
+        title: string;
+    }>;
+    showDropdown: boolean;
+    autocompleteLoading: boolean;
+    private debounceTimer;
+    private popstateHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private getUrlParam;
+    private updateUrlParam;
+    private submit;
+    private handleInput;
+    private handleKeydown;
+    private handleBlur;
+    private scheduleAutocomplete;
+    private fetchSuggestions;
+    private selectSuggestion;
+    render(): any;
+}

package/dist/types/components/job-card/job-card.d.ts

@@ -0,0 +1,93 @@
+import type { Job } from '../../types/jobs-list';
+/**
+ * JobCard Component
+ *
+ * A reusable card component for displaying job information based on the React JobItem component.
+ * Features include:
+ * - Job title with apply link
+ * - Location with distance
+ * - Brand/company name
+ * - Employment type
+ * - Reference number (optional)
+ * - Remote indicator (optional)
+ * - Multi-location support
+ * - Custom extra fields
+ *
+ * @example
+ * ```html
+ * <job-card
+ *   .job={jobData}
+ *   applyButtonText="Apply"
+ *   showBrand="true"
+ *   showEmploymentType="true"
+ * ></job-card>
+ * ```
+ */
+export declare class JobCard {
+    /**
+     * The job data object to display. Accepts either a Job object or a JSON string.
+     */
+    job: Job | string;
+    /**
+     * Index of the job in a list (used for accessibility)
+     */
+    index: number;
+    /**
+     * Text for the apply button
+     */
+    applyButtonText: string;
+    /**
+     * Whether to show the brand/company name
+     */
+    showBrand: boolean;
+    /**
+     * Whether to show the reference number
+     */
+    showReference: boolean;
+    /**
+     * Whether to show employment type
+     */
+    showEmploymentType: boolean;
+    /**
+     * Text shown for multiple locations
+     */
+    multiLocationText: string;
+    /**
+     * Text shown for remote jobs
+     */
+    remoteLocationText: string;
+    /**
+     * Whether to show distances in kilometers instead of miles
+     */
+    enableKilometers: boolean;
+    /**
+     * Whether to show commute time
+     */
+    showCommuteTime: boolean;
+    /**
+     * Format string for street address (not used in base web component)
+     */
+    streetFormat: string;
+    /** Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement). */
+    rootClass: string;
+    /**
+     * Custom extra fields configuration
+     */
+    extraFieldsConfig: Array<{
+        name: string;
+        value: string;
+    }>;
+    /**
+     * Format distance with unit
+     */
+    private formatDistance;
+    /**
+     * Is Empty utility
+     */
+    private isEmpty;
+    /**
+     * Parse job data from prop - handles both object and JSON string
+     */
+    private getJobData;
+    render(): any;
+}

package/dist/types/components/jobs-item/jobs-item.d.ts

@@ -1,6 +1,6 @@
-import type { JobSummary } from '../../types/jobs-list';
+import type { Job } from '../../types/jobs-list';
 export declare class JobsItem {
-    job: JobSummary;
+    job: Job;
     index: number;
     applyButtonText: string;
     showBrand: boolean;

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

@@ -1,11 +1,12 @@
-import type { JobSummary } from '../../types/jobs-list';
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Job } from '../../types/jobs-list';
 export declare class JobsListOnly {
     /**
      * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
      */
     mockData: boolean;
     /** 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: JobSummary[] | string;
+    jobs: Job[] | string;
     /** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
     loading: boolean;
     /** Total job count (for screen readers / schema). */
@@ -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;
+}