@websy/websy-designs 1.2.22 → 1.2.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/websy-designs-es6.debug.js +22 -13
- package/dist/websy-designs-es6.js +14 -8
- package/dist/websy-designs-es6.min.js +1 -1
- package/dist/websy-designs.debug.js +22 -13
- package/dist/websy-designs.js +14 -8
- package/dist/websy-designs.min.css +1 -1
- package/dist/websy-designs.min.js +1 -1
- package/package.json +1 -1
|
@@ -953,11 +953,11 @@ class WebsyDatePicker {
|
|
|
953
953
|
let isContinuousRange = true
|
|
954
954
|
if (rangeInput.length === 1) {
|
|
955
955
|
this.selectedRangeDates = [...rangeInput]
|
|
956
|
-
this.customRangeSelected =
|
|
956
|
+
this.customRangeSelected = true
|
|
957
957
|
}
|
|
958
958
|
else if (rangeInput.length === 2) {
|
|
959
959
|
this.selectedRangeDates = [...rangeInput]
|
|
960
|
-
this.customRangeSelected =
|
|
960
|
+
this.customRangeSelected = true
|
|
961
961
|
}
|
|
962
962
|
rangeInput.forEach((r, i) => {
|
|
963
963
|
if (i > 0) {
|
|
@@ -984,12 +984,14 @@ class WebsyDatePicker {
|
|
|
984
984
|
if (this.options.ranges[this.options.mode][i].range.length === 1) {
|
|
985
985
|
if (this.options.ranges[this.options.mode][i].range[0] === rangeInput[0]) {
|
|
986
986
|
this.selectedRange = i
|
|
987
|
+
this.customRangeSelected = false
|
|
987
988
|
break
|
|
988
989
|
}
|
|
989
990
|
}
|
|
990
991
|
else if (this.options.ranges[this.options.mode][i].range.length === 2) {
|
|
991
992
|
if (this.options.ranges[this.options.mode][i].range[0] === rangeInput[0] && this.options.ranges[this.options.mode][i].range[1] === rangeInput[1]) {
|
|
992
993
|
this.selectedRange = i
|
|
994
|
+
this.customRangeSelected = false
|
|
993
995
|
break
|
|
994
996
|
}
|
|
995
997
|
}
|
|
@@ -1098,7 +1100,11 @@ class WebsyDropdown {
|
|
|
1098
1100
|
minSearchCharacters: 2,
|
|
1099
1101
|
showCompleteSelectedList: false,
|
|
1100
1102
|
closeAfterSelection: true,
|
|
1101
|
-
customActions: []
|
|
1103
|
+
customActions: [],
|
|
1104
|
+
searchIcon: `<svg class='search' width="20" height="20" viewBox="0 0 512 512"><path d="M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><line x1="338.29" y1="338.29" x2="448" y2="448" style="fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px"/></svg>`,
|
|
1105
|
+
clearIcon: `<svg class='clear' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>`,
|
|
1106
|
+
arrowIcon: `<svg class='arrow' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>`,
|
|
1107
|
+
actionsIcon: `<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 512 512">><circle cx="256" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="416" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/><circle cx="96" cy="256" r="32" style="fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px"/></svg>`
|
|
1102
1108
|
}
|
|
1103
1109
|
this.options = Object.assign({}, DEFAULTS, options)
|
|
1104
1110
|
if (this.options.items.length > 0) {
|
|
@@ -1126,16 +1132,16 @@ class WebsyDropdown {
|
|
|
1126
1132
|
let html = `
|
|
1127
1133
|
<div id='${this.elementId}_container' class='websy-dropdown-container ${this.options.disabled ? 'disabled' : ''} ${this.options.disableSearch !== true ? 'with-search' : ''} ${this.options.style} ${this.options.customActions.length > 0 ? 'with-actions' : ''}'>
|
|
1128
1134
|
<div id='${this.elementId}_header' class='websy-dropdown-header ${this.selectedItems.length === 1 ? 'one-selected' : ''} ${this.options.allowClear === true ? 'allow-clear' : ''}'>
|
|
1129
|
-
|
|
1130
|
-
<span
|
|
1131
|
-
|
|
1135
|
+
${this.options.searchIcon}
|
|
1136
|
+
<span>
|
|
1137
|
+
<span class='websy-dropdown-header-value' data-info='${headerLabel}' id='${this.elementId}_selectedItems'>${headerLabel}</span>
|
|
1138
|
+
<span class='websy-dropdown-header-label' id='${this.elementId}_headerLabel'>${this.options.label}</span>
|
|
1139
|
+
</span>
|
|
1132
1140
|
<input class='dropdown-input' id='${this.elementId}_input' name='${this.options.field || this.options.label}' value='${headerValue}'>
|
|
1133
|
-
|
|
1141
|
+
${this.options.arrowIcon}
|
|
1134
1142
|
`
|
|
1135
1143
|
if (this.options.allowClear === true) {
|
|
1136
|
-
html +=
|
|
1137
|
-
<svg class='clear' xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 512 512"><title>ionicons-v5-l</title><line x1="368" y1="368" x2="144" y2="144" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="368" y1="144" x2="144" y2="368" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
|
|
1138
|
-
`
|
|
1144
|
+
html += this.options.clearIcon
|
|
1139
1145
|
}
|
|
1140
1146
|
html += `
|
|
1141
1147
|
</div>
|
|
@@ -1145,8 +1151,9 @@ class WebsyDropdown {
|
|
|
1145
1151
|
if (this.options.customActions.length > 0) {
|
|
1146
1152
|
html += `
|
|
1147
1153
|
<div class='websy-dropdown-action-container'>
|
|
1154
|
+
${this.options.actionsTitle || ''}
|
|
1148
1155
|
<button class='websy-dropdown-action-button'>
|
|
1149
|
-
|
|
1156
|
+
${this.options.actionsIcon}
|
|
1150
1157
|
</button>
|
|
1151
1158
|
<ul id='${this.elementId}_actionContainer'>
|
|
1152
1159
|
`
|
|
@@ -1162,7 +1169,9 @@ class WebsyDropdown {
|
|
|
1162
1169
|
}
|
|
1163
1170
|
if (this.options.disableSearch !== true) {
|
|
1164
1171
|
html += `
|
|
1165
|
-
<
|
|
1172
|
+
<div class='websy-dropdown-search-container'>
|
|
1173
|
+
<input id='${this.elementId}_search' class='websy-dropdown-search' placeholder='${this.options.searchPlaceholder || 'Search'}'>
|
|
1174
|
+
</div>
|
|
1166
1175
|
`
|
|
1167
1176
|
}
|
|
1168
1177
|
html += `
|
|
@@ -3680,7 +3689,7 @@ const WebsyUtils = {
|
|
|
3680
3689
|
}
|
|
3681
3690
|
else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
|
|
3682
3691
|
// rgb color
|
|
3683
|
-
colorParts = backgroundColor
|
|
3692
|
+
colorParts = backgroundColor.replace(/rgb\(/gi, '').replace(/\)/gi, '')
|
|
3684
3693
|
colorParts = colorParts.split(',')
|
|
3685
3694
|
red = colorParts[0]
|
|
3686
3695
|
green = colorParts[1]
|
|
@@ -1061,10 +1061,10 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
1061
1061
|
|
|
1062
1062
|
if (rangeInput.length === 1) {
|
|
1063
1063
|
this.selectedRangeDates = _toConsumableArray(rangeInput);
|
|
1064
|
-
this.customRangeSelected =
|
|
1064
|
+
this.customRangeSelected = true;
|
|
1065
1065
|
} else if (rangeInput.length === 2) {
|
|
1066
1066
|
this.selectedRangeDates = _toConsumableArray(rangeInput);
|
|
1067
|
-
this.customRangeSelected =
|
|
1067
|
+
this.customRangeSelected = true;
|
|
1068
1068
|
}
|
|
1069
1069
|
|
|
1070
1070
|
rangeInput.forEach(function (r, i) {
|
|
@@ -1094,11 +1094,13 @@ var WebsyDatePicker = /*#__PURE__*/function () {
|
|
|
1094
1094
|
if (this.options.ranges[this.options.mode][i].range.length === 1) {
|
|
1095
1095
|
if (this.options.ranges[this.options.mode][i].range[0] === rangeInput[0]) {
|
|
1096
1096
|
this.selectedRange = i;
|
|
1097
|
+
this.customRangeSelected = false;
|
|
1097
1098
|
break;
|
|
1098
1099
|
}
|
|
1099
1100
|
} else if (this.options.ranges[this.options.mode][i].range.length === 2) {
|
|
1100
1101
|
if (this.options.ranges[this.options.mode][i].range[0] === rangeInput[0] && this.options.ranges[this.options.mode][i].range[1] === rangeInput[1]) {
|
|
1101
1102
|
this.selectedRange = i;
|
|
1103
|
+
this.customRangeSelected = false;
|
|
1102
1104
|
break;
|
|
1103
1105
|
}
|
|
1104
1106
|
}
|
|
@@ -1226,7 +1228,11 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1226
1228
|
minSearchCharacters: 2,
|
|
1227
1229
|
showCompleteSelectedList: false,
|
|
1228
1230
|
closeAfterSelection: true,
|
|
1229
|
-
customActions: []
|
|
1231
|
+
customActions: [],
|
|
1232
|
+
searchIcon: "<svg class='search' width=\"20\" height=\"20\" viewBox=\"0 0 512 512\"><path d=\"M221.09,64A157.09,157.09,0,1,0,378.18,221.09,157.1,157.1,0,0,0,221.09,64Z\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><line x1=\"338.29\" y1=\"338.29\" x2=\"448\" y2=\"448\" style=\"fill:none;stroke:#000;stroke-linecap:round;stroke-miterlimit:10;stroke-width:32px\"/></svg>",
|
|
1233
|
+
clearIcon: "<svg class='clear' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 512 512\"><title>ionicons-v5-l</title><line x1=\"368\" y1=\"368\" x2=\"144\" y2=\"144\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/><line x1=\"368\" y1=\"144\" x2=\"144\" y2=\"368\" style=\"fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px\"/></svg>",
|
|
1234
|
+
arrowIcon: "<svg class='arrow' xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path d=\"M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z\"/></svg>",
|
|
1235
|
+
actionsIcon: "<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"30\" height=\"30\" viewBox=\"0 0 512 512\">><circle cx=\"256\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><circle cx=\"416\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/><circle cx=\"96\" cy=\"256\" r=\"32\" style=\"fill:none;stroke:#000;stroke-miterlimit:10;stroke-width:32px\"/></svg>"
|
|
1230
1236
|
};
|
|
1231
1237
|
this.options = _extends({}, DEFAULTS, options);
|
|
1232
1238
|
|
|
@@ -1260,16 +1266,16 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1260
1266
|
var headerValue = this.selectedItems.map(function (s) {
|
|
1261
1267
|
return _this8.options.items[s].value || _this8.options.items[s].label;
|
|
1262
1268
|
}).join(this.options.multiValueDelimiter);
|
|
1263
|
-
var html = "\n <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, " ").concat(this.options.customActions.length > 0 ? 'with-actions' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n
|
|
1269
|
+
var html = "\n <div id='".concat(this.elementId, "_container' class='websy-dropdown-container ").concat(this.options.disabled ? 'disabled' : '', " ").concat(this.options.disableSearch !== true ? 'with-search' : '', " ").concat(this.options.style, " ").concat(this.options.customActions.length > 0 ? 'with-actions' : '', "'>\n <div id='").concat(this.elementId, "_header' class='websy-dropdown-header ").concat(this.selectedItems.length === 1 ? 'one-selected' : '', " ").concat(this.options.allowClear === true ? 'allow-clear' : '', "'>\n ").concat(this.options.searchIcon, "\n <span>\n <span class='websy-dropdown-header-value' data-info='").concat(headerLabel, "' id='").concat(this.elementId, "_selectedItems'>").concat(headerLabel, "</span> \n <span class='websy-dropdown-header-label' id='").concat(this.elementId, "_headerLabel'>").concat(this.options.label, "</span>\n </span>\n <input class='dropdown-input' id='").concat(this.elementId, "_input' name='").concat(this.options.field || this.options.label, "' value='").concat(headerValue, "'>\n ").concat(this.options.arrowIcon, "\n ");
|
|
1264
1270
|
|
|
1265
1271
|
if (this.options.allowClear === true) {
|
|
1266
|
-
html +=
|
|
1272
|
+
html += this.options.clearIcon;
|
|
1267
1273
|
}
|
|
1268
1274
|
|
|
1269
1275
|
html += " \n </div>\n <div id='".concat(this.elementId, "_mask' class='websy-dropdown-mask'></div>\n <div id='").concat(this.elementId, "_content' class='websy-dropdown-content'>\n ");
|
|
1270
1276
|
|
|
1271
1277
|
if (this.options.customActions.length > 0) {
|
|
1272
|
-
html += "\n <div class='websy-dropdown-action-container'>\n <button class='websy-dropdown-action-button'>\n
|
|
1278
|
+
html += "\n <div class='websy-dropdown-action-container'>\n ".concat(this.options.actionsTitle || '', "\n <button class='websy-dropdown-action-button'>\n ").concat(this.options.actionsIcon, "\n </button>\n <ul id='").concat(this.elementId, "_actionContainer'>\n ");
|
|
1273
1279
|
this.options.customActions.forEach(function (a, i) {
|
|
1274
1280
|
html += "\n <li class='websy-dropdown-custom-action' data-index='".concat(i, "'>").concat(a.label, "</li>\n ");
|
|
1275
1281
|
});
|
|
@@ -1277,7 +1283,7 @@ var WebsyDropdown = /*#__PURE__*/function () {
|
|
|
1277
1283
|
}
|
|
1278
1284
|
|
|
1279
1285
|
if (this.options.disableSearch !== true) {
|
|
1280
|
-
html += "\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n ");
|
|
1286
|
+
html += "\n <div class='websy-dropdown-search-container'>\n <input id='".concat(this.elementId, "_search' class='websy-dropdown-search' placeholder='").concat(this.options.searchPlaceholder || 'Search', "'>\n </div>\n ");
|
|
1281
1287
|
}
|
|
1282
1288
|
|
|
1283
1289
|
html += "\n <div id='".concat(this.elementId, "_itemsContainer' class='websy-dropdown-items'>\n <ul id='").concat(this.elementId, "_items'> \n </ul>\n </div><!--\n --><div class='websy-dropdown-custom'></div>\n </div>\n </div>\n ");
|
|
@@ -4153,7 +4159,7 @@ var WebsyUtils = {
|
|
|
4153
4159
|
blue = parseInt(colorParts[4] + colorParts[5], 16);
|
|
4154
4160
|
} else if (backgroundColor.toLowerCase().indexOf('rgb') !== -1) {
|
|
4155
4161
|
// rgb color
|
|
4156
|
-
colorParts = backgroundColor;
|
|
4162
|
+
colorParts = backgroundColor.replace(/rgb\(/gi, '').replace(/\)/gi, '');
|
|
4157
4163
|
colorParts = colorParts.split(',');
|
|
4158
4164
|
red = colorParts[0];
|
|
4159
4165
|
green = colorParts[1];
|