@swisspost/design-system-components 1.5.1 → 1.6.0

package/dist/post-components/p-123bb6fb.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["postTabsCss","PostTabs","this","isLoaded","tabs","host","querySelectorAll","componentDidLoad","moveMisplacedTabs","enableTabs","initiallyActivePanel","activePanel","item","panel","show","async","panelName","_a","activeTab","previousTab","newTab","querySelector","activateTab","showing","effect","style","display","finish","hiding","hidePanel","finished","showSelectedPanel","tabChange","emit","forEach","tab","getAttribute","setAttribute","componentOnReady","tabTitle","shadowRoot","tabPanel","getPanel","id","addEventListener","key","navigateTabs","isConnected","classList","remove","removeAttribute","add","previousPanel","fadeOut","onfinish","fadeIn","name","activeTabIndex","Array","from","indexOf","nextTab","length","nextTabTitle","focus","render","h","Host","version","class","role","onSlotchange"],"sources":["./src/components/post-tabs/post-tabs.scss?tag=post-tabs&encapsulation=shadow","./src/components/post-tabs/post-tabs.tsx"],"sourcesContent":["@use '@swisspost/design-system-styles/components/tabs/tabs-wrapper';\n\n:host {\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, 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    void 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(\n      `post-tab-header[panel=${panelName}]`,\n    );\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\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', () => {\n        void this.show(tab.panel);\n      });\n\n      tab.addEventListener('keydown', ({ key }) => {\n        if (key === 'ArrowRight' || key === 'ArrowLeft') this.navigateTabs(tab, key);\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      void 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.setAttribute('tabindex', '-1');\n      tabTitle.classList.remove('active');\n    }\n\n    const tabTitle = tab.shadowRoot.querySelector('.tab-title');\n    tabTitle.setAttribute('aria-selected', 'true');\n    tabTitle.removeAttribute('tabindex');\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(`post-tab-panel[name=${name}]`);\n  }\n\n  private navigateTabs(tab: HTMLPostTabHeaderElement, key: 'ArrowRight' | 'ArrowLeft') {\n    const activeTabIndex = Array.from(this.tabs).indexOf(tab);\n\n    let nextTab: HTMLPostTabHeaderElement;\n    if (key === 'ArrowRight') {\n      nextTab = this.tabs[activeTabIndex + 1] || this.tabs[0];\n    } else {\n      nextTab = this.tabs[activeTabIndex - 1] || this.tabs[this.tabs.length - 1];\n    }\n\n    if (!nextTab) return;\n\n    const nextTabTitle = nextTab.shadowRoot.querySelector('.tab-title') as HTMLAnchorElement;\n    nextTabTitle.focus();\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div class=\"tabs-wrapper\">\n          <div class=\"tabs\" role=\"tablist\">\n            <slot name=\"tabs\" onSlotchange={() => this.enableTabs()} />\n          </div>\n        </div>\n        <div class=\"tab-content\">\n          <slot onSlotchange={() => this.moveMisplacedTabs()} />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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"}

package/dist/post-components/p-15fc087f.js

@@ -1,2 +0,0 @@
-import{E as o}from"./p-c8efe0ae.js";import{c as r}from"./p-bcc705f1.js";import{c as s}from"./p-75a7b352.js";function t(r){return(...s)=>{const t=s[0];if(!o.some((o=>o===t)))r(...s)}}function c(o,r,s){if(typeof o!=="string"||!r.test(o))throw new Error(s)}const n=t(r);const f=t(c);const a=t(s);export{n as a,a as b,f as c};
-//# sourceMappingURL=p-15fc087f.js.map

package/dist/post-components/p-15fc087f.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["emptyOr","check","args","value","EMPTY_VALUES","some","v","checkPattern","pattern","errorMessage","test","Error","checkEmptyOrOneOf","checkOneOf","checkEmptyOrPattern","checkEmptyOrType","checkType"],"sources":["./src/utils/property-checkers/empty-or.ts","./src/utils/property-checkers/check-pattern.ts","./src/utils/property-checkers/index.ts"],"sourcesContent":["import { EMPTY_VALUES } from './constants';\n\nexport function emptyOr<T extends unknown[]>(check: (...args: T) => void) {\n  return (...args: T) => {\n    const value = args[0];\n    if (!EMPTY_VALUES.some(v => v === value)) check(...args);\n  };\n}\n","export function checkPattern(value: unknown, pattern: RegExp, errorMessage: string) {\n  if (typeof value !== 'string' || !pattern.test(value)) throw new Error(errorMessage);\n}\n","import { emptyOr } from './empty-or';\nimport { checkOneOf } from './check-one-of';\nimport { checkPattern } from './check-pattern';\nimport { checkType } from './check-type';\n\nexport const checkEmptyOrOneOf = emptyOr(checkOneOf);\nexport const checkEmptyOrPattern = emptyOr(checkPattern);\nexport const checkEmptyOrType = emptyOr(checkType);\n\nexport * from './check-non-empty';\nexport * from './check-one-of';\nexport * from './check-pattern';\nexport * from './check-type';\n"],"mappings":"qHAEgBA,EAA6BC,GAC3C,MAAO,IAAIC,KACT,MAAMC,EAAQD,EAAK,GACnB,IAAKE,EAAaC,MAAKC,GAAKA,IAAMH,IAAQF,KAASC,EAAK,CAE5D,C,SCPgBK,EAAaJ,EAAgBK,EAAiBC,GAC5D,UAAWN,IAAU,WAAaK,EAAQE,KAAKP,GAAQ,MAAM,IAAIQ,MAAMF,EACzE,C,MCGaG,EAAoBZ,EAAQa,G,MAC5BC,EAAsBd,EAAQO,G,MAC9BQ,EAAmBf,EAAQgB,U"}

package/dist/post-components/p-65a9d1c2.entry.js

@@ -1,2 +0,0 @@
-import{r as s,h as t,H as n,g as o}from"./p-d94db268.js";import{v as e}from"./p-eb3ff4dc.js";const a=":host{display:none}";const r=class{constructor(t){s(this,t);this.panelId=undefined;this.name=undefined}componentWillLoad(){this.panelId=`panel-${this.host.id||crypto.randomUUID()}`}render(){return t(n,{"data-version":e},t("div",{class:"tab-pane",id:this.panelId,role:"tabpanel"},t("slot",null)))}get host(){return o(this)}};r.style=a;export{r as post_tab_panel};
-//# sourceMappingURL=p-65a9d1c2.entry.js.map

package/dist/post-components/p-65a9d1c2.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["postTabPanelCss","PostTabPanel","componentWillLoad","this","panelId","host","id","crypto","randomUUID","render","h","Host","version","class","role"],"sources":["./src/components/post-tab-panel/post-tab-panel.scss?tag=post-tab-panel&encapsulation=shadow","./src/components/post-tab-panel/post-tab-panel.tsx"],"sourcesContent":[":host {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop, State } from '@stencil/core';\nimport { version } from '../../../package.json';\n\n@Component({\n  tag: 'post-tab-panel',\n  styleUrl: 'post-tab-panel.scss',\n  shadow: true,\n})\nexport class PostTabPanel {\n  @Element() host: HTMLPostTabPanelElement;\n\n  @State() panelId: string;\n\n  /**\n   * The name of the panel, used to associate it with a tab header.\n   */\n  @Prop() readonly name: string;\n\n  componentWillLoad() {\n    // get the id set on the host element or use a random id by default\n    this.panelId = `panel-${this.host.id || crypto.randomUUID()}`;\n  }\n\n  render() {\n    return (\n      <Host data-version={version}>\n        <div\n          class=\"tab-pane\"\n          id={this.panelId}\n          role=\"tabpanel\"\n        >\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6FAAA,MAAMA,EAAkB,sB,MCQXC,EAAY,M,oEAUvBC,oBAEEC,KAAKC,QAAU,SAASD,KAAKE,KAAKC,IAAMC,OAAOC,c,CAGjDC,SACE,OACEC,EAACC,EAAI,gBAAeC,GAClBF,EAAA,OACEG,MAAM,WACNP,GAAIH,KAAKC,QACTU,KAAK,YAELJ,EAAA,c"}

package/dist/post-components/p-75a7b352.js

@@ -1,2 +0,0 @@
-function r(r,o,t){const e=o==="array";const n=Array.isArray(r);if(e||n){if(n!==e)throw new Error(t)}else{if(typeof r!==o)throw new Error(t)}}export{r as c};
-//# sourceMappingURL=p-75a7b352.js.map

package/dist/post-components/p-75a7b352.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["checkType","value","type","error","typeIsArray","valueIsArray","Array","isArray","Error"],"sources":["./src/utils/property-checkers/check-type.ts"],"sourcesContent":["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"],"mappings":"SAQgBA,EAAUC,EAAgBC,EAAoBC,GAC5D,MAAMC,EAAcF,IAAS,QAC7B,MAAMG,EAAeC,MAAMC,QAAQN,GAEnC,GAAIG,GAAeC,EAAc,CAC/B,GAAIA,IAAiBD,EAAa,MAAM,IAAII,MAAML,E,KAC7C,CACL,UAAWF,IAAUC,EAAM,MAAM,IAAIM,MAAML,E,CAE/C,Q"}