@saasquatch/mint-components 1.6.2-4 → 1.6.2-40

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "1.6.2-4",
+  "version": "1.6.2-40",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -9,7 +9,8 @@
   "es2015": "dist/esm/index.js",
   "es2017": "dist/esm/index.js",
   "types": "dist/types/components.d.ts",
-  "module": "dist/index.js",
+  "module": "dist/mint-components/mint-components.esm.js",
+  "unpkg": "dist/mint-components/mint-components.js",
   "jsnext:main": "dist/esm/index.js",
   "collection": "dist/collection/collection-manifest.json",
   "collection:main": "dist/collection/index.js",
@@ -67,8 +68,8 @@
     "workbox-build": "4.3.1"
   },
   "dependencies": {
-    "@raisins/stencil-docs-target": "^0.2.8",
-    "@saasquatch/component-boilerplate": "^1.4.1-3",
+    "@raisins/stencil-docs-target": "^1.0.0",
+    "@saasquatch/component-boilerplate": "^1.5.0",
     "@saasquatch/stencil-hooks": "^2.0.2",
     "@saasquatch/stencilbook": "^1.0.0",
     "@saasquatch/universal-hooks": "^1.0.0",

package/dist/cjs/extends-08099afd.js

@@ -1,21 +0,0 @@
-'use strict';
-
-function _extends() {
-  _extends = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends.apply(this, arguments);
-}
-
-exports._extends = _extends;

package/dist/cjs/sqm-qa-referral-card.cjs.entry.js

@@ -1,89 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./extends-08099afd.js');
-const JSS = require('./JSS-97fd087e.js');
-const utils = require('./utils-6847bc06.js');
-
-const style = {
-  Container: {
-    display: "flex",
-    color: "var(--sl-color-neutral-900)",
-    background: "var(--sl-color-neutral-0)",
-    "& .left": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingRight: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        padding: "0",
-        marginBottom: "var(--sl-spacing-xx-large)",
-      },
-    },
-    "& .right": {
-      boxSizing: "border-box",
-      width: "50%",
-      padding: "var(--sl-spacing-large)",
-      paddingLeft: "var(--sl-spacing-medium)",
-      "@media (max-width: 499px)": {
-        width: "100%",
-        padding: "0",
-      },
-    },
-    border: "1px solid var(--sl-color-neutral-300)",
-    borderRadius: "var(--sl-border-radius-large)",
-    "@media (max-width: 499px)": {
-      flexDirection: "column",
-      border: "none",
-    },
-  },
-};
-const sheet = JSS.createStyleSheet(style);
-const styleString = sheet.toString();
-const vanillaStyle = `
-    :host{
-      display: block;   
-    }
-  `;
-function ReferralCardView(props) {
-  return (index.h("div", null,
-    index.h("style", { type: "text/css" },
-      styleString,
-      vanillaStyle),
-    index.h("div", { class: sheet.classes.Container },
-      index.h("div", { class: "left", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.left),
-      index.h("div", { class: "right", style: {
-          alignSelf: props.verticalAlignment,
-        } }, props.slots.right))));
-}
-
-const ReferralCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.ignored = true;
-    /**
-     * @uiName Vertical Aligment
-     * @uiType string
-     * @uiEnum ["start", "center", "end"]
-     * @uiEnumNames ["Top", "Center", "Bottom"]
-     */
-    this.verticalAlignment = "start";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const slots = {
-      left: index.h("slot", { name: "left" }),
-      right: index.h("slot", { name: "right" }),
-    };
-    return (index.h(ReferralCardView, Object.assign({}, utils.getProps(this), { slots: slots }), index.h("slot", null)));
-  }
-};
-
-exports.sqm_qa_referral_card = ReferralCard;

package/dist/cjs/sqm-qa-tabs.cjs.entry.js

@@ -1,100 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-require('./use-callback-e754042f.js');
-const index_module = require('./index.module-7eab8006.js');
-require('./extends-08099afd.js');
-const useChildElements = require('./useChildElements-3a4087c1.js');
-const utils = require('./utils-6847bc06.js');
-
-const TabsView = ({ content, placement, }) => {
-  // Vertical padding for top & bottom placement, horizontal for left & right.
-  const padding = !placement || placement === "top" || placement === "bottom"
-    ? "var(--sl-spacing-x-large) 0;"
-    : "0 var(--sl-spacing-xx-large);";
-  const vanillaStyle = `
-    sl-tab-panel::part(base) {
-      padding: ${padding};
-    }
-  `;
-  const host = stencilHooks_module.l();
-  return (index.h(index.Host, null,
-    index.h("style", { type: "text/css" }, vanillaStyle),
-    index.h("sl-tab-group", { placement: placement }, content.tabs.map((tab) => {
-      const slotName = tab.getAttribute("slot");
-      if (tab.tagName === "RAISINS-PLOP-TARGET") {
-        return (index.h("sl-tab", { slot: "nav" },
-          index.h("div", { style: { marginTop: "10px" } },
-            index.h("slot", { name: slotName }))));
-      }
-      return [
-        index.h("sl-tab", { slot: "nav", panel: slotName, id: tab.getAttribute("id") || slotName }, tab.getAttribute("header")),
-        index.h("sl-tab-panel", { name: slotName },
-          index.h("slot", { name: slotName })),
-      ];
-    })),
-    index.h("div", { style: { display: "none" } },
-      index.h("slot", null))));
-};
-
-const REVEAL_EVENT = "sq:reveal";
-function useTabs() {
-  const rawTabs = useChildElements.useChildElements();
-  const host = index_module.P();
-  const tabs = stencilHooks_module.useMemo(() => rawTabs
-    .filter((tab) => tab.tagName === "SQM-TAB" || tab.tagName === "RAISINS-PLOP-TARGET")
-    .map((tab, i) => {
-    if (tab.tagName === "RAISINS-PLOP-TARGET") {
-      const plopTab = tab;
-      plopTab.style.position = "absolute";
-      plopTab.style.left = "6px";
-      const plopTarget = tab.firstElementChild
-        .childNodes[1];
-      plopTarget.innerHTML = "＋";
-      plopTarget.style.lineHeight = "20px";
-    }
-    tab.setAttribute("slot", "tab-" + i);
-    // set id as targets for scroll component
-    tab.setAttribute("id", "tab-" + i);
-    return tab;
-  }), [rawTabs]);
-  stencilHooks_module.useEffect(() => {
-    const listener = (e) => {
-      var _a;
-      const target = e.target;
-      // Prevents recursively nested components from sending requests up all the way
-      e.stopPropagation();
-      if (!target)
-        return;
-      const tabsComponent = target.closest("sqm-tabs");
-      if (!host.contains(target) || !tabsComponent)
-        return;
-      const targetTab = target.closest("sqm-tab");
-      const tabGroup = tabsComponent.shadowRoot.querySelector("sl-tab-group");
-      (_a = tabGroup) === null || _a === void 0 ? void 0 : _a.show(targetTab.id);
-    };
-    host.addEventListener(REVEAL_EVENT, listener);
-    return () => {
-      host.removeEventListener(REVEAL_EVENT, listener);
-    };
-  }, []);
-  return { content: { tabs } };
-}
-
-const Tabs = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const { content } = useTabs();
-    const { placement } = utils.getProps(this);
-    return (index.h(TabsView, { placement: placement, content: content }, index.h("slot", null)));
-  }
-};
-
-exports.sqm_qa_tabs = Tabs;

package/dist/cjs/sqm-qa.cjs.entry.js

@@ -1,112 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-b0129cd6.js');
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-
-const ShareButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Description here
-     * @uiName Text Input with default
-     */
-    this.textInput = "short text string";
-    /**
-     * Description here
-     * @uiName Number Input with default
-     */
-    this.numberInput = 5;
-    /**
-     * Description here
-     * @uiName Boolean Switch with default
-     */
-    this.booleanSwitch = true;
-    /**
-     * Description here
-     * @uiName Text Area Input
-     * @uiWidget textArea with default
-     */
-    this.textAreaInput = "Really Really Really long text";
-    /**
-     * Description here
-     * @uiName String Enum Select with default
-     * @uiEnum ["option1","option2","option3"]
-     * @uiEnumNames ["Option 1", "Option 2", "Option 3"]
-     */
-    this.stringEnumSelect = "option2";
-    /**
-     * Description here
-     * @uiName Number Enum Select with default
-     * @uiEnum [1,2,3]
-     * @uiEnumNames ["Option 1", "Option 2", "Option 3"]
-     */
-    this.numberEnumSelect = 3;
-    /**
-     * Description here
-     * @uiName Color with default
-     * @uiWidget color
-     * @format color
-     */
-    this.color = "blue";
-    /**
-     * Description here
-     * @uiName Image Upload with default
-     * @uiWidget ImageUpload
-     * @format url
-     */
-    this.imageUpload = "https://res.cloudinary.com/saasquatch/image/upload/v1644000275/squatch-assets/yr6ER3R.png";
-    /**
-     * Description here
-     * @uiName Date Interval with default
-     * @uiWidget dateRange
-     * @uiWidgetOptions {"allowPastDates":true, "months": 1}
-     * @format date-interval
-     */
-    this.dateInterval = "2020-07-07T12:00:00-08:00/2021-08-08T12:00:00-08:00";
-    /**
-     * Description here
-     * @uiName Stat Selector with default
-     * @uiWidget statTypeSelectWidget
-     */
-    this.statSelector = "/referralCount";
-    /**
-     * Description here
-     * @uiName Program Selector with default
-     * @uiWidget programSelector
-     */
-    this.programSelector = "program1";
-    /**
-     * Description here
-     * @uiName Number Max 7
-     * @maximum 7
-     */
-    this.max = 6;
-    /**
-     * Description here
-     * @uiName Number Min 7
-     * @minimum 7
-     */
-    this.min = 8;
-    /**
-     * Description here
-     * @uiName String Max Length 10
-     * @maxLength 10
-     */
-    this.maxLength = "default";
-    /**
-     * Description here
-     * @uiName String Min Length 10
-     * @minLength 10
-     */
-    this.minLength = "default text";
-    stencilHooks_module.h$1(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    return (index.h("div", null, index.h("h1", null, "I am the QA Component")));
-  }
-};
-
-exports.sqm_qa = ShareButton;

package/dist/cjs/useChildElements-3a4087c1.js

@@ -1,23 +0,0 @@
-'use strict';
-
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-7eab8006.js');
-
-function useChildElements() {
-  const host = index_module.P();
-  const initialState = host.children.length
-    ? Array.from(host.children)
-    : [];
-  const [childElements, setChildElements] = stencilHooks_module.useState(initialState);
-  stencilHooks_module.useEffect(() => {
-    const observer = new MutationObserver(() => {
-      const children = Array.from(host.children);
-      setChildElements([...children]);
-    });
-    observer.observe(host, { childList: true });
-    return () => observer.disconnect();
-  }, [host]);
-  return childElements;
-}
-
-exports.useChildElements = useChildElements;

package/dist/cjs/useRegistrationFormState-aa366992.js

@@ -1,23 +0,0 @@
-'use strict';
-
-const stencilHooks_module = require('./stencil-hooks.module-87a1f4f7.js');
-const index_module = require('./index.module-7eab8006.js');
-
-const FORM_VALIDATION_CONTEXT = "sq:validation-state";
-function useValidationState(formState) {
-  const host = index_module.P();
-  const [validationState, setValidationState] = stencilHooks_module.y(host, FORM_VALIDATION_CONTEXT, formState);
-  return { validationState, setValidationState };
-}
-
-const REGISTRATION_FORM_STATE_CONTEXT = "sq:registration-form-state";
-function useRegistrationFormState(formState) {
-  const host = index_module.P();
-  const [registrationFormState, setRegistrationFormState] = stencilHooks_module.y(host, REGISTRATION_FORM_STATE_CONTEXT, formState);
-  return { registrationFormState, setRegistrationFormState };
-}
-
-exports.FORM_VALIDATION_CONTEXT = FORM_VALIDATION_CONTEXT;
-exports.REGISTRATION_FORM_STATE_CONTEXT = REGISTRATION_FORM_STATE_CONTEXT;
-exports.useRegistrationFormState = useRegistrationFormState;
-exports.useValidationState = useValidationState;

package/dist/collection/components/sqm-portal-register/useValidationState.js

@@ -1,8 +0,0 @@
-import { useHost } from "@saasquatch/component-boilerplate";
-import { useDomContextState } from "@saasquatch/dom-context-hooks";
-export const FORM_VALIDATION_CONTEXT = "sq:validation-state";
-export function useValidationState(formState) {
-  const host = useHost();
-  const [validationState, setValidationState] = useDomContextState(host, FORM_VALIDATION_CONTEXT, formState);
-  return { validationState, setValidationState };
-}