@phatvu/web-component-poc 1.0.5 → 1.0.7

package/dist/types/components.d.ts

@@ -6,9 +6,9 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { ButtonType, ButtonVariant } from "./components/button/button";
-import { JobSummary } from "./types/jobs-list";
+import { Job } from "./types/jobs-list";
 export { ButtonType, ButtonVariant } from "./components/button/button";
-export { JobSummary } from "./types/jobs-list";
+export { Job } from "./types/jobs-list";
 export namespace Components {
     interface FastButton {
         /**
@@ -70,6 +70,124 @@ export namespace Components {
          */
         "slideClass": string;
     }
+    interface FastInput {
+        /**
+          * @default '/api/jobs/autocomplete'
+         */
+        "autocompleteUrl": string;
+        /**
+          * @default 300
+         */
+        "debounceMs": number;
+        /**
+          * @default false
+         */
+        "enableAutocomplete": boolean;
+        /**
+          * @default 3
+         */
+        "minChars": number;
+        /**
+          * @default 'keyword'
+         */
+        "paramName": string;
+        /**
+          * @default 'Search...'
+         */
+        "placeholder": string;
+        "targetPath": string | undefined;
+        /**
+          * @default ''
+         */
+        "value": string;
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface JobCard {
+        /**
+          * Text for the apply button
+          * @default 'Apply Now'
+         */
+        "applyButtonText": string;
+        /**
+          * Whether to show distances in kilometers instead of miles
+          * @default false
+         */
+        "enableKilometers": boolean;
+        /**
+          * Custom extra fields configuration
+          * @default []
+         */
+        "extraFieldsConfig": Array<{ name: string; value: string }>;
+        /**
+          * Index of the job in a list (used for accessibility)
+          * @default 0
+         */
+        "index": number;
+        /**
+          * The job data object to display. Accepts either a Job object or a JSON string.
+         */
+        "job": Job | string;
+        /**
+          * Text shown for multiple locations
+          * @default 'More locations'
+         */
+        "multiLocationText": string;
+        /**
+          * Text shown for remote jobs
+          * @default 'Remote'
+         */
+        "remoteLocationText": string;
+        /**
+          * Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement).
+          * @default ''
+         */
+        "rootClass": string;
+        /**
+          * Whether to show the brand/company name
+          * @default true
+         */
+        "showBrand": boolean;
+        /**
+          * Whether to show commute time
+          * @default false
+         */
+        "showCommuteTime": boolean;
+        /**
+          * Whether to show employment type
+          * @default true
+         */
+        "showEmploymentType": boolean;
+        /**
+          * Whether to show the reference number
+          * @default false
+         */
+        "showReference": boolean;
+        /**
+          * Format string for street address (not used in base web component)
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat": string;
+    }
     interface JobsItem {
         /**
           * @default 'Apply Now'
@@ -83,7 +201,7 @@ export namespace Components {
           * @default 0
          */
         "index": number;
-        "job": JobSummary;
+        "job": Job;
         /**
           * @default 'More locations'
          */
@@ -106,10 +224,20 @@ export namespace Components {
         "showReference": boolean;
     }
     interface JobsListOnly {
+        /**
+          * Jobs search endpoint
+          * @default '/api/get-jobs'
+         */
+        "apiUrl": string;
         /**
           * @default 'Apply Now'
          */
         "applyButtonText": string;
+        /**
+          * When true, component manages its own data fetching
+          * @default false
+         */
+        "autoFetch": boolean;
         /**
           * @default 'Try different keywords'
          */
@@ -138,7 +266,7 @@ export namespace Components {
           * 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".
           * @default []
          */
-        "jobs": JobSummary[] | string;
+        "jobs": Job[] | string;
         /**
           * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
           * @default false
@@ -174,6 +302,11 @@ export namespace Components {
           * @default true
          */
         "showBrand": boolean;
+        /**
+          * Template string for count display. Tokens: {count} = jobs on page, {total} = total from API.
+          * @default ''
+         */
+        "showCountText": string;
         /**
           * @default true
          */
@@ -195,12 +328,46 @@ export namespace Components {
           * @default 0
          */
         "totalJob": number;
+        /**
+          * Comma-separated URL param names to watch and forward to the API
+          * @default 'keyword'
+         */
+        "watchParams": string;
+    }
+    interface JobsListReactive {
+        /**
+          * Jobs search endpoint
+          * @default '/api/get-jobs'
+         */
+        "apiUrl": string;
+        /**
+          * CSS class added to container while fetching
+          * @default 'loading'
+         */
+        "loadingClass": string;
+        /**
+          * Comma-separated URL param names to watch and forward to the API
+          * @default 'keyword,location_name'
+         */
+        "watchParams": string;
     }
 }
 export interface FastButtonCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLFastButtonElement;
 }
+export interface FastInputCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLFastInputElement;
+}
+export interface JobsListOnlyCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJobsListOnlyElement;
+}
+export interface JobsListReactiveCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLJobsListReactiveElement;
+}
 declare global {
     interface HTMLFastButtonElementEventMap {
         "buttonClick": MouseEvent;
@@ -225,23 +392,99 @@ declare global {
         prototype: HTMLFastCarouselElement;
         new (): HTMLFastCarouselElement;
     };
+    interface HTMLFastInputElementEventMap {
+        "searchExecuted": { keyword: string };
+        "inputChanged": { value: string };
+    }
+    interface HTMLFastInputElement extends Components.FastInput, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLFastInputElementEventMap>(type: K, listener: (this: HTMLFastInputElement, ev: FastInputCustomEvent<HTMLFastInputElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLFastInputElementEventMap>(type: K, listener: (this: HTMLFastInputElement, ev: FastInputCustomEvent<HTMLFastInputElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLFastInputElement: {
+        prototype: HTMLFastInputElement;
+        new (): HTMLFastInputElement;
+    };
+    /**
+     * 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>
+     * ```
+     */
+    interface HTMLJobCardElement extends Components.JobCard, HTMLStencilElement {
+    }
+    var HTMLJobCardElement: {
+        prototype: HTMLJobCardElement;
+        new (): HTMLJobCardElement;
+    };
     interface HTMLJobsItemElement extends Components.JobsItem, HTMLStencilElement {
     }
     var HTMLJobsItemElement: {
         prototype: HTMLJobsItemElement;
         new (): HTMLJobsItemElement;
     };
+    interface HTMLJobsListOnlyElementEventMap {
+        "fetchComplete": { jobs: any[]; totalJob: number };
+    }
     interface HTMLJobsListOnlyElement extends Components.JobsListOnly, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLJobsListOnlyElementEventMap>(type: K, listener: (this: HTMLJobsListOnlyElement, ev: JobsListOnlyCustomEvent<HTMLJobsListOnlyElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLJobsListOnlyElementEventMap>(type: K, listener: (this: HTMLJobsListOnlyElement, ev: JobsListOnlyCustomEvent<HTMLJobsListOnlyElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLJobsListOnlyElement: {
         prototype: HTMLJobsListOnlyElement;
         new (): HTMLJobsListOnlyElement;
     };
+    interface HTMLJobsListReactiveElementEventMap {
+        "fetchComplete": { jobs: Job[]; totalJob: number };
+    }
+    interface HTMLJobsListReactiveElement extends Components.JobsListReactive, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLJobsListReactiveElementEventMap>(type: K, listener: (this: HTMLJobsListReactiveElement, ev: JobsListReactiveCustomEvent<HTMLJobsListReactiveElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLJobsListReactiveElementEventMap>(type: K, listener: (this: HTMLJobsListReactiveElement, ev: JobsListReactiveCustomEvent<HTMLJobsListReactiveElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLJobsListReactiveElement: {
+        prototype: HTMLJobsListReactiveElement;
+        new (): HTMLJobsListReactiveElement;
+    };
     interface HTMLElementTagNameMap {
         "fast-button": HTMLFastButtonElement;
         "fast-carousel": HTMLFastCarouselElement;
+        "fast-input": HTMLFastInputElement;
+        "job-card": HTMLJobCardElement;
         "jobs-item": HTMLJobsItemElement;
         "jobs-list-only": HTMLJobsListOnlyElement;
+        "jobs-list-reactive": HTMLJobsListReactiveElement;
     }
 }
 declare namespace LocalJSX {
@@ -293,6 +536,126 @@ declare namespace LocalJSX {
          */
         "slideClass"?: string;
     }
+    interface FastInput {
+        /**
+          * @default '/api/jobs/autocomplete'
+         */
+        "autocompleteUrl"?: string;
+        /**
+          * @default 300
+         */
+        "debounceMs"?: number;
+        /**
+          * @default false
+         */
+        "enableAutocomplete"?: boolean;
+        /**
+          * @default 3
+         */
+        "minChars"?: number;
+        "onInputChanged"?: (event: FastInputCustomEvent<{ value: string }>) => void;
+        "onSearchExecuted"?: (event: FastInputCustomEvent<{ keyword: string }>) => void;
+        /**
+          * @default 'keyword'
+         */
+        "paramName"?: string;
+        /**
+          * @default 'Search...'
+         */
+        "placeholder"?: string;
+        "targetPath"?: string | undefined;
+        /**
+          * @default ''
+         */
+        "value"?: string;
+    }
+    /**
+     * 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>
+     * ```
+     */
+    interface JobCard {
+        /**
+          * Text for the apply button
+          * @default 'Apply Now'
+         */
+        "applyButtonText"?: string;
+        /**
+          * Whether to show distances in kilometers instead of miles
+          * @default false
+         */
+        "enableKilometers"?: boolean;
+        /**
+          * Custom extra fields configuration
+          * @default []
+         */
+        "extraFieldsConfig"?: Array<{ name: string; value: string }>;
+        /**
+          * Index of the job in a list (used for accessibility)
+          * @default 0
+         */
+        "index"?: number;
+        /**
+          * The job data object to display. Accepts either a Job object or a JSON string.
+         */
+        "job"?: Job | string;
+        /**
+          * Text shown for multiple locations
+          * @default 'More locations'
+         */
+        "multiLocationText"?: string;
+        /**
+          * Text shown for remote jobs
+          * @default 'Remote'
+         */
+        "remoteLocationText"?: string;
+        /**
+          * Extra CSS class on the root inner element (avoid prop name "className", reserved on HTMLElement).
+          * @default ''
+         */
+        "rootClass"?: string;
+        /**
+          * Whether to show the brand/company name
+          * @default true
+         */
+        "showBrand"?: boolean;
+        /**
+          * Whether to show commute time
+          * @default false
+         */
+        "showCommuteTime"?: boolean;
+        /**
+          * Whether to show employment type
+          * @default true
+         */
+        "showEmploymentType"?: boolean;
+        /**
+          * Whether to show the reference number
+          * @default false
+         */
+        "showReference"?: boolean;
+        /**
+          * Format string for street address (not used in base web component)
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat"?: string;
+    }
     interface JobsItem {
         /**
           * @default 'Apply Now'
@@ -306,7 +669,7 @@ declare namespace LocalJSX {
           * @default 0
          */
         "index"?: number;
-        "job"?: JobSummary;
+        "job"?: Job;
         /**
           * @default 'More locations'
          */
@@ -329,10 +692,20 @@ declare namespace LocalJSX {
         "showReference"?: boolean;
     }
     interface JobsListOnly {
+        /**
+          * Jobs search endpoint
+          * @default '/api/get-jobs'
+         */
+        "apiUrl"?: string;
         /**
           * @default 'Apply Now'
          */
         "applyButtonText"?: string;
+        /**
+          * When true, component manages its own data fetching
+          * @default false
+         */
+        "autoFetch"?: boolean;
         /**
           * @default 'Try different keywords'
          */
@@ -361,7 +734,7 @@ declare namespace LocalJSX {
           * 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".
           * @default []
          */
-        "jobs"?: JobSummary[] | string;
+        "jobs"?: Job[] | string;
         /**
           * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
           * @default false
@@ -384,6 +757,7 @@ declare namespace LocalJSX {
           * @default defaultNoResultsLine2
          */
         "noResultsLine2"?: string;
+        "onFetchComplete"?: (event: JobsListOnlyCustomEvent<{ jobs: any[]; totalJob: number }>) => void;
         /**
           * @default 'Remote'
          */
@@ -397,6 +771,11 @@ declare namespace LocalJSX {
           * @default true
          */
         "showBrand"?: boolean;
+        /**
+          * Template string for count display. Tokens: {count} = jobs on page, {total} = total from API.
+          * @default ''
+         */
+        "showCountText"?: string;
         /**
           * @default true
          */
@@ -418,6 +797,29 @@ declare namespace LocalJSX {
           * @default 0
          */
         "totalJob"?: number;
+        /**
+          * Comma-separated URL param names to watch and forward to the API
+          * @default 'keyword'
+         */
+        "watchParams"?: string;
+    }
+    interface JobsListReactive {
+        /**
+          * Jobs search endpoint
+          * @default '/api/get-jobs'
+         */
+        "apiUrl"?: string;
+        /**
+          * CSS class added to container while fetching
+          * @default 'loading'
+         */
+        "loadingClass"?: string;
+        "onFetchComplete"?: (event: JobsListReactiveCustomEvent<{ jobs: Job[]; totalJob: number }>) => void;
+        /**
+          * Comma-separated URL param names to watch and forward to the API
+          * @default 'keyword,location_name'
+         */
+        "watchParams"?: string;
     }
 
     interface FastButtonAttributes {
@@ -433,6 +835,30 @@ declare namespace LocalJSX {
         "slideClass": string;
         "itemClass": string;
     }
+    interface FastInputAttributes {
+        "placeholder": string;
+        "value": string;
+        "paramName": string;
+        "enableAutocomplete": boolean;
+        "autocompleteUrl": string;
+        "targetPath": string | undefined;
+        "debounceMs": number;
+        "minChars": number;
+    }
+    interface JobCardAttributes {
+        "job": Job | string;
+        "index": number;
+        "applyButtonText": string;
+        "showBrand": boolean;
+        "showReference": boolean;
+        "showEmploymentType": boolean;
+        "multiLocationText": string;
+        "remoteLocationText": string;
+        "enableKilometers": boolean;
+        "showCommuteTime": boolean;
+        "streetFormat": string;
+        "rootClass": string;
+    }
     interface JobsItemAttributes {
         "index": number;
         "applyButtonText": string;
@@ -445,7 +871,7 @@ declare namespace LocalJSX {
     }
     interface JobsListOnlyAttributes {
         "mockData": boolean;
-        "jobs": JobSummary[] | string;
+        "jobs": Job[] | string;
         "loading": boolean;
         "totalJob": number;
         "noResultsLine1": string;
@@ -459,19 +885,31 @@ declare namespace LocalJSX {
         "remoteLocationText": string;
         "enableKilometers": boolean;
         "rootClass": string;
+        "showCountText": string;
         "showSuggestions": boolean;
         "clearResultSuggestionsTitleText": string;
         "clearResultSuggestionsLine1": string;
         "clearResultSuggestionsLine2": string;
         "clearResultSuggestionsLine3": string;
         "clearResultSuggestionsLine4": string;
+        "autoFetch": boolean;
+        "apiUrl": string;
+        "watchParams": string;
+    }
+    interface JobsListReactiveAttributes {
+        "apiUrl": string;
+        "watchParams": string;
+        "loadingClass": string;
     }
 
     interface IntrinsicElements {
         "fast-button": Omit<FastButton, keyof FastButtonAttributes> & { [K in keyof FastButton & keyof FastButtonAttributes]?: FastButton[K] } & { [K in keyof FastButton & keyof FastButtonAttributes as `attr:${K}`]?: FastButtonAttributes[K] } & { [K in keyof FastButton & keyof FastButtonAttributes as `prop:${K}`]?: FastButton[K] };
         "fast-carousel": Omit<FastCarousel, keyof FastCarouselAttributes> & { [K in keyof FastCarousel & keyof FastCarouselAttributes]?: FastCarousel[K] } & { [K in keyof FastCarousel & keyof FastCarouselAttributes as `attr:${K}`]?: FastCarouselAttributes[K] } & { [K in keyof FastCarousel & keyof FastCarouselAttributes as `prop:${K}`]?: FastCarousel[K] };
+        "fast-input": Omit<FastInput, keyof FastInputAttributes> & { [K in keyof FastInput & keyof FastInputAttributes]?: FastInput[K] } & { [K in keyof FastInput & keyof FastInputAttributes as `attr:${K}`]?: FastInputAttributes[K] } & { [K in keyof FastInput & keyof FastInputAttributes as `prop:${K}`]?: FastInput[K] };
+        "job-card": Omit<JobCard, keyof JobCardAttributes> & { [K in keyof JobCard & keyof JobCardAttributes]?: JobCard[K] } & { [K in keyof JobCard & keyof JobCardAttributes as `attr:${K}`]?: JobCardAttributes[K] } & { [K in keyof JobCard & keyof JobCardAttributes as `prop:${K}`]?: JobCard[K] };
         "jobs-item": Omit<JobsItem, keyof JobsItemAttributes> & { [K in keyof JobsItem & keyof JobsItemAttributes]?: JobsItem[K] } & { [K in keyof JobsItem & keyof JobsItemAttributes as `attr:${K}`]?: JobsItemAttributes[K] } & { [K in keyof JobsItem & keyof JobsItemAttributes as `prop:${K}`]?: JobsItem[K] };
         "jobs-list-only": Omit<JobsListOnly, keyof JobsListOnlyAttributes> & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes]?: JobsListOnly[K] } & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes as `attr:${K}`]?: JobsListOnlyAttributes[K] } & { [K in keyof JobsListOnly & keyof JobsListOnlyAttributes as `prop:${K}`]?: JobsListOnly[K] };
+        "jobs-list-reactive": Omit<JobsListReactive, keyof JobsListReactiveAttributes> & { [K in keyof JobsListReactive & keyof JobsListReactiveAttributes]?: JobsListReactive[K] } & { [K in keyof JobsListReactive & keyof JobsListReactiveAttributes as `attr:${K}`]?: JobsListReactiveAttributes[K] } & { [K in keyof JobsListReactive & keyof JobsListReactiveAttributes as `prop:${K}`]?: JobsListReactive[K] };
     }
 }
 export { LocalJSX as JSX };
@@ -480,8 +918,32 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "fast-button": LocalJSX.IntrinsicElements["fast-button"] & JSXBase.HTMLAttributes<HTMLFastButtonElement>;
             "fast-carousel": LocalJSX.IntrinsicElements["fast-carousel"] & JSXBase.HTMLAttributes<HTMLFastCarouselElement>;
+            "fast-input": LocalJSX.IntrinsicElements["fast-input"] & JSXBase.HTMLAttributes<HTMLFastInputElement>;
+            /**
+             * 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>
+             * ```
+             */
+            "job-card": LocalJSX.IntrinsicElements["job-card"] & JSXBase.HTMLAttributes<HTMLJobCardElement>;
             "jobs-item": LocalJSX.IntrinsicElements["jobs-item"] & JSXBase.HTMLAttributes<HTMLJobsItemElement>;
             "jobs-list-only": LocalJSX.IntrinsicElements["jobs-list-only"] & JSXBase.HTMLAttributes<HTMLJobsListOnlyElement>;
+            "jobs-list-reactive": LocalJSX.IntrinsicElements["jobs-list-reactive"] & JSXBase.HTMLAttributes<HTMLJobsListReactiveElement>;
         }
     }
 }

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

@@ -1,7 +1,7 @@
-import type { JobSummary } from '../types/jobs-list';
+import type { Job } from '../types/jobs-list';
 /**
  * Mock jobs for local development and docs.
  * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
  */
-export declare const mockJobsListOnly: JobSummary[];
+export declare const mockJobsListOnly: Job[];
 export declare function getMockJobsJson(): string;

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

@@ -21,7 +21,11 @@ export interface JobCardExtraFieldSummary {
     value: string | string[];
     classname: string;
 }
-export interface JobSummary {
+/**
+ * Job data shape for job-card and jobs-list-only components.
+ * Compatible with ReactJob from career-sites-renderer.
+ */
+export interface Job {
     title?: string;
     reference?: string;
     originalURL?: string;
@@ -34,7 +38,7 @@ export interface JobSummary {
     [key: string]: unknown;
 }
 export interface JobsListOnlyProps {
-    jobs?: JobSummary[];
+    jobs?: Job[];
     loading?: boolean;
     totalJob?: number;
     noResultsLine1?: string;

package/dist/web-component-poc/p-618fba28.entry.js

@@ -0,0 +1 @@
+import{r as t,c as o,h as r}from"./p-C_ZLQIpp.js";const c=class{constructor(r){t(this,r),this.buttonClick=o(this,"buttonClick")}variant="primary";type="button";disabled=!1;buttonClick;handleClick=t=>{if(this.disabled)return t.preventDefault(),void t.stopPropagation();this.buttonClick.emit(t)};render(){return r("button",{key:"3b74909afe4e305dfd38f0b07657202e3d5bfccd",type:this.type,class:{"custom-button":!0,[`custom-button--${this.variant}`]:!0,"custom-button--disabled":this.disabled},disabled:this.disabled,onClick:this.handleClick},r("slot",{key:"49845d350e4665c5c66e30bd9262f788eaaa1e20"}))}};c.style=":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}";export{c as fast_button}