{"size": 1844, "ext": "js", "max_stars_repo_path": "lib/elements/inspector-elements/devtools-no-edit-property.js", "max_stars_repo_name": "Matsuuu/lit-devtools", "max_stars_repo_stars_event_min_datetime": "2021-06-30T07:53:33.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-26T01:02:32.000Z", "max_issues_repo_path": "lib/elements/inspector-elements/devtools-no-edit-property.js", "max_issues_repo_name": "Matsuuu/lit-devtools", "max_issues_repo_issues_event_min_datetime": "2021-06-30T10:37:55.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-08T20:47:30.000Z", "max_forks_repo_path": "lib/elements/inspector-elements/devtools-no-edit-property.js", "max_forks_repo_name": "Matsuuu/lit-devtools", "max_forks_repo_forks_event_min_datetime": "2021-09-03T22:18:54.000Z", "max_forks_repo_forks_event_max_datetime": "2021-10-02T06:43:46.000Z"}
{"max_stars_count": 62, "max_issues_count": 40, "max_forks_count": 3, "avg_line_length": 28.3692307692, "max_line_length": 103, "alphanum_fraction": 0.478308026}
import { css, html, LitElement } from 'lit';
import './indicators/devtools-property-indicators.js';

export class DevToolsNoEditProperty extends LitElement {
    static get properties() {
        return {
            value: { type: String, reflect: true },
            label: { type: String },
            property: { type: Object },
        };
    }

    constructor() {
        super();

        this.value = '';
        this.property = null;
        this.label = '';
        this.title = 'This value is not editable from the devtools';
    }

    render() {
        return html`${this.label.length > 0 ? html` <label>${this.label}:</label> ` : ''}
            <p>${this.value.replace("#NO_EDIT#", "")}</p>
            <devtools-property-indicators .property=${this.property}></devtools-property-indicators> `;
    }

    static get styles() {
        return css`
            :host {
                --font-size: 0.8rem;
                display: flex;
                justify-content: flex-start;
                align-items: center;
            }

            p {
                margin: 0;
                display: flex;
                padding-left: 0.5rem;
                align-items: center;
                font-size: 0.8rem;
                padding: 3px 0 3px 0.5rem;
                cursor: help;
                white-space: nowrap;
                overflow: hidden;
                color: var(--button-color);
            }

            label {
                margin: 0;
                font-size: 0.8rem;
                padding: 3px 0 3px 3px;
                color: var(--secondary);
                font-weight: 400;
                white-space: nowrap;
            }
        `;
    }
}

if (!customElements.get('devtools-no-edit-property')) {
    customElements.define('devtools-no-edit-property', DevToolsNoEditProperty);
}
