<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Handsontable example</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="handsontable.css">
<link rel="stylesheet" href="ngDialog.css">
<link rel="stylesheet" href="ng-dialog-theme-default.css">
</head>
<body ng-app="hotExample" ng-controller="hotCtrl as table">
<div style="width: 100%; height: 100%;" ng-if="table.showHot">
<hot-table
ng-show="table.showHot"
width="600"
height="600"
hot-id="dataset-table"
settings="table.hot.settings">
</hot-table>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handsontable/0.31.2/handsontable.full.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ngHandsontable/0.13.0/ngHandsontable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-dialog/1.1.0/js/ngDialog.js"></script>
<script src="hot.module.js"></script>
<script src="hot.controller.js"></script>
<script src="cell-editor.service.js"></script>
</body>
</html>
(function () {
'use strict';
var hotExample = angular.module('hotExample', [
'ngDialog',
'ngHandsontable'
]);
})();
(function () {
'use strict';
angular.module('hotExample').controller('hotCtrl', ['codeEditorService', function (codeEditorService) {
var vm = this;
vm.hot = {};
vm.showHot = false;
var initialLoad = function () {
vm.hot.settings = {
rowHeaders: true,
contextMenu: true,
dropdownMenu: true,
manualColumnResize: true,
manualRowResize: true,
stretchH: 'all',
colHeaders: ["Name", "Code"],
columns: [
{
data: 'name'
},
{
data: 'code',
editor: codeEditorService.code.editor,
renderer: codeEditorService.code.renderer
}
],
data: [
{
name: "Java",
code: "//some Java code here"
},
{
name: "C++",
code: "//some C++ code here"
},
{
name: "JavaScript",
code: "//some JS code here"
}
]
};
vm.showHot = true;
};
initialLoad();
}]);
})();
/* global Handsontable, openEditor */
(function () {
// currently this class contains the controlls for column editor
'use strict';
angular.module('hotExample').service('codeEditorService', ['$log', '$q', 'ngDialog', function ($log, $q, ngDialog) {
/**
* Editor for script type
*/
var ScriptEditor = Handsontable.editors.TextEditor.prototype.extend();
ScriptEditor.prototype.getValue = function () {
return this.TEXTAREA.value;
};
ScriptEditor.prototype.setValue = function (value) {
this.TEXTAREA.value = value;
};
ScriptEditor.prototype.open = function () {
var self = this;
this.instance.deselectCell();
var value = self.instance.getDataAtCell(self.row, self.col);
var decodedCode = decodeURI(value);
var success = function (resultCode) {
var encodedCode = encodeURI(resultCode);
self.instance.setDataAtCell(self.row, self.col, encodedCode, 'edit');
self.instance.selectCell(self.row, self.col);
};
openEditor(decodedCode)
.then(success);
};
ScriptEditor.prototype.focus = function () {
Handsontable.editors.TextEditor.prototype.focus.apply(this, arguments);
};
ScriptEditor.prototype.close = function () {
// Handsontable.editors.TextEditor.prototype.close.apply(this, arguments);
};
var openEditor = function (codeToEdit) {
var deferred = $q.defer();
var dialog = ngDialog.open({
template: 'editor-template.htm',
className: 'ngdialog-theme-default',
controllerAs: "editor",
controller: function () {
var vm = this;
vm.inputCode = codeToEdit;
vm.submitChanges = function () {
dialog.close();
deferred.resolve(vm.inputCode);
};
}
});
return deferred.promise;
};
var scriptRenderer = function (instance, td, row, col, prop, value, cellProperties) {
var scriptMaxLength = 18;
var scriptLength = (value && value.length) ? value.length : 0;
var decodedValue = decodeURI(value);
if (scriptLength > scriptMaxLength) {
decodedValue = decodedValue.slice(0, scriptMaxLength) + "...";
}
arguments[5] = decodedValue;
Handsontable.renderers.TextRenderer.apply(this, arguments);
return td;
};
return {
code: {
editor: ScriptEditor,
renderer: scriptRenderer
}
};
}]);
})();
<div>
<div>
Code editor here
</div>
<div>
<textarea ng-model="editor.inputCode"></textarea>
</div>
<div>
<input type="submit" ng-click="editor.submitChanges()" value="save">
</div>
</div>
/*!
(The MIT License)
Copyright (c) 2012-2014 Marcin Warpechowski
Copyright (c) 2015 Handsoncode sp. z o.o. <hello@handsoncode.net>
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
'Software'), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
*/
.handsontable {
position: relative;
}
.handsontable .hide{
display: none;
}
.handsontable .relative {
position: relative;
}
.handsontable.htAutoSize {
visibility: hidden;
left: -99000px;
position: absolute;
top: -99000px;
}
.handsontable .wtHider {
width: 0;
}
.handsontable .wtSpreader {
position: relative;
width: 0; /*must be 0, otherwise blank space appears in scroll demo after scrolling max to the right */
height: auto;
}
.handsontable table,
.handsontable tbody,
.handsontable thead,
.handsontable td,
.handsontable th,
.handsontable input,
.handsontable textarea,
.handsontable div {
box-sizing: content-box;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
}
.handsontable input,
.handsontable textarea {
min-height: initial;
}
.handsontable table.htCore {
border-collapse: separate;
/*it must be separate, otherwise there are offset miscalculations in WebKit: http://stackoverflow.com/questions/2655987/border-collapse-differences-in-ff-and-webkit*/
/*this actually only changes appearance of user selection - does not make text unselectable
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
/*user-select: none; /*no browser supports unprefixed version*/
border-spacing: 0;
margin: 0;
border-width: 0;
table-layout: fixed;
width: 0;
outline-width: 0;
/* reset bootstrap table style. for more info see: https://github.com/handsontable/handsontable/issues/224 */
max-width: none;
max-height: none;
}
.handsontable col {
width: 50px;
}
.handsontable col.rowHeader {
width: 50px;
}
.handsontable th,
.handsontable td {
border-top-width: 0;
border-left-width: 0;
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
height: 22px;
empty-cells: show;
line-height: 21px;
padding: 0 4px 0 4px;
/* top, bottom padding different than 0 is handled poorly by FF with HTML5 doctype */
background-color: #FFF;
vertical-align: top;
overflow: hidden;
outline-width: 0;
white-space: pre-line;
/* preserve new line character in cell */
background-clip: padding-box;
}
.handsontable td.htInvalid {
background-color: #ff4c42 !important; /*gives priority over td.area selection background*/
}
.handsontable td.htNoWrap {
white-space: nowrap;
}
.handsontable th:last-child {
/*Foundation framework fix*/
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}
.handsontable tr:first-child th.htNoFrame,
.handsontable th:first-child.htNoFrame,
.handsontable th.htNoFrame {
border-left-width: 0;
background-color: white;
border-color: #FFF;
}
.handsontable th:first-child,
.handsontable th:nth-child(2),
.handsontable td:first-of-type,
.handsontable .htNoFrame + th,
.handsontable .htNoFrame + td {
border-left: 1px solid #CCC;
}
.handsontable.htRowHeaders thead tr th:nth-child(2) {
border-left: 1px solid #CCC;
}
.handsontable tr:first-child th,
.handsontable tr:first-child td {
border-top: 1px solid #CCC;
}
.ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable tbody tr th,
.ht_master:not(.innerBorderLeft):not(.emptyColumns) ~ .handsontable:not(.ht_clone_top) thead tr th:first-child {
border-right-width: 0;
}
.ht_master:not(.innerBorderTop) thead tr:last-child th,
.ht_master:not(.innerBorderTop) ~ .handsontable thead tr:last-child th,
.ht_master:not(.innerBorderTop) thead tr.lastChild th,
.ht_master:not(.innerBorderTop) ~ .handsontable thead tr.lastChild th {
border-bottom-width: 0;
}
.handsontable th {
background-color: #f3f3f3;
color: #222;
text-align: center;
font-weight: normal;
white-space: nowrap;
}
.handsontable thead th {
padding: 0;
}
.handsontable th.active {
background-color: #CCC;
}
.handsontable thead th .relative {
padding: 2px 4px;
}
/* selection */
.handsontable tbody th.ht__highlight,
.handsontable thead th.ht__highlight {
background-color: #dcdcdc;
}
.handsontable.ht__selection--columns thead th.ht__highlight,
.handsontable.ht__selection--rows tbody th.ht__highlight {
background-color: #8eb0e7;
color: #000;
}
/* plugins */
/* row + column resizer*/
.handsontable .manualColumnResizer {
position: fixed;
top: 0;
cursor: col-resize;
z-index: 110;
width: 5px;
height: 25px;
}
.handsontable .manualRowResizer {
position: fixed;
left: 0;
cursor: row-resize;
z-index: 110;
height: 5px;
width: 50px;
}
.handsontable .manualColumnResizer:hover,
.handsontable .manualColumnResizer.active,
.handsontable .manualRowResizer:hover,
.handsontable .manualRowResizer.active {
background-color: #AAB;
}
.handsontable .manualColumnResizerGuide {
position: fixed;
right: 0;
top: 0;
background-color: #AAB;
display: none;
width: 0;
border-right: 1px dashed #777;
margin-left: 5px;
}
.handsontable .manualRowResizerGuide {
position: fixed;
left: 0;
bottom: 0;
background-color: #AAB;
display: none;
height: 0;
border-bottom: 1px dashed #777;
margin-top: 5px;
}
.handsontable .manualColumnResizerGuide.active,
.handsontable .manualRowResizerGuide.active {
display: block;
z-index: 199;
}
.handsontable .columnSorting {
position: relative;
}
.handsontable .columnSorting:hover {
text-decoration: underline;
cursor: pointer;
}
.handsontable .columnSorting.ascending::after {
content: '\25B2';
color: #5f5f5f;
position: absolute;
right: -15px;
}
.handsontable .columnSorting.descending::after {
content: '\25BC';
color: #5f5f5f;
position: absolute;
right: -15px;
}
/* border line */
.handsontable .wtBorder {
position: absolute;
font-size: 0;
}
.handsontable .wtBorder.hidden{
display:none !important;
}
.handsontable td.area {
background: -moz-linear-gradient(top, rgba(181,209,255,0.34) 0%, rgba(181,209,255,0.34) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,209,255,0.34)), color-stop(100%,rgba(181,209,255,0.34))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(181,209,255,0.34) 0%,rgba(181,209,255,0.34) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57b5d1ff', endColorstr='#57b5d1ff',GradientType=0 ); /* IE6-9 */
background-color: #fff;
}
/* fill handle */
.handsontable .wtBorder.corner {
font-size: 0;
cursor: crosshair;
}
.handsontable .htBorder.htFillBorder {
background: red;
width: 1px;
height: 1px;
}
.handsontableInput {
border:none;
outline-width: 0;
margin: 0 ;
padding: 1px 5px 0 5px;
font-family: inherit;
line-height: 21px;
font-size: inherit;
box-shadow: 0 0 0 2px #5292F7 inset;
resize: none;
/*below are needed to overwrite stuff added by jQuery UI Bootstrap theme*/
display: inline-block;
color: #000;
border-radius: 0;
background-color: #FFF;
/*overwrite styles potentionally made by a framework*/
}
.handsontableInputHolder {
position: absolute;
top: 0;
left: 0;
z-index: 100;
}
.htSelectEditor {
-webkit-appearance: menulist-button !important;
position: absolute;
width: auto;
}
/*
TextRenderer readOnly cell
*/
.handsontable .htDimmed {
color: #777;
}
.handsontable .htSubmenu {
position: relative;
}
.handsontable .htSubmenu :after{
content: '▶';
color: #777;
position: absolute;
right: 5px;
}
/*
TextRenderer horizontal alignment
*/
.handsontable .htLeft{
text-align: left;
}
.handsontable .htCenter{
text-align: center;
}
.handsontable .htRight{
text-align: right;
}
.handsontable .htJustify{
text-align: justify;
}
/*
TextRenderer vertical alignment
*/
.handsontable .htTop{
vertical-align: top;
}
.handsontable .htMiddle{
vertical-align: middle;
}
.handsontable .htBottom{
vertical-align: bottom;
}
/*
TextRenderer placeholder value
*/
.handsontable .htPlaceholder {
color: #999;
}
/*
AutocompleteRenderer down arrow
*/
.handsontable .htAutocompleteArrow {
float: right;
font-size: 10px;
color: #EEE;
cursor: default;
width: 16px;
text-align: center;
}
.handsontable td .htAutocompleteArrow:hover {
color: #777;
}
.handsontable td.area .htAutocompleteArrow {
color: #d3d3d3;
}
/*
CheckboxRenderer
*/
.handsontable .htCheckboxRendererInput {
display: inline-block;
vertical-align: middle;
}
.handsontable .htCheckboxRendererInput.noValue {
opacity: 0.5;
}
.handsontable .htCheckboxRendererLabel {
cursor: pointer;
display: inline-block;
width: 100%;
}
@-webkit-keyframes opacity-hide {
from {
opacity: 1;
}
to {
opacity: 0;
/*display: none;*/
}
}
@keyframes opacity-hide {
from {
/*display: block;*/
opacity: 1;
}
to {
opacity: 0;
/*display: none;*/
}
}
@-webkit-keyframes opacity-show {
from {
opacity: 0;
/*display: none;*/
}
to {
opacity: 1;
/*display: block;*/
}
}
@keyframes opacity-show {
from {
opacity: 0;
/*display: none;*/
}
to {
opacity: 1;
/*display: block;*/
}
}
/**
* Handsontable in Handsontable
*/
.handsontable .handsontable.ht_clone_top .wtHider {
padding: 0 0 5px 0;
}
/**
* Autocomplete Editor
*/
.handsontable .autocompleteEditor.handsontable {
padding-right: 17px;
}
.handsontable .autocompleteEditor.handsontable.htMacScroll {
padding-right: 15px;
}
/**
* Handsontable listbox theme
*/
.handsontable.listbox {
margin: 0;
}
.handsontable.listbox .ht_master table {
border: 1px solid #ccc;
border-collapse: separate;
background: white;
}
.handsontable.listbox th,
.handsontable.listbox tr:first-child th,
.handsontable.listbox tr:last-child th,
.handsontable.listbox tr:first-child td,
.handsontable.listbox td {
border-color: transparent;
}
.handsontable.listbox th,
.handsontable.listbox td {
white-space: nowrap;
text-overflow: ellipsis;
}
.handsontable.listbox td.htDimmed {
cursor: default;
color: inherit;
font-style: inherit;
}
.handsontable.listbox .wtBorder {
visibility: hidden;
}
.handsontable.listbox tr td.current,
.handsontable.listbox tr:hover td {
background: #eee;
}
.ht_clone_top {
z-index: 101;
}
.ht_clone_left {
z-index: 102;
}
.ht_clone_top_left_corner,
.ht_clone_bottom_left_corner {
z-index: 103;
}
.ht_clone_debug {
z-index: 103;
}
.handsontable td.htSearchResult {
background: #fcedd9;
color: #583707;
}
/*
Cell borders
*/
.htBordered{
/*box-sizing: border-box !important;*/
border-width: 1px;
}
.htBordered.htTopBorderSolid {
border-top-style: solid;
border-top-color: #000;
}
.htBordered.htRightBorderSolid {
border-right-style: solid;
border-right-color: #000;
}
.htBordered.htBottomBorderSolid {
border-bottom-style: solid;
border-bottom-color: #000;
}
.htBordered.htLeftBorderSolid {
border-left-style: solid;
border-left-color: #000;
}
.handsontable tbody tr th:nth-last-child(2) {
border-right: 1px solid #CCC;
}
.handsontable thead tr:nth-last-child(2) th.htGroupIndicatorContainer {
border-bottom: 1px solid #CCC;
padding-bottom: 5px;
}
.ht_clone_top_left_corner thead tr th:nth-last-child(2) {
border-right: 1px solid #CCC;
}
.htCollapseButton {
width: 10px;
height: 10px;
line-height: 10px;
text-align: center;
border-radius: 5px;
border: 1px solid #f3f3f3;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
margin-bottom: 3px;
position: relative;
}
.htCollapseButton:after {
content: "";
height: 300%;
width: 1px;
display: block;
background: #ccc;
margin-left: 4px;
position: absolute;
/*top: -300%;*/
bottom: 10px;
}
thead .htCollapseButton {
right: 5px;
position: absolute;
top: 5px;
background: #fff;
}
thead .htCollapseButton:after {
height: 1px;
width: 700%;
right: 10px;
top: 4px;
}
.handsontable tr th .htExpandButton {
position: absolute;
width: 10px;
height: 10px;
line-height: 10px;
text-align: center;
border-radius: 5px;
border: 1px solid #f3f3f3;
-webkit-box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
cursor: pointer;
top: 0;
display: none;
}
.handsontable thead tr th .htExpandButton {
/*left: 5px;*/
top: 5px;
}
.handsontable tr th .htExpandButton.clickable {
display: block;
}
.collapsibleIndicator {
position: absolute;
top: 50%;
transform: translate(0% ,-50%);
right: 5px;
border: 1px solid #A6A6A6;
line-height: 10px;
color: #222;
border-radius: 10px;
font-size: 10px;
width: 10px;
height: 10px;
cursor: pointer;
-webkit-box-shadow: 0 0 0 6px rgba(238,238,238,1);
-moz-box-shadow: 0 0 0 6px rgba(238,238,238,1);
box-shadow: 0 0 0 6px rgba(238,238,238,1);
background: #eee;
}
.handsontable col.hidden {
width: 0 !important;
}
.handsontable table tr th.lightRightBorder {
border-right: 1px solid #E6E6E6;
}
.handsontable tr.hidden,
.handsontable tr.hidden td,
.handsontable tr.hidden th {
display: none;
}
.ht_master,
.ht_clone_left,
.ht_clone_top,
.ht_clone_bottom {
overflow: hidden;
}
.ht_master .wtHolder {
overflow: auto;
}
.ht_clone_left .wtHolder {
overflow-x: hidden;
overflow-y: auto;
}
.ht_clone_top .wtHolder,
.ht_clone_bottom .wtHolder {
overflow-x: auto;
overflow-y: hidden;
}
/*WalkontableDebugOverlay*/
.wtDebugHidden {
display: none;
}
.wtDebugVisible {
display: block;
-webkit-animation-duration: 0.5s;
-webkit-animation-name: wtFadeInFromNone;
animation-duration: 0.5s;
animation-name: wtFadeInFromNone;
}
@keyframes wtFadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
@-webkit-keyframes wtFadeInFromNone {
0% {
display: none;
opacity: 0;
}
1% {
display: block;
opacity: 0;
}
100% {
display: block;
opacity: 1;
}
}
/*
Handsontable Mobile Text Editor stylesheet
*/
.handsontable.mobile,
.handsontable.mobile .wtHolder {
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
-webkit-overflow-scrolling: touch;
}
.htMobileEditorContainer {
display: none;
position: absolute;
top: 0;
width: 70%;
height: 54pt;
background: #f8f8f8;
border-radius: 20px;
border: 1px solid #ebebeb;
z-index: 999;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-webkit-text-size-adjust: none;
}
.topLeftSelectionHandle:not(.ht_master .topLeftSelectionHandle),
.topLeftSelectionHandle-HitArea:not(.ht_master .topLeftSelectionHandle-HitArea) {
z-index: 9999;
}
/* Initial left/top coordinates - overwritten when actual position is set */
.topLeftSelectionHandle,
.topLeftSelectionHandle-HitArea,
.bottomRightSelectionHandle,
.bottomRightSelectionHandle-HitArea {
left: -10000px;
top: -10000px;
}
.htMobileEditorContainer.active {
display: block;
}
.htMobileEditorContainer .inputs {
position: absolute;
right: 210pt;
bottom: 10pt;
top: 10pt;
left: 14px;
height: 34pt;
}
.htMobileEditorContainer .inputs textarea {
font-size: 13pt;
border: 1px solid #a1a1a1;
-webkit-appearance: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
position: absolute;
left: 14px;
right: 14px;
top: 0;
bottom: 0;
padding: 7pt;
}
.htMobileEditorContainer .cellPointer {
position: absolute;
top: -13pt;
height: 0;
width: 0;
left: 30px;
border-left: 13pt solid transparent;
border-right: 13pt solid transparent;
border-bottom: 13pt solid #ebebeb;
}
.htMobileEditorContainer .cellPointer.hidden {
display: none;
}
.htMobileEditorContainer .cellPointer:before {
content: '';
display: block;
position: absolute;
top: 2px;
height: 0;
width: 0;
left: -13pt;
border-left: 13pt solid transparent;
border-right: 13pt solid transparent;
border-bottom: 13pt solid #f8f8f8;
}
.htMobileEditorContainer .moveHandle {
position: absolute;
top: 10pt;
left: 5px;
width: 30px;
bottom: 0px;
cursor: move;
z-index: 9999;
}
.htMobileEditorContainer .moveHandle:after {
content: "..\a..\a..\a..";
white-space: pre;
line-height: 10px;
font-size: 20pt;
display: inline-block;
margin-top: -8px;
color: #ebebeb;
}
.htMobileEditorContainer .positionControls {
width: 205pt;
position: absolute;
right: 5pt;
top: 0;
bottom: 0;
}
.htMobileEditorContainer .positionControls > div {
width: 50pt;
height: 100%;
float: left;
}
.htMobileEditorContainer .positionControls > div:after {
content: " ";
display: block;
width: 15pt;
height: 15pt;
text-align: center;
line-height: 50pt;
}
.htMobileEditorContainer .leftButton:after,
.htMobileEditorContainer .rightButton:after,
.htMobileEditorContainer .upButton:after,
.htMobileEditorContainer .downButton:after {
transform-origin: 5pt 5pt;
-webkit-transform-origin: 5pt 5pt;
margin: 21pt 0 0 21pt;
}
.htMobileEditorContainer .leftButton:after {
border-top: 2px solid #288ffe;
border-left: 2px solid #288ffe;
-webkit-transform: rotate(-45deg);
/*margin-top: 17pt;*/
/*margin-left: 20pt;*/
}
.htMobileEditorContainer .leftButton:active:after {
border-color: #cfcfcf;
}
.htMobileEditorContainer .rightButton:after {
border-top: 2px solid #288ffe;
border-left: 2px solid #288ffe;
-webkit-transform: rotate(135deg);
/*margin-top: 17pt;*/
/*margin-left: 10pt;*/
}
.htMobileEditorContainer .rightButton:active:after {
border-color: #cfcfcf;
}
.htMobileEditorContainer .upButton:after {
/*border-top: 2px solid #cfcfcf;*/
border-top: 2px solid #288ffe;
border-left: 2px solid #288ffe;
-webkit-transform: rotate(45deg);
/*margin-top: 22pt;*/
/*margin-left: 15pt;*/
}
.htMobileEditorContainer .upButton:active:after {
border-color: #cfcfcf;
}
.htMobileEditorContainer .downButton:after {
border-top: 2px solid #288ffe;
border-left: 2px solid #288ffe;
-webkit-transform: rotate(225deg);
/*margin-top: 15pt;*/
/*margin-left: 15pt;*/
}
.htMobileEditorContainer .downButton:active:after {
border-color: #cfcfcf;
}
.handsontable.hide-tween {
-webkit-animation: opacity-hide 0.3s;
animation: opacity-hide 0.3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.handsontable.show-tween {
-webkit-animation: opacity-show 0.3s;
animation: opacity-show 0.3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
.htCommentCell {
position: relative;
}
.htCommentCell:after {
content: '';
position: absolute;
top: 0;
right: 0;
border-left: 6px solid transparent;
border-top: 6px solid black;
}
.htComments {
display: none;
z-index: 1059;
position: absolute;
}
.htCommentTextArea {
box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border: none;
border-left: 3px solid #ccc;
background-color: #fff;
width: 215px;
height: 90px;
font-size: 12px;
padding: 5px;
outline: 0px !important;
-webkit-appearance: none;
}
.htCommentTextArea:focus {
box-shadow: rgba(0, 0, 0, 0.117647) 0 1px 3px, rgba(0, 0, 0, 0.239216) 0 1px 2px, inset 0 0 0 1px #5292f7;
border-left: 3px solid #5292f7;
}
/*!
* Handsontable ContextMenu
*/
.htContextMenu {
display: none;
position: absolute;
z-index: 1060; /* needs to be higher than 1050 - z-index for Twitter Bootstrap modal (#1569) */
}
.htContextMenu .ht_clone_top,
.htContextMenu .ht_clone_left,
.htContextMenu .ht_clone_corner,
.htContextMenu .ht_clone_debug {
display: none;
}
.htContextMenu table.htCore {
border: 1px solid #ccc;
border-bottom-width: 2px;
border-right-width: 2px;
}
.htContextMenu .wtBorder {
visibility: hidden;
}
.htContextMenu table tbody tr td {
background: white;
border-width: 0;
padding: 4px 6px 0 6px;
cursor: pointer;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.htContextMenu table tbody tr td:first-child {
border: 0;
}
.htContextMenu table tbody tr td.htDimmed {
font-style: normal;
color: #323232;
}
.htContextMenu table tbody tr td.current,
.htContextMenu table tbody tr td.zeroclipboard-is-hover {
background: #f3f3f3;
}
.htContextMenu table tbody tr td.htSeparator {
border-top: 1px solid #bbb;
height: 0;
padding: 0;
cursor: default;
}
.htContextMenu table tbody tr td.htDisabled {
color: #999;
cursor: default;
}
.htContextMenu table tbody tr td.htDisabled:hover {
background: #fff;
color: #999;
cursor: default;
}
.htContextMenu table tbody tr.htHidden {
display: none;
}
.htContextMenu table tbody tr td .htItemWrapper {
margin-left: 10px;
margin-right: 6px;
}
.htContextMenu table tbody tr td div span.selected {
margin-top: -2px;
position: absolute;
left: 4px;
}
.htContextMenu .ht_master .wtHolder {
overflow: hidden;
}
.htRowHeaders .ht_master.innerBorderLeft ~ .ht_clone_top_left_corner th:nth-child(2),
.htRowHeaders .ht_master.innerBorderLeft ~ .ht_clone_left td:first-of-type {
border-left: 0 none;
}
.handsontable .wtHider {
position: relative;
}
.handsontable.ht__manualColumnMove.after-selection--columns thead th.ht__highlight {
cursor: move;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.handsontable.ht__manualColumnMove.on-moving--columns,
.handsontable.ht__manualColumnMove.on-moving--columns thead th.ht__highlight {
cursor: move;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.handsontable.ht__manualColumnMove.on-moving--columns .manualColumnResizer {
display: none;
}
.handsontable .ht__manualColumnMove--guideline,
.handsontable .ht__manualColumnMove--backlight {
position: absolute;
height: 100%;
display: none;
}
.handsontable .ht__manualColumnMove--guideline {
background: #757575;
width: 2px;
top: 0;
margin-left: -1px;
z-index: 105;
}
.handsontable .ht__manualColumnMove--backlight {
background: #343434;
background: rgba(52, 52, 52, 0.25);
display: none;
z-index: 105;
pointer-events: none;
}
.handsontable.on-moving--columns.show-ui .ht__manualColumnMove--guideline,
.handsontable.on-moving--columns .ht__manualColumnMove--backlight {
display: block;
}
.handsontable .wtHider {
position: relative;
}
.handsontable.ht__manualRowMove.after-selection--rows tbody th.ht__highlight {
cursor: move;
cursor: -moz-grab;
cursor: -webkit-grab;
cursor: grab;
}
.handsontable.ht__manualRowMove.on-moving--rows,
.handsontable.ht__manualRowMove.on-moving--rows tbody th.ht__highlight {
cursor: move;
cursor: -moz-grabbing;
cursor: -webkit-grabbing;
cursor: grabbing;
}
.handsontable.ht__manualRowMove.on-moving--rows .manualRowResizer {
display: none;
}
.handsontable .ht__manualRowMove--guideline,
.handsontable .ht__manualRowMove--backlight {
position: absolute;
width: 100%;
display: none;
}
.handsontable .ht__manualRowMove--guideline {
background: #757575;
height: 2px;
left: 0;
margin-top: -1px;
z-index: 105;
}
.handsontable .ht__manualRowMove--backlight {
background: #343434;
background: rgba(52, 52, 52, 0.25);
display: none;
z-index: 105;
pointer-events: none;
}
.handsontable.on-moving--rows.show-ui .ht__manualRowMove--guideline,
.handsontable.on-moving--rows .ht__manualRowMove--backlight {
display: block;
}
@-webkit-keyframes ngdialog-fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes ngdialog-fadeout {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@-webkit-keyframes ngdialog-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes ngdialog-fadein {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.ngdialog {
box-sizing: border-box;
}
.ngdialog *,
.ngdialog *:before,
.ngdialog *:after {
box-sizing: inherit;
}
.ngdialog {
position: fixed;
overflow: auto;
-webkit-overflow-scrolling: touch;
z-index: 10000;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.ngdialog.ngdialog-disabled-animation,
.ngdialog.ngdialog-disabled-animation .ngdialog-overlay,
.ngdialog.ngdialog-disabled-animation .ngdialog-content {
-webkit-animation: none!important;
animation: none!important;
}
.ngdialog-overlay {
position: fixed;
background: rgba(0, 0, 0, 0.4);
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadein 0.5s;
animation: ngdialog-fadein 0.5s;
}
.ngdialog-no-overlay {
pointer-events: none;
}
.ngdialog.ngdialog-closing .ngdialog-overlay {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
.ngdialog-content {
background: white;
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadein 0.5s;
animation: ngdialog-fadein 0.5s;
pointer-events: all;
}
.ngdialog.ngdialog-closing .ngdialog-content {
-webkit-backface-visibility: hidden;
-webkit-animation: ngdialog-fadeout 0.5s;
animation: ngdialog-fadeout 0.5s;
}
.ngdialog-close:before {
font-family: 'Helvetica', Arial, sans-serif;
content: '\00D7';
cursor: pointer;
}
html.ngdialog-open,
body.ngdialog-open {
overflow: hidden;
}
@-webkit-keyframes ngdialog-flyin {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes ngdialog-flyin {
0% {
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
100% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@-webkit-keyframes ngdialog-flyout {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
@keyframes ngdialog-flyout {
0% {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
transform: translateY(-40px);
}
}
.ngdialog.ngdialog-theme-default {
padding-bottom: 160px;
padding-top: 160px;
}
.ngdialog.ngdialog-theme-default.ngdialog-closing .ngdialog-content {
-webkit-animation: ngdialog-flyout .5s;
animation: ngdialog-flyout .5s;
}
.ngdialog.ngdialog-theme-default .ngdialog-content {
-webkit-animation: ngdialog-flyin .5s;
animation: ngdialog-flyin .5s;
background: #f0f0f0;
border-radius: 5px;
color: #444;
font-family: 'Helvetica',sans-serif;
font-size: 1.1em;
line-height: 1.5em;
margin: 0 auto;
max-width: 100%;
padding: 1em;
position: relative;
width: 450px;
}
.ngdialog.ngdialog-theme-default .ngdialog-close {
border-radius: 5px;
cursor: pointer;
position: absolute;
right: 0;
top: 0;
}
.ngdialog.ngdialog-theme-default .ngdialog-close:before {
background: transparent;
border-radius: 3px;
color: #bbb;
content: '\00D7';
font-size: 26px;
font-weight: 400;
height: 30px;
line-height: 26px;
position: absolute;
right: 3px;
text-align: center;
top: 3px;
width: 30px;
}
.ngdialog.ngdialog-theme-default .ngdialog-close:hover:before,
.ngdialog.ngdialog-theme-default .ngdialog-close:active:before {
color: #777;
}
.ngdialog.ngdialog-theme-default .ngdialog-message {
margin-bottom: .5em;
}
.ngdialog.ngdialog-theme-default .ngdialog-input {
margin-bottom: 1em;
}
.ngdialog.ngdialog-theme-default .ngdialog-input textarea,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"],
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"] {
background: #fff;
border: 0;
border-radius: 3px;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
margin: 0 0 .25em;
min-height: 2.5em;
padding: .25em .67em;
width: 100%;
}
.ngdialog.ngdialog-theme-default .ngdialog-input textarea:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="text"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="password"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="email"]:focus,
.ngdialog.ngdialog-theme-default .ngdialog-input input[type="url"]:focus {
box-shadow: inset 0 0 0 2px #8dbdf1;
outline: none;
}
.ngdialog.ngdialog-theme-default .ngdialog-buttons {
*zoom: 1;
}
.ngdialog.ngdialog-theme-default .ngdialog-buttons:after {
content: '';
display: table;
clear: both;
}
.ngdialog.ngdialog-theme-default .ngdialog-button {
border: 0;
border-radius: 3px;
cursor: pointer;
float: right;
font-family: inherit;
font-size: .8em;
letter-spacing: .1em;
line-height: 1em;
margin: 0 0 0 .5em;
padding: .75em 2em;
text-transform: uppercase;
}
.ngdialog.ngdialog-theme-default .ngdialog-button:focus {
-webkit-animation: ngdialog-pulse 1.1s infinite;
animation: ngdialog-pulse 1.1s infinite;
outline: none;
}
@media (max-width: 568px) {
.ngdialog.ngdialog-theme-default .ngdialog-button:focus {
-webkit-animation: none;
animation: none;
}
}
.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-primary {
background: #3288e6;
color: #fff;
}
.ngdialog.ngdialog-theme-default .ngdialog-button.ngdialog-button-secondary {
background: #e0e0e0;
color: #777;
}