@flarehr/apollo-super-selection 1.3.23524 → 1.3.23680

package/dist/lib/collection/components/super-selection-app/misc/button.js

@@ -0,0 +1,195 @@
+import { Component, h, Prop, State } from '@stencil/core';
+var PromiseButtonState;
+(function (PromiseButtonState) {
+  PromiseButtonState[PromiseButtonState["Available"] = 0] = "Available";
+  PromiseButtonState[PromiseButtonState["Pending"] = 1] = "Pending";
+  PromiseButtonState[PromiseButtonState["Error"] = 2] = "Error";
+})(PromiseButtonState || (PromiseButtonState = {}));
+export class Button {
+  constructor() {
+    this.fillWidth = false;
+    this.fillWidthOnMobile = false;
+    this.disabled = false;
+    this.variant = 'primary';
+    this.size = 'base';
+    this.promiseFn = () => Promise.resolve();
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    this.state = PromiseButtonState.Available;
+  }
+  render() {
+    const sizeCss = {
+      xs: 'px-2.5 py-1.5 text-xs',
+      base: 'px-4 py-2 text-base',
+      xl: 'px-6 py-3 text-base'
+    };
+    return (h("button", { "data-testid": this.testid, class: {
+        [sizeCss[this.size]]: true,
+        'inline-flex items-center justify-center border font-medium': true,
+        'rounded-md shadow-sm focus:outline-none focus:ring-2': true,
+        'focus:ring-offset-2 focus:ring-primary-focus pointer-events-auto': true,
+        'disabled:pointer-events-none disabled:border-gray-300 disabled:bg-gray-100 disabled:text-gray-400': true,
+        'border-transparent text-white bg-primary-base hover:bg-primary-hover': this.variant === 'primary',
+        'border-gray-300 text-gray-700 bg-white hover:bg-gray-50': this.variant === 'secondary',
+        'border-transparent bg-primary-light hover:bg-primary-base text-primary-dark hover:text-white': this.variant === 'light',
+        'w-full': this.fillWidth || this.fillWidthOnMobile,
+        'sm:w-auto': this.fillWidthOnMobile
+      }, disabled: this.disabled, onClick: () => this.clicked() },
+      this.state === PromiseButtonState.Pending && (h("sss-loading-indicator", { theme: this.variant === 'primary' ? 'light' : 'primary', size: 16 })),
+      h("div", { class: { hidden: this.state === PromiseButtonState.Pending } },
+        h("slot", null))));
+  }
+  async clicked() {
+    if (!this.promiseFn || this.state === PromiseButtonState.Pending)
+      return;
+    try {
+      this.state = PromiseButtonState.Pending;
+      await this.promiseFn();
+      this.state = PromiseButtonState.Available;
+    }
+    catch (err) {
+      this.state = PromiseButtonState.Error;
+      throw err;
+    }
+  }
+  static get is() { return "sss-button"; }
+  static get properties() { return {
+    "testid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "testid",
+      "reflect": false
+    },
+    "fillWidth": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fill-width",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "fillWidthOnMobile": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fill-width-on-mobile",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonVariant",
+        "resolved": "\"light\" | \"primary\" | \"secondary\"",
+        "references": {
+          "ButtonVariant": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ButtonSize",
+        "resolved": "\"base\" | \"xl\" | \"xs\"",
+        "references": {
+          "ButtonSize": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'base'"
+    },
+    "promiseFn": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "() => Promise<unknown>",
+        "resolved": "(() => Promise<unknown>) | undefined",
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "() => Promise.resolve()"
+    }
+  }; }
+  static get states() { return {
+    "state": {}
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/misc/dropdown-async.css

@@ -0,0 +1,7 @@
+html {
+  scroll-behavior: smooth;
+}
+
+.sss-dropdown-menu {
+  max-height: min(20rem, 50vh);
+}

package/dist/lib/collection/components/super-selection-app/misc/dropdown-async.js

@@ -0,0 +1,390 @@
+import { Component, Event, h, Host, Listen, Prop, State } from '@stencil/core';
+import { fromEvent } from 'rxjs';
+import { debounceTime, distinctUntilChanged, filter, map, mergeMap, tap } from 'rxjs/operators';
+import { assertExhaustive } from '../../../utils';
+const DEFAULT_SEARCH_LENGTH = 3;
+export class SelectInputAsync {
+  constructor() {
+    this.required = false;
+    this.disabled = false;
+    this.minSearchStringLength = DEFAULT_SEARCH_LENGTH;
+    this.isMouseOver = false;
+    this.searchState = 'pristine';
+    this.inputValue = '';
+    this.isDropdownVisible = false;
+    this.filteredOptions = [];
+    this.shouldExecuteSearch = (searchQuery) => {
+      var _a;
+      return (this.isDropdownVisible &&
+        (searchQuery === null || searchQuery === void 0 ? void 0 : searchQuery.length) >= this.minSearchStringLength &&
+        ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.label) !== searchQuery);
+    };
+    this.onBeginSearch = (searchQuery) => {
+      this.inputValue = searchQuery;
+      this.searchState = 'in progress';
+    };
+    this.onCompleteSearch = (result) => {
+      this.highlightedOptionIndex = undefined;
+      switch (result.kind) {
+        case 'too-many-results':
+          this.searchState = 'too many results';
+          this.filteredOptions = [];
+          break;
+        case 'success':
+          this.searchState = 'done';
+          this.filteredOptions = result.value;
+          break;
+        default:
+          assertExhaustive(result);
+          this.searchState = 'done';
+          this.filteredOptions = [];
+          break;
+      }
+    };
+    this.renderFilteredResults = () => {
+      if (this.searchState === 'pristine') {
+        return (h("span", { class: "cursor-pointer text-gray-500 py-1.5 pl-4" }, "Start typing to find the results"));
+      }
+      if (this.searchState === 'in progress') {
+        return h("span", { class: "cursor-pointer text-gray-500 py-1.5 pl-4" }, "Searching...");
+      }
+      if (this.searchState === 'too many results') {
+        return (h("span", { class: "cursor-pointer text-gray-500 py-1.5 pl-4" }, "Keep typing to narrow down your search."));
+      }
+      if (this.filteredOptions.length === 0) {
+        return (h("span", { class: "cursor-pointer text-gray-500 py-1.5 pl-4" }, "No items match your search"));
+      }
+      return this.filteredOptions.map((option, index) => (h("div", { class: {
+          'cursor-pointer text-wrap hover:bg-primary-base py-1.5 pl-4': true,
+          'bg-primary-base': this.isOptionSelected(option)
+        }, onClick: (_event) => {
+          this.highlightedOptionIndex = index;
+          this.toggleDropdown(false);
+          this.selectOption(option);
+        } }, option.label)));
+    };
+    this.resetInput = () => {
+      var _a, _b;
+      this.inputValue = (_b = (_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+    };
+    this.toggleDropdown = (newState) => {
+      this.isDropdownVisible = newState;
+    };
+    this.processKeyboardNavigation = (event) => {
+      const ENTER_KEY = 'Enter';
+      const DOWN_KEY = 'ArrowDown';
+      const UP_KEY = 'ArrowUp';
+      const ESC_KEY = 'Escape';
+      switch (event.key) {
+        case DOWN_KEY:
+          this.toggleDropdown(true);
+          this.highlightItem('Next');
+          return true;
+        case UP_KEY:
+          this.highlightItem('Prev');
+          return true;
+        case ENTER_KEY:
+          if (this.highlightedOptionIndex !== undefined) {
+            this.toggleDropdown(false);
+            this.selectOption(this.filteredOptions[this.highlightedOptionIndex]);
+          }
+          return true;
+        case ESC_KEY:
+          this.inputElement.blur();
+          return true;
+      }
+      return false;
+    };
+    this.highlightItem = (direction) => {
+      const step = direction === 'Next' ? 1 : -1;
+      if (this.filteredOptions.length === 0) {
+        return;
+      }
+      this.highlightedOptionIndex =
+        this.highlightedOptionIndex === undefined
+          ? 0
+          : Math.min(Math.max(0, this.highlightedOptionIndex + step), this.filteredOptions.length - 1);
+      if (this.highlightedOptionIndex !== undefined)
+        this.selectOption(this.filteredOptions[this.highlightedOptionIndex]);
+    };
+    this.selectOption = (option) => {
+      this.selectedOption = option;
+      this.inputValue = option.label;
+      this.valueChanged.emit(option);
+    };
+    this.isOptionSelected = (option) => {
+      var _a;
+      return ((_a = this.selectedOption) === null || _a === void 0 ? void 0 : _a.label) === option.label;
+    };
+  }
+  componentWillLoad() {
+    this.selectedOption = this.value;
+  }
+  componentDidLoad() {
+    this.searchResultsSubscription = fromEvent(this.inputElement, 'keyup')
+      .pipe(debounceTime(500), map((_) => this.inputElement.value), distinctUntilChanged(), filter(this.shouldExecuteSearch), tap(this.onBeginSearch), mergeMap(this._searchFunction), tap(this.onCompleteSearch))
+      .subscribe();
+    this.resetInput();
+  }
+  disconnectedCallback() {
+    this.searchResultsSubscription.unsubscribe();
+  }
+  handleFocus() {
+    this.toggleDropdown(true);
+  }
+  handleBlur() {
+    if (this.isMouseOver) {
+      return;
+    }
+    this.toggleDropdown(false);
+    this.resetInput();
+  }
+  handleKeyDown(event) {
+    if (this.processKeyboardNavigation(event)) {
+      event.preventDefault();
+    }
+  }
+  render() {
+    var _a;
+    return (h(Host, null,
+      h("div", { class: "relative" },
+        h("input", { "data-testid": this.testId, type: "text", class: {
+            'shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-base sm:text-sm border-gray-300 rounded-md': true,
+            'invalid:border-red-300 invalid:text-red-900 invalid:placeholder-red-300 invalid:focus:ring-red-500 invalid:focus:border-red-500': this
+              .showValidationErrors
+          }, placeholder: this.placeholder, required: this.required, disabled: this.disabled, value: this.inputValue, ref: (el) => (this.inputElement = el) }),
+        h("div", { class: {
+            'invalid-feedback mt-2 text-sm text-red-600': true,
+            hidden: !this.isDropdownVisible
+          } }, (_a = this.requiredValidationMessage) !== null && _a !== void 0 ? _a : 'Required.'),
+        h("div", { class: {
+            'sss-dropdown-menu absolute shadow rounded-md border mt-0.5 w-full overflow-auto bg-white z-50 py-2 text-sm': true,
+            hidden: !this.isDropdownVisible
+          }, onMouseEnter: (_event) => (this.isMouseOver = true), onMouseLeave: (_event) => (this.isMouseOver = false) }, this.renderFilteredResults()))));
+  }
+  get _searchFunction() {
+    if (this.searchFunction === undefined) {
+      throw new Error("Can't render <sss-dropdown-async/> component with no searchFunction");
+    }
+    return this.searchFunction;
+  }
+  static get is() { return "sss-dropdown-async"; }
+  static get originalStyleUrls() { return {
+    "$": ["dropdown-async.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["dropdown-async.css"]
+  }; }
+  static get properties() { return {
+    "testId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "test-id",
+      "reflect": false
+    },
+    "placeholder": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "placeholder",
+      "reflect": false
+    },
+    "searchFunction": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "(query: string) => Promise<SearchResult<unknown>>",
+        "resolved": "((query: string) => Promise<SearchResult<unknown>>) | undefined",
+        "references": {
+          "Promise": {
+            "location": "global"
+          },
+          "SearchResult": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "value": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SelectInputOption<unknown>",
+        "resolved": "undefined | { label: string; value: unknown; }",
+        "references": {
+          "SelectInputOption": {
+            "location": "local"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    },
+    "required": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "requiredValidationMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "required-validation-message",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "minSearchStringLength": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "min-search-string-length",
+      "reflect": false,
+      "defaultValue": "DEFAULT_SEARCH_LENGTH"
+    },
+    "showValidationErrors": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "show-validation-errors",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "searchState": {},
+    "inputValue": {},
+    "isDropdownVisible": {},
+    "filteredOptions": {},
+    "highlightedOptionIndex": {},
+    "selectedOption": {}
+  }; }
+  static get events() { return [{
+      "method": "valueChanged",
+      "name": "valueChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "SelectInputOption<unknown>",
+        "resolved": "{ label: string; value: unknown; }",
+        "references": {
+          "SelectInputOption": {
+            "location": "local"
+          }
+        }
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "focus",
+      "method": "handleFocus",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "blur",
+      "method": "handleBlur",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }, {
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
+}

package/dist/lib/collection/components/super-selection-app/misc/loading-indicator.js

@@ -0,0 +1,52 @@
+import { Component, h, Prop } from '@stencil/core';
+export class LoadingIndicator {
+  constructor() {
+    this.theme = 'primary';
+    this.size = 48;
+  }
+  render() {
+    return (h("div", { class: "inline-block animate-spin" },
+      h("svg", { width: this.size, height: this.size, viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+        h("path", { d: "M16 8C16 12.4183 12.4183 16 8 16C3.58172 16 0 12.4183 0 8C0 3.58172 3.58172 0 8 0C12.4183 0 16 3.58172 16 8ZM1.99743 8C1.99743 11.3151 4.68487 14.0026 8 14.0026C11.3151 14.0026 14.0026 11.3151 14.0026 8C14.0026 4.68487 11.3151 1.99743 8 1.99743C4.68487 1.99743 1.99743 4.68487 1.99743 8Z", fill: "white", "fill-opacity": "0.3" }),
+        h("path", { d: "M8 1C8 0.447715 8.44943 -0.00643769 8.99741 0.0624193C9.70527 0.151368 10.3996 0.334798 11.0615 0.608964C12.0321 1.011 12.914 1.60028 13.6569 2.34315C14.3997 3.08602 14.989 3.96793 15.391 4.93853C15.6652 5.60043 15.8486 6.29473 15.9376 7.0026C16.0064 7.55057 15.5523 8 15 8C14.4477 8 14.0085 7.54925 13.9169 7.00462C13.842 6.55939 13.7169 6.12298 13.5433 5.7039C13.2417 4.97595 12.7998 4.31451 12.2426 3.75736C11.6855 3.20021 11.0241 2.75825 10.2961 2.45672C9.87702 2.28313 9.44061 2.15804 8.99538 2.08314C8.45075 1.99152 8 1.55228 8 1Z", class: this.theme === 'primary' ? 'fill-primary-base' : 'fill-white' }))));
+  }
+  static get is() { return "sss-loading-indicator"; }
+  static get properties() { return {
+    "theme": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "'primary' | 'light'",
+        "resolved": "\"light\" | \"primary\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "'primary'"
+    },
+    "size": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "48"
+    }
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/prefill-fund/prefill-common.js

@@ -0,0 +1,22 @@
+import { h } from '@stencil/core';
+export function isNullOrWhitespace(value) {
+  return value == null || value.trim() === '';
+}
+export const DisabledField = (name, testId, value) => {
+  return (h("div", { class: "mt-3" },
+    h("label", { class: "text-sm font-medium text-gray-700" }, name),
+    h("div", { "data-testid": testId, class: "mt-1 shadow-sm px-3 py-2 rounded-md border border-gray-300 bg-gray-50 text-gray-500 text-base sm:text-sm" }, value)));
+};
+export const Header = () => {
+  return (h("div", null,
+    h("div", { class: "text-2xl sm:text-3xl font-bold text-center" }, "Your super nomination"),
+    h("div", { class: "sm:text-lg text-gray-600 mt-3 sm:mt-4 max-w-800 text-center leading-7" }, "Review or update the below super fund nomination details provided by your employer.")));
+};
+export class Style {
+  static Input(isValidated) {
+    return {
+      'relative shadow-sm focus:ring-primary-focus focus:border-primary-base block w-full text-base sm:text-sm border-gray-300 rounded-md focus:z-10': true,
+      'invalid:border-red-300 invalid:text-red-900 invalid:placeholder-red-300 invalid:focus:ring-red-500 invalid:focus:border-red-500': isValidated
+    };
+  }
+}