# Drawer + Sheet

Sliding panels for equipment details and operator forms.

## Installation

Download: /api/catalog/drawer-sheet/download

Ignition Perspective 8.3. In a development project, choose Designer > File > Import and select the ZIP. Preserve the view and style-class paths. Review resource conflicts before replacing anything.

Append stylesheet-snippet.css to Perspective Styles > stylesheet.css (enable Advanced Stylesheet). Preserve existing CSS. This supporting file is not imported automatically.

Add an Embedded View (ia.display.view), set props.path to Viewcraft/Components/UI/Drawer/Drawer, and configure props.params using the contract below. Connect your own data in the host view. The package does not include live tags, page configuration or Gateway settings.

## Parameters

Types are inferred from saved defaults; directions come from native propConfig. These are not full schemas or validated ranges.

| Parameter | Type | Direction | Default |

| --- | --- | --- | --- |

| open | boolean | inout | true |

| title | string | input | "Detalle · Bomba-01" |

| width | number | input | 360 |

| reducedMotion | boolean | input | false |

## Embedded View usage

```json

{
  "type": "ia.display.view",
  "props": {
    "path": "Viewcraft/Components/UI/Drawer/Drawer",
    "params": {
      "open": true,
      "title": "Detalle · Bomba-01",
      "width": 360,
      "reducedMotion": false
    },
    "useDefaultViewWidth": false,
    "useDefaultViewHeight": false
  }
}

```

## Verification

Source and archive hashes are checked. Designer import acceptance has not been completed for this archive; test in your development project before production.

## Files

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Drawer/Drawer/view.json

```json

{
  "custom": {},
  "params": {
    "open": true,
    "title": "Detalle · Bomba-01",
    "width": 360,
    "reducedMotion": false
  },
  "propConfig": {
    "params.open": {
      "paramDirection": "inout",
      "persistent": true
    },
    "params.title": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.width": {
      "paramDirection": "input",
      "persistent": true
    },
    "params.reducedMotion": {
      "paramDirection": "input",
      "persistent": true
    }
  },
  "props": {
    "defaultSize": {
      "width": 400,
      "height": 640
    }
  },
  "root": {
    "type": "ia.container.flex",
    "version": 0,
    "meta": {
      "name": "DrawerRoot"
    },
    "props": {
      "direction": "column",
      "wrap": "nowrap",
      "alignItems": "stretch",
      "justify": "flex-start",
      "style": {
        "minWidth": 0,
        "boxSizing": "border-box",
        "classes": "vc/drawer vc/drawer-open",
        "position": "absolute",
        "top": "0px",
        "left": "0px",
        "right": "0px",
        "bottom": "0px",
        "width": "100%",
        "height": "100%",
        "overflow": "hidden",
        "tabIndex": 0,
        "outline": "none"
      }
    },
    "position": {
      "grow": 1,
      "shrink": 1,
      "basis": "auto"
    },
    "children": [
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Dim"
        },
        "props": {
          "direction": "column",
          "style": {
            "classes": "vc/drawer-dim",
            "position": "absolute",
            "top": "0px",
            "left": "0px",
            "right": "0px",
            "bottom": "0px",
            "cursor": "pointer",
            "pointerEvents": "auto",
            "zIndex": 1
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "0px"
        },
        "events": {
          "dom": {
            "onClick": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\ttry:\n\t\tself.view.params.open = False\n\texcept:\n\t\tpass\n\tsystem.perspective.sendMessage(\n\t\t'vc.drawer.close',\n\t\t{'source': 'Drawer'}\n\t)\n"
              }
            },
            "onKeyUp": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
              }
            },
            "onKeyDown": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
              }
            }
          }
        },
        "children": []
      },
      {
        "type": "ia.container.flex",
        "version": 0,
        "meta": {
          "name": "Panel"
        },
        "props": {
          "direction": "column",
          "wrap": "nowrap",
          "alignItems": "stretch",
          "justify": "flex-start",
          "style": {
            "minWidth": 0,
            "boxSizing": "border-box",
            "classes": "vc/drawer-panel",
            "position": "absolute",
            "top": "0px",
            "right": "0px",
            "bottom": "0px",
            "width": "360px",
            "maxWidth": "100%",
            "zIndex": 2,
            "pointerEvents": "auto"
          }
        },
        "position": {
          "grow": 0,
          "shrink": 0,
          "basis": "auto"
        },
        "children": [
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Header"
            },
            "props": {
              "direction": "row",
              "wrap": "nowrap",
              "alignItems": "center",
              "justify": "flex-start",
              "style": {
                "minWidth": 0,
                "boxSizing": "border-box",
                "classes": "vc/drawer-header",
                "gap": "8px",
                "minHeight": "48px",
                "paddingTop": "12px",
                "paddingRight": "12px",
                "paddingBottom": "8px",
                "paddingLeft": "16px"
              }
            },
            "position": {
              "grow": 0,
              "shrink": 0,
              "basis": "auto"
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Title"
                },
                "props": {
                  "text": "Detalle · Bomba-01",
                  "style": {
                    "padding": "0px",
                    "margin": "0px",
                    "classes": "vc/drawer-title",
                    "fontSize": "16px",
                    "fontWeight": 600,
                    "color": "#fafafa",
                    "flex": "1"
                  }
                },
                "position": {
                  "grow": 1,
                  "shrink": 0,
                  "basis": "auto"
                },
                "propConfig": {
                  "props.text": {
                    "binding": {
                      "type": "property",
                      "config": {
                        "path": "view.params.title"
                      }
                    }
                  }
                },
                "events": {
                  "dom": {
                    "onKeyUp": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                      }
                    },
                    "onKeyDown": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                      }
                    }
                  }
                }
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "CloseBtn"
                },
                "props": {
                  "text": "✕",
                  "align": "center",
                  "style": {
                    "classes": "vc/drawer-close",
                    "width": "36px",
                    "height": "36px",
                    "minWidth": "36px",
                    "minHeight": "36px",
                    "lineHeight": "36px",
                    "fontSize": "18px",
                    "color": "#fafafa",
                    "cursor": "pointer",
                    "borderRadius": "6px",
                    "backgroundColor": "transparent",
                    "padding": "0px",
                    "margin": "0px",
                    "userSelect": "none"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "events": {
                  "dom": {
                    "onClick": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\ttry:\n\t\tself.view.params.open = False\n\texcept:\n\t\tpass\n\tsystem.perspective.sendMessage(\n\t\t'vc.drawer.close',\n\t\t{'source': 'Drawer'}\n\t)\n"
                      }
                    },
                    "onKeyUp": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                      }
                    },
                    "onKeyDown": {
                      "type": "script",
                      "scope": "G",
                      "config": {
                        "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                      }
                    }
                  }
                }
              }
            ],
            "events": {
              "dom": {
                "onKeyUp": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                  }
                },
                "onKeyDown": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                  }
                }
              }
            }
          },
          {
            "type": "ia.container.flex",
            "version": 0,
            "meta": {
              "name": "Body"
            },
            "props": {
              "direction": "column",
              "wrap": "nowrap",
              "alignItems": "stretch",
              "justify": "flex-start",
              "style": {
                "minWidth": 0,
                "boxSizing": "border-box",
                "classes": "vc/drawer-body",
                "gap": "4px",
                "paddingTop": "8px",
                "paddingRight": "16px",
                "paddingBottom": "16px",
                "paddingLeft": "16px",
                "overflow": "auto",
                "flex": "1"
              }
            },
            "position": {
              "grow": 1,
              "shrink": 1,
              "basis": "auto"
            },
            "children": [
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Subtitle"
                },
                "props": {
                  "text": "Equipo sintético · Línea A · Área Norte",
                  "style": {
                    "padding": "0px",
                    "margin": "0px",
                    "classes": "vc/drawer-muted",
                    "fontSize": "12px",
                    "color": "#a1a1aa",
                    "marginBottom": "8px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                }
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row0"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K0"
                    },
                    "props": {
                      "text": "Equipo",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V0"
                    },
                    "props": {
                      "text": "Bomba-01",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row1"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K1"
                    },
                    "props": {
                      "text": "Línea",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V1"
                    },
                    "props": {
                      "text": "Línea A",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row2"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K2"
                    },
                    "props": {
                      "text": "Área",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V2"
                    },
                    "props": {
                      "text": "Área Norte",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row3"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K3"
                    },
                    "props": {
                      "text": "Estado",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V3"
                    },
                    "props": {
                      "text": "Running",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row4"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K4"
                    },
                    "props": {
                      "text": "SP",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V4"
                    },
                    "props": {
                      "text": "1450 rpm",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.container.flex",
                "version": 0,
                "meta": {
                  "name": "Row5"
                },
                "props": {
                  "direction": "row",
                  "wrap": "nowrap",
                  "alignItems": "center",
                  "justify": "flex-start",
                  "style": {
                    "minWidth": 0,
                    "boxSizing": "border-box",
                    "gap": "12px",
                    "minHeight": "36px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                },
                "children": [
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "K5"
                    },
                    "props": {
                      "text": "Amps",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "classes": "vc/drawer-muted",
                        "fontSize": "12px",
                        "fontWeight": 500,
                        "color": "#a1a1aa",
                        "width": "88px"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  },
                  {
                    "type": "ia.display.label",
                    "version": 0,
                    "meta": {
                      "name": "V5"
                    },
                    "props": {
                      "text": "18.2 A",
                      "style": {
                        "padding": "0px",
                        "margin": "0px",
                        "fontSize": "13px",
                        "fontWeight": 500,
                        "color": "#fafafa"
                      }
                    },
                    "position": {
                      "grow": 0,
                      "shrink": 0,
                      "basis": "auto"
                    }
                  }
                ]
              },
              {
                "type": "ia.display.label",
                "version": 0,
                "meta": {
                  "name": "Hint"
                },
                "props": {
                  "text": "Esc / backdrop cierra · hits ≥36 · zinc flat sin blur",
                  "style": {
                    "padding": "0px",
                    "margin": "0px",
                    "classes": "vc/drawer-muted",
                    "fontSize": "11px",
                    "color": "#71717a",
                    "marginTop": "12px"
                  }
                },
                "position": {
                  "grow": 0,
                  "shrink": 0,
                  "basis": "auto"
                }
              }
            ],
            "events": {
              "dom": {
                "onKeyUp": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                  }
                },
                "onKeyDown": {
                  "type": "script",
                  "scope": "G",
                  "config": {
                    "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
                  }
                }
              }
            }
          }
        ],
        "propConfig": {
          "props.style.width": {
            "binding": {
              "type": "expr",
              "config": {
                "expression": "coalesce({view.params.width}, 360) + \"px\""
              }
            }
          }
        },
        "events": {
          "dom": {
            "onKeyUp": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
              }
            },
            "onKeyDown": {
              "type": "script",
              "scope": "G",
              "config": {
                "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
              }
            }
          }
        }
      }
    ],
    "events": {
      "dom": {
        "onKeyUp": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
          }
        },
        "onKeyDown": {
          "type": "script",
          "scope": "G",
          "config": {
            "script": "\tkey = ''\n\tcode = ''\n\ttry:\n\t\tkey = str(event.key)\n\texcept:\n\t\ttry:\n\t\t\tkey = str(event['key'])\n\t\texcept:\n\t\t\tkey = ''\n\ttry:\n\t\tcode = str(event.keyCode)\n\texcept:\n\t\ttry:\n\t\t\tcode = str(event['keyCode'])\n\t\texcept:\n\t\t\tcode = ''\n\tif key in ('Escape', 'Esc') or code in ('27', '27.0'):\n\t\ttry:\n\t\t\tself.view.params.open = False\n\t\texcept:\n\t\t\tpass\n\t\tsystem.perspective.sendMessage('vc.drawer.close', {'source': 'DrawerEsc'})\n"
          }
        }
      }
    },
    "propConfig": {
      "props.style.classes": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "if(coalesce({view.params.reducedMotion}, false), if(coalesce({view.params.open}, false), \"vc/drawer vc/drawer-open vc/drawer-reduced\", \"vc/drawer vc/drawer-closed vc/drawer-reduced\"), if(coalesce({view.params.open}, false), \"vc/drawer vc/drawer-open\", \"vc/drawer vc/drawer-closed\"))"
          }
        }
      },
      "meta.visible": {
        "binding": {
          "type": "expr",
          "config": {
            "expression": "true"
          }
        }
      }
    }
  }
}


```

### com.inductiveautomation.perspective/views/Viewcraft/Components/UI/Drawer/Drawer/resource.json

```json

{
  "scope": "G",
  "version": 1,
  "restricted": false,
  "overridable": true,
  "files": [
    "view.json"
  ]
}

```

### stylesheet-snippet.css

```css



[class~="psc-vc/drawer"], .psc-vc\/drawer {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box !important;
  z-index: 40 !important;
  pointer-events: none !important;
}

[class~="psc-vc/drawer-open"], .psc-vc\/drawer-open {
  pointer-events: auto !important;
}

[class~="psc-vc/drawer-closed"], .psc-vc\/drawer-closed {
  pointer-events: none !important;
}
[class~="psc-vc/drawer-dim"], .psc-vc\/drawer-dim {
  background-color: rgb(0 0 0 / 0.50) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-sizing: border-box !important;
  transition: opacity 210ms ease !important;
  opacity: 1 !important;
}

[class~="psc-vc/drawer-closed"] [class~="psc-vc/drawer-dim"], .psc-vc\/drawer-closed .psc-vc\/drawer-dim {
  opacity: 0 !important;
}
[class~="psc-vc/drawer-panel"], .psc-vc\/drawer-panel {
  background-color: var(--vc-panel, #171717) !important;
  border: 1px solid var(--vc-border, #3f3f46) !important;
  border-radius: 10px 0 0 10px !important;
  box-shadow: -8px 0 24px rgb(0 0 0 / 0.35) !important;
  color: var(--vc-foreground, #fafafa) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  min-width: 320px !important;
  max-width: 400px !important;
  transition: transform 210ms ease, opacity 210ms ease !important;
  transform: translateX(0) !important;
  opacity: 1 !important;
  z-index: 41 !important;
}

[class~="psc-vc/drawer-closed"] [class~="psc-vc/drawer-panel"], .psc-vc\/drawer-closed .psc-vc\/drawer-panel {
  transform: translateX(100%) !important;
  opacity: 0 !important;
}

[class~="psc-vc/drawer-title"], .psc-vc\/drawer-title, [class~="psc-vc/drawer-title"] .ia_label__text {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--vc-foreground, #fafafa) !important;
  line-height: 24px !important;
}

[class~="psc-vc/drawer-muted"], .psc-vc\/drawer-muted, [class~="psc-vc/drawer-muted"] .ia_label__text {
  color: var(--vc-muted-fg, #a1a1aa) !important;
}
[class~="psc-vc/drawer-reduced"] [class~="psc-vc/drawer-panel"], .psc-vc\/drawer-reduced .psc-vc\/drawer-panel {
  transition: opacity 150ms ease !important;
  transform: none !important;
}

[class~="psc-vc/drawer-reduced"][class~="psc-vc/drawer-closed"] [class~="psc-vc/drawer-panel"], .psc-vc\/drawer-reduced.psc-vc\/drawer-closed .psc-vc\/drawer-panel {
  opacity: 0 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {
  [class~="psc-vc/drawer-panel"], .psc-vc\/drawer-panel, [class~="psc-vc/drawer-dim"], .psc-vc\/drawer-dim {
    transition: opacity 150ms ease !important;
    transform: none !important;
  }
}
[class~="psc-vc/drawer-closed"], .psc-vc\/drawer-closed, [class~="psc-vc/drawer-closed"] *, .psc-vc\/drawer-closed * {
  pointer-events: none !important;
}

```