@luftborn/custom-elements 2.13.1 → 2.13.2
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/demo/index.js +33 -13
- package/demo/index.min.js +32 -12
- package/demo/index.min.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js +3 -0
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.js.map +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.d.ts +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.js +1 -1
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js +2 -2
- package/dist/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.js.map +1 -1
- package/dist/elements/TypeAhead/TypeAheadElement.d.ts +3 -0
- package/dist/elements/TypeAhead/TypeAheadElement.js +26 -9
- package/dist/elements/TypeAhead/TypeAheadElement.js.map +1 -1
- package/package.json +1 -1
- package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepicker.ts +3 -0
- package/src/elements/CustomFormatDateFieldElement/CustomDatepicker/CustomDatepickerStyles.ts +2 -2
- package/src/elements/CustomFormatDateFieldElement/CustomFormatDateFieldElement.ts +11 -2
- package/src/elements/TypeAhead/TypeAheadElement.ts +36 -14
package/demo/index.min.js
CHANGED
|
@@ -4435,6 +4435,9 @@ var CustomDatepicker = /** @class */ (function () {
|
|
|
4435
4435
|
if (event.key === 'Enter') {
|
|
4436
4436
|
_this.setDateUsingInputValue();
|
|
4437
4437
|
}
|
|
4438
|
+
if (event.key === 'Escape' || event.key === 'Tab') {
|
|
4439
|
+
_this.showPicker(false);
|
|
4440
|
+
}
|
|
4438
4441
|
});
|
|
4439
4442
|
this.otherTriggers.forEach(function (trigger) {
|
|
4440
4443
|
trigger.addEventListener('click', function () { return _this.showPicker(true); });
|
|
@@ -4468,7 +4471,7 @@ exports.default = CustomDatepicker;
|
|
|
4468
4471
|
"use strict";
|
|
4469
4472
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4470
4473
|
exports.CustomDatepickerStyles = void 0;
|
|
4471
|
-
exports.CustomDatepickerStyles = "\n .custom-datepicker {\n position: fixed;\n background-color: #fff;\n display: none;\n width: 12.5rem;\n border: 0.063rem solid #ccc;\n border-radius: 0.313rem;\n padding: 0.625rem;\n margin: 0 auto;\n box-shadow: 0 0 0.625rem 0 #ccc;\n font: 0.75rem Arial, sans-serif;\n }\n\n .custom-datepicker .custom-datepicer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.625rem;\n }\n .custom-datepicker .weekdays {\n display: flex;\n justify-content: space-between;\n }\n .custom-datepicker .weekdays span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days {\n display: flex;\n flex-wrap: wrap;\n }\n .custom-datepicker .days span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days span:hover {\n background-color: #B2d5ff;\n cursor: pointer;\n }\n .custom-datepicker .days span.today {\n border: 0.063rem solid #000;\n }\n .custom-datepicker .days span.selected-day {\n background-color: #
|
|
4474
|
+
exports.CustomDatepickerStyles = "\n .custom-datepicker {\n position: fixed;\n background-color: #fff;\n display: none;\n width: 12.5rem;\n border: 0.063rem solid #ccc;\n border-radius: 0.313rem;\n padding: 0.625rem;\n margin: 0 auto;\n box-shadow: 0 0 0.625rem 0 #ccc;\n font: 0.75rem Arial, sans-serif;\n }\n\n .custom-datepicker .custom-datepicer-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n margin-bottom: 0.625rem;\n }\n .custom-datepicker .weekdays {\n display: flex;\n justify-content: space-between;\n }\n .custom-datepicker .weekdays span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days {\n display: flex;\n flex-wrap: wrap;\n }\n .custom-datepicker .days span {\n width: 14.28%;\n text-align: center;\n padding: 0.313rem 0;\n }\n .custom-datepicker .days span:hover {\n background-color: #B2d5ff;\n cursor: pointer;\n }\n .custom-datepicker .days span.today {\n border: 0.063rem solid #000;\n }\n .custom-datepicker .days span.selected-day {\n background-color: #0070F0;\n color: #fff;\n }\n .custom-datepicker .prev-month, .next-month {\n cursor: pointer;\n }\n .custom-datepicker .month-year {\n font-weight: bold;\n }\n .custom-datepicker .month-year:hover {\n cursor: pointer;\n }\n .custom-datepicker .select-month-year {\n display: none;\n width: 100%;\n overflow-y: auto;\n }\n .custom-datepicker .select-month-year .year {\n text-align: center;\n background-color: #f0f0f0;\n border-bottom: 0.063rem solid #3f3d3d;\n padding: 0.313rem 0;\n cursor: pointer;\n }\n .custom-datepicker .select-month-year .year .months {\n display: flex;\n flex-wrap: wrap;\n }\n .custom-datepicker .select-month-year .year .months span {\n width: 25%;\n text-align: center;\n padding: 0.625rem 0;\n background-color: #fff;\n }\n .custom-datepicker .select-month-year .year .months span:hover {\n background-color: #B2d5ff;\n cursor: pointer;\n }\n .custom-datepicker .actions {\n display: flex;\n justify-content: space-between;\n margin-top: 0.625rem;\n }\n .custom-datepicker .actions input {\n color: #0070F0;\n border: none;\n background-color: transparent;\n padding: 0.313rem;\n border: 0.063rem solid transparent;\n }\n .custom-datepicker .actions input:hover {\n background-color: #B2d5ff;\n border-color: #000;\n }\n";
|
|
4472
4475
|
|
|
4473
4476
|
},{}],18:[function(require,module,exports){
|
|
4474
4477
|
"use strict";
|
|
@@ -5017,8 +5020,8 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
|
|
|
5017
5020
|
CustomFormatDateFieldElement = __decorate([
|
|
5018
5021
|
(0, custom_element_decorator_1.default)({
|
|
5019
5022
|
selector: 'custom-format-date-element',
|
|
5020
|
-
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\"
|
|
5021
|
-
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-field::after {\n\t\t\tcontent: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */\n\t\t\tcursor: pointer;\n\t\t\tright: 0.625rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t}\n\t",
|
|
5023
|
+
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\">\n\t\t\t<button id=\"picker-trigger\" aria-label=\"Open date picker\">\n\t\t\t\t<svg class=\"svg-picker\" data-toggle viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><rect x=\"2\" y=\"4\" width=\"20\" height=\"18\" rx=\"1\" fill=\"#000\"/><rect x=\"4\" y=\"8\" width=\"16\" height=\"12\" fill=\"white\"/><path d=\"M4 10H20\" stroke=\"#000\" stroke-width=\"1\"/><circle cx=\"16\" cy=\"14\" r=\"2\" fill=\"#F44336\"/><rect x=\"6\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/><rect x=\"15\" y=\"2\" width=\"3\" height=\"4\" rx=\".5\" fill=\"#000\"/></svg>\n\t\t\t</button>\n\t\t</div>",
|
|
5024
|
+
style: "\n\t\t:host{\n\t\t\twidth:100%;\n\t\t}\n\t\t* {\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.wrapper{\n\t\t\tdisplay:flex;\n\t\t\tposition: relative;\n\t\t}\n\t\tinput{\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t#date-field::after {\n\t\t\tcontent: url('path/to/datepicker-icon.png'); /* Path to your datepicker icon */\n\t\t\tcursor: pointer;\n\t\t\tright: 0.625rem;\n\t\t}\n\t\t.svg-picker {\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t}\n\t\t#picker-trigger {\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: transparent;\n\t\t\tborder: none;\n\t\t\twidth: 0.938rem;\n\t\t\theight: 0.938rem;\n\t\t\tposition:absolute;\n\t\t\tright: 0.125rem;\n\t\t\ttop: 15%;\n\t\t\tpadding: 0;\n\t\t}\n\t",
|
|
5022
5025
|
useShadow: true,
|
|
5023
5026
|
})
|
|
5024
5027
|
], CustomFormatDateFieldElement);
|
|
@@ -6699,7 +6702,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6699
6702
|
TypeAheadElement.prototype.initChildInputs = function () {
|
|
6700
6703
|
var _this = this;
|
|
6701
6704
|
this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
|
|
6702
|
-
this.descriptionElement = _super.prototype.
|
|
6705
|
+
this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
|
|
6706
|
+
this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
|
|
6703
6707
|
this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
|
|
6704
6708
|
if (this.required) {
|
|
6705
6709
|
this.textInputElement.setAttribute('required', '');
|
|
@@ -6744,6 +6748,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6744
6748
|
}
|
|
6745
6749
|
_this.searchResultOptions.push(option);
|
|
6746
6750
|
var optionsListItem = document.createElement("div");
|
|
6751
|
+
optionsListItem.setAttribute('role', 'option');
|
|
6752
|
+
optionsListItem.setAttribute('id', "option-" + index);
|
|
6753
|
+
optionsListItem.setAttribute('aria-selected', 'false');
|
|
6747
6754
|
optionsListItem.classList.add('options-list-item');
|
|
6748
6755
|
optionsListItem.dataset['value'] = option.value;
|
|
6749
6756
|
optionslist.appendChild(optionsListItem);
|
|
@@ -6758,16 +6765,16 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6758
6765
|
optionsListItem.addEventListener('mousedown', function () {
|
|
6759
6766
|
_this.optionSelectedHandler(option);
|
|
6760
6767
|
});
|
|
6761
|
-
_this.
|
|
6768
|
+
_this.optionsListElement.appendChild(optionsListItem);
|
|
6762
6769
|
});
|
|
6770
|
+
this.optionsListElement.hidden = false;
|
|
6771
|
+
this.updateAriaAttributes();
|
|
6763
6772
|
};
|
|
6764
6773
|
TypeAheadElement.prototype.closeOptionsList = function () {
|
|
6765
6774
|
this.currentFoucsedIndex = -1;
|
|
6766
|
-
|
|
6767
|
-
|
|
6768
|
-
|
|
6769
|
-
}
|
|
6770
|
-
optionsList.remove();
|
|
6775
|
+
this.optionsListElement.innerHTML = '';
|
|
6776
|
+
this.optionsListElement.hidden = true;
|
|
6777
|
+
this.updateAriaAttributes();
|
|
6771
6778
|
};
|
|
6772
6779
|
TypeAheadElement.prototype.optionSelectedHandler = function (option) {
|
|
6773
6780
|
this.value = option.value;
|
|
@@ -6786,6 +6793,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6786
6793
|
}
|
|
6787
6794
|
_this.currentFoucsedIndex = _this.currentFoucsedIndex === _this.searchResultOptions.length - 1 ? 0 : _this.currentFoucsedIndex + 1;
|
|
6788
6795
|
_this.highlightFocusedSearchResult();
|
|
6796
|
+
_this.scrollToFocusedOption();
|
|
6789
6797
|
}
|
|
6790
6798
|
if (event.key === 'ArrowUp') {
|
|
6791
6799
|
if (!_this.searchHasResults) {
|
|
@@ -6793,6 +6801,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6793
6801
|
}
|
|
6794
6802
|
_this.currentFoucsedIndex = _this.currentFoucsedIndex === 0 ? _this.searchResultOptions.length - 1 : _this.currentFoucsedIndex - 1;
|
|
6795
6803
|
_this.highlightFocusedSearchResult();
|
|
6804
|
+
_this.scrollToFocusedOption();
|
|
6796
6805
|
}
|
|
6797
6806
|
if (event.key === 'Enter') {
|
|
6798
6807
|
if (_this.currentFoucsedIndex !== -1 && _this.searchHasResults) {
|
|
@@ -6802,6 +6811,12 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6802
6811
|
}
|
|
6803
6812
|
});
|
|
6804
6813
|
};
|
|
6814
|
+
TypeAheadElement.prototype.scrollToFocusedOption = function () {
|
|
6815
|
+
var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
|
|
6816
|
+
if (optionListItems && optionListItems[this.currentFoucsedIndex]) {
|
|
6817
|
+
optionListItems[this.currentFoucsedIndex].scrollIntoView({ block: 'nearest' });
|
|
6818
|
+
}
|
|
6819
|
+
};
|
|
6805
6820
|
TypeAheadElement.prototype.highlightFocusedSearchResult = function () {
|
|
6806
6821
|
var _this = this;
|
|
6807
6822
|
var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
|
|
@@ -6809,12 +6824,17 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6809
6824
|
return;
|
|
6810
6825
|
}
|
|
6811
6826
|
optionListItems.forEach(function (listItem, index) {
|
|
6827
|
+
listItem.setAttribute('aria-selected', String(index === _this.currentFoucsedIndex));
|
|
6812
6828
|
listItem.classList.remove('active');
|
|
6813
6829
|
if (index === _this.currentFoucsedIndex) {
|
|
6814
6830
|
listItem.classList.add('active');
|
|
6831
|
+
_this.textInputElement.setAttribute('aria-activedescendant', listItem.id);
|
|
6815
6832
|
}
|
|
6816
6833
|
});
|
|
6817
6834
|
};
|
|
6835
|
+
TypeAheadElement.prototype.updateAriaAttributes = function () {
|
|
6836
|
+
this.textInputElement.setAttribute('aria-expanded', String(!this.optionsListElement.hidden));
|
|
6837
|
+
};
|
|
6818
6838
|
TypeAheadElement.prototype.change = function ($event) {
|
|
6819
6839
|
this.touched = true;
|
|
6820
6840
|
this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
|
|
@@ -6826,8 +6846,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
|
|
|
6826
6846
|
TypeAheadElement = __decorate([
|
|
6827
6847
|
(0, custom_element_decorator_1.default)({
|
|
6828
6848
|
selector: 'type-ahead-element',
|
|
6829
|
-
template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"text-input\">\n\t\t\t<div id=\"description\"></div>\n\t\t</div>",
|
|
6830
|
-
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 0.125rem;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 0.063rem solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 12.5rem;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 0.625rem;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 0.063rem solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\
|
|
6849
|
+
template: "\n\t\t<div class=\"wrapper\" role=\"combobox\" aria-expanded=\"false\" aria-owns=\"options-list\" aria-haspopup=\"listbox\">\n\t\t\t<input type=\"text\" id=\"text-input\" aria-autocomplete=\"list\" aria-controls=\"options-list\" aria-activedescendant=\"\" role=\"textbox\">\n\t\t\t<div id=\"description\" aria-live=\"polite\"></div>\n\t\t\t<div id=\"options-list\" role=\"listbox\" class=\"options-list\" hidden>\n\t\t\t\t<!-- Options will be dynamically added here -->\n\t\t\t</div>\n\t\t</div>",
|
|
6850
|
+
style: "\n\t\t:host {\n\t\t\twidth:100%;\n\t\t}\n\t\t.wrapper {\n\t\t\tposition: relative;\n\t\t\tdisplay:flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t}\n\t\t#text-input {\n\t\t\tbox-sizing: border-box;\n\t\t\twidth: 100% !important;\n\t\t\tborder: none;\n\t\t\tbackground-color: #f1f4ff;\n\t\t\tmargin: 0.125rem;\n\t\t\tresize: none;\n\t\t}\n\t\t.wrapper #description {\n\t\t\twidth: 100%;\n\t\t\tpadding: 0 0.125rem;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\t\t.options-list {\n\t\t\tposition: absolute;\n\t\t\tborder: 0.063rem solid #E8E8E8;\n\t\t\tborder-bottom: none;\n\t\t\tborder-top: none;\n\t\t\tz-index: 3;\n\t\t\ttop: 100%;\n\t\t\tleft: 0;\n\t\t\tright: 0;\n\t\t\tmax-height: 12.5rem;\n\t\t\toverflow-y: auto;\n\t\t}\n\t\t.options-list-item {\n\t\t\tpadding: 0.625rem;\n\t\t\tcursor: pointer;\n\t\t\tbackground-color: #FFFFFF;\n\t\t\tborder-bottom: 0.063rem solid #E8E8E8;\n\t\t}\n\t\t.options-list-item:hover {\n\t\t\tbackground-color: #E8E8E8;\n\t\t}\n\t\t.options-list-item.active {\n\t\t\tbackground-color: #003E64 !important;\n\t\t\tcolor: #FFFFFF;\n\t\t}\n\t\t.options-list-item-title {\n\t\t\tfont-size: 1rem;\n\t\t}\n\t\t.options-list-item-description {\n\t\t\tfont-size: 0.625rem;\n\t\t}\n\t",
|
|
6831
6851
|
useShadow: true,
|
|
6832
6852
|
})
|
|
6833
6853
|
], TypeAheadElement);
|