80 lines
1.9 KiB
JavaScript
80 lines
1.9 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2025 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import '@tp/tp-media-query/tp-media-query.js';
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TpElement extends LitElement {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
align-items: center;
|
|
grid-template-columns: auto 1fr;
|
|
grid-column-gap: var(--tp-settings-grid-column-gap, 20px);
|
|
grid-row-gap: var(--tp-settings-grid-row-gap, 20px);
|
|
}
|
|
|
|
:host([stretchLabels]:not([responsive])) .grid {
|
|
grid-template-columns: 1fr var(--tp-settings-grid-control-col-width, auto);
|
|
}
|
|
|
|
:host([alignControlsRight]:not([responsive])) ::slotted(tp-settings-grid-line) {
|
|
--tp-settings-grid-control-align: flex-end;
|
|
}
|
|
|
|
:host([responsive]) .grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
:host([responsive]) ::slotted(tp-settings-grid-line) {
|
|
display: block;
|
|
--tp-settings-grid-control-align: auto;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
const { breakpoint } = this;
|
|
|
|
return html`
|
|
<tp-media-query .query=${`(max-width: ${breakpoint}px)`} @media-query-update=${this._onMediaQueryUpdate}></tp-media-query>
|
|
|
|
<div class="grid">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
stretchLabels: { type: Boolean, reflect: true },
|
|
alignControlsRight: { type: Boolean, reflect: true },
|
|
breakpoint: { type: Number },
|
|
responsive: { type: Boolean, reflect: true }
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.stretchLabels = false;
|
|
this.alignControlsRight = false;
|
|
this.responsive = 600; // Default responsive breakpoint
|
|
}
|
|
|
|
_onMediaQueryUpdate(event) {
|
|
this.responsive = event.detail;
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-settings-grid', TpElement);
|