@swisspost/design-system-components 1.3.10 → 1.4.0

package/dist/components/post-tabs.js

@@ -0,0 +1,158 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { v as version } from './package.js';
+
+const fadeDuration = 200;
+const fadedOutKeyFrame = { opacity: '0' };
+const fadedInKeyFrame = { opacity: '1' };
+const fadeIn = (el) => el.animate([fadedOutKeyFrame, fadedInKeyFrame], { duration: fadeDuration });
+const fadeOut = (el) => el.animate([fadedInKeyFrame, fadedOutKeyFrame], { duration: fadeDuration });
+
+const postTabsCss = ".tabs-wrapper{position:relative;padding-top:1rem;border:0;background-color:#faf9f8}.tabs-wrapper::after{content:\"\";position:absolute;bottom:0;width:100%;height:1px;background-color:hsl(0, 0%, 80%)}.tabs-wrapper .tabs{background-color:transparent !important}@media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black){.tabs-wrapper::after{background-color:ButtonBorder}}.tabs{margin:0;padding:0;list-style:none;display:flex;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;white-space:nowrap}.tabs::after{content:\"\";display:block;flex:1 0 auto;width:1rem}.tab-content{padding-top:1rem;padding-bottom:1rem}.bg-yellow .tabs-wrapper{background-color:#fc0}.bg-light .tabs-wrapper{background-color:#faf9f8}.bg-gray .tabs-wrapper{background-color:#f4f3f1}.bg-dark .tabs-wrapper{background-color:hsl(0, 0%, 20%)}.bg-primary .tabs-wrapper{background-color:hsl(0, 0%, 20%)}.bg-white .tabs-wrapper{background-color:#fff}.bg-black .tabs-wrapper{background-color:#000}.bg-success .tabs-wrapper{background-color:#2c911c}.bg-info .tabs-wrapper{background-color:#cce4ee}.bg-warning .tabs-wrapper{background-color:#f49e00}.bg-danger .tabs-wrapper{background-color:#a51728}.bg-nightblue .tabs-wrapper{background-color:#004976}.bg-nightblue-bright .tabs-wrapper{background-color:#0076a8}.bg-petrol .tabs-wrapper{background-color:#006d68}.bg-petrol-bright .tabs-wrapper{background-color:#00968f}.bg-coral .tabs-wrapper{background-color:#9e2a2f}.bg-coral-bright .tabs-wrapper{background-color:#e03c31}.bg-olive .tabs-wrapper{background-color:#716135}.bg-olive-bright .tabs-wrapper{background-color:#aa9d2e}.bg-purple .tabs-wrapper{background-color:#80276c}.bg-purple-bright .tabs-wrapper{background-color:#c5299b}.bg-aubergine .tabs-wrapper{background-color:#523178}.bg-aubergine-bright .tabs-wrapper{background-color:#7566a0}:host{display:block}";
+
+const PostTabs$1 = /*@__PURE__*/ proxyCustomElement(class PostTabs extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.__attachShadow();
+    this.tabChange = createEvent(this, "tabChange", 7);
+    this.isLoaded = false;
+    this.activePanel = undefined;
+  }
+  get tabs() {
+    return this.host.querySelectorAll('post-tab-header');
+  }
+  componentDidLoad() {
+    this.moveMisplacedTabs();
+    this.enableTabs();
+    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;
+    this.show(initiallyActivePanel);
+    this.isLoaded = true;
+  }
+  /**
+   * Shows the panel with the given name and selects its associated tab.
+   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.
+   */
+  async show(panelName) {
+    var _a;
+    // do nothing if the tab is already active
+    if (panelName === ((_a = this.activeTab) === null || _a === void 0 ? void 0 : _a.panel)) {
+      return;
+    }
+    const previousTab = this.activeTab;
+    const newTab = this.host.querySelector(`post-tab-header[panel=${panelName}]`);
+    this.activateTab(newTab);
+    // if a panel is currently being displayed, remove it from the view and complete the associated animation
+    if (this.showing) {
+      this.showing.effect['target'].style.display = 'none';
+      this.showing.finish();
+    }
+    // hide the currently visible panel only if no other animation is running
+    if (previousTab && !this.showing && !this.hiding) {
+      this.hidePanel(previousTab.panel);
+    }
+    // wait for any hiding animation to complete before showing the selected tab
+    if (this.hiding) {
+      await this.hiding.finished;
+    }
+    this.showSelectedPanel();
+    // wait for any display animation to complete for the returned promise to fully resolve
+    if (this.showing) {
+      await this.showing.finished;
+    }
+    this.tabChange.emit(this.activeTab.panel);
+  }
+  moveMisplacedTabs() {
+    if (!this.tabs)
+      return;
+    this.tabs.forEach(tab => {
+      if (tab.getAttribute('slot') === 'tabs')
+        return;
+      tab.setAttribute('slot', 'tabs');
+    });
+  }
+  enableTabs() {
+    if (!this.tabs)
+      return;
+    this.tabs.forEach(async (tab) => {
+      await tab.componentOnReady();
+      const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+      // if the tab has an "aria-controls" attribute it was already linked to its panel: do nothing
+      if (tabTitle.getAttribute('aria-controls'))
+        return;
+      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');
+      tabTitle.setAttribute('aria-controls', tabPanel.id);
+      tabPanel.setAttribute('aria-labelledby', tabTitle.id);
+      tab.addEventListener('click', e => {
+        e.preventDefault();
+        this.show(tab.panel);
+      });
+    });
+    // if the currently active tab was removed from the DOM then select the first one
+    if (this.activeTab && !this.activeTab.isConnected) {
+      this.show(this.tabs.item(0).panel);
+    }
+  }
+  activateTab(tab) {
+    if (this.activeTab) {
+      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');
+      tabTitle.setAttribute('aria-selected', 'false');
+      tabTitle.classList.remove('active');
+    }
+    const tabTitle = tab.shadowRoot.querySelector('.tab-title');
+    tabTitle.setAttribute('aria-selected', 'true');
+    tabTitle.classList.add('active');
+    this.activeTab = tab;
+  }
+  hidePanel(panelName) {
+    const previousPanel = this.getPanel(panelName);
+    if (!previousPanel)
+      return;
+    this.hiding = fadeOut(previousPanel);
+    this.hiding.onfinish = () => {
+      previousPanel.style.display = 'none';
+      this.hiding = null;
+    };
+  }
+  showSelectedPanel() {
+    const panel = this.getPanel(this.activeTab.panel);
+    panel.style.display = 'block';
+    // prevent the initially selected panel from fading in
+    if (!this.isLoaded)
+      return;
+    this.showing = fadeIn(panel);
+    this.showing.onfinish = () => {
+      this.showing = null;
+    };
+  }
+  getPanel(name) {
+    return this.host.querySelector(`post-tab-panel[name=${name}]`);
+  }
+  render() {
+    return (h(Host, { "data-version": version }, h("div", { class: "tabs-wrapper" }, h("ul", { class: "tabs nav", role: "tablist" }, h("slot", { name: "tabs", onSlotchange: () => this.enableTabs() }))), h("div", { class: "tab-content" }, h("slot", { onSlotchange: () => this.moveMisplacedTabs() }))));
+  }
+  get host() { return this; }
+  static get style() { return postTabsCss; }
+}, [1, "post-tabs", {
+    "activePanel": [1, "active-panel"],
+    "show": [64]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["post-tabs"];
+  components.forEach(tagName => { switch (tagName) {
+    case "post-tabs":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PostTabs$1);
+      }
+      break;
+  } });
+}
+
+const PostTabs = PostTabs$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PostTabs, defineCustomElement };
+
+//# sourceMappingURL=post-tabs.js.map

package/dist/components/post-tabs.js.map

@@ -0,0 +1 @@
+{"file":"post-tabs.js","mappings":"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","names":["PostTabs"],"sources":["./src/animations/fade.ts","./src/components/post-tabs/post-tabs.scss?tag=post-tabs&encapsulation=shadow","./src/components/post-tabs/post-tabs.tsx"],"sourcesContent":["const fadeDuration = 200;\nconst fadedOutKeyFrame = {opacity: '0'};\nconst fadedInKeyFrame = {opacity: '1'};\n\nexport const fadeIn = (el: Element): Animation => el.animate(\n  [ fadedOutKeyFrame, fadedInKeyFrame ],\n  { duration: fadeDuration }\n);\n\nexport const fadeOut = (el: Element): Animation => el.animate(\n  [ fadedInKeyFrame, fadedOutKeyFrame ],\n  { duration: fadeDuration }\n);\n","@use '@swisspost/design-system-styles/components/tabs/tabs-wrapper';\n\n:host {\n  display: block;\n}\n","import { Component, Host, h, Element, Method, Event, EventEmitter, Prop } from '@stencil/core';\nimport { version } from '../../../package.json';\nimport { fadeIn, fadeOut } from '../../animations';\n\n@Component({\n  tag: 'post-tabs',\n  styleUrl: 'post-tabs.scss',\n  shadow: true,\n})\nexport class PostTabs {\n  private activeTab: HTMLPostTabHeaderElement;\n  private showing: Animation;\n  private hiding: Animation;\n  private isLoaded = false;\n\n  private get tabs(): NodeListOf<HTMLPostTabHeaderElement> {\n    return this.host.querySelectorAll('post-tab-header');\n  }\n\n  @Element() host: HTMLPostTabsElement;\n\n  /**\n   * The name of the panel that is initially shown.\n   * If not specified, it defaults to the panel associated with the first tab.\n   *\n   * **Changing this value after initialization has no effect.**\n   */\n  @Prop() readonly activePanel: HTMLPostTabPanelElement['name'];\n\n  /**\n   * An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\n   * The payload is the name of the newly shown panel.\n   */\n  @Event() tabChange: EventEmitter<HTMLPostTabPanelElement['name']>;\n\n  componentDidLoad() {\n    this.moveMisplacedTabs();\n    this.enableTabs();\n\n    const initiallyActivePanel = this.activePanel || this.tabs.item(0).panel;\n    this.show(initiallyActivePanel);\n\n    this.isLoaded = true;\n  }\n\n  /**\n   * Shows the panel with the given name and selects its associated tab.\n   * Any other panel that was previously shown becomes hidden and its associated tab is unselected.\n   */\n  @Method()\n  async show(panelName: string) {\n    // do nothing if the tab is already active\n    if (panelName === this.activeTab?.panel) {\n      return;\n    }\n\n    const previousTab = this.activeTab;\n    const newTab : HTMLPostTabHeaderElement = this.host.querySelector(`post-tab-header[panel=${panelName}]`);\n    this.activateTab(newTab);\n\n    // if a panel is currently being displayed, remove it from the view and complete the associated animation\n    if (this.showing) {\n      this.showing.effect['target'].style.display = 'none';\n      this.showing.finish();\n    }\n\n    // hide the currently visible panel only if no other animation is running\n    if (previousTab && !this.showing && !this.hiding) {\n      this.hidePanel(previousTab.panel);\n    }\n\n    // wait for any hiding animation to complete before showing the selected tab\n    if (this.hiding) {\n      await this.hiding.finished;\n    }\n\n    this.showSelectedPanel();\n\n    // wait for any display animation to complete for the returned promise to fully resolve\n    if (this.showing) {\n      await this.showing.finished;\n    }\n\n    this.tabChange.emit(this.activeTab.panel);\n  }\n  private moveMisplacedTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(tab => {\n      if (tab.getAttribute('slot') === 'tabs') return;\n      tab.setAttribute('slot', 'tabs');\n    });\n  }\n\n  private enableTabs() {\n    if (!this.tabs) return;\n\n    this.tabs.forEach(async tab => {\n      await tab.componentOnReady();\n\n      const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n\n      // if the tab has an \"aria-controls\" attribute it was already linked to its panel: do nothing\n      if (tabTitle.getAttribute('aria-controls')) return;\n\n      const tabPanel = this.getPanel(tab.panel).shadowRoot.querySelector('.tab-pane');\n      tabTitle.setAttribute('aria-controls', tabPanel.id);\n      tabPanel.setAttribute('aria-labelledby', tabTitle.id);\n\n      tab.addEventListener('click', e => {\n        e.preventDefault();\n        this.show(tab.panel);\n      });\n    });\n\n    // if the currently active tab was removed from the DOM then select the first one\n    if (this.activeTab && !this.activeTab.isConnected) {\n      this.show(this.tabs.item(0).panel);\n    }\n  }\n\n  private activateTab(tab: HTMLPostTabHeaderElement) {\n    if (this.activeTab) {\n      const tabTitle = this.activeTab.shadowRoot.querySelector('.tab-title');\n      tabTitle.setAttribute('aria-selected', 'false');\n      tabTitle.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\n    tabTitle.classList.add('active');\n\n    this.activeTab = tab;\n  }\n\n  private hidePanel(panelName: HTMLPostTabPanelElement['name']) {\n    const previousPanel = this.getPanel(panelName);\n\n    if (!previousPanel) return;\n\n    this.hiding = fadeOut(previousPanel);\n    this.hiding.onfinish = () => {\n      previousPanel.style.display = 'none';\n      this.hiding = null;\n    };\n  }\n\n  private showSelectedPanel() {\n    const panel = this.getPanel(this.activeTab.panel);\n    panel.style.display = 'block';\n\n    // prevent the initially selected panel from fading in\n    if (!this.isLoaded) return;\n\n    this.showing = fadeIn(panel);\n    this.showing.onfinish = () => {\n      this.showing = null;\n    };\n  }\n\n  private getPanel(name: string): HTMLPostTabPanelElement {\n    return this.host.querySelector(\n      `post-tab-panel[name=${name}]`\n    );\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <ul class=\"tabs nav\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </ul>\n        </div>\n        <div class=\"tab-content\">\n          <slot onSlotchange={() => this.moveMisplacedTabs()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2023-08-14T11:59:52",
+  "timestamp": "2023-08-31T09:34:16",
   "compiler": {
     "name": "@stencil/core",
     "version": "3.4.2",
@@ -235,6 +235,136 @@
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/post-tab-header/post-tab-header.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-tab-header",
+      "readme": "# post-tab-header\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "panel",
+          "type": "string",
+          "mutable": false,
+          "attr": "panel",
+          "reflectToAttr": false,
+          "docs": "The name of the panel controlled by the tab header.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/post-tab-panel/post-tab-panel.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-tab-panel",
+      "readme": "# post-tab-panel\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "name",
+          "type": "string",
+          "mutable": false,
+          "attr": "name",
+          "reflectToAttr": false,
+          "docs": "The name of the panel, used to associate it with a tab header.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
+    },
+    {
+      "filePath": "./src/components/post-tabs/post-tabs.tsx",
+      "encapsulation": "shadow",
+      "tag": "post-tabs",
+      "readme": "# post-tabs\n\n\n",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "activePanel",
+          "type": "string",
+          "mutable": false,
+          "attr": "active-panel",
+          "reflectToAttr": false,
+          "docs": "The name of the panel that is initially shown.\nIf not specified, it defaults to the panel associated with the first tab.\n\n**Changing this value after initialization has no effect.**",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "show",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "show(panelName: string) => Promise<void>",
+          "parameters": [],
+          "docs": "Shows the panel with the given name and selects its associated tab.\nAny other panel that was previously shown becomes hidden and its associated tab is unselected.",
+          "docsTags": []
+        }
+      ],
+      "events": [
+        {
+          "event": "tabChange",
+          "detail": "string",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "An event emitted after the active tab changes, when the fade in transition of its associated panel is finished.\nThe payload is the name of the newly shown panel.",
+          "docsTags": []
+        }
+      ],
+      "listeners": [],
+      "styles": [],
+      "slots": [],
+      "parts": [],
+      "dependents": [],
+      "dependencies": [],
+      "dependencyGraph": {}
     }
   ]
 }

package/dist/esm/check-non-empty-554bdf88.js

@@ -0,0 +1,11 @@
+const EMPTY_VALUES = [undefined, null, ''];
+
+function checkNonEmpty(value, error) {
+  if (EMPTY_VALUES.some(v => v === value)) {
+    throw new Error(error);
+  }
+}
+
+export { EMPTY_VALUES as E, checkNonEmpty as c };
+
+//# sourceMappingURL=check-non-empty-554bdf88.js.map

package/dist/esm/check-non-empty-554bdf88.js.map

@@ -0,0 +1 @@
+{"file":"check-non-empty-554bdf88.js","mappings":"MAAa,YAAY,GAAG,CAAC,SAAS,EAAE,IAAI,EAAE,EAAE;;SCEhC,aAAa,CAAC,KAAc,EAAE,KAAa;EACzD,IAAI,YAAY,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,KAAK,KAAK,CAAC,EAAE;IACvC,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACxB;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/constants.ts","./src/utils/property-checkers/check-non-empty.ts"],"sourcesContent":["export const EMPTY_VALUES = [undefined, null, ''];\n","import { EMPTY_VALUES } from './constants';\n\nexport function checkNonEmpty(value: unknown, error: string) {\n  if (EMPTY_VALUES.some(v => v === value)) {\n    throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/esm/check-type-67411ed3.js

@@ -0,0 +1,21 @@
+function checkOneOf(value, possibleValues, error) {
+  if (!possibleValues.includes(value))
+    throw new Error(error);
+}
+
+function checkType(value, type, error) {
+  const typeIsArray = type === 'array';
+  const valueIsArray = Array.isArray(value);
+  if (typeIsArray || valueIsArray) {
+    if (valueIsArray !== typeIsArray)
+      throw new Error(error);
+  }
+  else {
+    if (typeof value !== type)
+      throw new Error(error);
+  }
+}
+
+export { checkOneOf as a, checkType as c };
+
+//# sourceMappingURL=check-type-67411ed3.js.map

package/dist/esm/check-type-67411ed3.js.map

@@ -0,0 +1 @@
+{"file":"check-type-67411ed3.js","mappings":"SAAgB,UAAU,CAAI,KAAQ,EAAE,cAAmB,EAAE,KAAa;EACxE,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC,KAAK,CAAC;IAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;AAC9D;;SCMgB,SAAS,CAAC,KAAc,EAAE,IAAkB,EAAE,KAAa;EACzE,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC;EACrC,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC;EAE1C,IAAI,WAAW,IAAI,YAAY,EAAE;IAC/B,IAAI,YAAY,KAAK,WAAW;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GAC1D;OAAM;IACL,IAAI,OAAO,KAAK,KAAK,IAAI;MAAE,MAAM,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;GACnD;AACH;;;;","names":[],"sources":["./src/utils/property-checkers/check-one-of.ts","./src/utils/property-checkers/check-type.ts"],"sourcesContent":["export function checkOneOf<T>(value: T, possibleValues: T[], error: string) {\n  if (!possibleValues.includes(value)) throw new Error(error);\n}\n","export type PropertyType =\n  | 'boolean'\n  | 'number'\n  | 'string'\n  | 'array'\n  | 'object'\n  | 'function';\n\nexport function checkType(value: unknown, type: PropertyType, error: string) {\n  const typeIsArray = type === 'array';\n  const valueIsArray = Array.isArray(value);\n\n  if (typeIsArray || valueIsArray) {\n    if (valueIsArray !== typeIsArray) throw new Error(error);\n  } else {\n    if (typeof value !== type) throw new Error(error);\n  }\n}\n"],"version":3}

package/dist/esm/{index-60a84798.js → index-cc0e53f0.js}

@@ -257,6 +257,19 @@ const parsePropertyValue = (propValue, propType) => {
     return propValue;
 };
 const getElement = (ref) => (getHostRef(ref).$hostElement$ );
+const createEvent = (ref, name, flags) => {
+    const elm = getElement(ref);
+    return {
+        emit: (detail) => {
+            return emitEvent(elm, name, {
+                bubbles: !!(flags & 4 /* EVENT_FLAGS.Bubbles */),
+                composed: !!(flags & 2 /* EVENT_FLAGS.Composed */),
+                cancelable: !!(flags & 1 /* EVENT_FLAGS.Cancellable */),
+                detail,
+            });
+        },
+    };
+};
 /**
  * Helper function to create & dispatch a custom Event on a provided target
  * @param elm the target of the Event
@@ -1585,6 +1598,6 @@ const flush = () => {
 const nextTick = /*@__PURE__*/ (cb) => promiseResolve().then(cb);
 const writeTask = /*@__PURE__*/ queueTask(queueDomWrites, true);
 
-export { Host as H, bootstrapLazy as b, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
+export { Host as H, bootstrapLazy as b, createEvent as c, getElement as g, h, promiseResolve as p, registerInstance as r, setNonce as s };
 
-//# sourceMappingURL=index-60a84798.js.map
+//# sourceMappingURL=index-cc0e53f0.js.map