@roadtrip/components 3.20.0 → 3.20.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@roadtrip/components",
-  "version": "3.20.0",
+  "version": "3.20.2",
   "description": "Web Component library for Roadtrip Design System",
   "license": "Apache-2.0",
   "homepage": "https://gitlab.com/mobivia-design/roadtrip/components",
@@ -53,9 +53,11 @@
     }
   },
   "dependencies": {
+    "@types/lodash": "^4.17.6",
     "focus-visible": "^5.2.0",
     "fuse.js": "^6.4.6",
     "google-libphonenumber": "3.2.33",
+    "lodash": "^4.17.21",
     "svgo": "^2.8.0"
   },
   "devDependencies": {

package/dist/roadtrip/p-6a27b5fc.entry.js

@@ -1,2 +0,0 @@
-import{r as t,h as s,H as a,a as e}from"./p-f3d586b3.js";const i=":host{display:block}:host(.tab-hidden){display:none}";const n=class{constructor(s){t(this,s);this.active=false;this.tab=undefined}async componentWillLoad(){if(this.active){await this.setActive()}}async setActive(){this.active=true}render(){const{tab:t,active:e}=this;return s(a,{role:"tabpanel","aria-hidden":!e?"true":null,"aria-labelledby":`tab-button-${t}`,class:{"tab-hidden":!e}},s("slot",null))}get el(){return e(this)}};n.style=i;export{n as road_tab};
-//# sourceMappingURL=p-6a27b5fc.entry.js.map

package/dist/roadtrip/p-6a27b5fc.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabCss","Tab","componentWillLoad","this","active","setActive","render","tab","h","Host","role","class"],"sources":["src/components/tab/tab.css?tag=road-tab&encapsulation=shadow","src/components/tab/tab.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n\n:host(.tab-hidden) {\n  display: none;\n}\n","import { Component, Element, Host, Method, Prop, h } from '@stencil/core';\n\n/**\n * @slot  - content of the tab sync with selected tab.\n */\n\n@Component({\n  tag: 'road-tab',\n  styleUrl: 'tab.css',\n  shadow: true,\n})\nexport class Tab {\n\n  @Element() el!: HTMLRoadTabElement;\n\n  /** @internal */\n  @Prop({ mutable: true }) active = false;\n\n  /**\n   * A tab id must be provided for each `road-tab`. It's used internally to reference\n   * the selected tab or by the router to switch between them.\n   */\n  @Prop() tab!: string;\n\n\n  async componentWillLoad() {\n    if (this.active) {\n      await this.setActive();\n    }\n  }\n\n  /** Set the active component for the tab */\n  @Method()\n  async setActive() {\n    this.active = true;\n  }\n\n  render() {\n    const { tab, active } = this;\n    return (\n      <Host\n        role=\"tabpanel\"\n        aria-hidden={!active ? 'true' : null}\n        aria-labelledby={`tab-button-${tab}`}\n        class={{\n          'tab-hidden': !active,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"mappings":"yDAAA,MAAMA,EAAS,uD,MCWFC,EAAG,M,qCAKoB,M,mBASlC,uBAAMC,GACJ,GAAIC,KAAKC,OAAQ,OACTD,KAAKE,W,EAMf,eAAMA,GACJF,KAAKC,OAAS,I,CAGhB,MAAAE,GACE,MAAMC,IAAEA,EAAGH,OAAEA,GAAWD,KACxB,OACEK,EAACC,EAAI,CACHC,KAAK,WAAU,eACDN,EAAS,OAAS,KAAI,kBACnB,cAAcG,IAC/BI,MAAO,CACL,cAAeP,IAGjBI,EAAA,a"}

package/dist/roadtrip/p-db7cb1c8.entry.js

@@ -1,2 +0,0 @@
-import{r as t,c as s,h as i,H as e,a as n}from"./p-f3d586b3.js";const a=":host{position:relative;display:block}";const r=class{constructor(i){t(this,i);this.roadtabswillchange=s(this,"roadtabswillchange",3);this.roadTabsWillChange=s(this,"roadTabsWillChange",3);this.roadtabsdidchange=s(this,"roadtabsdidchange",3);this.roadTabsDidChange=s(this,"roadTabsDidChange",3);this.transitioning=false;this.onTabClicked=t=>{const{tab:s}=t.detail;this.select(s)};this.selectedTab=undefined}async componentWillLoad(){const t=this.tabs;if(t.length>0){this.select(t[0])}}componentWillRender(){const t=this.el.querySelector("road-tab-bar");if(t){const s=this.selectedTab?this.selectedTab.tab:undefined;t.selectedTab=s}}async select(t){const s=h(this.tabs,t);if(!this.shouldSwitch(s)){return false}await this.setActive(s);this.tabSwitch();return true}async getTab(t){return h(this.tabs,t)}getSelected(){return Promise.resolve(this.selectedTab?this.selectedTab.tab:undefined)}setActive(t){if(this.transitioning){return Promise.reject("transitioning already happening")}this.transitioning=true;this.leavingTab=this.selectedTab;this.selectedTab=t;this.roadTabsWillChange.emit({tab:t.tab});t.active=true;return Promise.resolve()}tabSwitch(){const t=this.selectedTab;const s=this.leavingTab;this.leavingTab=undefined;this.transitioning=false;if(!t){return}if(s!==t){if(s){s.active=false}this.roadTabsDidChange.emit({tab:t.tab})}}shouldSwitch(t){const s=this.selectedTab;return t!==undefined&&t!==s&&!this.transitioning}get tabs(){return Array.from(this.el.querySelectorAll("road-tab"))}render(){return i(e,{onRoadTabButtonClick:this.onTabClicked},i("slot",{name:"top"}),i("div",{class:"tabs-inner"},i("slot",null)))}get el(){return n(this)}};const h=(t,s)=>{const i=typeof s==="string"?t.find((t=>t.tab===s)):s;if(!i){console.error(`tab with id: "${i}" does not exist`)}return i};r.style=a;export{r as road_tabs};
-//# sourceMappingURL=p-db7cb1c8.entry.js.map

package/dist/roadtrip/p-db7cb1c8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabsCss","Tabs","this","transitioning","onTabClicked","ev","tab","detail","select","componentWillLoad","tabs","length","componentWillRender","tabBar","el","querySelector","selectedTab","undefined","getTab","shouldSwitch","setActive","tabSwitch","getSelected","Promise","resolve","reject","leavingTab","roadTabsWillChange","emit","active","roadTabsDidChange","Array","from","querySelectorAll","render","h","Host","onRoadTabButtonClick","name","class","tabEl","find","t","console","error"],"sources":["src/components/tabs/tabs.css?tag=road-tabs&encapsulation=shadow","src/components/tabs/tabs.tsx"],"sourcesContent":["/*\n * Tabs\n *\n */\n\n:host {\n  position: relative;\n  display: block;\n}\n","import { Component, Element, Event, EventEmitter, Host, Method, State, h } from '@stencil/core';\n\n/**\n * @slot - Content is placed between the named slots if provided without a slot.\n * @slot top - Content is placed at the top of the screen.\n */\n@Component({\n  tag: 'road-tabs',\n  styleUrl: 'tabs.css',\n  shadow: true,\n})\nexport class Tabs {\n\n  private transitioning = false;\n  private leavingTab?: HTMLRoadTabElement;\n\n  @Element() el!: HTMLRoadTabsElement;\n\n  @State() selectedTab?: HTMLRoadTabElement;\n\n  /**\n   * Emitted when the navigation is about to transition to a new component.\n   */\n  @Event({ bubbles: false }) roadtabswillchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsWillChange!: EventEmitter<{tab: string}>;\n\n  /**\n   * Emitted when the navigation has finished transitioning to a new component.\n   */\n  @Event({ bubbles: false }) roadtabsdidchange!: EventEmitter<{tab: string}>;\n  /** @internal */\n  @Event({ bubbles: false }) roadTabsDidChange!: EventEmitter<{tab: string}>;\n\n  async componentWillLoad() {\n    const tabs = this.tabs;\n    if (tabs.length > 0) {\n      this.select(tabs[0]);\n    }\n  }\n\n  componentWillRender() {\n    const tabBar = this.el.querySelector('road-tab-bar');\n    if (tabBar) {\n      const tab = this.selectedTab ? this.selectedTab.tab : undefined;\n      tabBar.selectedTab = tab;\n    }\n  }\n\n  /**\n   * Select a tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async select(tab: string | HTMLRoadTabElement): Promise<boolean> {\n    const selectedTab = getTab(this.tabs, tab);\n    if (!this.shouldSwitch(selectedTab)) {\n      return false;\n    }\n    await this.setActive(selectedTab);\n    this.tabSwitch();\n\n    return true;\n  }\n\n  /**\n   * Get a specific tab by the value of its `tab` property or an element reference.\n   *\n   * @param tab The tab instance to select. If passed a string, it should be the value of the tab's `tab` property.\n   */\n  @Method()\n  async getTab(tab: string | HTMLRoadTabElement): Promise<HTMLRoadTabElement | undefined> {\n    return getTab(this.tabs, tab);\n  }\n\n  /**\n   * Get the currently selected tab.\n   */\n  @Method()\n  getSelected(): Promise<string | undefined> {\n    return Promise.resolve(this.selectedTab ? this.selectedTab.tab : undefined);\n  }\n\n  private setActive(selectedTab: HTMLRoadTabElement): Promise<void> {\n    if (this.transitioning) {\n      return Promise.reject('transitioning already happening');\n    }\n\n    this.transitioning = true;\n    this.leavingTab = this.selectedTab;\n    this.selectedTab = selectedTab;\n    this.roadTabsWillChange.emit({ tab: selectedTab.tab });\n    selectedTab.active = true;\n    return Promise.resolve();\n  }\n\n  private tabSwitch() {\n    const selectedTab = this.selectedTab;\n    const leavingTab = this.leavingTab;\n\n    this.leavingTab = undefined;\n    this.transitioning = false;\n    if (!selectedTab) {\n      return;\n    }\n\n    if (leavingTab !== selectedTab) {\n      if (leavingTab) {\n        leavingTab.active = false;\n      }\n      this.roadTabsDidChange.emit({ tab: selectedTab.tab });\n    }\n  }\n\n  private shouldSwitch(selectedTab: HTMLRoadTabElement | undefined): selectedTab is HTMLRoadTabElement {\n    const leavingTab = this.selectedTab;\n    return selectedTab !== undefined && selectedTab !== leavingTab && !this.transitioning;\n  }\n\n  private get tabs() {\n    return Array.from(this.el.querySelectorAll('road-tab'));\n  }\n\n  private onTabClicked = (ev: CustomEvent) => {\n    const { tab } = ev.detail;\n    this.select(tab);\n  };\n\n  render() {\n    return (\n      <Host\n        onRoadTabButtonClick={this.onTabClicked}\n      >\n        <slot name=\"top\"/>\n        <div class=\"tabs-inner\">\n          <slot/>\n        </div>\n      </Host>\n    );\n  }\n}\n\nconst getTab = (tabs: HTMLRoadTabElement[], tab: string | HTMLRoadTabElement): HTMLRoadTabElement | undefined => {\n  const tabEl = (typeof tab === 'string')\n    ? tabs.find(t => t.tab === tab)\n    : tab;\n\n  if (!tabEl) {\n    console.error(`tab with id: \"${tabEl}\" does not exist`);\n  }\n  return tabEl;\n};"],"mappings":"gEAAA,MAAMA,EAAU,yC,MCWHC,EAAI,M,iPAEPC,KAAAC,cAAgB,MA+GhBD,KAAAE,aAAgBC,IACtB,MAAMC,IAAEA,GAAQD,EAAGE,OACnBL,KAAKM,OAAOF,EAAI,E,2BA5FlB,uBAAMG,GACJ,MAAMC,EAAOR,KAAKQ,KAClB,GAAIA,EAAKC,OAAS,EAAG,CACnBT,KAAKM,OAAOE,EAAK,G,EAIrB,mBAAAE,GACE,MAAMC,EAASX,KAAKY,GAAGC,cAAc,gBACrC,GAAIF,EAAQ,CACV,MAAMP,EAAMJ,KAAKc,YAAcd,KAAKc,YAAYV,IAAMW,UACtDJ,EAAOG,YAAcV,C,EAUzB,YAAME,CAAOF,GACX,MAAMU,EAAcE,EAAOhB,KAAKQ,KAAMJ,GACtC,IAAKJ,KAAKiB,aAAaH,GAAc,CACnC,OAAO,K,OAEHd,KAAKkB,UAAUJ,GACrBd,KAAKmB,YAEL,OAAO,I,CAST,YAAMH,CAAOZ,GACX,OAAOY,EAAOhB,KAAKQ,KAAMJ,E,CAO3B,WAAAgB,GACE,OAAOC,QAAQC,QAAQtB,KAAKc,YAAcd,KAAKc,YAAYV,IAAMW,U,CAG3D,SAAAG,CAAUJ,GAChB,GAAId,KAAKC,cAAe,CACtB,OAAOoB,QAAQE,OAAO,kC,CAGxBvB,KAAKC,cAAgB,KACrBD,KAAKwB,WAAaxB,KAAKc,YACvBd,KAAKc,YAAcA,EACnBd,KAAKyB,mBAAmBC,KAAK,CAAEtB,IAAKU,EAAYV,MAChDU,EAAYa,OAAS,KACrB,OAAON,QAAQC,S,CAGT,SAAAH,GACN,MAAML,EAAcd,KAAKc,YACzB,MAAMU,EAAaxB,KAAKwB,WAExBxB,KAAKwB,WAAaT,UAClBf,KAAKC,cAAgB,MACrB,IAAKa,EAAa,CAChB,M,CAGF,GAAIU,IAAeV,EAAa,CAC9B,GAAIU,EAAY,CACdA,EAAWG,OAAS,K,CAEtB3B,KAAK4B,kBAAkBF,KAAK,CAAEtB,IAAKU,EAAYV,K,EAI3C,YAAAa,CAAaH,GACnB,MAAMU,EAAaxB,KAAKc,YACxB,OAAOA,IAAgBC,WAAaD,IAAgBU,IAAexB,KAAKC,a,CAG1E,QAAYO,GACV,OAAOqB,MAAMC,KAAK9B,KAAKY,GAAGmB,iBAAiB,Y,CAQ7C,MAAAC,GACE,OACEC,EAACC,EAAI,CACHC,qBAAsBnC,KAAKE,cAE3B+B,EAAA,QAAMG,KAAK,QACXH,EAAA,OAAKI,MAAM,cACTJ,EAAA,c,2BAOV,MAAMjB,EAAS,CAACR,EAA4BJ,KAC1C,MAAMkC,SAAgBlC,IAAQ,SAC1BI,EAAK+B,MAAKC,GAAKA,EAAEpC,MAAQA,IACzBA,EAEJ,IAAKkC,EAAO,CACVG,QAAQC,MAAM,iBAAiBJ,oB,CAEjC,OAAOA,CAAK,E"}

package/dist/roadtrip/p-e214386f.entry.js

@@ -1,2 +0,0 @@
-import{r as a,c as t,h as r,H as e,a as o}from"./p-f3d586b3.js";import"./p-1ccae339.js";const s=":host{--tab-bar-background:var(--road-surface);--tab-color:var(--road-on-surface-weak);--tab-color-selected:var(--road-on-surface);--tab-underline-selected:var(--road-primary);--tab-background:var(--road-surface);--tab-background-hover:var(--road-surface-inverse);--tab-background-focused:var(--road-grey-70);display:flex;width:100%;margin:0;overflow:scroll;overflow-x:inherit;font-family:var(--road-font, sans-serif);line-height:1.5;color:var(--road-on-surface-weak);list-style:none;background:var(--tab-bar-background);border-bottom:1px solid var(--road-outline-weak);fill:currentColor;scrollbar-width:none}:host(::-webkit-scrollbar){display:none}:host(.tab-expand) ::slotted(road-tab-button){flex-grow:1}:host(.tab-secondary) ::slotted(road-tab-button){--tab-underline-selected:var(--road-secondary)}:host(.tab-center){justify-content:center}";const n=class{constructor(r){a(this,r);this.roadtabbarchanged=t(this,"roadtabbarchanged",7);this.roadTabBarChanged=t(this,"roadTabBarChanged",7);this.secondary=false;this.expand=false;this.center=false;this.selectedTab=undefined}selectedTabChanged(){if(this.selectedTab!==undefined){this.roadtabbarchanged.emit({tab:this.selectedTab});this.roadTabBarChanged.emit({tab:this.selectedTab})}}componentWillLoad(){this.selectedTabChanged()}render(){const{expand:a,center:t,secondary:o}=this;return r(e,{role:"tablist",class:{"tab-expand":a,"tab-center":t,"tab-secondary":o}},r("slot",null))}get el(){return o(this)}static get watchers(){return{selectedTab:["selectedTabChanged"]}}};n.style=s;export{n as road_tab_bar};
-//# sourceMappingURL=p-e214386f.entry.js.map

package/dist/roadtrip/p-e214386f.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["tabBarCss","TabBar","selectedTabChanged","this","selectedTab","undefined","roadtabbarchanged","emit","tab","roadTabBarChanged","componentWillLoad","render","expand","center","secondary","h","Host","role","class"],"sources":["src/components/tab-bar/tab-bar.css?tag=road-tab-bar&encapsulation=shadow","src/components/tab-bar/tab-bar.tsx"],"sourcesContent":["/*\n * Tab bar\n *\n */\n\n/**\n * @prop --tab-background: background color of the tab bar\n */\n\n\n:host {\n  --tab-bar-background: var(--road-surface);\n  --tab-color: var(--road-on-surface-weak);\n  --tab-color-selected: var(--road-on-surface);\n  --tab-underline-selected: var(--road-primary);\n  --tab-background: var(--road-surface);\n  --tab-background-hover: var(--road-surface-inverse);\n  --tab-background-focused: var(--road-grey-70);\n\n  display: flex;\n  width: 100%;\n  margin: 0;\n  overflow: scroll;\n  overflow-x: inherit;\n  font-family: var(--road-font, sans-serif);\n  line-height: 1.5;\n  color: var(--road-on-surface-weak);\n  list-style: none;\n  background: var(--tab-bar-background);\n  border-bottom: 1px solid var(--road-outline-weak);\n  fill: currentColor;\n  scrollbar-width: none;\n}\n\n:host(::-webkit-scrollbar) {\n  display: none;\n}\n\n:host(.tab-expand) ::slotted(road-tab-button) {\n  flex-grow: 1;\n}\n\n:host(.tab-secondary) ::slotted(road-tab-button) {\n  --tab-underline-selected: var(--road-secondary);\n}\n\n:host(.tab-center) {\n  justify-content: center;\n}\n","import { Component, Element, Event, EventEmitter, Host, Prop, Watch, h } from '@stencil/core';\nimport './../../utils/polyfill';\n\n/**\n * @slot  - Content of the tabBar, it should be road-tab-button elements.\n */\n\n@Component({\n  tag: 'road-tab-bar',\n  styleUrl: 'tab-bar.css',\n  shadow: true,\n})\nexport class TabBar {\n\n  @Element() el!: HTMLRoadTabBarElement;\n\n  /**\n   * The color to use the color Secondary from your application's color palette.\n   */\n   @Prop() secondary: boolean = false;\n\n  /**\n   * Set to `true` to expand buttons width to take the full size of the bar.\n   */\n  @Prop() expand: boolean = false;\n\n  /**\n   * Set to `true` to center buttons in the bar.\n   */\n  @Prop() center: boolean = false;\n\n  /**\n   * The selected tab component\n   */\n  @Prop() selectedTab?: string;\n  @Watch('selectedTab')\n  selectedTabChanged() {\n    if (this.selectedTab !== undefined) {\n      this.roadtabbarchanged.emit({\n        tab: this.selectedTab,\n      });\n      this.roadTabBarChanged.emit({\n        tab: this.selectedTab,\n      });\n    }\n  }\n\n  /** @internal */\n  @Event() roadtabbarchanged!: EventEmitter;\n  /** @internal */\n  @Event() roadTabBarChanged!: EventEmitter;\n\n  componentWillLoad() {\n    this.selectedTabChanged();\n  }\n\n  render() {\n    const { expand, center, secondary } = this;\n    return (\n      <Host\n        role=\"tablist\"\n        class={{\n          'tab-expand': expand,\n          'tab-center': center,\n          'tab-secondary': secondary,\n        }}\n      >\n        <slot/>\n      </Host>\n    );\n  }\n}"],"mappings":"wFAAA,MAAMA,EAAY,g1B,MCYLC,EAAM,M,kJAOa,M,YAKJ,M,YAKA,M,2BAO1B,kBAAAC,GACE,GAAIC,KAAKC,cAAgBC,UAAW,CAClCF,KAAKG,kBAAkBC,KAAK,CAC1BC,IAAKL,KAAKC,cAEZD,KAAKM,kBAAkBF,KAAK,CAC1BC,IAAKL,KAAKC,a,EAUhB,iBAAAM,GACEP,KAAKD,oB,CAGP,MAAAS,GACE,MAAMC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,GAAcX,KACtC,OACEY,EAACC,EAAI,CACHC,KAAK,UACLC,MAAO,CACL,aAAcN,EACd,aAAcC,EACd,gBAAiBC,IAGnBC,EAAA,a"}