UNPKG

@freshworks/crayons

Version:
1 lines 2.6 kB
import{r as o,h as i,i as e}from"./p-c5706edf.js";import{a as r}from"./p-c9855591.js";const n=({expanded:o,iconSize:e})=>{let r;switch(e){case"small":r=7;break;case"medium":r=10;break;case"large":r=14}return i("fw-icon",{class:"accordion-icon",name:"chevron-"+(o?"up":"down"),size:r,library:"system"})};let a=class{constructor(i){o(this,i),this.toggleState=()=>{},this.expanded=!0,this.type="default",this.truncateOnOverflow=!0,this.iconSize="medium"}componentWillLoad(){this.expandedIcon=this.el.querySelector('[slot="expanded-icon"'),this.collapsedIcon=this.el.querySelector('[slot="collapsed-icon"')}render(){return i("div",{class:{"accordion-header":!0,collapsed:!this.expanded,"no-bounding-box":"no_bounding_box"===this.type},role:"button",tabindex:"0",onKeyDown:r(this.toggleState),onClick:this.toggleState,"aria-expanded":this.expanded.toString()},i("div",{class:{"accordion-title":!0,truncate:this.truncateOnOverflow}},i("slot",null)),this.expandedIcon&&this.collapsedIcon?i("div",{class:"accordion-icon"},i("slot",{name:this.expanded?"expanded-icon":"collapsed-icon"})):i(n,{expanded:this.expanded,iconSize:this.iconSize}))}get el(){return e(this)}};a.style=':host{font-family:var(--fw-font-family, -apple-system, blinkmacsystemfont, "Segoe UI", roboto, oxygen, ubuntu, cantarell, "Open Sans", "Helvetica Neue", sans-serif);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-box-sizing:border-box;box-sizing:border-box}.accordion-header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background:var(--fw-accordion-title-background-color, #ffffff);border:var(--fw-accordion-title-border, none);border-radius:var(--fw-accordion-border-radius, 8px) var(--fw-accordion-border-radius, 8px) 0 0;padding:10px 20px;cursor:pointer}.accordion-header.collapsed{border-radius:var(--fw-accordion-border-radius, 8px)}.accordion-header.collapsed .accordion-icon{--fw-icon-color:var(\n --fw-accordion-title-collapsed-icon-color,\n $accordion-title-icon-color\n )}.accordion-header.no-bounding-box{border-radius:0}.accordion-header .accordion-title{-ms-flex-positive:1;flex-grow:1;line-height:var(--fw-accordion-title-line-height, 19px);font-size:var(--fw-accordion-title-font-size, 16px);font-weight:var(--fw-accordion-title-font-weight, bold)}.accordion-header .accordion-title.truncate{text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.accordion-header .accordion-icon{-ms-flex-positive:0;flex-grow:0;--fw-icon-color:var(\n --fw-accordion-title-expanded-icon-color,\n $accordion-title-icon-color\n )}';export{a as fw_accordion_title}