vicowa-web-components/dist/vicowa-panel/vicowa-panel.js

Various web components

import{WebComponentBaseClass as t}from"/third_party/web-component-base-class/dist/web-component-base-class.js";import"../vicowa-string/vicowa-string.js";import"../vicowa-icon/vicowa-icon.js";window.customElements.define("vicowa-panel",class VicowaPanel extends t{constructor(){super()}static get properties(){return{header:{type:String,value:"",reflectToAttribute:!0,observer:t=>{t.$.title=t.header}},collapsible:{type:Boolean,value:!1,reflectToAttribute:!0},expanded:{type:Boolean,value:!0,reflectToAttribute:!0},expandControlAnimation:{type:String,value:"rotate",reflectToAttribute:!0}}}attached(){this.addAutoEventListener(this.$.collapseControl,"click",(()=>{this.expanded=!this.expanded}))}static get template(){return'\n\t\t\t<style>\n\t\t\t\t:host {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t}\n\t\t\n\t\t\t\t#main,\n\t\t\t\t\t#content {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t\talign-items: stretch;\n\t\t\t\t}\n\t\t\n\t\t\t\t#header,\n\t\t\t\t#footer-content {\n\t\t\t\t\tdisplay: flex;\n\t\t\t\t\tflex-direction: row;\n\t\t\t\t\tflex-wrap: nowrap;\n\t\t\t\t\talign-items: center;\n\t\t\t\t}\n\t\t\n\t\t\t\t#collapse-control {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\tcursor: pointer;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([collapsible]) #collapse-control {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\n\t\t\t\t#collapse-control {\n\t\t\t\t\tmargin: var(--vicowa-panel-collapse-control-margin, 0 5px 0 3px);\n\t\t\t\t\ttransform: rotate(0);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([expand-control-animation="rotate"]) #collapse-control {\n\t\t\t\t\ttransition: transform .5s;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host([expand-control-animation="rotate"][expanded]) #collapse-control {\n\t\t\t\t\ttransform: rotate(90deg);\n\t\t\t\t}\n\t\t\n\t\t\t\t#header,\n\t\t\t\t#footer-content {\n\t\t\t\t\tbox-sizing: border-box;\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t}\n\t\t\n\t\t\t\t#content {\n\t\t\t\t\tflex: 0 0 auto;\n\t\t\t\t\tmax-height: 0;\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\ttransition: max-height .75s cubic-bezier(0,1,0,1);\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(:not([collapsible])) #content,\n\t\t\t\t:host([collapsible][expanded]) #content {\n\t\t\t\t\ttransition: max-height .5s cubic-bezier(1,0,1,0);\n\t\t\t\t\tmax-height: 10000px;\n\t\t\t\t}\n\t\t\n\t\t\t\t#main-content {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t}\n\t\t\n\t\t\t\tslot[name="header-content"] {\n\t\t\t\t\tflex: 1 1 auto;\n\t\t\t\t}\n\t\t\n\t\t\t\t#header {\n\t\t\t\t\tpadding: var(--vicow-panel-header-padding, 0 0 0 5px);\n\t\t\t\t\tposition: relative;\n\t\t\n\t\t\t\t\theight: var(--vicowa-panel-header-height, auto);\n\t\t\t\t\tbackground: var(--vicowa-panel-header-background, transparent);\n\t\t\t\t\tborder-top: var(--vicowa-panel-header-border-top, 1px solid #ddd);\n\t\t\t\t\tborder-right: var(--vicowa-panel-header-border-right, 1px solid #ddd);\n\t\t\t\t\tborder-bottom: var(--vicowa-panel-header-border-bottom, 1px solid #ddd);\n\t\t\t\t\tborder-left: var(--vicowa-panel-header-border-left, 1px solid #ddd);\n\t\t\t\t}\n\t\t\n\t\t\t\t#main-content {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\theight: var(--vicowa-panel-main-height, auto);\n\t\t\t\t\tbackground: var(--vicowa-panel-main-background, transparent);\n\t\t\t\t\tborder-top: var(--vicowa-panel-main-border-top, none);\n\t\t\t\t\tborder-right: var(--vicowa-panel-main-border-right, 1px solid #ddd);\n\t\t\t\t\tborder-bottom: var(--vicowa-panel-main-border-bottom, none);\n\t\t\t\t\tborder-left: var(--vicowa-panel-main-border-left, 1px solid #ddd);\n\t\t\t\t}\n\t\t\n\t\t\t\t#footer-content {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\theight: var(--vicowa-panel-footer-height, auto);\n\t\t\t\t\tbackground: var(--vicowa-panel-footer-background, transparent);\n\t\t\t\t\tborder-top: var(--vicowa-panel-footer-border-top, 1px solid #ddd);\n\t\t\t\t\tborder-right: var(--vicowa-panel-footer-border-right, 1px solid #ddd);\n\t\t\t\t\tborder-bottom: var(--vicowa-panel-footer-border-bottom, 1px solid #ddd);\n\t\t\t\t\tborder-left: var(--vicowa-panel-footer-border-left, 1px solid #ddd);\n\t\t\t\t}\n\t\t\n\t\t\t\tvicowa-icon {\n\t\t\t\t\tposition: relative;\n\t\t\t\t\tdisplay: none;\n\t\t\t\t\twidth: 24px;\n\t\t\t\t}\n\t\t\n\t\t\t\t:host(\'collapsible\') vicowa-icon:not([icon=""]) {\n\t\t\t\t\tdisplay: block;\n\t\t\t\t}\n\t\t\t</style>\n\t\t\t<div id="main">\n\t\t\t\t<div id="header"><div id="collapse-control"><vicowa-icon icon=""></vicowa-icon><span id="text">&gt;</span></div><vicowa-string id="title"></vicowa-string><slot name="header-content"></slot></div>\n\t\t\t\t<div id="content"><div id="main-content"><slot name="main-content"></slot></div><div id="footer-content"><slot name="footer-content"></slot></div></div>\n\t\t\t</div>\n\t\t'}});
//# sourceMappingURL=vicowa-panel.js.map