@roadtrip/components 3.17.0 → 3.18.0

package/dist/roadtrip/p-7a14e5b7.entry.js

@@ -0,0 +1,2 @@
+import{r as t,h as s,H as n}from"./p-f3d586b3.js";const e=":host{--btn-margin-bottom:1rem;--btn-padding-start:1rem;--btn-padding-end:1rem;--btn-font-size:1rem;--max-height:500px;display:block}.collapsed-content{max-height:0;overflow:hidden;transition:max-height 0.4s ease-in-out}.collapse-open{max-height:var(--max-height)}.collapse-btn{--margin-bottom:var(--btn-margin-bottom);--border-radius:var(--btn-border-radius);--padding-start:var(--btn-padding-start);--padding-end:var(--btn-padding-end);--font-size:var(--btn-font-size)}.collapse-btn:focus{outline:1px solid var(--road-link-primary)}.collapse-btn-centered{display:flex;justify-content:center}";const o=class{constructor(s){t(this,s);this.onClick=()=>{this.isOpen=!this.isOpen};this.isOpen=false;this.showMore="show more";this.showLess="show less";this.centered=false}render(){const t=this.isOpen?"collapse-open":"";const e=this.isOpen?this.showLess:this.showMore;const o=this.centered?"collapse-btn-centered":"";return s(n,null,s("slot",null),s("div",{class:`collapsed-content ${t}`},s("slot",{name:"collapsed-content"})),s("div",{class:`collapse-btn-wrapper ${o}`},s("road-button",{onClick:this.onClick,class:"collapse-btn btn-link"},e)))}};o.style=e;export{o as road_collapse};
+//# sourceMappingURL=p-7a14e5b7.entry.js.map

package/dist/roadtrip/p-7a14e5b7.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["collapseCss","Collapse","this","onClick","isOpen","render","isOpenClass","buttonText","showLess","showMore","centerClass","centered","h","Host","class","name"],"sources":["src/components/collapse/collapse.css?tag=road-collapse&encapsulation=shadow","src/components/collapse/collapse.tsx"],"sourcesContent":["/*\n * Collapse\n *\n * Index\n * - Collapse\n * - Content\n * - Button\n */\n\n/**\n * @prop --btn-padding-start: Left padding  of the button\n * @prop --btn-padding-end: Right padding of the button\n * @prop --btn-margin-bottom: Bottom margin of the button\n * @prop --btn-font-size: Font size of the text button\n * @prop --max-height: maximum height of the collapse content\n */\n\n/* COLLAPSE\n -------------------- */\n\n:host {\n  --btn-margin-bottom: 1rem;\n  --btn-padding-start: 1rem;\n  --btn-padding-end: 1rem;\n  --btn-font-size: 1rem;\n  --max-height: 500px;\n\n  display: block;\n}\n\n/* CONTENT\n -------------------- */\n\n.collapsed-content {\n  max-height: 0;\n  overflow: hidden;\n  transition: max-height 0.4s ease-in-out;\n}\n\n/**\n * Open state\n */\n\n.collapse-open {\n  max-height: var(--max-height);\n}\n\n/* BUTTON\n -------------------- */\n\n.collapse-btn {\n  --margin-bottom: var(--btn-margin-bottom);\n  --border-radius: var(--btn-border-radius);\n  --padding-start: var(--btn-padding-start);\n  --padding-end: var(--btn-padding-end);\n  --font-size: var(--btn-font-size);\n}\n\n.collapse-btn:focus {\n  outline: 1px solid var(--road-link-primary);\n}\n\n.collapse-btn-centered {\n  display: flex;\n  justify-content: center;\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n/**\n * @slot  - Content visible when collapsed.\n * @slot collapsed-content - content not visible when collapsed.\n */\n\n@Component({\n  tag: 'road-collapse',\n  styleUrl: 'collapse.css',\n  shadow: true,\n})\nexport class Collapse {\n\n  /**\n   * Set to `true` to display the collapsed part and to `false` to hide it.\n   */\n  @Prop({ mutable: true }) isOpen : boolean = false;\n\n  /**\n   * Text displayed in the button when the content is collapsed\n   */\n  @Prop() showMore : string = 'show more';\n\n  /**\n   * Text displayed in the button when the content is not collapsed\n   */\n  @Prop() showLess : string = 'show less';\n\n  /**\n   * if `true` the button will be centered\n   */\n  @Prop() centered: boolean = false;\n\n  /**\n   * Toggle the display when clicking header\n   */\n  private onClick = () => {\n    this.isOpen = !this.isOpen;\n  };\n\n  render() {\n    const isOpenClass = this.isOpen ? 'collapse-open' : '';\n    const buttonText = this.isOpen ? this.showLess : this .showMore;\n    const centerClass = this.centered ? 'collapse-btn-centered' : '';\n\n    return (\n      <Host>\n        <slot/>\n        <div class={`collapsed-content ${isOpenClass}`}>\n          <slot name=\"collapsed-content\"/>\n        </div>\n        <div class={`collapse-btn-wrapper ${centerClass}`}>\n          <road-button onClick={this.onClick} class=\"collapse-btn btn-link\">{buttonText}</road-button>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"mappings":"kDAAA,MAAMA,EAAc,olB,MCYPC,EAAQ,M,yBAyBXC,KAAAC,QAAU,KAChBD,KAAKE,QAAUF,KAAKE,MAAM,E,YArBgB,M,cAKhB,Y,cAKA,Y,cAKA,K,CAS5B,MAAAC,GACE,MAAMC,EAAcJ,KAAKE,OAAS,gBAAkB,GACpD,MAAMG,EAAaL,KAAKE,OAASF,KAAKM,SAAWN,KAAMO,SACvD,MAAMC,EAAcR,KAAKS,SAAW,wBAA0B,GAE9D,OACEC,EAACC,EAAI,KACHD,EAAA,aACAA,EAAA,OAAKE,MAAO,qBAAqBR,KAC/BM,EAAA,QAAMG,KAAK,uBAEbH,EAAA,OAAKE,MAAO,wBAAwBJ,KAClCE,EAAA,eAAaT,QAASD,KAAKC,QAASW,MAAM,yBAAyBP,I"}