uid: Paradox_EVO_V2d1
tags: []
props:
  parameters:
    - context: item
      description: Partition State Group Item
      label: Partition State Group Item
      name: partitionStateGroup
      required: false
      type: TEXT
    - context: item
      description: Partition ExitDelay Group
      label: Partition ExitDelay Group
      name: partitionExitDelayGroup
      required: false
      type: TEXT
    - default: Partition1
      description: Default (Fallback) Partition
      label: Default (Fallback) Partition
      name: selectedPartitionP
      required: false
      type: TEXT
    - description: Show Tooltips in Widget
      label: Show Tooltips in Widget
      name: tooltipEnable
      required: false
      type: BOOLEAN
    - description: Replace pincode characters with this string, leave blank to show it as-is
      label: Mask character
      name: mask
      required: false
  parameterGroups: []
timestamp: Mar 2, 2023, 1:11:59 PM
component: f7-block
config:
  style:
    --paradox-background-color: rgba(39,26,226,255)
    --paradox-background-keypad: rgba(232,232,232)
    --paradox-font-color: rgba(6,192,232,255)
    --paradox-keys-color: rgba(194,209,216,255)
    --paradox-keys-font-weight: 800
    background-color: rgba(239,239,239,255)
    border-radius: 20px
    height: 720px
    left: 0px
    margin: 0
    top: 0px
    width: 360px
  stylesheet: >
    .paradoxFlash {
      animation: mymove 0.5s infinite;
    } @keyframes mymove {
      from {background-color: green;}
      to {background-color: orange;}
    } .paradoxOrange {
      background: orange
    }     .paradoxGray {
      background: gray
    }    
slots:
  default:
    - component: oh-button
      config:
        clearVariable: selectedPartitionP
        large: true
        popupClose: .modal-in
        style:
          background: rgb(220,220,220)
          color: white
          display: flex
          height: 30px
          left: 5px
          position: absolute
          top: 0px
          width: 30px
          z-index: 999
        tooltip: '=!(props.tooltipEnable) ? false : "Close Popup"'
        tooltip-trigger: hover
      slots:
        default:
          - component: f7-icon
            config:
              color: white
              f7: clear_fill
              style:
                color: black
                font-size: 20px
                margin: auto
    - component: f7-block
      config:
        style:
          background: rgb(220,220,220)
          border-radius: 20px
          display: flex
          height: 160px
          justify-content: center
          left: 0px
          margin: 0
          position: absolute
          top: 0px
          width: 360px
      slots:
        default:
          - component: Label
            config:
              style:
                align-items: center
                color: white
                font-size: 24px
                overflow: hidden
                text-overflow: ellipsis
                text-shadow: -1px 1px 1px hsl(0,0%,66%)
                top: 0px
                white-space: nowrap
              text: ="P▲R▲DOX"
    - component: f7-block
      config:
        style:
          background: var(--paradox-background-color)
          border-radius: 5px
          height: 90px
          left: 30px
          margin: 0
          overflow: hidden
          top: 35px
          width: 300px
        stylesheet: >
          .scroll_text {
            display: block; /* Important to give the content a width */
            transform: translateX(200%); /* Animation start out of the screen */
            /* Add the animation */
            animation: move_scroll 10s linear infinite /* infinite make reapeat the animation indefinitely */;
          } /* Create the animation */ @keyframes move_scroll {
            to { transform: translateX(-250%); }
          }   .roll_block {
            display: block; /* Important to give the content a width */
            overflow: hidden;
            /* Add the animation */
            animation: move_roll 4s linear infinite /* infinite make repeat  the animation indefinitely */;   
          } /* Create the animation */ @keyframes move_roll {
            from {
                translateY(25px);
                  transform: translateY(25px);}
            to { 
                translateY(calc(-100% - 25px));
                  transform: translateY(calc(-100% - 25px)); }
                }          
      slots:
        default:
          - component: f7-block
            config:
              style:
                background: var(--paradox-background-color)
                border-radius: 5px
                display: flex
                height: 45px
                justify-content: center
                left: 0px
                margin: 0
                overflow: hidden
                top: 0px
                width: 300px
            slots:
              default:
                - component: Label
                  config:
                    class:
                      - align-items-center
                      - justify-content-center
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-background-color)
                      color: var(--paradox-font-color)
                      display: flex
                      font-size: 30px
                      font-weight: 700
                      position: absolute
                      width: 300px
                      z-index: 10
                    text: '=(vars.selectedPartitionP  === NULL) ? "Select Partition" : vars.selectedPartitionP '
          - component: f7-block
            config:
              style:
                background: var(--paradox-background-color)
                border-radius: 5px
                display: flex
                height: 45px
                justify-content: center
                left: 0px
                margin: 0
                overflow: hidden
                position: absolute
                top: 45px
                width: 300px
              visible: =(items[props.partitionExitDelayGroup].state === "OFF")
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: PartitionState
                    fragment: true
                    groupItem: =props.partitionStateGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: Label
                        config:
                          class: scroll_text
                          large: true
                          raised: true
                          style:
                            background: var(--paradox-background-color)
                            color: var(--paradox-font-color)
                            flex: 0 0 420px
                            font-size: 30px
                            font-weight: 700
                            top: 0px
                            white-space: nowrap
                            width: 420px
                          text: =loop.PartitionState.label.slice(0, 11) +  loop.PartitionState.label.slice(21, 27) + " - " + items[loop.PartitionState.name].state
                      - component: oh-link
                        config:
                          large: true
                          raised: true
                          style:
                            background: var(--paradox-background-color)
                            color: var(--paradox-font-color)
                            font-size: 30px
                            font-weight: 700
                            position: absolute
                            top: 0px
                            width: 300px
                          text: "=(props.mask && vars.pincode) ? props.mask.repeat(vars.pincode.length || 0) : vars.pincode"
          - component: f7-block
            config:
              class: roll_block
              style:
                background: var(--paradox-background-color)
                border-radius: 5px
                left: 0px
                margin: 0
                position: absolute
                top: 45px
                width: 300px
                z-index: 0
              visible: =(items[props.partitionExitDelayGroup].state === "ON")
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: PartitionExitDelay
                    fragment: true
                    groupItem: =props.partitionExitDelayGroup
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: oh-repeater
                        config:
                          filter: ({'ON':1,'-':1})[loop.exitDelay.filter]
                          for: exitDelay
                          fragment: true
                          in:
                            - filter: =items[loop.PartitionExitDelay.name].state
                              title: =loop.PartitionExitDelay.label.slice(0, 11) + " Exit Delay"
                          sourceType: array
                        slots:
                          default:
                            - component: Label
                              config:
                                large: true
                                raised: true
                                style:
                                  background: var(--paradox-background-color)
                                  color: var(--paradox-font-color)
                                  flex: 0 0 420px
                                  font-size: 30px
                                  font-weight: 700
                                  top: 45px
                                  white-space: nowrap
                                  width: 300px
                                text: =loop.exitDelay.title
    - component: f7-block
      config:
        bgColor: '=((Number.parseFloat(items.ParadoxpanelEVO192_Voltage.state)).toFixed(2) > 10.00) ? "orange" : "gray"'
        style:
          border-radius: 12px
          height: 20px
          left: 10px
          margin: 0
          position: absolute
          top: 170px
          width: 25px
        tooltip: '=!(props.tooltipEnable) ? false : "Panel has AC Power (Orange)"'
        tooltip-trigger: hover
    - component: f7-icon
      config:
        f7: waveform_path_ecg
        size: 15px
        style:
          left: 15px
          position: absolute
          top: 195px
    - component: oh-button
      config:
        action: variable
        actionVariable: showLogs
        actionVariableValue: '=(vars.showLogs == "null") ? true : !(vars.showLogs)'
        class:
          - elevation-2
          - elevation-hover-5
          - elevation-pressed-2
          - elevation-transition
        iconColor: black
        iconF7: arrowtriangle_up_fill
        iconSize: 11
        raised: true
        round: true
        small: true
        style:
          background: var(--paradox-keys-color)
          color: white
          position: absolute
          right: 8px
          top: 170px
        tooltip: '=!(props.tooltipEnable) ? false : "Up Arrow"'
        tooltip-trigger: hover
    - component: f7-block
      config:
        class: '=(items[vars.selectedPartitionP + "_PartitionInExitDelay"].state === "ON") ? "paradoxFlash" : (items[vars.selectedPartitionP + "_PartitionHasAllZonesClosed"].state === "OPEN") ? "paradoxOrange" : "paradoxGray"'
        style:
          border-radius: 20px
          height: 20px
          left: 10px
          margin: 0
          position: absolute
          top: 220px
          width: 25px
          z-index: 999
        tooltip: '=!(props.tooltipEnable) ? false : "Status"'
        tooltip-trigger: hover
    - component: Label
      config:
        style:
          color: black
          font-size: 10px
          left: 6px
          position: absolute
          top: 245px
        text: STATUS
    - component: oh-button
      config:
        action: variable
        actionVariable: showLogs
        actionVariableValue: '=(vars.showLogs == "null") ? true : !(vars.showLogs)'
        class:
          - elevation-2
          - elevation-hover-5
          - elevation-pressed-2
          - elevation-transition
        iconColor: black
        iconF7: arrowtriangle_down_fill
        iconSize: 11
        round: true
        small: true
        style:
          background: var(--paradox-keys-color)
          color: white
          position: absolute
          right: 8px
          top: 220px
        tooltip: '=!(props.tooltipEnable) ? false : "Down Arrow"'
        tooltip-trigger: hover
    - component: f7-block
      config:
        style:
          margin: 0 
          padding: 0 
          background: var(--paradox-background-keypad)
          border-radius: 20px
          display: flex
          flex-direction: column
          flex-wrap: nowrap
          height: 460px
          justify-content: space-evenly
          left: 45px
          position: absolute
          top: 130px
          width: 270px
      slots:
        default:
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: STAY_ARM
                    actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: STAY
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "Arm in STAY Mode"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: FORCE_ARM
                    actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 5px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: FORCE
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "Arm in FORCE Mode"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: ARM
                    actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 5px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: ARM
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "Arm in EXIT Mode"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: DISARM
                    actionItem: =vars.selectedPartitionP + "_CommunicatorCommand"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: DISARM
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "DISARM Partition"'
                    tooltip-trigger: hover
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: Bypass
                    actionVariableValue: '=(vars.Bypass == "null") ? true : !(vars.Bypass)'
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: BYP
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "Display Bypass List"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: '="partition_secondary_command|0," + (1 << (((vars.selectedPartitionP === NULL) ? props.selectedPartitionP : vars.selectedPartitionP).substr(-1) - 1))'
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 5px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: MEM
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "MEM"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: '="partition_secondary_command|0," + (1 << (((vars.selectedPartitionP === NULL) ? props.selectedPartitionP : vars.selectedPartitionP).substr(-1) - 1))'
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 5px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: TBL
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "Trouble"'
                    tooltip-trigger: hover
                - component: oh-button
                  config:
                    action: command
                    actionCommand: '="partition_secondary_command|0," + (1 << (((vars.selectedPartitionP === NULL) ? props.selectedPartitionP : vars.selectedPartitionP).substr(-1) - 1))'
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: true
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 9.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: ACC
                    textColor: black
                    tooltip: '=!(props.tooltipEnable) ? false : "ACC"'
                    tooltip-trigger: hover
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '1' : '1'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "1"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 35px
                      position: absolute
                      top: -15px
                    text: AREAS
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '2' : '2'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "2"
                    textColor: black
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '3' : '3'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "3"
                    textColor: black
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '4' : '4'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "4"
                    textColor: black
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '5' : '5'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "5"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 110px
                      position: absolute
                      top: -15px
                    text: INSTANT
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '6' : '6'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "6"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 195px
                      position: absolute
                      top: -15px
                    text: DISPLAY
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '7' : '7'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "7"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 35px
                      position: absolute
                      top: -15px
                    text: EVENT
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '8' : '8'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "8"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 120px
                      position: absolute
                      top: -15px
                    text: TEST
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '9' : '9'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "9"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 200px
                      position: absolute
                      top: -15px
                    text: CHIME
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: ""
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 7.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: CLEAR
                    textColor: black
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '0' : '0'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: "0"
                    textColor: black
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 125px
                      position: absolute
                      top: -15px
                    text: PRG
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: pincode
                    actionVariableValue: "=(vars.pincode) ? vars.pincode + '9' : '9'"
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    large: false
                    raised: true
                    style:
                      background: var(--paradox-keys-color)
                      border-radius: 12px
                      font-size: 7.5px
                      font-weight: var(--paradox-keys-font-weight)
                      width: 60px
                    text: ENTER
                    textColor: black
          - component: f7-block
            config:
              style:
                display: flex
                justify-content: space-evenly
                margin: 0
            slots:
              default:
                - component: oh-button
                  config:
                    action: command
                    actionCommand: ="partition_secondary_command|6,1"
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    iconColor: blue
                    iconF7: shield_fill
                    iconSize: 24
                    style:
                      border-radius: 12px
                      color: white
                      width: 60px
                    tooltip: '=!(props.tooltipEnable) ? false : "Police Panic"'
                    tooltip-trigger: hover
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 35px
                      position: absolute
                      top: 35px
                    text: "[1] + [3]"
                - component: oh-button
                  config:
                    action: command
                    actionCommand: ="partition_secondary_command|5,1"
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    iconColor: green
                    iconF7: exclamationmark_triangle
                    iconSize: 28
                    style:
                      border-radius: 12px
                      color: white
                      width: 60px
                    tooltip: '=!(props.tooltipEnable) ? false : "Medical Panic"'
                    tooltip-trigger: hover
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      left: 115px
                      position: absolute
                      top: 35px
                    text: "[4] + [6]"
                - component: oh-button
                  config:
                    action: command
                    actionCommand: ="partition_secondary_command|4,1"
                    actionItem: =props.sendCommand
                    class:
                      - elevation-2
                      - elevation-hover-5
                      - elevation-pressed-2
                      - elevation-transition
                    iconColor: red
                    iconF7: flame
                    iconSize: 20
                    style:
                      border-radius: 12px
                      color: white
                      width: 60px
                    tooltip: '=!(props.tooltipEnable) ? false : "Fire Panic"'
                    tooltip-trigger: hover
                - component: Label
                  config:
                    style:
                      color: black
                      font-size: 10px
                      position: absolute
                      right: 30px
                      top: 35px
                    text: "[7] + [8]"
    - component: f7-list
      config:
        class:
          - padding-bottom
          - big-toggles
        style:
          --f7-list-border-color: transparent
          left: 20%
          position: absolute
          top: 280px
          width: 60%
        visible: =(vars.Bypass) == true
      slots:
        default:
          - component: Label
            config:
              style:
                background: rgb(220,220,220)
                font-size: 75%
                font-weight: 500
                line-height: 20px
                padding-left: 20px
              text: Zones Bypassed
          - component: oh-repeater
            config:
              for: item
              fragment: true
              groupItem: =(vars.selectedPartitionP) + '_Bypass_Group'
              sourceType: itemsInGroup
            slots:
              default:
                - component: oh-toggle-item
                  config:
                    color: '=(items[loop.item.name].state == "ON") ? "green" : "gray"'
                    item: =loop.item.name
                    style:
                      --f7-list-item-border-color: transparent
                      --f7-list-item-min-height: 14px
                      --f7-list-item-padding-vertical: 1px
                      --f7-toggle-height: 10px
                      --f7-toggle-width: 35px
                      backgroundColor: var(--paradox-background-keypad)
                      font-size: 70%
                    title: =loop.item.label
    - component: f7-block
      config:
        class:
          - padding
        style:
          left: 0px
          margin: 0
          position: absolute
          top: 640px
          width: 360px
      slots:
        default:
          - component: f7-row
            config:
              class: no-gap
            slots:
              default:
                - component: oh-repeater
                  config:
                    for: partition
                    fragment: true
                    in:
                      - 1
                      - 2
                      - 3
                      - 4
                      - 5
                      - 6
                      - 7
                      - 8
                  slots:
                    default:
                      - component: f7-row
                        config:
                          width: "10"
                        slots:
                          default:
                            - component: oh-button
                              config:
                                action: variable
                                actionVariable: selectedPartitionP
                                actionVariableValue: ='Partition' + loop.partition
                                bgColor: '=(items["Partition" + loop.partition + "_PartitionState"].state === "-") ? "gray" : (items["Partition" + loop.partition + "_PartitionState"].state === "Armed") ? "red" : "green"'
                                disabled: '=(items["Partition" + loop.partition + "_PartitionState"].state === "-") ? true : false'
                                fill: true
                                raised: false
                                style:
                                  border-radius: 12px
                                  overflow: hidden
                                  text-overflow: ellipsis
                                  white-space: nowrap
                                text: =["P" + loop.partition]
                                textColor: white
                                tooltip: '=!(props.tooltipEnable) ? false : "Apply Partition to current run"'
                                tooltip-trigger: hover
    - component: Label
      config:
        style:
          color: black
          font-size: 10px
          left: 20px
          position: absolute
          top: 610px
        text: ="Exit Delay Group - " + (items[props.partitionExitDelayGroup].state)
    - component: Label
      config:
        style:
          color: black
          font-size: 10px
          left: 20px
          position: absolute
          top: 625px
        text: ="AC Voltage - " + (Number.parseFloat(items.ParadoxpanelEVO192_Voltage.state)).toFixed(2)
    - component: Label
      config:
        style:
          color: black
          font-size: 10px
          left: 20px
          position: absolute
          top: 640px
        text: ="Exit Delay- " + (items[vars.selectedPartitionP + "_PartitionInExitDelay"].state)