import { css , html , LitElement , property } from "lit-element" ; import { CardConfigGroup , CardConfig , LovelaceCard , ViewConfig , } from "../types" ; export class BaseLayout extends LitElement { @ property ( ) cards : Array < LovelaceCard > = [ ] ; @ property ( ) index : number ; @ property ( ) narrow : boolean ; @ property ( ) hass ; @ property ( ) lovelace : any ; @ property ( ) _editMode : boolean = false ; _editorLoaded = false ; @ property ( ) _config : ViewConfig ; async setConfig ( config ) { this . _config = { ... config } ; if ( this . _config . view_layout && this . _config . layout === undefined ) { this . _config . layout = this . _config . view_layout ; } } async updated ( changedProperties ) { if ( changedProperties . has ( "lovelace" ) && this . lovelace ?. editMode != changedProperties . get ( "lovelace" ) ?. editMode ) { if ( this . lovelace ?. editMode && ! this . _editorLoaded ) { this . _editorLoaded = true ; { const loader = document . createElement ( "hui-masonry-view" ) ; ( loader as any ) . lovelace = { editMode : true } ; ( loader as any ) . willUpdate ( new Map ( ) ) ; } } this . cards . forEach ( ( c ) => ( c . editMode = this . lovelace ?. editMode ) ) ; this . _editMode = this . lovelace ?. editMode ?? false ; } } _shouldShow ( card , config , index ) { if ( config . view_layout ?. show === "always" ) return true ; if ( config . view_layout ?. show === "never" ) return false ; if ( config . view_layout ?. show ?. sidebar === "shown" && ( this . hass ?. dockedSidebar === "auto" || this . narrow ) ) return false ; if ( config . view_layout ?. show ?. sidebar === "hidden" && this . hass ?. dockedSidebar === "docked" && ! this . narrow ) return false ; return true ; } getCardElement ( card ) { if ( ! this . lovelace ?. editMode ) return card . card ; const wrapper = document . createElement ( "hui-card-options" ) as any ; wrapper . hass = this . hass ; wrapper . lovelace = this . lovelace ; wrapper . path = [ this . index , card . index ] ; card . card . editMode = true ; wrapper . appendChild ( card . card ) ; if ( card . show === false ) wrapper . style . border = "1px solid red" ; return wrapper ; } _addCard ( ) { this . dispatchEvent ( new CustomEvent ( "ll-create-card" ) ) ; } _render_fab ( ) { if ( ! this . lovelace ?. editMode === true ) return html `` ; return html `
      <ha-fab .label=${ "Add card" } extended @click=${ this . _addCard }>
        <ha-icon slot="icon" .icon=${ "mdi:plus" }></ha-icon>
      </ha-fab>
    ` ; } static get _fab_styles ( ) { return css `
      ha-fab {
        position: sticky;
        float: right;
        right: calc(16px + env(safe-area-inset-right));
        bottom: calc(16px + env(safe-area-inset-bottom));
        z-index: 1;
      }
    ` ; } }