@phatvu/web-component-poc 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/components/fast-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FastButton extends Components.FastButton, HTMLElement {}
+export const FastButton: {
+    prototype: FastButton;
+    new (): FastButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/fast-carousel.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface FastCarousel extends Components.FastCarousel, HTMLElement {}
+export const FastCarousel: {
+    prototype: FastCarousel;
+    new (): FastCarousel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/index.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Get the base path to where the assets can be found. Use "setAssetPath(path)"
+ * if the path needs to be customized.
+ */
+export declare const getAssetPath: (path: string) => string;
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+/**
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare const setNonce: (nonce: string) => void
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export * from '../types';

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

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface JobsListOnlyUi extends Components.JobsListOnlyUi, HTMLElement {}
+export const JobsListOnlyUi: {
+    prototype: JobsListOnlyUi;
+    new (): JobsListOnlyUi;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,23 @@
+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.
+     */
+    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-carousel/carousel.d.ts

@@ -0,0 +1,54 @@
+export declare class AppCarousel {
+    el: HTMLElement;
+    /** Optional list of items to render as slides (each item in a slide). When set, slot is ignored. Accepts array or JSON string. */
+    items: unknown[] | string | undefined;
+    /** Whether the carousel loops. */
+    loop: boolean;
+    /** Extra class for the root carousel element. */
+    class: string;
+    /** Extra class for the controls container. */
+    controlClass: string;
+    /** Extra class for the slide viewport. */
+    slideClass: string;
+    /** Extra class for each slide item (items mode only). */
+    itemClass: string;
+    private viewportRef;
+    private containerRef;
+    private slotRef;
+    private prevBtnRef;
+    private nextBtnRef;
+    private dotsRef;
+    private embla;
+    private movedNodes;
+    private prevClickHandler;
+    private nextClickHandler;
+    private dotClickHandlers;
+    private slotNodesMoved;
+    /**
+     * Go to the previous slide.
+     */
+    scrollPrev(): Promise<void>;
+    /**
+     * Go to the next slide.
+     */
+    scrollNext(): Promise<void>;
+    /**
+     * Go to slide by index (0-based).
+     */
+    goToSlide(index: number): Promise<void>;
+    /**
+     * Get the Embla API instance (if initialized). Returns null before init or after destroy.
+     */
+    getEmbla(): Promise<unknown>;
+    private moveSlotNodesIntoContainer;
+    private initScheduled;
+    private scheduleEmblaInit;
+    private moveSlotNodesBack;
+    private initEmbla;
+    private destroyEmbla;
+    private onSlotChange;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private getItemsArray;
+    render(): any;
+}

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

@@ -0,0 +1,35 @@
+import type { JobSummary } from '../../types/jobs-list';
+export declare class JobsListOnlyUI {
+    /**
+     * 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;
+    /** Show loading spinner. Ignored when mock-data="true" (mock shows data immediately). */
+    loading: boolean;
+    /** Total job count (for screen readers / schema). */
+    totalJob: number;
+    noResultsLine1: string;
+    noResultsLine2: string;
+    applyButtonText: string;
+    showBrand: boolean;
+    showReference: boolean;
+    showEmploymentType: boolean;
+    streetFormat: string;
+    multiLocationText: string;
+    remoteLocationText: string;
+    enableKilometers: boolean;
+    /** Extra CSS class on the root element (avoid prop name "class" / "classname" reserved). */
+    rootClass: string;
+    showSuggestions: boolean;
+    clearResultSuggestionsTitleText: string;
+    clearResultSuggestionsLine1: string;
+    clearResultSuggestionsLine2: string;
+    clearResultSuggestionsLine3: string;
+    clearResultSuggestionsLine4: string;
+    private getJobsArray;
+    private formatDistance;
+    private renderJobItem;
+    render(): any;
+}

package/dist/types/components.d.ts

@@ -0,0 +1,398 @@
+/* eslint-disable */
+/* tslint:disable */
+/**
+ * This is an autogenerated file created by the Stencil compiler.
+ * It contains typing information for all components that exist in this project.
+ */
+import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { ButtonType, ButtonVariant } from "./components/button/button";
+import { JobSummary } from "./types/jobs-list";
+export { ButtonType, ButtonVariant } from "./components/button/button";
+export { JobSummary } from "./types/jobs-list";
+export namespace Components {
+    interface FastButton {
+        /**
+          * When true, the button is disabled and does not emit events.
+          * @default false
+         */
+        "disabled": boolean;
+        /**
+          * Native button type (button or submit).
+          * @default 'button'
+         */
+        "type": ButtonType;
+        /**
+          * Visual variant of the button.
+          * @default 'primary'
+         */
+        "variant": ButtonVariant;
+    }
+    interface FastCarousel {
+        /**
+          * Extra class for the root carousel element.
+         */
+        "class": string;
+        /**
+          * Extra class for the controls container.
+         */
+        "controlClass": string;
+        /**
+          * Get the Embla API instance (if initialized). Returns null before init or after destroy.
+         */
+        "getEmbla": () => Promise<unknown>;
+        /**
+          * Go to slide by index (0-based).
+         */
+        "goToSlide": (index: number) => Promise<void>;
+        /**
+          * Extra class for each slide item (items mode only).
+         */
+        "itemClass": string;
+        /**
+          * Optional list of items to render as slides (each item in a slide). When set, slot is ignored. Accepts array or JSON string.
+         */
+        "items": unknown[] | string | undefined;
+        /**
+          * Whether the carousel loops.
+          * @default true
+         */
+        "loop": boolean;
+        /**
+          * Go to the next slide.
+         */
+        "scrollNext": () => Promise<void>;
+        /**
+          * Go to the previous slide.
+         */
+        "scrollPrev": () => Promise<void>;
+        /**
+          * Extra class for the slide viewport.
+         */
+        "slideClass": string;
+    }
+    interface JobsListOnlyUi {
+        /**
+          * @default 'Apply Now'
+         */
+        "applyButtonText": string;
+        /**
+          * @default 'Try different keywords'
+         */
+        "clearResultSuggestionsLine1": string;
+        /**
+          * @default 'Make sure everything is spelled correctly'
+         */
+        "clearResultSuggestionsLine2": string;
+        /**
+          * @default 'Try other locations'
+         */
+        "clearResultSuggestionsLine3": string;
+        /**
+          * @default ''
+         */
+        "clearResultSuggestionsLine4": string;
+        /**
+          * @default 'Suggestions'
+         */
+        "clearResultSuggestionsTitleText": string;
+        /**
+          * @default false
+         */
+        "enableKilometers": 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".
+          * @default []
+         */
+        "jobs": JobSummary[] | string;
+        /**
+          * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
+          * @default false
+         */
+        "loading": boolean;
+        /**
+          * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
+          * @default false
+         */
+        "mockData": boolean;
+        /**
+          * @default 'More locations'
+         */
+        "multiLocationText": string;
+        /**
+          * @default defaultNoResultsLine1
+         */
+        "noResultsLine1": string;
+        /**
+          * @default defaultNoResultsLine2
+         */
+        "noResultsLine2": string;
+        /**
+          * @default 'Remote'
+         */
+        "remoteLocationText": string;
+        /**
+          * Extra CSS class on the root element (avoid prop name "class" / "classname" reserved).
+          * @default ''
+         */
+        "rootClass": string;
+        /**
+          * @default true
+         */
+        "showBrand": boolean;
+        /**
+          * @default true
+         */
+        "showEmploymentType": boolean;
+        /**
+          * @default false
+         */
+        "showReference": boolean;
+        /**
+          * @default false
+         */
+        "showSuggestions": boolean;
+        /**
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat": string;
+        /**
+          * Total job count (for screen readers / schema).
+          * @default 0
+         */
+        "totalJob": number;
+    }
+}
+export interface FastButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLFastButtonElement;
+}
+declare global {
+    interface HTMLFastButtonElementEventMap {
+        "buttonClick": MouseEvent;
+    }
+    interface HTMLFastButtonElement extends Components.FastButton, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLFastButtonElementEventMap>(type: K, listener: (this: HTMLFastButtonElement, ev: FastButtonCustomEvent<HTMLFastButtonElementEventMap[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 HTMLFastButtonElementEventMap>(type: K, listener: (this: HTMLFastButtonElement, ev: FastButtonCustomEvent<HTMLFastButtonElementEventMap[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 HTMLFastButtonElement: {
+        prototype: HTMLFastButtonElement;
+        new (): HTMLFastButtonElement;
+    };
+    interface HTMLFastCarouselElement extends Components.FastCarousel, HTMLStencilElement {
+    }
+    var HTMLFastCarouselElement: {
+        prototype: HTMLFastCarouselElement;
+        new (): HTMLFastCarouselElement;
+    };
+    interface HTMLJobsListOnlyUiElement extends Components.JobsListOnlyUi, HTMLStencilElement {
+    }
+    var HTMLJobsListOnlyUiElement: {
+        prototype: HTMLJobsListOnlyUiElement;
+        new (): HTMLJobsListOnlyUiElement;
+    };
+    interface HTMLElementTagNameMap {
+        "fast-button": HTMLFastButtonElement;
+        "fast-carousel": HTMLFastCarouselElement;
+        "jobs-list-only-ui": HTMLJobsListOnlyUiElement;
+    }
+}
+declare namespace LocalJSX {
+    interface FastButton {
+        /**
+          * When true, the button is disabled and does not emit events.
+          * @default false
+         */
+        "disabled"?: boolean;
+        /**
+          * Emitted when the button is clicked (not emitted when disabled).
+         */
+        "onButtonClick"?: (event: FastButtonCustomEvent<MouseEvent>) => void;
+        /**
+          * Native button type (button or submit).
+          * @default 'button'
+         */
+        "type"?: ButtonType;
+        /**
+          * Visual variant of the button.
+          * @default 'primary'
+         */
+        "variant"?: ButtonVariant;
+    }
+    interface FastCarousel {
+        /**
+          * Extra class for the root carousel element.
+         */
+        "class"?: string;
+        /**
+          * Extra class for the controls container.
+         */
+        "controlClass"?: string;
+        /**
+          * Extra class for each slide item (items mode only).
+         */
+        "itemClass"?: string;
+        /**
+          * Optional list of items to render as slides (each item in a slide). When set, slot is ignored. Accepts array or JSON string.
+         */
+        "items"?: unknown[] | string | undefined;
+        /**
+          * Whether the carousel loops.
+          * @default true
+         */
+        "loop"?: boolean;
+        /**
+          * Extra class for the slide viewport.
+         */
+        "slideClass"?: string;
+    }
+    interface JobsListOnlyUi {
+        /**
+          * @default 'Apply Now'
+         */
+        "applyButtonText"?: string;
+        /**
+          * @default 'Try different keywords'
+         */
+        "clearResultSuggestionsLine1"?: string;
+        /**
+          * @default 'Make sure everything is spelled correctly'
+         */
+        "clearResultSuggestionsLine2"?: string;
+        /**
+          * @default 'Try other locations'
+         */
+        "clearResultSuggestionsLine3"?: string;
+        /**
+          * @default ''
+         */
+        "clearResultSuggestionsLine4"?: string;
+        /**
+          * @default 'Suggestions'
+         */
+        "clearResultSuggestionsTitleText"?: string;
+        /**
+          * @default false
+         */
+        "enableKilometers"?: 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".
+          * @default []
+         */
+        "jobs"?: JobSummary[] | string;
+        /**
+          * Show loading spinner. Ignored when mock-data="true" (mock shows data immediately).
+          * @default false
+         */
+        "loading"?: boolean;
+        /**
+          * When "true", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent.
+          * @default false
+         */
+        "mockData"?: boolean;
+        /**
+          * @default 'More locations'
+         */
+        "multiLocationText"?: string;
+        /**
+          * @default defaultNoResultsLine1
+         */
+        "noResultsLine1"?: string;
+        /**
+          * @default defaultNoResultsLine2
+         */
+        "noResultsLine2"?: string;
+        /**
+          * @default 'Remote'
+         */
+        "remoteLocationText"?: string;
+        /**
+          * Extra CSS class on the root element (avoid prop name "class" / "classname" reserved).
+          * @default ''
+         */
+        "rootClass"?: string;
+        /**
+          * @default true
+         */
+        "showBrand"?: boolean;
+        /**
+          * @default true
+         */
+        "showEmploymentType"?: boolean;
+        /**
+          * @default false
+         */
+        "showReference"?: boolean;
+        /**
+          * @default false
+         */
+        "showSuggestions"?: boolean;
+        /**
+          * @default '{street}, {city_state_abbr}'
+         */
+        "streetFormat"?: string;
+        /**
+          * Total job count (for screen readers / schema).
+          * @default 0
+         */
+        "totalJob"?: number;
+    }
+
+    interface FastButtonAttributes {
+        "variant": ButtonVariant;
+        "type": ButtonType;
+        "disabled": boolean;
+    }
+    interface FastCarouselAttributes {
+        "items": unknown[] | string | undefined;
+        "loop": boolean;
+        "class": string;
+        "controlClass": string;
+        "slideClass": string;
+        "itemClass": string;
+    }
+    interface JobsListOnlyUiAttributes {
+        "mockData": boolean;
+        "jobs": JobSummary[] | string;
+        "loading": boolean;
+        "totalJob": number;
+        "noResultsLine1": string;
+        "noResultsLine2": string;
+        "applyButtonText": string;
+        "showBrand": boolean;
+        "showReference": boolean;
+        "showEmploymentType": boolean;
+        "streetFormat": string;
+        "multiLocationText": string;
+        "remoteLocationText": string;
+        "enableKilometers": boolean;
+        "rootClass": string;
+        "showSuggestions": boolean;
+        "clearResultSuggestionsTitleText": string;
+        "clearResultSuggestionsLine1": string;
+        "clearResultSuggestionsLine2": string;
+        "clearResultSuggestionsLine3": string;
+        "clearResultSuggestionsLine4": 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] };
+        "jobs-list-only-ui": Omit<JobsListOnlyUi, keyof JobsListOnlyUiAttributes> & { [K in keyof JobsListOnlyUi & keyof JobsListOnlyUiAttributes]?: JobsListOnlyUi[K] } & { [K in keyof JobsListOnlyUi & keyof JobsListOnlyUiAttributes as `attr:${K}`]?: JobsListOnlyUiAttributes[K] } & { [K in keyof JobsListOnlyUi & keyof JobsListOnlyUiAttributes as `prop:${K}`]?: JobsListOnlyUi[K] };
+    }
+}
+export { LocalJSX as JSX };
+declare module "@stencil/core" {
+    export namespace JSX {
+        interface IntrinsicElements {
+            "fast-button": LocalJSX.IntrinsicElements["fast-button"] & JSXBase.HTMLAttributes<HTMLFastButtonElement>;
+            "fast-carousel": LocalJSX.IntrinsicElements["fast-carousel"] & JSXBase.HTMLAttributes<HTMLFastCarouselElement>;
+            "jobs-list-only-ui": LocalJSX.IntrinsicElements["jobs-list-only-ui"] & JSXBase.HTMLAttributes<HTMLJobsListOnlyUiElement>;
+        }
+    }
+}

package/dist/types/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+export type * from './components.d.ts';

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

@@ -0,0 +1,7 @@
+import type { JobSummary } 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 function getMockJobsJson(): string;