@luftborn/custom-elements 2.13.1 → 2.13.3

package/demo/index.min.js

@@ -3283,6 +3283,7 @@ exports.CustomForm = void 0;
 var FileFieldElement_1 = require("./elements/FileField/FileFieldElement");
 var ArrayUtil_1 = require("./framework/Utilities/ArrayUtil");
 var MakeRequest_1 = require("./framework/Utilities/MakeRequest");
+var Elements_1 = require("./elements/Elements");
 var CustomForm = /** @class */ (function () {
     function CustomForm(form) {
         this.form = form;
@@ -3349,7 +3350,13 @@ var CustomForm = /** @class */ (function () {
                 }
             }
             else {
-                formData.append("Values[" + input.name + "]", input.value);
+                if (input instanceof Elements_1.CheckBoxElement) {
+                    var value = JSON.stringify(input.value);
+                    formData.append("Values[" + input.name + "]", value);
+                }
+                else {
+                    formData.append("Values[" + input.name + "]", input.value);
+                }
             }
         }
         for (var _b = 0, _c = this.nativeInputs; _b < _c.length; _b++) {
@@ -3447,7 +3454,7 @@ var CustomForm = /** @class */ (function () {
 }());
 exports.CustomForm = CustomForm;
 
-},{"./elements/FileField/FileFieldElement":26,"./framework/Utilities/ArrayUtil":62,"./framework/Utilities/MakeRequest":65}],11:[function(require,module,exports){
+},{"./elements/Elements":24,"./elements/FileField/FileFieldElement":26,"./framework/Utilities/ArrayUtil":62,"./framework/Utilities/MakeRequest":65}],11:[function(require,module,exports){
 "use strict";
 var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
@@ -4435,6 +4442,9 @@ var CustomDatepicker = /** @class */ (function () {
             if (event.key === 'Enter') {
                 _this.setDateUsingInputValue();
             }
+            if (event.key === 'Escape' || event.key === 'Tab') {
+                _this.showPicker(false);
+            }
         });
         this.otherTriggers.forEach(function (trigger) {
             trigger.addEventListener('click', function () { return _this.showPicker(true); });
@@ -4468,7 +4478,7 @@ exports.default = CustomDatepicker;
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomDatepickerStyles = void 0;
-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: #0075ff;\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: #0075ff;\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";
+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";
 
 },{}],18:[function(require,module,exports){
 "use strict";
@@ -5017,8 +5027,8 @@ var CustomFormatDateFieldElement = /** @class */ (function (_super) {
     CustomFormatDateFieldElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'custom-format-date-element',
-            template: "\n\t\t<div class=\"wrapper\">\n\t\t\t<input type=\"text\" id=\"date-field\" />\n\t\t\t<svg id=\"picker-trigger\" 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</div>",
-            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",
+            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>",
+            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",
             useShadow: true,
         })
     ], CustomFormatDateFieldElement);
@@ -6699,7 +6709,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
     TypeAheadElement.prototype.initChildInputs = function () {
         var _this = this;
         this.textInputElement = _super.prototype.getChildInput.call(this, '#text-input');
-        this.descriptionElement = _super.prototype.getChildInput.call(this, '#description');
+        this.descriptionElement = _super.prototype.getChildElement.call(this, '#description');
+        this.optionsListElement = _super.prototype.getChildElement.call(this, '#options-list');
         this.componentWrapper = _super.prototype.getChildElement.call(this, '.wrapper');
         if (this.required) {
             this.textInputElement.setAttribute('required', '');
@@ -6744,6 +6755,9 @@ var TypeAheadElement = /** @class */ (function (_super) {
             }
             _this.searchResultOptions.push(option);
             var optionsListItem = document.createElement("div");
+            optionsListItem.setAttribute('role', 'option');
+            optionsListItem.setAttribute('id', "option-" + index);
+            optionsListItem.setAttribute('aria-selected', 'false');
             optionsListItem.classList.add('options-list-item');
             optionsListItem.dataset['value'] = option.value;
             optionslist.appendChild(optionsListItem);
@@ -6758,16 +6772,16 @@ var TypeAheadElement = /** @class */ (function (_super) {
             optionsListItem.addEventListener('mousedown', function () {
                 _this.optionSelectedHandler(option);
             });
-            _this.componentWrapper.appendChild(optionslist);
+            _this.optionsListElement.appendChild(optionsListItem);
         });
+        this.optionsListElement.hidden = false;
+        this.updateAriaAttributes();
     };
     TypeAheadElement.prototype.closeOptionsList = function () {
         this.currentFoucsedIndex = -1;
-        var optionsList = _super.prototype.getChildElement.call(this, '.options-list');
-        if (!optionsList) {
-            return;
-        }
-        optionsList.remove();
+        this.optionsListElement.innerHTML = '';
+        this.optionsListElement.hidden = true;
+        this.updateAriaAttributes();
     };
     TypeAheadElement.prototype.optionSelectedHandler = function (option) {
         this.value = option.value;
@@ -6786,6 +6800,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
                 }
                 _this.currentFoucsedIndex = _this.currentFoucsedIndex === _this.searchResultOptions.length - 1 ? 0 : _this.currentFoucsedIndex + 1;
                 _this.highlightFocusedSearchResult();
+                _this.scrollToFocusedOption();
             }
             if (event.key === 'ArrowUp') {
                 if (!_this.searchHasResults) {
@@ -6793,6 +6808,7 @@ var TypeAheadElement = /** @class */ (function (_super) {
                 }
                 _this.currentFoucsedIndex = _this.currentFoucsedIndex === 0 ? _this.searchResultOptions.length - 1 : _this.currentFoucsedIndex - 1;
                 _this.highlightFocusedSearchResult();
+                _this.scrollToFocusedOption();
             }
             if (event.key === 'Enter') {
                 if (_this.currentFoucsedIndex !== -1 && _this.searchHasResults) {
@@ -6802,6 +6818,12 @@ var TypeAheadElement = /** @class */ (function (_super) {
             }
         });
     };
+    TypeAheadElement.prototype.scrollToFocusedOption = function () {
+        var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
+        if (optionListItems && optionListItems[this.currentFoucsedIndex]) {
+            optionListItems[this.currentFoucsedIndex].scrollIntoView({ block: 'nearest' });
+        }
+    };
     TypeAheadElement.prototype.highlightFocusedSearchResult = function () {
         var _this = this;
         var optionListItems = _super.prototype.getChildElements.call(this, '.options-list-item');
@@ -6809,12 +6831,17 @@ var TypeAheadElement = /** @class */ (function (_super) {
             return;
         }
         optionListItems.forEach(function (listItem, index) {
+            listItem.setAttribute('aria-selected', String(index === _this.currentFoucsedIndex));
             listItem.classList.remove('active');
             if (index === _this.currentFoucsedIndex) {
                 listItem.classList.add('active');
+                _this.textInputElement.setAttribute('aria-activedescendant', listItem.id);
             }
         });
     };
+    TypeAheadElement.prototype.updateAriaAttributes = function () {
+        this.textInputElement.setAttribute('aria-expanded', String(!this.optionsListElement.hidden));
+    };
     TypeAheadElement.prototype.change = function ($event) {
         this.touched = true;
         this.onChange.emit(new CustomEvents_1.CustomElementEventArgs(this.value, 'change'));
@@ -6826,8 +6853,8 @@ var TypeAheadElement = /** @class */ (function (_super) {
     TypeAheadElement = __decorate([
         (0, custom_element_decorator_1.default)({
             selector: 'type-ahead-element',
-            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>",
-            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\t/*when navigating through the items using the arrow keys:*/\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",
+            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>",
+            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",
             useShadow: true,
         })
     ], TypeAheadElement);