@phatvu/web-component-poc 1.0.0 → 1.0.1

package/dist/collection/components/jobs-list-only-ui/jobs-list-only-ui.js

@@ -0,0 +1,543 @@
+import { h } from "@stencil/core";
+import { mockJobsListOnly } from "../../mock/jobs-list-only.mock";
+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.';
+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];
+}
+export class JobsListOnlyUI {
+    /**
+     * 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 [];
+    }
+    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;
+    }
+    renderJobItem(job, _index) {
+        const firstLoc = getFirstLocation(job);
+        const locationLabel = firstLoc ? getLocationLabel(firstLoc) : '';
+        const distance = firstLoc?.distance ?? 0;
+        const distanceLabel = distance > 0 ? this.formatDistance(distance) : '';
+        const applyHref = job.applyURL || (job.originalURL ? `${typeof window !== 'undefined' ? window.location.origin : ''}${job.originalURL}` : '#');
+        const applyLabel = `${this.applyButtonText}, ${job.title || ''}`;
+        const locs = 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" }, job.title || ''), this.showReference && (h("span", { class: `reference ${job.reference ? '' : 'empty'}` }, job.reference || '')), 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: 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" }, job.brandName || '—'))), this.showEmploymentType && (h("div", { class: 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" }))), (job.employmentType?.length
+            ? job.employmentType
+            : ['—']).map((type) => (h("span", { key: type, class: "results-list__item-employment-type--label" }, type))))), (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" })))))));
+    }
+    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: 'c2e9c9146a24f0869cbd75588b2718c94f62bbbc', class: `jobs-list-root ${this.rootClass}`.trim() }, h("div", { key: 'b2f3dffe7e17797b378bd648f54e46bb31e2d374', class: "results-container" }, h("div", { key: '4733870b035ec307b6e691f1d62ed8568e93fd1f', class: loading ? 'loader' : 'loader hide', "aria-hidden": !loading }), totalJob > 0 && (h("div", { key: 'a9438f079041e0121fafdcb42089f27482475491', class: "card" }, h("ul", { key: '3bd7dcc64f46aec24945a25df7345766606a51bd', class: "results-list front" }, jobsArray.map((job, index) => this.renderJobItem(job, index))))), showNoResults && (h("div", { key: '1996476568c745e0ada31b47bb1a1be2efaf6917', class: "share-jobs__no-results" }, h("h2", { key: '8d2a79881428d89d783b05f26d06abbef94f5c2e' }, this.noResultsLine1), h("h3", { key: '855704ea47b06a701c0e59a8bb43fb405ad3bb96' }, this.noResultsLine2))), showSuggestionsBlock && (h("div", { key: '74da6e8243423dc9770f4dc67f46f5627c352349', class: "card primary-color" }, h("h4", { key: 'd3fb2ef03a656331f97afe3692b05bbe064ed124', class: "result-suggestions-title" }, this.clearResultSuggestionsTitleText, ":"), h("ul", { key: '63914647653930e6c686a38d779af20e7e5c17d5', class: "results-list front" }, h("li", { key: '82063c023701d0c42ca2787f382d42a80f569b6a', class: "result-suggestions-line" }, this.clearResultSuggestionsLine1), h("li", { key: '7645d7a7435f76854b8eeb0d693a883fc341764e', class: "result-suggestions-line" }, this.clearResultSuggestionsLine2), h("li", { key: '060675d017137e8b23342c92efadc769e2bae1c2', class: "result-suggestions-line" }, this.clearResultSuggestionsLine3), this.clearResultSuggestionsLine4 && (h("li", { key: '0f6ef00a4f6267dc9ad2441e16f02c82b0994d03', class: "result-suggestions-line" }, this.clearResultSuggestionsLine4))))))));
+    }
+    static get is() { return "jobs-list-only-ui"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jobs-list-only-ui.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jobs-list-only-ui.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "mockData": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When \"true\", use built-in mock data (for local/dev/docs). Otherwise use `jobs` from API/parent."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "mock-data",
+                "defaultValue": "false"
+            },
+            "jobs": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "JobSummary[] | string",
+                    "resolved": "JobSummary[] | string",
+                    "references": {
+                        "JobSummary": {
+                            "location": "import",
+                            "path": "../../types/jobs-list",
+                            "id": "src/types/jobs-list.ts::JobSummary",
+                            "referenceLocation": "JobSummary"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "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\"."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "jobs",
+                "defaultValue": "[]"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show loading spinner. Ignored when mock-data=\"true\" (mock shows data immediately)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "loading",
+                "defaultValue": "false"
+            },
+            "totalJob": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Total job count (for screen readers / schema)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "total-job",
+                "defaultValue": "0"
+            },
+            "noResultsLine1": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-line-1",
+                "defaultValue": "defaultNoResultsLine1"
+            },
+            "noResultsLine2": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "no-results-line-2",
+                "defaultValue": "defaultNoResultsLine2"
+            },
+            "applyButtonText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "apply-button-text",
+                "defaultValue": "'Apply Now'"
+            },
+            "showBrand": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-brand",
+                "defaultValue": "true"
+            },
+            "showReference": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-reference",
+                "defaultValue": "false"
+            },
+            "showEmploymentType": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-employment-type",
+                "defaultValue": "true"
+            },
+            "streetFormat": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "street-format",
+                "defaultValue": "'{street}, {city_state_abbr}'"
+            },
+            "multiLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "multi-location-text",
+                "defaultValue": "'More locations'"
+            },
+            "remoteLocationText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "remote-location-text",
+                "defaultValue": "'Remote'"
+            },
+            "enableKilometers": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "enable-kilometers",
+                "defaultValue": "false"
+            },
+            "rootClass": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Extra CSS class on the root element (avoid prop name \"class\" / \"classname\" reserved)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "root-class",
+                "defaultValue": "''"
+            },
+            "showSuggestions": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "show-suggestions",
+                "defaultValue": "false"
+            },
+            "clearResultSuggestionsTitleText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-result-suggestions-title-text",
+                "defaultValue": "'Suggestions'"
+            },
+            "clearResultSuggestionsLine1": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-result-suggestions-line-1",
+                "defaultValue": "'Try different keywords'"
+            },
+            "clearResultSuggestionsLine2": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-result-suggestions-line-2",
+                "defaultValue": "'Make sure everything is spelled correctly'"
+            },
+            "clearResultSuggestionsLine3": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-result-suggestions-line-3",
+                "defaultValue": "'Try other locations'"
+            },
+            "clearResultSuggestionsLine4": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "clear-result-suggestions-line-4",
+                "defaultValue": "''"
+            }
+        };
+    }
+}

package/dist/collection/index.js

@@ -0,0 +1,10 @@
+/**
+ * @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';

package/dist/collection/mock/jobs-list-only.mock.js

@@ -0,0 +1,60 @@
+/**
+ * Mock jobs for local development and docs.
+ * Use in www or static HTML: jobs='...' (JSON.stringify(mockJobs)).
+ */
+export 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'],
+    },
+];
+export function getMockJobsJson() {
+    return JSON.stringify(mockJobsListOnly);
+}

package/dist/collection/types/jobs-list.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/utils/utils.js

@@ -0,0 +1,3 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}

package/dist/components/fast-button.js

@@ -0,0 +1 @@
+import{t,p as o,H as s,c as n,h as e}from"./p-Cw2MJ5l2.js";const c=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.__attachShadow(),this.buttonClick=n(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 e("button",{key:"b373f44e11e651d0371ce3cade98b4650ccdd727",type:this.type,class:{"custom-button":!0,["custom-button--"+this.variant]:!0,"custom-button--disabled":this.disabled},disabled:this.disabled,onClick:this.handleClick},e("slot",{key:"2a046bc70af051c04f4549def87dac7044b41e04"}))}static get style(){return":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}"}},[769,"fast-button",{variant:[1],type:[1],disabled:[4]}]);function u(){"undefined"!=typeof customElements&&["fast-button"].forEach((o=>{"fast-button"===o&&(customElements.get(t(o))||customElements.define(t(o),c))}))}u();const r=c,a=u;export{r as FastButton,a as defineCustomElement}