@c8y/ng1-modules 1018.0.29 → 1018.0.31

package/core/ui/properties/computedProperties.provider.js

@@ -1 +1 @@
-"use strict";!function(){function t(c){t.$inject=["$injector","c8yModal"];var i,a=new WeakMap,f={},u={},p={};function s(t,e,r){var o=f[t],n=_.isArray(e)?e:e.$inject;void 0===n&&(n=c.annotate(e));var i=_.includes(n,"config");if(o)throw new Error('Computed property "'.concat(t,'" already registered'));if(i){if(p[t])throw new Error('Computed property factory "'.concat(t,'" already registered'));p[t]={config:r,property:e}}f[t]={config:r,property:e}}function e(o,t){var n=p[t];if(!n)throw new Error('Computed property factory "'.concat(t,'" is not registered'));return{create:function(t,e){if(u[t])throw new Error('Computed property "'.concat(t,'" already registered'));return u[t]={getter:o.invoke(n.property,void 0,{config:e}),config:n.config},!0},attach:function(t,e,r){d(t,e,{getter:o.invoke(n.property,void 0,{config:r})})}}}function r(r){_.forEach(f,function(e,t){u[t]||(u[t]={_lazy:!0,getter:function(){var t=this._getter;return t||(this._getter=r.invoke(e.property,void 0,{config:!1}),t=this._getter),t},config:e.config})})}function g(t,e){if(_.isArray(e))return function(e,t){var c=_.keys(p),a=_.union(_.keys(u),c);_(t).filter("computed").map(function(t){var e=_.last(t.id.split("!!")),r=(t.config||{})._id||String(Math.random()).substr(2),o=t.config||{},n=_.includes(a,e),i=e+(_.includes(c,e)?"_".concat(r):"");return(t.config=o)._id=r,n&&(t.keyPath=[i]),{key:e,keyPath:i,isFactory:_.includes(c,e),config:o,exists:n}}).filter("exists").forEach(function(t){t.isFactory?i(t.key).attach(e,t.keyPath,t.config):g(e,t.key)})}(t,e),t;var r=e;if(r){var o=u[r];if(!o)throw new Error('Computed property "'.concat(r,'" is not registered.'));d(t,r,o)}else!function(i){_.forEach(u,function(e,r){var t=function(t){return t&&d(i,r,e)},o=(e.config||{}).attachIf,n=(o=o||_.constant(!0))(i);_.isFunction(_.get(n,"then"))?n.then(t):t(n)})}(t);return t}function d(t,e,r){if(_.isObjectLike(t)){if(!_.has(t,e)){var o=r._lazy?r.getter():r.getter,n=o.detach||_.noop,i=a.get(t);i||(i=[],a.set(t,i)),i.push(function(t){n(t),delete t[e]}),Object.defineProperty(t,e,{enumerable:!1,configurable:!0,get:function(){return o(this)}})}}else console.warn("[Computed properties] Managed object is not an object")}function l(e){var r=this,t=a.get(e);_.forEach(t,function(t){try{t.call(r,e)}catch(t){console.error("Error detaching computed property",t)}}),a.delete(e)}function t(t,n){var o=_.partial(r,t);return{register:function(t,e,r){s(t,e,r),o()},attach:g,detach:l,factory:i=_.partial(e,t),init:o,edit:function(t){var e=_.last(t.id.split("!!")),r=p[e];if(!r)throw new Error("".concat(e," is not a factory computed property."));var o=_.get(r,"config.configTemplateUrl");return n({templateUrl:":::PLUGIN_PATH:::/ui/properties/computedPropertyConfigModal.html",controller:"ComputedPropertyConfigCtrl",size:"lg",resolve:{options:function(){return{configTemplateUrl:o,computedProperty:e,configSchema:_.isObjectLike(t.configSchema)&&t.configSchema,config:angular.copy(t.config)||{},prop:t}}}})},listFactories:function(){return _.map(p,function(t,e){return{id:e,config:_.clone(t.config)}})}}}return{register:s,$get:t}}function e(t){t.init()}e.$inject=["c8yComputedProperties"],t.$inject=["$injector"],angular.module("c8y.ui").provider("c8yComputedProperties",t).run(e)}();
+"use strict";!function(){function t(c){t.$inject=["$injector","c8yModal"];var i,a=new WeakMap,f={},u={},p={};function s(t,e,r){var o=f[t],n=_.isArray(e)?e:e.$inject;void 0===n&&(n=c.annotate(e));var i=_.includes(n,"config");if(o)throw new Error('Computed property "'.concat(t,'" already registered'));if(i){if(p[t])throw new Error('Computed property factory "'.concat(t,'" already registered'));p[t]={config:r,property:e}}f[t]={config:r,property:e}}function e(o,t){var n=p[t];if(!n)throw new Error('Computed property factory "'.concat(t,'" is not registered'));return{create:function(t,e){if(u[t])throw new Error('Computed property "'.concat(t,'" already registered'));return u[t]={getter:o.invoke(n.property,void 0,{config:e}),config:n.config},!0},attach:function(t,e,r){d(t,e,{getter:o.invoke(n.property,void 0,{config:r})})}}}function r(r){_.forEach(f,function(e,t){u[t]||(u[t]={_lazy:!0,getter:function(){var t=this._getter;return t||(this._getter=r.invoke(e.property,void 0,{config:!1}),t=this._getter),t},config:e.config})})}function g(t,e){if(_.isArray(e))return function(e,t){var c=_.keys(p),a=_.union(_.keys(u),c);_(t).filter("computed").map(function(t){var e=_.last(t.id.split("!!")),r=(t.config||{})._id||String(Math.random()).substr(2),o=t.config||{},n=_.includes(a,e),i=e+(_.includes(c,e)?"_".concat(r):"");return(t.config=o)._id=r,n&&(t.keyPath=[i]),{key:e,keyPath:i,isFactory:_.includes(c,e),config:o,exists:n}}).filter("exists").forEach(function(t){t.isFactory?i(t.key).attach(e,t.keyPath,t.config):g(e,t.key)})}(t,e),t;var r=e;if(r){var o=u[r];if(!o)throw new Error('Computed property "'.concat(r,'" is not registered.'));d(t,r,o)}else!function(i){_.forEach(u,function(e,r){var t=function(t){return t&&d(i,r,e)},o=(e.config||{}).attachIf,n=(o=o||_.constant(!0))(i);_.isFunction(_.get(n,"then"))?n.then(t):t(n)})}(t);return t}function d(t,e,r){if(_.isObjectLike(t)){if(!_.has(t,e)){var o=r._lazy?r.getter():r.getter,n=o.detach||_.noop,i=a.get(t);i||(i=[],a.set(t,i)),i.push(function(t){n(t),delete t[e]}),Object.defineProperty(t,e,{enumerable:!1,configurable:!0,get:function(){return o(this)}})}}else console.warn("[Computed properties] Managed object is not an object")}function l(e){var r=this,t=a.get(e);_.forEach(t,function(t){try{t.call(r,e)}catch(t){console.error("Error detaching computed property",t)}}),a.delete(e)}function t(t,n){var o=_.partial(r,t);return{register:function(t,e,r){s(t,e,r),o()},attach:g,detach:l,factory:i=_.partial(e,t),init:o,edit:function(t){var e=_.last(t.id.split("!!")),r=p[e];if(!r)throw new Error("".concat(e," is not a factory computed property."));var o=_.get(r,"config.configTemplateUrl");return n({templateUrl:":::PLUGIN_PATH:::/ui/properties/computedPropertyConfigModal.html",controller:"ComputedPropertyConfigCtrl",size:"sm",resolve:{options:function(){return{configTemplateUrl:o,computedProperty:e,configSchema:_.isObjectLike(t.configSchema)&&t.configSchema,config:angular.copy(t.config)||{},prop:t}}}})},listFactories:function(){return _.map(p,function(t,e){return{id:e,config:_.clone(t.config)}})}}}return{register:s,$get:t}}function e(t){t.init()}e.$inject=["c8yComputedProperties"],t.$inject=["$injector"],angular.module("c8y.ui").provider("c8yComputedProperties",t).run(e)}();

package/core/ui/properties/computedPropertyConfigModal.html

@@ -1,38 +1,43 @@
-<div class="modal-header">
-  <h3 id="modal-title" translate>Computed property configuration</h3>
-</div>
-<div class="modal-body" id="modal-body">
-  <h4>
+<div class="c8y-viewport-modal">
+  <div class="modal-header dialog-header">
     <i c8y-icon="bolt"></i>
-    {{ computedProperty }}
-  </h4>
+    <div id="modal-title-property" class="h4" translate>Computed property configuration</div>
+  </div>
+  <div class="modal-inner-scroll">
+    <p class="text-center bg-level-0 text-medium text-16 p-t-16 p-b-16 sticky-top separator-bottom"
+    style="z-index: 110;"> 
+      {{ computedProperty}}
+    </p>
+    <div class="modal-body no-card-context p-t-16" id="modal-body-property">
 
-  <form name="configForm" novalidate>
-    <div ng-if="configTemplateUrl" ng-include="configTemplateUrl"></div>
-    <c8y-schema-form
-      ng-if="configSchema"
-      schema="configSchema"
-      form="['*']"
-      model="config"
-    ></c8y-schema-form>
-  </form>
-</div>
-<div class="modal-footer">
-  <button
-    title="{{ 'Cancel' | translate }}"
-    type="button"
-    class="btn btn-default"
-    ng-click="$dismiss()"
-  >
-    {{ 'Cancel' | translate }}
-  </button>
-  <button
-    title="{{ 'Save' | translate }}"
-    type="button"
-    class="btn btn-primary"
-    ng-click="$close(config)"
-    ng-disabled="configForm.$invalid"
-  >
-    {{ 'Save' | translate }}
-  </button>
+      <form name="configForm" novalidate>
+        <div ng-if="configTemplateUrl" ng-include="configTemplateUrl"></div>
+        <c8y-schema-form
+          ng-if="configSchema"
+          schema="configSchema"
+          form="['*']"
+          model="config"
+        ></c8y-schema-form>
+      </form>
+    </div>
+  </div>
+  <div class="modal-footer">
+    <button
+      class="btn btn-default"
+      type="button"
+      title="{{ 'Cancel' | translate }}"
+      ng-click="$dismiss()"
+    >
+      {{ 'Cancel' | translate }}
+    </button>
+    <button
+      class="btn btn-primary"
+      type="button"
+      title="{{ 'Save' | translate }}"
+      ng-click="$close(config)"
+      ng-disabled="configForm.$invalid"
+    >
+      {{ 'Save' | translate }}
+    </button>
+  </div>
 </div>

package/core/ui/properties/lastMeasurementConfig.html

@@ -22,13 +22,14 @@
 
     <div class="form-group">
       <label for="returnTypeField" translate>Return type</label>
-      <select
-        id="returnTypeField"
-        class="form-control"
-        ng-model="config.resultType"
-        ng-options="resultType.value as (resultType.label | translate) for resultType in resultTypes.values()"
-      >
-      </select>
+      <div class="c8y-select-wrapper">
+        <select
+          id="returnTypeField"
+          class="form-control"
+          ng-model="config.resultType"
+          ng-options="resultType.value as (resultType.label | translate) for resultType in resultTypes.values()"
+        ></select>
+      </div>
     </div>
   </ng-form>
 </div>

package/core/ui/properties/schemaPropertySelector.html

@@ -6,18 +6,18 @@
     <div class="form-group m-16">
       <div class="input-group input-group-search">
         <input
-          type="search"
           class="form-control"
-          placeholder="{{ 'Filter properties' | translate }}"
+          type="search"
           ng-model="search"
+          placeholder="{{ 'Filter properties' | translate }}"
         />
         <span class="input-group-addon">
           <i c8y-icon="search" ng-show="search.length === 0 || !search"></i>
           <i
             c8y-icon="times"
             class="text-muted"
-            ng-show="search.length > 0"
             ng-click="search = ''"
+            ng-show="search.length > 0"
           ></i>
         </span>
       </div>
@@ -39,8 +39,8 @@
 
   <div
     class="modal-inner-scroll container-fluid"
-    id="modal-body"
     style="max-height: calc(100vh - 340px)"
+    id="modal-body"
   >
     <div class="row">
       <div
@@ -49,21 +49,24 @@
       >
         <div class="col-xs-2">
           <span ng-switch="selectSingle">
-            <label ng-switch-when="true" class="c8y-radio">
+            <label class="c8y-radio" ng-switch-when="true">
               <input
-                name="property"
                 type="radio"
+                aria-label="{{ property.label }}"
+                id="radio-{{ property.keyPath.join('.') }}"
+                name="property"
                 ng-model="properties.selected"
                 ng-value="property"
               />
               <span></span>
             </label>
-            <label ng-switch-default class="c8y-checkbox">
+            <label class="c8y-checkbox" ng-switch-default>
               <input
                 type="checkbox"
-                ng-model="property.__active"
+                aria-label="{{ property.label }}"
+                id="checkbox-{{ property.keyPath.join('.') }}"
                 ng-change="onSelectProperty(property)"
-                aria-label="{{ 'Complex property' | translate }}"
+                ng-model="property.__active"
               />
               <span></span>
             </label>
@@ -71,22 +74,22 @@
         </div>
         <div
           class="col-xs-5 text-truncate"
-          title="{{ property.label | translate }}"
           ng-class="{ strong: isComplexProperty(property) }"
+          title="{{ property.label | translate }}"
         >
           <span>
             <button
               class="btn btn-dot"
               type="button"
-              aria-label="{{
-                'Complex property. Subproperties are listed below.`tooltip`' | translate
-              }}"
               uib-tooltip="{{
                 'Complex property. Subproperties are listed below.`tooltip`' | translate
               }}"
+              tooltip-append-to-body="true"
               tooltip-placement="right"
               tooltip-popup-delay="500"
-              tooltip-append-to-body="true"
+              aria-label="{{
+                'Complex property. Subproperties are listed below.`tooltip`' | translate
+              }}"
               ng-if="isComplexProperty(property) && isAtLeastOneSubpropertyListed(property)"
             >
               <i c8y-icon="tags" class="text-info"></i>
@@ -94,25 +97,25 @@
             <button
               class="btn btn-dot"
               type="button"
-              aria-label="{{ 'Complex property.`tooltip`' | translate }}"
               uib-tooltip="{{ 'Complex property.`tooltip`' | translate }}"
-              tooltip-placement="right"
               tooltip-append-to-body="true"
+              tooltip-placement="right"
+              aria-label="{{ 'Complex property.`tooltip`' | translate }}"
               ng-if="isComplexProperty(property) && !isAtLeastOneSubpropertyListed(property)"
             >
-              <i class="text-info" c8y-icon="tag"></i>
+              <i c8y-icon="tag" class="text-info"></i>
             </button>
             <button
               class="btn btn-dot"
               type="button"
-              aria-label="{{ 'Computed property.`tooltip`' | translate }}"
               uib-tooltip="{{ 'Computed property.`tooltip`' | translate }}"
+              tooltip-append-to-body="true"
               tooltip-placement="right"
               tooltip-popup-delay="500"
-              tooltip-append-to-body="true"
+              aria-label="{{ 'Computed property.`tooltip`' | translate }}"
               ng-show="property.computed"
             >
-              <i class="text-primary-light" c8y-icon="bolt"></i>
+              <i c8y-icon="bolt" class="text-primary-light"></i>
             </button>
           </span>
           {{ property.label | translate }}
@@ -137,8 +140,8 @@
     class="btn btn-primary"
     type="button"
     title="{{ 'Select' | translate }}"
-    ng-disabled="selectIsDisabled()"
     ng-click="close()"
+    ng-disabled="selectIsDisabled()"
   >
     {{ 'Select' | translate }}
   </button>

package/dataPointExplorer/views/widgetConfig.html

@@ -2,7 +2,7 @@
   ng-controller="DataPointWidgetConfigCtrl"
   ng-init="disableLocalStorage = true"
   class="row no-card-context d-flex"
-  style="height: calc(100vh - 406px);"
+  style="height: calc(100vh - 422px);"
 >
   <div class="col-md-5 bg-level-1 a-s-stretch inner-scroll">
     <div class="p-l-24 bg-inherit p-t-8">

package/dataPointTable/views/widgetConfig.html

@@ -2,7 +2,7 @@
   ng-controller="DataPointWidgetConfigCtrl"
   ng-init="disableLocalStorage = true"
   class="row no-card-context d-flex"
-  style="height: calc(100vh - 406px);"
+  style="height: calc(100vh - 422px);"
 >
   <div class="col-md-5 bg-level-1 a-s-stretch inner-scroll">
     <div class="p-l-24 bg-inherit p-t-8">

package/kpi/views/listConfig.html

@@ -2,7 +2,7 @@
   <div
     ng-controller="listConfigCtrl"
     class="no-card-context row m-l-0 m-r-0"
-    style="height: calc(100vh - 406px)"
+    style="height: calc(100vh - 422px)"
   >
     <div class="col-md-6 p-l-24 inner-scroll bg-level-1">
       <c8y-data-point-list
@@ -19,32 +19,50 @@
       </div>
       <div class="form-group p-t-8">
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.kpi" />
+          <input
+            type="checkbox"
+            ng-model="config.options.kpi"
+          />
           <span></span>
           <span>{{ 'Label' | translate }}</span>
         </label>
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.target" />
+          <input
+            type="checkbox"
+            ng-model="config.options.target"
+          />
           <span></span>
           <span>{{ 'Target' | translate }}</span>
         </label>
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.current" />
+          <input
+            type="checkbox"
+            ng-model="config.options.current"
+          />
           <span></span>
           <span>{{ 'Current' | translate }}</span>
         </label>
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.diff" />
+          <input
+            type="checkbox"
+            ng-model="config.options.diff"
+          />
           <span></span>
           <span>{{ 'Diff' | translate }}</span>
         </label>
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.diffPercentage" />
+          <input
+            type="checkbox"
+            ng-model="config.options.diffPercentage"
+          />
           <span></span>
           <span>{{ 'Diff %' | translate }}</span>
         </label>
         <label class="c8y-checkbox">
-          <input type="checkbox" ng-model="config.options.asset" />
+          <input
+            type="checkbox"
+            ng-model="config.options.asset"
+          />
           <span></span>
           <span>{{ 'Asset' | translate }}</span>
         </label>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/ng1-modules",
-  "version": "1018.0.29",
+  "version": "1018.0.31",
   "license": "Apache-2.0",
   "author": "Cumulocity",
   "description": "AngularJS modules for Cumulocity IoT applications.",

package/scada/views/componentConfig.html

@@ -1,5 +1,8 @@
-<div ng-controller="ScadaWidgetConfigCtrl as ctrl" class="p-t-8">
-  <div class="form-group">
+<div
+  ng-controller="ScadaWidgetConfigCtrl as ctrl"
+  class="p-t-8"
+>
+  <div>
     <label>
       <span translate>SVG</span>
       <button
@@ -14,7 +17,10 @@
       ></button>
     </label>
 
-    <div class="alert alert-info text-left" ng-show="svgTooltipVisible">
+    <div
+      class="alert alert-info text-left"
+      ng-show="svgTooltipVisible"
+    >
       <p translate>
         For placeholder to be recognized it needs to be used at least once in curly braces with no
         other expression, for example,
@@ -59,44 +65,54 @@
     </div>
 
     <div class="form-group">
-      <label translate>Select code sanitization option</label>
+      <label for="sanitization" translate>Select code sanitization option</label>
       <div class="c8y-select-wrapper">
         <select
           class="form-control"
+          id="sanitization"
           ng-model="config.sanitization"
           ng-init="config.sanitization = config.sanitization || 'strict'"
         >
-          <option value="strict" translate>strict`code sanitization`</option>
-          <option value="lax" translate>lax`code sanitization`</option>
-          <option value="none" translate>none`code sanitization`</option>
+          <option
+            value="strict"
+            translate
+          >strict`code sanitization`</option>
+          <option
+            value="lax"
+            translate
+          >lax`code sanitization`</option>
+          <option
+            value="none"
+            translate
+          >none`code sanitization`</option>
         </select>
       </div>
     </div>
-
-    <file-picker
-      files="ctrl.files"
-      multiple="false"
-      display-drop-zone="false"
-      on-file-selected="ctrl.onSelectFile(ctrl.files[0].file)"
-    ></file-picker>
-    <input type="hidden" />
-    <span id="helpBlock" class="help-block m-b-16" translate>SVG content will be sanitized.</span>
+    <div class="form-group">
+      <file-picker
+        files="ctrl.files"
+        multiple="false"
+        display-drop-zone="false"
+        on-file-selected="ctrl.onSelectFile(ctrl.files[0].file)"
+      ></file-picker>
+      <input type="hidden" />
+    </div>
   </div>
-  <div
-    c8y-scada-mapping
-    name="mapping"
-    ng-model="config.mapping"
-    device="ctrl.device"
-    devices="ctrl.devices"
-    device-ids="config.deviceIds"
-    on-device-ids-change="ctrl.onDeviceIdsChange()"
-    class="table-responsive"
-  ></div>
-
-  <div class="form-group">
-    <label>{{ 'Preview' | translate }}</label>
-    <span ng-show="ctrl.loading" class="m-l-4">
-      <i c8y-icon="spinner" class="icon-spin"></i>
+    <div class="form-group p-t-16">
+    <label class="input-group">{{ 'Preview' | translate }}</label>
+    <span
+      id="helpBlock"
+      class="help-block m-b-8"
+      translate
+    >SVG content will be sanitized.</span>
+    <span
+      ng-show="ctrl.loading"
+      class="m-l-4"
+    >
+      <i
+        c8y-icon="spinner"
+        class="icon-spin"
+      ></i>
     </span>
     <div ng-switch="!!(ctrl.device && forms.componentForm.mapping.$valid && config.mapping)">
       <div
@@ -107,11 +123,24 @@
         device="ctrl.device"
         devices="ctrl.devices"
         device-ids="config.deviceIds"
-        style="height: 200px"
       ></div>
-      <div ng-switch-default class="alert alert-info" translate>
-        You need to select a device and fill all mappings to be able to preview an SVG.
+      <div
+        ng-switch-default
+        class="alert alert-info"
+        translate
+      >
+        Select a device and fill all mappings to preview an SVG.
       </div>
     </div>
   </div>
+  <div
+    c8y-scada-mapping
+    name="mapping"
+    ng-model="config.mapping"
+    device="ctrl.device"
+    devices="ctrl.devices"
+    device-ids="config.deviceIds"
+    on-device-ids-change="ctrl.onDeviceIdsChange()"
+  ></div>
+
 </div>

package/scada/views/mapping.html

@@ -1,102 +1,113 @@
-<table class="table">
-  <colgroup>
-    <col width="20%">
-    <col width="20%">
-    <col width="20%">
-    <col width="20%">
-    <col width="148px">
-  </colgroup>
-  <thead>
-    <tr>
-      <th>
-        <label translate>Placeholder</label>
-      </th>
-      <th>
-        <label translate>Target</label>
-      </th>
-      <th>
-        <label translate>Mapped to</label>
-      </th>
-      <th>
-        <label translate>Current value</label>
-      </th>
-      <th></th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr
-      ng-repeat="mapping in mappings | orderBy:'placeholder'"
-      class="property"
-      ng-class="{ danger: hasError[mapping.placeholder] }"
-    >
-      <td class="text-truncate" title="{{ mapping.placeholder }}">
-        {{ mapping.placeholder }}
-      </td>
-      <td class="form-group-sm">
-        <span ng-show="devices.length == 1">
-          {{ devices[0].name }}
-        </span>
-        <div class="c8y-select-wrapper" ng-show="devices.length > 1">
-          <select
-            class="form-control"
-            ng-options="device.id as device.name for device in devices"
-            ng-model="deviceIds[mapping.placeholder]"
-            ng-change="onDeviceIdsChange()"
-            required
-            >
-          </select>
-          <span></span>
+<div class="svg-mappings">
+  <label>{{ 'Mappings' | translate }}</label>
+  <ul class="c8y-list__group c8y-list__group--strip">
+    <li class="c8y-list__item" ng-repeat="mapping in mappings | orderBy:'placeholder'">
+      <div class="c8y-list__item__block d-block">
+        <div class="c8y-list__item__body">
+          <div class="row">
+            <div class="col-md-4">
+              <label class="text-label-small d-block" translate>Placeholder</label>
+              <div class="text-medium">
+                <i
+                  c8y-icon="exclamation-circle"
+                  class="m-r-4 text-danger"
+                  ng-show="hasError[mapping.placeholder]"
+                ></i>
+                <span title="{{ mapping.placeholder }}">
+                  {{ mapping.placeholder }}
+                </span>
+              </div>
+            </div>
+            <div class="col-md-8">
+              <label class="text-label-small d-block" translate>Target</label>
+              <div class="form-group-sm form-group">
+                <span ng-show="!devices.length">---</span>
+                <span
+                  class="text-truncate"
+                  title="{{ devices[0].name }}"
+                  ng-show="devices.length == 1"
+                >
+                  {{ devices[0].name }}
+                </span>
+                <div class="c8y-select-wrapper" ng-show="devices.length > 1">
+                  <select
+                    class="form-control"
+                    ng-change="onDeviceIdsChange()"
+                    ng-model="deviceIds[mapping.placeholder]"
+                    ng-options="device.id as device.name for device in devices"
+                    required
+                  ></select>
+                </div>
+              </div>
+            </div>
+            <div class="col-md-4" ng-switch="!!mapping.config.configSchema">
+              <label class="text-label-small d-block" translate>Mapped to</label>
+              <button
+                class="btn btn-sm btn-default text-truncate"
+                type="button"
+                title=" {{ humanizeValue(mapping) }}"
+                ng-click="editComputedProperty(mapping)"
+                ng-switch-when="true"
+              >
+                <i c8y-icon="bolt"></i>
+                <span>
+                  {{ humanizeValue(mapping) }}
+                </span>
+              </button>
+              <div class="form-control-static">
+                <span class="text-truncate" title="{{ humanizeValue(mapping) }}" ng-switch-default>
+                  {{ humanizeValue(mapping) }}
+                </span>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <label class="text-label-small d-block" translate>Current value</label>
+              <div class="form-control-static" title="{{ propertyValueFor(mapping) }}">
+                <span class="text-truncate text-monospace">
+                  {{ propertyValueFor(mapping) }}
+                </span>
+              </div>
+            </div>
+            <div class="col-md-4">
+              <label class="text-label-small d-block" translate>Actions</label>
+              <button
+                class="btn btn-default btn-sm"
+                type="button"
+                uib-tooltip="{{ 'Clear mapping' | translate }}"
+                tooltip-append-to-body="true"
+                tooltip-popup-delay="500"
+                aria-label="{{ 'Clear mapping' | translate }}"
+                ng-click="clearMapping(mapping)"
+                ng-disabled="!mapping.config"
+              >
+                <i c8y-icon="delete-document"></i>
+              </button>
+              <button
+                class="btn btn-default btn-sm"
+                type="button"
+                uib-tooltip="{{ 'Assign fieldbus property' | translate }}"
+                tooltip-append-to-body="true"
+                tooltip-popup-delay="500"
+                aria-label="{{ 'Assign fieldbus property' | translate }}"
+                ng-click="setFieldbusMapping(mapping)"
+              >
+                <i c8y-icon="tasks"></i>
+              </button>
+              <button
+                class="btn btn-default btn-sm"
+                type="button"
+                uib-tooltip="{{ 'Assign device property' | translate }}"
+                tooltip-append-to-body="true"
+                tooltip-popup-delay="500"
+                aria-label="{{ 'Assign device property' | translate }}"
+                ng-click="setMapping(mapping)"
+              >
+                <i c8y-icon="edit"></i>
+              </button>
+            </div>
+          </div>
         </div>
-      </td>
-      <td
-        ng-switch="!!mapping.config.configSchema"
-        class="text-truncate"
-        title="{{ humanizeValue(mapping) }}"
-      >
-        <a
-          ng-switch-when="true"
-          class="btn btn-xs btn-default"
-          href=""
-          ng-click="editComputedProperty(mapping)"
-        >
-          <i c8y-icon="bolt"></i>
-          {{ humanizeValue(mapping) }}
-        </a>
-        <span ng-switch-default>{{ humanizeValue(mapping) }}</span>
-      </td>
-      <td class="text-truncate">
-          <span title=" {{ propertyValueFor(mapping) }}">
-            {{ propertyValueFor(mapping) }}
-          </span>
-      </td>
-      <td>
-        <div class="d-flex flex-end">
-          <button
-            type="button"
-            class="btn btn-danger btn-xs showOnHover pull-right"
-            title="{{ 'Clear mapping' | translate }}"
-            ng-click="clearMapping(mapping)"
-          >
-            <i c8y-icon="scissors"></i>
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary btn-xs showOnHover pull-right"
-            title="{{ 'Assign fieldbus property' | translate }}"
-            ng-click="setFieldbusMapping(mapping)"
-          >
-            <i c8y-icon="tasks"></i>
-          </button>
-          <button
-            type="button"
-            class="btn btn-primary btn-xs showOnHover pull-right"
-            title="{{ 'Assign device property' | translate }}"
-            ng-click="setMapping(mapping)"
-          >
-            <i c8y-icon="pencil"></i>
-          </button>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
+      </div>
+    </li>
+  </ul>
+</div>