@c8y/ng1-modules 1017.0.134 → 1017.0.135

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,21 +74,24 @@
         </div>
         <div
           class="col-xs-5 text-truncate"
-          title="{{ property.label | translate }}"
           ng-class="{ strong: isComplexProperty(property) }"
+          title="{{ property.label | translate }}"
         >
           <span>
             <button
               aria-label="{{ 'Complex property' | translate }}"
               class="btn btn-dot"
               type="button"
-              ng-if="isComplexProperty(property) && isAtLeastOneSubpropertyListed(property)"
               uib-tooltip="{{
                 'Complex property. Subproperties are listed below.`tooltip`' | translate
               }}"
-              tooltip-placement="auto"
-              tooltip-popup-delay="500"
               tooltip-append-to-body="true"
+              tooltip-placement="right"
+              tooltip-popup-delay="500"
+              aria-label="{{
+                'Complex property. Subproperties are listed below.`tooltip`' | translate
+              }}"
+              ng-if="isComplexProperty(property) && isAtLeastOneSubpropertyListed(property)"
             >
               <i c8y-icon="tags" class="text-info"></i>
             </button>
@@ -93,27 +99,29 @@
               aria-label="{{ 'Complex property' | translate }}"
               class="btn btn-dot"
               type="button"
-              ng-if="isComplexProperty(property) && !isAtLeastOneSubpropertyListed(property)"
               uib-tooltip="{{ 'Complex property.`tooltip`' | translate }}"
-              tooltip-placement="auto"
               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
               aria-label="{{ 'Computed property' | translate }}"
               class="btn btn-dot"
               type="button"
-              ng-show="property.computed"
               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  }}
+          {{ property.label | translate }}
         </div>
         <div class="col-xs-5 text-truncate" title="{{ property.keyPath.join('.') }}">
           {{ property.keyPath.join('.') }}
@@ -133,10 +141,9 @@
   </button>
   <button
     title="{{ 'Select' | translate }}"
-    type="button"
+    ng-click="close()"
     ng-disabled="selectIsDisabled()"
     class="btn btn-primary"
-    ng-click="close()"
   >
     {{ 'Select' | translate }}
   </button>

package/dataPointExplorer/views/widgetConfig.html

@@ -1,85 +1,143 @@
-<div ng-controller="DataPointWidgetConfigCtrl" ng-init="disableLocalStorage = true">
-  <div class="data-point-explorer" ng-controller="c8yDataPointExplorerCtrl">
-    <div class="pull-right m-b-4">
-      <c8y-realtime-button
-        class="top-right-control"
-        channel="{{ channel }}"
-        state="data.realtime"
-        on-data="onData($data)"
-      ></c8y-realtime-button>
-      <c8y-realtime-button
-        ng-show="false"
-        channel="{{ alarmsChannel }}"
-        state="data.realtime"
-        on-data="onAlarm($data)"
-        on-data-update="onAlarm($data)"
-      ></c8y-realtime-button>
-      <c8y-realtime-button
-        ng-show="false"
-        channel="{{ eventsChannel }}"
-        state="data.realtime"
-        on-data="onEvent($data)"
-      ></c8y-realtime-button>
-      <c8y-aggregation
-        class="top-right-control"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        aggregation="data.aggregation"
-        realtime="data.realtime"
-        auto="true"
-      ></c8y-aggregation>
-      <c8y-interval
-        class="top-right-control"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        interval="data.interval"
-      ></c8y-interval>
+<div
+  ng-controller="DataPointWidgetConfigCtrl"
+  ng-init="disableLocalStorage = true"
+  class="row no-card-context d-flex"
+  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">
+      <div class="form-group m-b-0 p-b-16 separator-bottom">
+        <label for="dateSelection">
+          {{ 'Date selection' | translate }}
+          <button
+            type="button"
+            class="btn-help btn-help--sm"
+            aria-label="{{ 'Help' | translate }}"
+            uib-popover-html="dateSelectionHelpPopoverText | translate"
+            popover-placement="right"
+            popover-trigger="'focus'"
+            popover-append-to-body="true"
+          ></button>
+        </label>
+        <div class="c8y-select-wrapper">
+          <select
+            id="dateSelection"
+            class="form-control"
+            title="{{ 'Date selection' | translate }}"
+            aria-label="{{ 'Date selection' | translate }}"
+            ng-model="dateSelection"
+          >
+            <option
+              title="{{ 'Widget configuration' | translate }}"
+              value="{{ 'config' }}"
+            >
+              {{ 'Widget configuration' | translate }}
+            </option>
+            <option
+              title="{{ 'Widget and widget configuration' | translate }}"
+              value="{{ 'view_and_config' }}"
+            >
+              {{ 'Widget and widget configuration' | translate }}
+            </option>
+            <option
+              title="{{ 'Dashboard time range' | translate }}"
+              value="{{ 'dashboard_context' }}"
+            >
+              {{ 'Dashboard time range' | translate }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <c8y-data-point-list
+        datapoints="data.datapoints"
+        allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
+        dont-save="true"
+        no-target
+        no-yellow-range
+        no-red-range
+        class="bg-inherit separator-bottom"
+      ></c8y-data-point-list>
+      <c8y-alarms-events-timelines-config
+        configs="data.alarmsEventsConfigs"
+        allow-alarms-events-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
+        class="d-block bg-inherit separator-top"
+        style="padding-top: 1px;"
+      ></c8y-alarms-events-timelines-config>
     </div>
-    <div class="c8yGraphFill" style="height: 340px; clear: both">
-      <c8y-chart
-        datapoints="data.graphDataPoints"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        realtime="data.realtime"
-        aggregation="data.aggregation"
-        show-time="true"
-        on-data="(onData)"
-        on-update-dates="onUpdateDates($dateFrom, $dateTo)"
-        on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
-        on-box-changed="onBoxChanged(box)"
-      ></c8y-chart>
+  </div>
+
+  <div class="col-md-7 sticky-top">
+    <div class="p-r-24 p-t-8">
+      <div
+        class="data-point-explorer d-flex d-col"
+        ng-controller="c8yDataPointExplorerCtrl"
+      >
+        <div class="m-b-4 m-t-4 d-flex j-c-end gap-8">
+          <c8y-realtime-button
+            ng-show="!data.widgetInstanceGlobalTimeContext"
+            class="top-right-control"
+            channel="{{ channel }}"
+            state="data.realtime"
+            on-data="onData($data)"
+          ></c8y-realtime-button>
+          <c8y-realtime-button
+            ng-show="false"
+            channel="{{ alarmsChannel }}"
+            state="data.realtime"
+            on-data="onAlarm($data)"
+            on-data-update="onAlarm($data)"
+          ></c8y-realtime-button>
+          <c8y-realtime-button
+            ng-show="false"
+            channel="{{ eventsChannel }}"
+            state="data.realtime"
+            on-data="onEvent($data)"
+          ></c8y-realtime-button>
+          <c8y-aggregation
+            class="top-right-control"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            aggregation="data.aggregation"
+            realtime="data.realtime"
+            auto="true"
+          ></c8y-aggregation>
+          <c8y-interval
+            ng-show="!data.widgetInstanceGlobalTimeContext"
+            class="top-right-control"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            interval="data.interval"
+          ></c8y-interval>
+        </div>
+        <div
+          class="c8yGraphFill"
+          style="height: calc(100vh - 520px);"
+        >
+          <c8y-chart
+            datapoints="data.graphDataPoints"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            realtime="data.realtime"
+            aggregation="data.aggregation"
+            show-time="!data.widgetInstanceGlobalTimeContext"
+            on-data="(onData)"
+            on-update-dates="onUpdateDates($dateFrom, $dateTo)"
+            on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
+            on-box-changed="onBoxChanged(box)"
+          ></c8y-chart>
+        </div>
+        <c8y-alarms-events-timelines-chart
+          alarms-events-configs="data.graphAlarmsEventsConfigs"
+          date-from="data.displayedDateFrom"
+          date-to="data.displayedDateTo"
+          on-update-dates="onUpdateDates($dateFrom, $dateTo)"
+          realtime="data.realtime"
+          on-realtime-alarm-fn="onRealtimeAlarmFn(onRealtimeAlarm)"
+          on-realtime-event-fn="onRealtimeEventFn(onRealtimeEvent)"
+          chart-box="chartBox"
+        ></c8y-alarms-events-timelines-chart>
+      </div>
     </div>
-    <c8y-alarms-events-timelines-chart
-      alarms-events-configs="data.graphAlarmsEventsConfigs"
-      date-from="data.displayedDateFrom"
-      date-to="data.displayedDateTo"
-      on-update-dates="onUpdateDates($dateFrom, $dateTo)"
-      realtime="data.realtime"
-      on-realtime-alarm-fn="onRealtimeAlarmFn(onRealtimeAlarm)"
-      on-realtime-event-fn="onRealtimeEventFn(onRealtimeEvent)"
-      chart-box="chartBox"
-    ></c8y-alarms-events-timelines-chart>
-    <c8y-data-point-list
-      datapoints="data.datapoints"
-      allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
-      dont-save="true"
-      no-target
-      no-yellow-range
-      no-red-range
-      class="bg-level-0"
-    ></c8y-data-point-list>
-    <c8y-alarms-events-timelines-config
-      configs="data.alarmsEventsConfigs"
-      allow-alarms-events-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
-      class="bg-level-0"
-    ></c8y-alarms-events-timelines-config>
-    <label
-      title="{{ 'Show date selection' | translate }}"
-      class="checkbox-inline c8y-checkbox m-t-16"
-    >
-      <input type="checkbox" ng-model="data.displayDateSelection" />
-      <span></span>
-      <span>{{ 'Show date selection' | translate }}</span>
-    </label>
   </div>
 </div>

package/dataPointTable/views/widgetConfig.html

@@ -1,54 +1,111 @@
-<div ng-controller="DataPointWidgetConfigCtrl" ng-init="disableLocalStorage = true">
-  <div class="data-point-explorer" ng-controller="c8yDataPointExplorerCtrl">
-    <div class="pull-right m-b-4">
-      <c8y-realtime-button
-        class="top-right-control"
-        channel="{{ channel }}"
-        state="data.realtime"
-        on-data="onData($data)"
-      ></c8y-realtime-button>
-      <c8y-aggregation
-        class="top-right-control"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        aggregation="data.aggregation"
-        realtime="data.realtime"
-        auto="true"
-      ></c8y-aggregation>
-      <c8y-interval
-        class="top-right-control"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        interval="data.interval"
-      ></c8y-interval>
-    </div>
-    <div class="c8yGraphFill" style="height: 340px; clear: both">
-      <c8y-chart
-        datapoints="data.graphDataPoints"
-        date-from="data.dateFrom"
-        date-to="data.dateTo"
-        realtime="data.realtime"
-        aggregation="data.aggregation"
-        show-time="true"
-        on-data="(onData)"
-        on-update-dates="onUpdateDates($dateFrom, $dateTo)"
-        on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
-        on-box-changed="onBoxChanged(box)"
-      ></c8y-chart>
-    </div>
-    <c8y-data-point-list
-      datapoints="data.datapoints"
-      allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
-      dont-save="true"
-      class="bg-level-0"
-    ></c8y-data-point-list>
-    <label
-      class="checkbox-inline c8y-checkbox m-t-24"
-      title="{{ 'Show date selection' | translate }}"
-    >
-      <input type="checkbox" ng-model="data.displayDateSelection" />
-      <span></span>
-      <span>{{ 'Show date selection' | translate }}</span>
-    </label>
-  </div>
-</div>
+<div
+  ng-controller="DataPointWidgetConfigCtrl"
+  ng-init="disableLocalStorage = true"
+  class="row no-card-context d-flex"
+  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">
+      <div class="form-group m-b-0 p-b-16 separator-bottom">
+        <label for="dateSelection">
+          {{ 'Date selection' | translate }}
+          <button
+            type="button"
+            class="btn-help btn-help--sm"
+            aria-label="{{ 'Help' | translate }}"
+            uib-popover-html="dateSelectionHelpPopoverText | translate"
+            popover-placement="right"
+            popover-trigger="'focus'"
+            popover-append-to-body="true"
+          ></button>
+        </label>
+        <div class="c8y-select-wrapper">
+          <select
+            id="dateSelection"
+            class="form-control"
+            title="{{ 'Date selection' | translate }}"
+            aria-label="{{ 'Date selection' | translate }}"
+            ng-model="dateSelection"
+          >
+            <option
+              title="{{ 'Widget configuration' | translate }}"
+              value="{{ 'config' }}"
+            >
+              {{ 'Widget configuration' | translate }}
+            </option>
+            <option
+              title="{{ 'Widget and widget configuration' | translate }}"
+              value="{{ 'view_and_config' }}"
+            >
+              {{ 'Widget and widget configuration' | translate }}
+            </option>
+            <option
+              title="{{ 'Dashboard time range' | translate }}"
+              value="{{ 'dashboard_context' }}"
+            >
+              {{ 'Dashboard time range' | translate }}
+            </option>
+          </select>
+        </div>
+      </div>
+
+      <c8y-data-point-list
+        datapoints="data.datapoints"
+        allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
+        dont-save="true"
+        class="bg-inherit separator-bottom"
+      ></c8y-data-point-list>
+    </div>
+  </div>
+
+  <div class="col-md-7 sticky-top">
+    <div class="p-r-24 p-t-8">
+      <div
+        class="data-point-explorer d-flex d-col"
+        ng-controller="c8yDataPointExplorerCtrl"
+      >
+        <div class="m-b-4 m-t-4 d-flex j-c-end gap-8">
+          <c8y-realtime-button
+            ng-show="!data.widgetInstanceGlobalTimeContext"
+            class="top-right-control"
+            channel="{{ channel }}"
+            state="data.realtime"
+            on-data="onData($data)"
+          ></c8y-realtime-button>
+          <c8y-aggregation
+            class="top-right-control"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            aggregation="data.aggregation"
+            realtime="data.realtime"
+            auto="true"
+          ></c8y-aggregation>
+          <c8y-interval
+            ng-show="!data.widgetInstanceGlobalTimeContext"
+            class="top-right-control"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            interval="data.interval"
+          ></c8y-interval>
+        </div>
+        <div
+          class="c8yGraphFill"
+          style="height: calc(100vh - 520px);"
+        >
+          <c8y-chart
+            datapoints="data.graphDataPoints"
+            date-from="data.dateFrom"
+            date-to="data.dateTo"
+            realtime="data.realtime"
+            aggregation="data.aggregation"
+            show-time="!data.widgetInstanceGlobalTimeContext"
+            on-data="(onData)"
+            on-update-dates="onUpdateDates($dateFrom, $dateTo)"
+            on-update-displayed-dates="onUpdateDisplayedDates($dateFrom, $dateTo)"
+            on-box-changed="onBoxChanged(box)"
+          ></c8y-chart>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

package/kpi/views/listConfig.html

@@ -1,7 +1,10 @@
 <div ng-controller="kpiConfigCtrl">
-  <div ng-controller="listConfigCtrl">
-    <div class="form-group">
-      <label translate>Data point</label>
+  <div
+    ng-controller="listConfigCtrl"
+    class="no-card-context row m-l-0 m-r-0"
+    style="height: calc(100vh - 422px)"
+  >
+    <div class="col-md-6 p-l-24 inner-scroll bg-level-1">
       <c8y-data-point-list
         ng-model="config"
         datapoints="config.options.dataPoints"
@@ -10,28 +13,60 @@
         allow-adding-data-points-from-context-mo-only="dashboard.deviceType && dashboard.deviceTypeValue"
       ></c8y-data-point-list>
     </div>
-    <label translate>Column visibility</label>
-
-    <div class="form-group">
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.kpi" /> <translate>Label</translate>
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.target" /> <translate>Target</translate>
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.current" /> <translate>Current</translate>
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.diff" /> <translate>Diff</translate>
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.diffPercentage" />
-        <translate>Diff %</translate>
-      </label>
-      <label class="checkbox-inline">
-        <input type="checkbox" ng-model="config.options.asset" /> <translate>Asset</translate>
-      </label>
+    <div class="col-md-6 p-r-24 inner-scroll">
+      <div class="card-header separator sticky-top bg-level-0">
+        <span class="card-title">{{ 'Column visibility' | translate }}</span>
+      </div>
+      <div class="form-group p-t-8">
+        <label class="c8y-checkbox">
+          <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"
+          />
+          <span></span>
+          <span>{{ 'Target' | translate }}</span>
+        </label>
+        <label class="c8y-checkbox">
+          <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"
+          />
+          <span></span>
+          <span>{{ 'Diff' | translate }}</span>
+        </label>
+        <label class="c8y-checkbox">
+          <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"
+          />
+          <span></span>
+          <span>{{ 'Asset' | translate }}</span>
+        </label>
+      </div>
     </div>
   </div>
 </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@c8y/ng1-modules",
-  "version": "1017.0.134",
+  "version": "1017.0.135",
   "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">
-  <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,32 +65,54 @@
     </div>
 
     <div class="form-group">
-      <label translate>Select code sanitization option</label>
-      <select
-        class="form-control"
-        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>
-      </select>
+      <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>
+        </select>
+      </div>
+    </div>
+    <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>
-
-    <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>
-
-  <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
@@ -95,14 +123,16 @@
         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"
@@ -111,6 +141,6 @@
     devices="ctrl.devices"
     device-ids="config.deviceIds"
     on-device-ids-change="ctrl.onDeviceIdsChange()"
-    class="table-responsive"
   ></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>