@flarehr/apollo-super-selection 3.17.52781 → 3.18.52782

package/dist/lib/esm/fl-style-guide.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, h, H as Host } from './index-0496d1af.js';
+import { g as isArray, O as Observable, l as isScheduler, k as async, d as of, f as delay } from './delay-c0555599.js';
+
+function isNumeric(val) {
+    return !isArray(val) && (val - parseFloat(val) + 1) >= 0;
+}
+
+function timer(dueTime = 0, periodOrScheduler, scheduler) {
+    let period = -1;
+    if (isNumeric(periodOrScheduler)) {
+        period = Number(periodOrScheduler) < 1 && 1 || Number(periodOrScheduler);
+    }
+    else if (isScheduler(periodOrScheduler)) {
+        scheduler = periodOrScheduler;
+    }
+    if (!isScheduler(scheduler)) {
+        scheduler = async;
+    }
+    return new Observable(subscriber => {
+        const due = isNumeric(dueTime)
+            ? dueTime
+            : (+dueTime - scheduler.now());
+        return scheduler.schedule(dispatch, due, {
+            index: 0, period, subscriber
+        });
+    });
+}
+function dispatch(state) {
+    const { index, period, subscriber } = state;
+    subscriber.next(index);
+    if (subscriber.closed) {
+        return;
+    }
+    else if (period === -1) {
+        return subscriber.complete();
+    }
+    state.index = index + 1;
+    this.schedule(state, period);
+}
+
+const getLocalResourceUrl = (relativePath) => {
+    const resourcesUrlElement = document.querySelector('script[data-fl-namespace="design-system"][data-fl-resources-url]');
+    const resourcesUrl = (resourcesUrlElement && resourcesUrlElement.getAttribute('data-fl-resources-url')) || '';
+    try {
+        return new URL(relativePath, resourcesUrl).href;
+    }
+    catch (error) {
+        return `${resourcesUrl}/${relativePath}`;
+    }
+};
+
+const styleGuideCss = "";
+
+const FlareStyleGuide = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.data = [
+      'Apple',
+      'Application',
+      'Appetizer',
+      'Anna',
+      'Banana',
+      'Archery',
+      'Apogee'
+    ].map((v) => ({
+      label: v,
+      value: v
+    }));
+    this.searchFunction = (query) => {
+      const results = this.data.filter((item) => item.label.toLowerCase().includes(query.toLowerCase()));
+      return of(results).pipe(delay(1000)).toPromise();
+    };
+  }
+  render() {
+    return (h(Host, null, h("link", { rel: "stylesheet", href: getLocalResourceUrl('beacon.css'), media: "all" }), this.themeCssUrl && h("link", { rel: "stylesheet", href: this.themeCssUrl, media: "all" }), h("div", { class: "container m-3 p-5 shadow" }, h("h1", null, "Beacon"), h("h5", null, "Flare-Apollo Component Library \uD83D\uDE80"), h("div", { class: "row" }, h("div", { class: "col" }, h("ul", { class: "list-group" }, h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Typography"), h("div", { class: "col" }, h("h1", null, "h1 Heading"), h("h2", null, "h2 Sub-heading"), h("h3", null, "h3 Sub-heading"), h("h4", null, "h4 Sub-heading"), h("p", null, "Paragraph"), h("div", { class: "d-flex flex-column" }, h("strong", null, "Strong"), h("small", null, "small"), h("a", { href: "https://www.flarehr.com", target: "_blank" }, "Weblink")))), h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Buttons"), h("div", { class: "col-3 my-2" }, this.renderButtonVariants())), h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Loading indicator"), h("div", { class: "col" }, h("fl-loading-indicator", null), h("fl-loading-indicator", { theme: "dark" }))), h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Dropdown"), h("div", { class: "col-4" }, h("fl-dropdown", { options: this.data }))), h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Async Dropdown"), h("div", { class: "col-4" }, h("fl-dropdown-async", { "min-search-string-length": "2", searchFunction: this.searchFunction }))), h("li", { class: "list-group-item" }, h("small", { class: "text-muted" }, "Promise Button"), h("div", { class: "col-3 my-2" }, h("fl-promise-button", { isBlockElement: true, promiseFn: () => this.takeTime() }, "Promise Button block")), h("div", { class: "col-3 my-2" }, h("fl-promise-button", { promiseFn: () => this.takeTime() }, "Promise Button")), h("div", { class: "col-3 my-2" }, h("fl-promise-button", { variant: "secondary", promiseFn: () => this.takeTime() }, "Secondary Promise Button")))))))));
+  }
+  renderButtonVariants() {
+    return (h("ul", { class: "list-group" }, h("li", { class: "list-group-item" }, h("i", null, "Primary"), h("fl-button", { isBlockElement: true }, "Button")), h("li", { class: "list-group-item" }, h("i", null, "Primary, disabled"), h("fl-button", { isBlockElement: true, disabled: true }, "Button")), h("li", { class: "list-group-item" }, h("i", null, "Secondary"), h("fl-button", { isBlockElement: true, variant: "secondary" }, "Button")), h("li", { class: "list-group-item" }, h("i", null, "Secondary, disabled"), h("fl-button", { isBlockElement: true, disabled: true, variant: "secondary" }, "Button"))));
+  }
+  async takeTime() {
+    return timer(Math.random() * 2000 + 2000).toPromise();
+  }
+};
+FlareStyleGuide.style = styleGuideCss;
+
+export { FlareStyleGuide as fl_style_guide };