@flarehr/apollo-super-selection 3.17.52781 → 3.21.53721

package/dist/lib/collection/components/super-selection-app/funds/slate-super/slate-join-page.js

@@ -0,0 +1,35 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+import slateIFrameBuilder from './services/slate-iframe-builder';
+export class SlateJoinPage {
+  componentDidLoad() {
+    slateIFrameBuilder.build(this.iframeElement, this.history);
+  }
+  render() {
+    return (h(Host, { class: "d-flex flex-fill" },
+      h("iframe", { width: "100%", height: window.innerHeight, style: { "border": "none" }, ref: (el) => (this.iframeElement = el) })));
+  }
+  ;
+  static get is() { return "sss-slate-join-page"; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/funds/slate-super/slate-standard-choice-page.js

@@ -0,0 +1,67 @@
+import { Component, h, Host, Prop, State } from '@stencil/core';
+import navigationService from '../../services/navigation.service';
+import { SuperSelectionAppRoutes } from '../../services/super-selection-app.routes';
+import superSelectionAppService from '../../services/super-selection-app.service';
+import slateState from '../slate-super/slate-fund.store';
+import slateFundState from '../slate-super/slate-fund.store';
+import slateChoiceApi from './api/slate-choice.api';
+export class SlateStandardChoicePage {
+  render() {
+    return (h(Host, { class: "d-flex flex-fill" },
+      h("div", { class: "container" },
+        h("div", { class: "row justify-content-center" },
+          h("div", { class: "col col-sm-10 col-md-7" },
+            h("sss-slatesuper-header", null),
+            h("div", null,
+              h("form", { noValidate: true, onSubmit: (ev) => ev.preventDefault(), class: {
+                  'was-validated': this.formState === 'validated'
+                }, ref: (el) => (this.formElement = el) },
+                h("sss-standard-choice-form", { onStandardChoiceFormSignatureUpdated: (event) => {
+                    slateFundState.slateFundForm = Object.assign(Object.assign({}, slateFundState.slateFundForm), event.detail);
+                  } })),
+              h("div", { class: "d-flex mt-4" },
+                h("div", { class: "flex-grow-1 w-50" },
+                  h("div", { class: "mr-2" },
+                    h("stencil-route-link", { url: "/" },
+                      h("fl-button", { isBlockElement: true, variant: "secondary" },
+                        h("span", null, "Back"))))),
+                h("div", { class: "flex-grow-1 w-50" },
+                  h("div", { class: "ml-2" },
+                    h("fl-promise-button", { isBlockElement: true, promiseFn: () => this.handleSubmitForm() },
+                      h("span", null, "Submit")))))))))));
+  }
+  async handleSubmitForm() {
+    this.formState = 'validated';
+    if (this.formElement.checkValidity()) {
+      await slateChoiceApi.submitSlateChoiceAsync(slateState.slateFundForm);
+      superSelectionAppService.markSuperSelectionAsSubmitted();
+      navigationService.navigateInternally(this.history, SuperSelectionAppRoutes.Success);
+    }
+  }
+  static get is() { return "sss-slate-standard-choice-page"; }
+  static get properties() { return {
+    "history": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "RouterHistory",
+        "resolved": "RouterHistory",
+        "references": {
+          "RouterHistory": {
+            "location": "import",
+            "path": "@stencil/router"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "formState": {}
+  }; }
+}

package/dist/lib/collection/components/super-selection-app/funds/slate-super/slatesuper-header.js

@@ -0,0 +1,19 @@
+import { Component, getAssetPath, h } from '@stencil/core';
+export class SlatesuperHeader {
+  render() {
+    return (h("div", { class: "d-flex" },
+      h("div", null,
+        h("img", { class: "ss-choice-logo img-thumbnail", alt: "Simple Financial Choices Pty Ltd", src: getAssetPath(`assets/logo-slate.png`) })),
+      h("div", { class: "d-flex flex-column ml-3 align-items-left" },
+        h("p", { class: "confirm-title font-weight-bold mb-0" }, "You\u2019re almost there!"),
+        h("p", { class: "confirm-text mb-0" }, "To proceed type your name below which authorises the signing of the Standard Choice form confirming your super selection."))));
+  }
+  static get is() { return "sss-slatesuper-header"; }
+  static get originalStyleUrls() { return {
+    "$": ["slatesuper-header.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["slatesuper-header.css"]
+  }; }
+  static get assetsDirs() { return ["assets"]; }
+}

package/dist/lib/collection/components/super-selection-app/notifications-section/notifications-section.js

@@ -0,0 +1,25 @@
+import { Component, h, Host } from '@stencil/core';
+import notificationsService from '../services/notifications.service';
+export class NotificationsSection {
+  disconnectedCallback() {
+    notificationsService.clearNotifications();
+  }
+  render() {
+    const { items } = notificationsService.state;
+    if (items.length <= 0)
+      return h(Host, null);
+    const firstAlert = items[0];
+    const className = `alert alert-${firstAlert.type}`;
+    return (h("div", { class: className, role: "alert" },
+      h("div", { class: "d-flex" },
+        h("p", { class: "mb-0 flex-grow-1" },
+          h("strong", null, items[0].details.title)),
+        h("button", { onClick: this.handleClose, type: "button", class: "close pb-1", "aria-label": "Close" },
+          h("span", { "aria-hidden": "true" }, "\u00D7"))),
+      h("p", { class: "mb-0 mt-1" }, items[0].details.description)));
+  }
+  handleClose() {
+    notificationsService.closeCurrent();
+  }
+  static get is() { return "sss-notifications-section"; }
+}

package/dist/lib/collection/components/super-selection-app/services/australian-fund-lookup.service.js

@@ -0,0 +1,22 @@
+import { none, some } from 'fp-ts/lib/Option';
+import superSelectionApi from '../api/super-selection.api';
+export class AustralianFundLookupService {
+  searchFundsAsync(searchString, maxRecordCount) {
+    return superSelectionApi.getAustralianFundsAsync({
+      type: 'partialMatch',
+      searchString,
+      maxRecordCount
+    });
+  }
+  async getFundByUsiAsync(usi) {
+    const results = await superSelectionApi.getAustralianFundsAsync({
+      type: 'usiMatch',
+      usi
+    });
+    if (results.length === 1) {
+      return some(results[0]);
+    }
+    return none;
+  }
+}
+export default new AustralianFundLookupService();

package/dist/lib/collection/components/super-selection-app/services/event-tracking.service.js

@@ -0,0 +1,71 @@
+import { EventTrackingApi } from '../api/event-tracking.api';
+export class EventTrackingService {
+  constructor() {
+    this.eventTrackingApi = EventTrackingApi.Instance;
+  }
+  static get Instance() {
+    return this.instance || (this.instance = new this());
+  }
+  async TrackFinancialProductViewedAsync(detail) {
+    return this.trackEventAsync({
+      FinancialProductViewed: detail
+    });
+  }
+  async TrackSuperFundPdsViewedAsync(detail) {
+    return this.trackEventAsync({
+      SuperFundPdsViewed: detail
+    });
+  }
+  async TrackFinancialProductAcceptedAsync(detail) {
+    return this.trackEventAsync({
+      FinancialProductAccepted: detail
+    });
+  }
+  async TrackFinancialProductRejectedAsync(detail) {
+    return this.trackEventAsync({
+      FinancialProductRejected: detail
+    });
+  }
+  async TrackSuperFundPrivacyConfirmationAcceptedAsync(detail) {
+    return this.trackEventAsync({
+      SuperFundPrivacyConfirmationAccepted: detail
+    });
+  }
+  async TrackPromotedSuperFundDetailViewedAsync(detail) {
+    return this.trackEventAsync({
+      SuperFundDetailViewed: {
+        PromotedFund: detail
+      }
+    });
+  }
+  async TrackMyOwnSuperFundDetailViewedAsync() {
+    return this.trackEventAsync({
+      SuperFundDetailViewed: 'MyOwnFund'
+    });
+  }
+  async TrackSmsfSuperFundDetailViewedAsync() {
+    return this.trackEventAsync({
+      SuperFundDetailViewed: 'Smsf'
+    });
+  }
+  async TrackDefaultSuperFundDetailViewedAsync(detail) {
+    return this.trackEventAsync({
+      SuperFundDetailViewed: {
+        DefaultFund: detail
+      }
+    });
+  }
+  async TrackSuperFundPanelViewedAsync(detail) {
+    return this.trackEventAsync({
+      SuperFundPanelViewed: detail
+    });
+  }
+  async trackEventAsync(event) {
+    try {
+      await this.eventTrackingApi.PostAnalyticsEventAsync({ event });
+    }
+    catch (_a) {
+      return;
+    }
+  }
+}

package/dist/lib/collection/components/super-selection-app/services/navigation.service.js

@@ -0,0 +1,22 @@
+import iframe from '../../../utils/iframe';
+import superSelectionAppService from './super-selection-app.service';
+class NavigationService {
+  navigateInternally(history, route) {
+    const path = `${this.appBaseUrl}${this.toRouteWithLeadingSlash(route)}`;
+    iframe.navigation(path);
+    history.push(path);
+  }
+  toExternalUrl(url) {
+    const externalUrl = new URL(url);
+    externalUrl.searchParams.append('_extnav', 'true');
+    return externalUrl.href;
+  }
+  get appBaseUrl() {
+    const baseUrl = superSelectionAppService.appBaseUrl;
+    return baseUrl.replace(/\/$/, '');
+  }
+  toRouteWithLeadingSlash(route) {
+    return route.length > 0 && route[0] === '/' ? route : `/${route}`;
+  }
+}
+export default new NavigationService();

package/dist/lib/collection/components/super-selection-app/services/notifications.service.js

@@ -0,0 +1,37 @@
+import { createStore } from '@stencil/store';
+import { initialState } from './notifications.store';
+class NotificationsService {
+  constructor() {
+    const { state } = createStore(initialState);
+    this._state = state;
+  }
+  get state() {
+    return this._state;
+  }
+  closeCurrent() {
+    const items = [...this._state.items];
+    items.shift();
+    this._state.items = items;
+  }
+  clearNotifications() {
+    this._state.items = [];
+  }
+  showErrorNotification(details, priority) {
+    this.pushNotification(details, priority !== null && priority !== void 0 ? priority : 0, 'danger');
+  }
+  showInfoNotification(details, priority) {
+    this.pushNotification(details, priority !== null && priority !== void 0 ? priority : 0, 'info');
+  }
+  showWarningNotification(details, priority) {
+    this.pushNotification(details, priority !== null && priority !== void 0 ? priority : 0, 'warning');
+  }
+  showSuccessNotification(details, priority) {
+    this.pushNotification(details, priority !== null && priority !== void 0 ? priority : 0, 'success');
+  }
+  pushNotification(details, priority, type) {
+    const items = [...this._state.items];
+    items.push({ details, type, priority });
+    this._state.items = items.sort((a, b) => b.priority - a.priority);
+  }
+}
+export default new NotificationsService();

package/dist/lib/collection/components/super-selection-app/services/notifications.store.js

@@ -0,0 +1,3 @@
+export const initialState = {
+  items: []
+};

package/dist/lib/collection/components/super-selection-app/services/selected-super-choice-info.service.js

@@ -0,0 +1,53 @@
+import { isSome, none, some } from 'fp-ts/Option';
+import * as constants from '../funds/constants';
+import australianFundLookupService from './australian-fund-lookup.service';
+import superSelectionAppService from './super-selection-app.service';
+export class ChosenFundService {
+  async GetChosenFundAsync() {
+    var _a;
+    const choiceDetails = (_a = superSelectionAppService.superBuyer.superChoice) === null || _a === void 0 ? void 0 : _a.choiceDetails;
+    if (!choiceDetails)
+      return none;
+    if ('promoted' in choiceDetails) {
+      const promotedId = constants.QSuperFundId in choiceDetails.promoted
+        ? constants.QSuperFundId
+        : constants.SlateFundId in choiceDetails.promoted
+          ? constants.SlateFundId
+          : '';
+      return some({
+        isPromoted: true,
+        promotedId
+      });
+    }
+    else if ('smsf' in choiceDetails) {
+      return some({
+        isPromoted: false,
+        name: choiceDetails.smsf.fundName,
+        type: 'Self Managed Fund'
+      });
+    }
+    else if ('myOwnFund' in choiceDetails) {
+      const fundUsi = choiceDetails.myOwnFund.usi;
+      const fund = await this.getFundByUsiAsync(fundUsi);
+      return some({
+        isPromoted: false,
+        name: isSome(fund) ? fund.value.productName : fundUsi,
+        type: 'My Own Fund'
+      });
+    }
+    else if ('default' in choiceDetails) {
+      const defaultUsi = choiceDetails.default.usi;
+      const defaultFund = await this.getFundByUsiAsync(defaultUsi);
+      return some({
+        isPromoted: false,
+        name: isSome(defaultFund) ? defaultFund.value.productName : defaultUsi,
+        type: 'Default Fund'
+      });
+    }
+    return none;
+  }
+  getFundByUsiAsync(usi) {
+    return australianFundLookupService.getFundByUsiAsync(usi);
+  }
+}
+export default new ChosenFundService();

package/dist/lib/collection/components/super-selection-app/services/super-selection-app.routes.js

@@ -0,0 +1,46 @@
+import { h } from '@stencil/core';
+export var SuperSelectionAppRoutes;
+(function (SuperSelectionAppRoutes) {
+  SuperSelectionAppRoutes["ChoicePage"] = "/";
+  SuperSelectionAppRoutes["SlateJoin"] = "/slate/join/";
+  SuperSelectionAppRoutes["SlateStandardChoice"] = "/slate/standard-choice/";
+  SuperSelectionAppRoutes["QSuperOptIn"] = "/qsuper/insurance/opt-in/";
+  SuperSelectionAppRoutes["QSuperQuestion1"] = "/qsuper/insurance/question1/";
+  SuperSelectionAppRoutes["QSuperQuestion2"] = "/qsuper/insurance/question2/";
+  SuperSelectionAppRoutes["QSuperQuestion3"] = "/qsuper/insurance/question3/";
+  SuperSelectionAppRoutes["QSuperQuestion4"] = "/qsuper/insurance/question4/";
+  SuperSelectionAppRoutes["QSuperQuestion5"] = "/qsuper/insurance/question5/";
+  SuperSelectionAppRoutes["QSuperQuestion6"] = "/qsuper/insurance/question6/";
+  SuperSelectionAppRoutes["QSuperQuestion7"] = "/qsuper/insurance/question7/";
+  SuperSelectionAppRoutes["QSuperQuestion8"] = "/qsuper/insurance/question8/";
+  SuperSelectionAppRoutes["QSuperConsent"] = "/qsuper/consent/";
+  SuperSelectionAppRoutes["QSuperJoin"] = "/qsuper/join/";
+  SuperSelectionAppRoutes["PromotedFundJoin"] = "/promoted-fund/join";
+  SuperSelectionAppRoutes["PromotedFundStandardChoice"] = "/promoted-fund/standard-choice/";
+  SuperSelectionAppRoutes["MyOwnFund"] = "/super-choice/my-own-fund/";
+  SuperSelectionAppRoutes["SelfManagedFund"] = "/super-choice/smsf/";
+  SuperSelectionAppRoutes["DefaultFund"] = "/super-choice/default/";
+  SuperSelectionAppRoutes["Success"] = "/success/";
+})(SuperSelectionAppRoutes || (SuperSelectionAppRoutes = {}));
+export const superSelectionAppStencilRoutes = [
+  h("stencil-route", { exact: true, url: SuperSelectionAppRoutes.ChoicePage, component: "sss-super-choice-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.SlateJoin, component: "sss-slate-join-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.SlateStandardChoice, component: "sss-slate-standard-choice-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperOptIn, component: "sss-qsuper-insurance-opt-in" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.PromotedFundJoin, component: "sss-promoted-fund-join-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.PromotedFundStandardChoice, component: "sss-promoted-fund-standard-choice-page" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion1, component: "sss-qsuper-question-1" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion2, component: "sss-qsuper-question-2" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion3, component: "sss-qsuper-question-3" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion4, component: "sss-qsuper-question-4" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion5, component: "sss-qsuper-question-5" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion6, component: "sss-qsuper-question-6" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion7, component: "sss-qsuper-question-7" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperQuestion8, component: "sss-qsuper-question-8" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperConsent, component: "sss-qsuper-consent" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.QSuperJoin, component: "sss-qsuper-join" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.MyOwnFund, component: "sss-my-own-fund" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.SelfManagedFund, component: "sss-self-managed-fund" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.DefaultFund, component: "sss-default-fund" }),
+  h("stencil-route", { url: SuperSelectionAppRoutes.Success, component: "sss-success" })
+];

package/dist/lib/collection/components/super-selection-app/services/super-selection-app.service.js

@@ -0,0 +1,83 @@
+import { createStore } from '@stencil/store';
+import { pipe } from 'fp-ts/lib/function';
+import * as O from 'fp-ts/lib/Option';
+import jwtDecode from 'jwt-decode';
+import superSelectionApi from '../api/super-selection.api';
+import { initialState } from './super-selection.store';
+export class SuperSelectionAppService {
+  constructor() {
+    const { state, onChange } = createStore(initialState);
+    this._state = state;
+    this._onChange = onChange;
+    onChange('jwt', (jwt) => {
+      this._state.profileId = pipe(jwt, O.chain((jwtValue) => O.fromNullable(jwtDecode(jwtValue).sub)));
+    });
+  }
+  get state() {
+    return this._state;
+  }
+  get onChange() {
+    return this._onChange;
+  }
+  get superBuyer() {
+    if (O.isNone(this._state.superBuyer)) {
+      throw Error('User information is not set');
+    }
+    return this._state.superBuyer.value;
+  }
+  get apiBaseUrl() {
+    if (O.isNone(this._state.apiBaseUrl)) {
+      throw Error('API base URL is not set');
+    }
+    return this._state.apiBaseUrl.value;
+  }
+  get appBaseUrl() {
+    if (O.isNone(this._state.appBaseUrl)) {
+      throw Error('App base URL is not set');
+    }
+    return this._state.appBaseUrl.value;
+  }
+  get promotedFunds() {
+    if (O.isNone(this._state.promotedFunds)) {
+      throw Error('Promoted Funds is not set');
+    }
+    return this._state.promotedFunds.value;
+  }
+  get profileId() {
+    if (O.isNone(this._state.profileId)) {
+      throw Error('Failed to get Profile ID from JWT');
+    }
+    return this._state.profileId.value;
+  }
+  get defaultFundUsi() {
+    return pipe(this._state.accountConfiguration, O.map((config) => O.fromNullable(config.defaultFundUsi)), O.flatten);
+  }
+  get accountIdOrDefault() {
+    return pipe(this._state.accountConfiguration, O.map((config) => config.accountId), O.getOrElse(() => ''));
+  }
+  get partnerIdOrDefault() {
+    return pipe(this._state.superBuyer, O.map((superBuyer) => superBuyer.partnerId), O.getOrElse(() => ''));
+  }
+  get jwt() {
+    if (O.isNone(this._state.jwt)) {
+      throw Error('No authentication information was found');
+    }
+    return this._state.jwt.value;
+  }
+  get showSmsfNotSupported() {
+    return pipe(this._state.superBuyer, O.map((superBuyer) => superBuyer.showSmsfNotSupported), O.getOrElse(() => false));
+  }
+  completeSuperSelectionFlow() {
+    this._state.hasSuccessPageBeenAcknowledged = true;
+  }
+  markSuperSelectionAsSubmitted() {
+    this._state.hasSuperSelectionBeenSubmitted = true;
+  }
+  async loadAppStateAsync() {
+    const appStateResponse = await superSelectionApi.getAppStateAsync();
+    this._state.accountConfiguration = O.fromNullable(appStateResponse.accountConfiguration);
+    this._state.superBuyer = O.fromNullable(appStateResponse.superBuyer);
+    this._state.promotedFunds = O.fromNullable(appStateResponse.promotedFunds);
+  }
+}
+export default new SuperSelectionAppService();

package/dist/lib/collection/components/super-selection-app/services/super-selection.store.js

@@ -0,0 +1,12 @@
+import * as O from 'fp-ts/lib/Option';
+export const initialState = {
+  apiBaseUrl: O.none,
+  appBaseUrl: O.none,
+  profileId: O.none,
+  jwt: O.none,
+  superBuyer: O.none,
+  promotedFunds: O.none,
+  accountConfiguration: O.none,
+  hasSuccessPageBeenAcknowledged: false,
+  hasSuperSelectionBeenSubmitted: false
+};

package/dist/lib/collection/components/super-selection-app/standard-choice/api/standard-choice.model.js

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

package/dist/lib/collection/components/super-selection-app/standard-choice/standard-choice-form.js

@@ -0,0 +1,49 @@
+import { Component, Event, h, State } from '@stencil/core';
+export class StandardChoiceFormInputDefaultFund {
+  constructor() {
+    this.standardChoiceFormUrl = "/super-selection/embed/v1.0/app/assets/Superannuation_Standard_Choice_Form.pdf";
+    this.standardChoiceFormSignature = '';
+  }
+  render() {
+    return (h("div", { class: "card p-4 mt-4 bg-light" },
+      h("h4", { class: "small font-weight-bold" }, "Superannuation Standard Choice Form"),
+      h("p", { class: "small mt-2" },
+        "The superannuation",
+        ' ',
+        h("a", { target: "_blank", href: this.standardChoiceFormUrl }, "standard choice form"),
+        ' ',
+        "informs your employer of your choice of fund."),
+      h("h4", { class: "small font-weight-bold" }, "Type your full name below (required)"),
+      h("input", { placeholder: "Type your full name", type: "text", class: "form-control", required: true, minlength: "2", name: "standardChoiceFormSignature", id: "standardChoiceFormSignature", value: this.standardChoiceFormSignature, onKeyUp: (ev) => this.updateFormField(ev.target.value.trim()) }),
+      h("div", { class: "invalid-feedback" }, "Type your full name"),
+      h("p", { class: "small mt-3 mb-0" }, "Your authorisation is required for signing this form. Applying your full name in the text field above is the same as applying your written signature and is legally binding.")));
+  }
+  updateFormField(value) {
+    this.standardChoiceFormSignatureUpdated.emit({ standardChoiceFormSignature: value });
+  }
+  static get is() { return "sss-standard-choice-form"; }
+  static get states() { return {
+    "standardChoiceFormSignature": {}
+  }; }
+  static get events() { return [{
+      "method": "standardChoiceFormSignatureUpdated",
+      "name": "standardChoiceFormSignatureUpdated",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "StandardChoiceInput",
+        "resolved": "{ standardChoiceFormSignature: string; }",
+        "references": {
+          "StandardChoiceInput": {
+            "location": "import",
+            "path": "./api/standard-choice.model"
+          }
+        }
+      }
+    }]; }
+}

package/dist/lib/collection/components/super-selection-app/super-choice-page/selected-super-choice-section/selected-super-choice-section.css

@@ -0,0 +1,18 @@
+html {
+  scroll-behavior: smooth;
+}
+
+img.fluid-fit {
+  object-fit: cover;
+}
+
+.picked-block {
+  background-color: var(--fl-color-primary);
+  border-top-right-radius: 3px;
+  right: 0;
+  top: 0;
+}
+
+.picked-box-border {
+  border: 2px solid var(--fl-color-primary);
+}

package/dist/lib/collection/components/super-selection-app/super-choice-page/selected-super-choice-section/selected-super-choice-section.js

@@ -0,0 +1,53 @@
+import { Component, h, Host, Prop } from '@stencil/core';
+export class SelectedSuperChoiceSection {
+  render() {
+    return (h(Host, { class: "bg-white rounded-sm picked-box-border p-3" },
+      h("div", { class: "d-flex" },
+        h("div", { class: "flex-grow-1 font-weight-bold" }, this.fundType),
+        h("div", { class: "px-3 py-2 text-white picked-block position-absolute" }, "You picked")),
+      h("div", null, this.fundName)));
+  }
+  static get is() { return "sss-selected-super-choice-section"; }
+  static get originalStyleUrls() { return {
+    "$": ["selected-super-choice-section.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["selected-super-choice-section.css"]
+  }; }
+  static get properties() { return {
+    "fundType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fund-type",
+      "reflect": false
+    },
+    "fundName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "fund-name",
+      "reflect": false
+    }
+  }; }
+}