var __decorate=this&&this.__decorate||function(e,t,i,n){var a,r=arguments.length,o=r<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,i):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(e,t,i,n);else for(var d=e.length-1;d>=0;d--)(a=e[d])&&(o=(r<3?a(o):r>3?a(t,i,o):a(t,i))||o);return r>3&&o&&Object.defineProperty(t,i,o),o},__awaiter=this&&this.__awaiter||function(e,t,i,n){return new(i||(i=Promise))(function(a,r){function o(e){try{s(n.next(e))}catch(e){r(e)}}function d(e){try{s(n.throw(e))}catch(e){r(e)}}function s(e){var t;e.done?a(e.value):((t=e.value)instanceof i?t:new i(function(e){e(t)})).then(o,d)}s((n=n.apply(e,t||[])).next())})};import{css as e,html as t,LitElement as i}from"lit";import{customElement as n,property as a}from"lit/decorators.js";import{until as r}from"lit/directives/until.js";import{when as o}from"lit/directives/when.js";import{classMap as d}from"lit/directives/class-map.js";import{style as s}from"../style";let styling=e`
  :host {
    height: auto !important;
  }
  
  #panel-wrapper {
    border-bottom: 1px solid #E0E0E0;
  }

  #panel-header {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 12px;
    gap: 8px;
  }

  #panel-title {
    line-height: 100%;
    font-weight: 700;
  }

  .panel-content {
    padding: 0 16px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s cubic-bezier(0.4, 0.0, 0.2, 1) 0s, visibility 0s 0.2s; /* expanded -> collapsed */
  }

  .panel-content--expanded {
    max-height: 100vh;
    overflow: visible;
    transition: max-height 0.25s cubic-bezier(0.4, 0.0, 0.2, 1) 0s; /* collapsed -> expanded */
  }
`,SettingsPanel=class extends i{constructor(){super(...arguments),this.expanded=!1}static get styles(){return[styling,s]}render(){let e={"panel-content":!0,"panel-content--expanded":this.expanded};return t`
            <div id="panel-wrapper">
                ${r(this.generateHeader(this.expanded,this.displayName),t``)}
                <div class="${d(e)}">
                    <div style="padding-bottom: 16px;">
                        <slot></slot>
                    </div>
                </div>
            </div>
        `}toggle(e){this.expanded=e||!this.expanded}generateHeader(e,i){return __awaiter(this,void 0,void 0,function*(){return t`
            <div id="panel-header" @click="${()=>this.toggle()}">
                <div id="panel-chevron">
                    <or-icon icon="${e?"chevron-down":"chevron-right"}"></or-icon>
                </div>
                ${o(i,()=>t`
                    <div id="panel-title">
                        <span><or-translate value="${this.displayName}"></or-translate></span>
                    </div>
                `)}
            </div>
        `})}};__decorate([a({type:Boolean})],SettingsPanel.prototype,"expanded",void 0),__decorate([a()],SettingsPanel.prototype,"displayName",void 0),SettingsPanel=__decorate([n("settings-panel")],SettingsPanel);export{SettingsPanel};