open option for lock (#14852)

Co-authored-by: Bram Kragten <mail@bramkragten.nl>

src/state-summary/state-card-lock.js

@@ -3,8 +3,10 @@ import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 /* eslint-plugin-disable lit */
 import { PolymerElement } from "@polymer/polymer/polymer-element";
+import { supportsFeature } from "../common/entity/supports-feature";
 import "../components/entity/state-info";
 import LocalizeMixin from "../mixins/localize-mixin";
+import { LockEntityFeature } from "../data/lock";
 
 /*
  * @appliesMixin LocalizeMixin
@@ -19,10 +21,19 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
           height: 37px;
           margin-right: -0.57em;
         }
+        [hidden] {
+          display: none !important;
+        }
       </style>
 
       <div class="horizontal justified layout">
         ${this.stateInfoTemplate}
+        <mwc-button
+          on-click="_callService"
+          data-service="open"
+          hidden$="[[!supportsOpen]]"
+          >[[localize('ui.card.lock.open')]]</mwc-button
+        >
         <mwc-button
           on-click="_callService"
           data-service="unlock"
@@ -61,12 +72,14 @@ class StateCardLock extends LocalizeMixin(PolymerElement) {
         value: false,
       },
       isLocked: Boolean,
+      supportsOpen: Boolean,
     };
   }
 
   _stateObjChanged(newVal) {
     if (newVal) {
       this.isLocked = newVal.state === "locked";
+      this.supportsOpen = supportsFeature(newVal, LockEntityFeature.OPEN);
     }
   }
 

src/translations/en.json

@@ -147,7 +147,8 @@
       "lock": {
         "code": "[%key:ui::card::alarm_control_panel::code%]",
         "lock": "Lock",
-        "unlock": "Unlock"
+        "unlock": "Unlock",
+        "open": "Open"
       },
       "media_player": {
         "source": "Source",