@metadev/lux 0.16.1 → 0.17.0

package/esm2015/lib/select/select.component.js

@@ -100,7 +100,7 @@ export class SelectComponent {
 SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-select',
-                template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n",
+                template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -128,4 +128,4 @@ SelectComponent.propDecorators = {
     unique: [{ type: Input }],
     validateItem: [{ type: Input }]
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2x1eC9zcmMvbGliL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFlBQVksRUFDWixNQUFNLEVBQ04sVUFBVSxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFHTCxhQUFhLEVBQ2IsaUJBQWlCLEVBR2xCLE1BQU0sZ0JBQWdCLENBQUM7QUFFeEIsSUFBSSxTQUFTLEdBQUcsQ0FBQyxDQUFDO0FBbUJsQixNQUFNLE9BQU8sZUFBZTtJQW9CMUI7UUFuQlMsT0FBRSxHQUFHLFlBQVksR0FBRyxTQUFTLEVBQUUsQ0FBQztRQUNoQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsOEJBQThCO1FBQ3JCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFDaEIsVUFBSyxHQUFhLEVBQUUsQ0FBQztRQUNwQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFDNUMsZ0JBQVcsR0FBRyxTQUFTLENBQUM7UUFDakMsd0RBQXdEO1FBQy9DLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDdkIsd0VBQXdFO1FBQy9ELGlCQUFZLEdBQTZCLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUM7UUFFOUQsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLFVBQUssR0FBRyxJQUFJLENBQUM7UUFDYixvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUVoQixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBSXhCLGlDQUFpQztRQUNqQyxhQUFRLEdBQUcsQ0FBQyxLQUFLLEVBQVEsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUMvQixjQUFTLEdBQUcsR0FBUyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBSlosQ0FBQztJ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QyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLEtBQUssQ0FBQztZQUM5QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUs7Z0JBQ2hCLENBQUMsQ0FBQyxVQUFVLFFBQVEseUNBQXlDO2dCQUM3RCxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQ1QsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUU7Z0JBQ3pCLE9BQU87YUFDUjtTQUNGO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxlQUFlLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3JDLENBQUM7OztZQXZIRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDg1QkFBc0M7Z0JBRXRDLFNBQVMsRUFBRTtvQkFDVDt3QkFDRSxPQUFPLEVBQUUsaUJBQWlCO3dCQUMxQixLQUFLLEVBQUUsSUFBSTt3QkFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztxQkFDL0M7b0JBQ0Q7d0JBQ0UsT0FBTyxFQUFFLGFBQWE7d0JBQ3RCLEtBQUssRUFBRSxJQUFJO3dCQUNYLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDO3FCQUMvQztpQkFDRjs7YUFDRjs7OztpQkFFRSxLQUFLO3VCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFFTCxLQUFLO29CQUNMLEtBQUs7MEJBQ0wsTUFBTTswQkFDTixLQUFLO3FCQUVMLEtBQUs7MkJBRUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgT3V0cHV0LFxuICBmb3J3YXJkUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQWJzdHJhY3RDb250cm9sLFxuICBDb250cm9sVmFsdWVBY2Nlc3NvcixcbiAgTkdfVkFMSURBVE9SUyxcbiAgTkdfVkFMVUVfQUNDRVNTT1IsXG4gIFZhbGlkYXRpb25FcnJvcnMsXG4gIFZhbGlkYXRvclxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmxldCBzZXF1ZW5jZXIgPSAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsdXgtc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlbGVjdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NlbGVjdC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0Q29tcG9uZW50KVxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMSURBVE9SUyxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0Q29tcG9uZW50KVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgVmFsaWRhdG9yIHtcbiAgQElucHV0KCkgaWQgPSAnc3RyaW5nTGlzdCcgKyBzZXF1ZW5jZXIrKztcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZTtcbiAgLyoqIEFsbG93IG11bHRpcGxlIGVsZW1lbnRzICovXG4gIEBJbnB1dCgpIG11bHRpcGxlID0gdHJ1ZTtcbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZ1tdID0gW107XG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nW10+KCk7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJ0FkZCBuZXcnO1xuICAvKiogSWYgc2V0LCBjaGVjayB0aGVyZSBpcyBubyBkdXBsaWNhdGVzIGluIHRoZSBkYXRhLiAqL1xuICBASW5wdXQoKSB1bmlxdWUgPSB0cnVlO1xuICAvKiogVmFsaWRhdGlvbiBmdW5jdGlvbiBmb3IgbmV3IGl0ZW1zLiBSZXR1cm5zIGVycm9yIG9yIG51bGwgaWYgdmFsaWQgKi9cbiAgQElucHV0KCkgdmFsaWRhdGVJdGVtOiAoaXRlbTogc3RyaW5nKSA9PiBzdHJpbmcgPSAoXykgPT4gbnVsbDtcblxuICBuZXdFbnRyeSA9ICcnO1xuICBlcnJvciA9IG51bGw7XG4gIGlzVmFsaWROZXdFbnRyeSA9IGZhbHNlO1xuXG4gIHByaXZhdGUgdG91Y2hlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICAvLyBDb250cm9sVmFsdWVBY2Nlc3NvciBJbnRlcmZhY2VcbiAgb25DaGFuZ2UgPSAodmFsdWUpOiB2b2lkID0+IHt9O1xuICBvblRvdWNoZWQgPSAoKTogdm9pZCA9PiB7fTtcbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG4gIHJlZ2lzdGVyT25DaGFuZ2Uob25DaGFuZ2U6IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBvbkNoYW5nZTtcbiAgfVxuICByZWdpc3Rlck9uVG91Y2hlZChvblRvdWNoZWQ6IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gb25Ub3VjaGVkO1xuICB9XG4gIG1hcmtBc1RvdWNoZWQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnRvdWNoZWQpIHtcbiAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gICAgICB0aGlzLnRvdWNoZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuICBzZXREaXNhYmxlZFN0YXRlKGRpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGRpc2FibGVkO1xuICB9XG4gIC8vIEVuZCBDb250cm9sVmFsdWVBY2Nlc3NvciBJbnRlcmZhY2VcblxuICAvLyBWYWxpZGF0b3IgaW50ZXJmYWNlXG4gIHJlZ2lzdGVyT25WYWxpZGF0b3JDaGFuZ2UoKTogdm9pZCB7fVxuXG4gIHZhbGlkYXRlKGNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCk6IFZhbGlkYXRpb25FcnJvcnMgfCBudWxsIHtcbiAgICBjb25zdCB2YWx1ZSA9IGNvbnRyb2wudmFsdWU7XG4gICAgaWYgKFxuICAgICAgdGhpcy5yZXF1aXJlZCAmJlxuICAgICAgKHZhbHVlID09PSAnJyB8fCB2YWx1ZSA9PT0gbnVsbCB8fCB2YWx1ZSA9PT0gdW5kZWZpbmVkKVxuICAgICkge1xuICAgICAgcmV0dXJuIHsgcmVxdWlyZWQ6IHsgdmFsdWUsIHJlYXNvbjogJ1JlcXVpcmVkIGZpZWxkLicgfSB9O1xuICAgIH1cbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuICAvLyBFbmQgb2YgVmFsaWRhdG9yIGludGVyZmFjZVxuXG4gIGdldCBjYW5BZGQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMubXVsdGlwbGUgfHwgdGhpcy52YWx1ZS5sZW5ndGggPT09IDA7XG4gIH1cbiAgYWRkKHZhbDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZS5wdXNoKHZhbCk7XG4gICAgdGhpcy5uZXdFbnRyeSA9ICcnO1xuICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgfVxuICByZW1vdmUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLnZhbHVlLmxlbmd0aCA+IGluZGV4KSB7XG4gICAgICB0aGlzLnZhbHVlLnNwbGljZShpbmRleCwgMSk7XG4gICAgICB0aGlzLm1hcmtBc1RvdWNoZWQoKTtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gIH1cbiAgb25LZXlQcmVzcyhldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicgJiYgIXRoaXMuZXJyb3IgJiYgdGhpcy5uZXdFbnRyeSAhPT0gJycpIHtcbiAgICAgIC8vIEFkZCBvbiBwcmVzc2luZyBFbnRlci9SZXR1cm5cbiAgICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgICAgdGhpcy5hZGQodGhpcy5uZXdFbnRyeSk7XG4gICAgfVxuICB9XG4gIG9uQ2hhbmdlTmV3RW50cnkobmV3VmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgIGlmICghbmV3VmFsdWUpIHtcbiAgICAgIHRoaXMuaXNWYWxpZE5ld0VudHJ5ID0gZmFsc2U7XG4gICAgICB0aGlzLmVycm9yID0gbnVsbDtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMudW5pcXVlKSB7XG4gICAgICBjb25zdCBmb3VuZCA9ICh0aGlzLnZhbHVlIHx8IFtdKS5maW5kKChpdCkgPT4gaXQgPT09IG5ld1ZhbHVlKTtcbiAgICAgIHRoaXMuaXNWYWxpZE5ld0VudHJ5ID0gIWZvdW5kO1xuICAgICAgdGhpcy5lcnJvciA9IGZvdW5kXG4gICAgICAgID8gYFZhbHVlICcke25ld1ZhbHVlfScgaXMgYWxyZWFkeSBpbi4gQ2Fubm90IGFkZCBkdXBsaWNhdGVzLmBcbiAgICAgICAgOiBudWxsO1xuICAgICAgaWYgKCF0aGlzLmlzVmFsaWROZXdFbnRyeSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgfVxuICAgIHRoaXMuZXJyb3IgPSB0aGlzLnZhbGlkYXRlSXRlbShuZXdWYWx1ZSk7XG4gICAgdGhpcy5pc1ZhbGlkTmV3RW50cnkgPSAhdGhpcy5lcnJvcjtcbiAgfVxufVxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2x1eC9zcmMvbGliL3NlbGVjdC9zZWxlY3QuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBQ1QsS0FBSyxFQUNMLFlBQVksRUFDWixNQUFNLEVBQ04sVUFBVSxFQUNYLE1BQU0sZUFBZSxDQUFDO0FBQ3ZCLE9BQU8sRUFHTCxhQUFhLEVBQ2IsaUJBQWlCLEVBR2xCLE1BQU0sZ0JBQWdCLENBQUM7QUFFeEIsSUFBSSxTQUFTLEdBQUcsQ0FBQyxDQUFDO0FBbUJsQixNQUFNLE9BQU8sZUFBZTtJQW9CMUI7UUFuQlMsT0FBRSxHQUFHLFlBQVksR0FBRyxTQUFTLEVBQUUsQ0FBQztRQUNoQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLGFBQVEsR0FBRyxLQUFLLENBQUM7UUFDMUIsOEJBQThCO1FBQ3JCLGFBQVEsR0FBRyxJQUFJLENBQUM7UUFDaEIsVUFBSyxHQUFhLEVBQUUsQ0FBQztRQUNwQixnQkFBVyxHQUFHLElBQUksWUFBWSxFQUFZLENBQUM7UUFDNUMsZ0JBQVcsR0FBRyxTQUFTLENBQUM7UUFDakMsd0RBQXdEO1FBQy9DLFdBQU0sR0FBRyxJQUFJLENBQUM7UUFDdkIsd0VBQXdFO1FBQy9ELGlCQUFZLEdBQTZCLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxJQUFJLENBQUM7UUFFOUQsYUFBUSxHQUFHLEVBQUUsQ0FBQztRQUNkLFVBQUssR0FBRyxJQUFJLENBQUM7UUFDYixvQkFBZSxHQUFHLEtBQUssQ0FBQztRQUVoQixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBSXhCLGlDQUFpQztRQUNqQyxhQUFRLEdBQUcsQ0FBQyxLQUFLLEVBQVEsRUFBRSxHQUFFLENBQUMsQ0FBQztRQUMvQixjQUFTLEdBQUcsR0FBUyxFQUFFLEdBQUUsQ0FBQyxDQUFDO0lBSlosQ0FBQztJ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QyxFQUFFLEtBQUssUUFBUSxDQUFDLENBQUM7WUFDL0QsSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDLEtBQUssQ0FBQztZQUM5QixJQUFJLENBQUMsS0FBSyxHQUFHLEtBQUs7Z0JBQ2hCLENBQUMsQ0FBQyxVQUFVLFFBQVEseUNBQXlDO2dCQUM3RCxDQUFDLENBQUMsSUFBSSxDQUFDO1lBQ1QsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUU7Z0JBQ3pCLE9BQU87YUFDUjtTQUNGO1FBQ0QsSUFBSSxDQUFDLEtBQUssR0FBRyxJQUFJLENBQUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQ3pDLElBQUksQ0FBQyxlQUFlLEdBQUcsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDO0lBQ3JDLENBQUM7OztZQXZIRixTQUFTLFNBQUM7Z0JBQ1QsUUFBUSxFQUFFLFlBQVk7Z0JBQ3RCLDI4QkFBc0M7Z0JBRXRDLFNBQVMsRUFBRTtvQkFDVDt3QkFDRSxPQUFPLEVBQUUsaUJBQWlCO3dCQUMxQixLQUFLLEVBQUUsSUFBSTt3QkFDWCxXQUFXLEVBQUUsVUFBVSxDQUFDLEdBQUcsRUFBRSxDQUFDLGVBQWUsQ0FBQztxQkFDL0M7b0JBQ0Q7d0JBQ0UsT0FBTyxFQUFFLGFBQWE7d0JBQ3RCLEtBQUssRUFBRSxJQUFJO3dCQUNYLFdBQVcsRUFBRSxVQUFVLENBQUMsR0FBRyxFQUFFLENBQUMsZUFBZSxDQUFDO3FCQUMvQztpQkFDRjs7YUFDRjs7OztpQkFFRSxLQUFLO3VCQUNMLEtBQUs7dUJBQ0wsS0FBSzt1QkFFTCxLQUFLO29CQUNMLEtBQUs7MEJBQ0wsTUFBTTswQkFDTixLQUFLO3FCQUVMLEtBQUs7MkJBRUwsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENvbXBvbmVudCxcbiAgSW5wdXQsXG4gIEV2ZW50RW1pdHRlcixcbiAgT3V0cHV0LFxuICBmb3J3YXJkUmVmXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtcbiAgQWJzdHJhY3RDb250cm9sLFxuICBDb250cm9sVmFsdWVBY2Nlc3NvcixcbiAgTkdfVkFMSURBVE9SUyxcbiAgTkdfVkFMVUVfQUNDRVNTT1IsXG4gIFZhbGlkYXRpb25FcnJvcnMsXG4gIFZhbGlkYXRvclxufSBmcm9tICdAYW5ndWxhci9mb3Jtcyc7XG5cbmxldCBzZXF1ZW5jZXIgPSAwO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdsdXgtc2VsZWN0JyxcbiAgdGVtcGxhdGVVcmw6ICcuL3NlbGVjdC5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL3NlbGVjdC5jb21wb25lbnQuc2NzcyddLFxuICBwcm92aWRlcnM6IFtcbiAgICB7XG4gICAgICBwcm92aWRlOiBOR19WQUxVRV9BQ0NFU1NPUixcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0Q29tcG9uZW50KVxuICAgIH0sXG4gICAge1xuICAgICAgcHJvdmlkZTogTkdfVkFMSURBVE9SUyxcbiAgICAgIG11bHRpOiB0cnVlLFxuICAgICAgdXNlRXhpc3Rpbmc6IGZvcndhcmRSZWYoKCkgPT4gU2VsZWN0Q29tcG9uZW50KVxuICAgIH1cbiAgXVxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RDb21wb25lbnQgaW1wbGVtZW50cyBDb250cm9sVmFsdWVBY2Nlc3NvciwgVmFsaWRhdG9yIHtcbiAgQElucHV0KCkgaWQgPSAnc3RyaW5nTGlzdCcgKyBzZXF1ZW5jZXIrKztcbiAgQElucHV0KCkgZGlzYWJsZWQgPSBmYWxzZTtcbiAgQElucHV0KCkgcmVxdWlyZWQgPSBmYWxzZTtcbiAgLyoqIEFsbG93IG11bHRpcGxlIGVsZW1lbnRzICovXG4gIEBJbnB1dCgpIG11bHRpcGxlID0gdHJ1ZTtcbiAgQElucHV0KCkgdmFsdWU6IHN0cmluZ1tdID0gW107XG4gIEBPdXRwdXQoKSB2YWx1ZUNoYW5nZSA9IG5ldyBFdmVudEVtaXR0ZXI8c3RyaW5nW10+KCk7XG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJ0FkZCBuZXcnO1xuICAvKiogSWYgc2V0LCBjaGVjayB0aGVyZSBpcyBubyBkdXBsaWNhdGVzIGluIHRoZSBkYXRhLiAqL1xuICBASW5wdXQoKSB1bmlxdWUgPSB0cnVlO1xuICAvKiogVmFsaWRhdGlvbiBmdW5jdGlvbiBmb3IgbmV3IGl0ZW1zLiBSZXR1cm5zIGVycm9yIG9yIG51bGwgaWYgdmFsaWQgKi9cbiAgQElucHV0KCkgdmFsaWRhdGVJdGVtOiAoaXRlbTogc3RyaW5nKSA9PiBzdHJpbmcgPSAoXykgPT4gbnVsbDtcblxuICBuZXdFbnRyeSA9ICcnO1xuICBlcnJvciA9IG51bGw7XG4gIGlzVmFsaWROZXdFbnRyeSA9IGZhbHNlO1xuXG4gIHByaXZhdGUgdG91Y2hlZCA9IGZhbHNlO1xuXG4gIGNvbnN0cnVjdG9yKCkge31cblxuICAvLyBDb250cm9sVmFsdWVBY2Nlc3NvciBJbnRlcmZhY2VcbiAgb25DaGFuZ2UgPSAodmFsdWUpOiB2b2lkID0+IHt9O1xuICBvblRvdWNoZWQgPSAoKTogdm9pZCA9PiB7fTtcbiAgd3JpdGVWYWx1ZSh2YWx1ZTogYW55KTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZSA9IHZhbHVlO1xuICB9XG4gIHJlZ2lzdGVyT25DaGFuZ2Uob25DaGFuZ2U6IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25DaGFuZ2UgPSBvbkNoYW5nZTtcbiAgfVxuICByZWdpc3Rlck9uVG91Y2hlZChvblRvdWNoZWQ6IGFueSk6IHZvaWQge1xuICAgIHRoaXMub25Ub3VjaGVkID0gb25Ub3VjaGVkO1xuICB9XG4gIG1hcmtBc1RvdWNoZWQoKTogdm9pZCB7XG4gICAgaWYgKCF0aGlzLnRvdWNoZWQpIHtcbiAgICAgIHRoaXMub25Ub3VjaGVkKCk7XG4gICAgICB0aGlzLnRvdWNoZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuICBzZXREaXNhYmxlZFN0YXRlKGRpc2FibGVkOiBib29sZWFuKTogdm9pZCB7XG4gICAgdGhpcy5kaXNhYmxlZCA9IGRpc2FibGVkO1xuICB9XG4gIC8vIEVuZCBDb250cm9sVmFsdWVBY2Nlc3NvciBJbnRlcmZhY2VcblxuICAvLyBWYWxpZGF0b3IgaW50ZXJmYWNlXG4gIHJlZ2lzdGVyT25WYWxpZGF0b3JDaGFuZ2UoKTogdm9pZCB7fVxuXG4gIHZhbGlkYXRlKGNvbnRyb2w6IEFic3RyYWN0Q29udHJvbCk6IFZhbGlkYXRpb25FcnJvcnMgfCBudWxsIHtcbiAgICBjb25zdCB2YWx1ZSA9IGNvbnRyb2wudmFsdWU7XG4gICAgaWYgKFxuICAgICAgdGhpcy5yZXF1aXJlZCAmJlxuICAgICAgKHZhbHVlID09PSAnJyB8fCB2YWx1ZSA9PT0gbnVsbCB8fCB2YWx1ZSA9PT0gdW5kZWZpbmVkKVxuICAgICkge1xuICAgICAgcmV0dXJuIHsgcmVxdWlyZWQ6IHsgdmFsdWUsIHJlYXNvbjogJ1JlcXVpcmVkIGZpZWxkLicgfSB9O1xuICAgIH1cbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuICAvLyBFbmQgb2YgVmFsaWRhdG9yIGludGVyZmFjZVxuXG4gIGdldCBjYW5BZGQoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMubXVsdGlwbGUgfHwgdGhpcy52YWx1ZS5sZW5ndGggPT09IDA7XG4gIH1cbiAgYWRkKHZhbDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy52YWx1ZS5wdXNoKHZhbCk7XG4gICAgdGhpcy5uZXdFbnRyeSA9ICcnO1xuICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgfVxuICByZW1vdmUoaW5kZXg6IG51bWJlcik6IHZvaWQge1xuICAgIGlmICh0aGlzLnZhbHVlLmxlbmd0aCA+IGluZGV4KSB7XG4gICAgICB0aGlzLnZhbHVlLnNwbGljZShpbmRleCwgMSk7XG4gICAgICB0aGlzLm1hcmtBc1RvdWNoZWQoKTtcbiAgICAgIHRoaXMudmFsdWVDaGFuZ2UuZW1pdCh0aGlzLnZhbHVlKTtcbiAgICB9XG4gIH1cbiAgb25LZXlQcmVzcyhldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xuICAgIGlmIChldmVudC5rZXkgPT09ICdFbnRlcicgJiYgIXRoaXMuZXJyb3IgJiYgdGhpcy5uZXdFbnRyeSAhPT0gJycpIHtcbiAgICAgIC8vIEFkZCBvbiBwcmVzc2luZyBFbnRlci9SZXR1cm5cbiAgICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgICAgdGhpcy5hZGQodGhpcy5uZXdFbnRyeSk7XG4gICAgfVxuICB9XG4gIG9uQ2hhbmdlTmV3RW50cnkobmV3VmFsdWU6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMubWFya0FzVG91Y2hlZCgpO1xuICAgIGlmICghbmV3VmFsdWUpIHtcbiAgICAgIHRoaXMuaXNWYWxpZE5ld0VudHJ5ID0gZmFsc2U7XG4gICAgICB0aGlzLmVycm9yID0gbnVsbDtcbiAgICAgIHJldHVybjtcbiAgICB9XG4gICAgaWYgKHRoaXMudW5pcXVlKSB7XG4gICAgICBjb25zdCBmb3VuZCA9ICh0aGlzLnZhbHVlIHx8IFtdKS5maW5kKChpdCkgPT4gaXQgPT09IG5ld1ZhbHVlKTtcbiAgICAgIHRoaXMuaXNWYWxpZE5ld0VudHJ5ID0gIWZvdW5kO1xuICAgICAgdGhpcy5lcnJvciA9IGZvdW5kXG4gICAgICAgID8gYFZhbHVlICcke25ld1ZhbHVlfScgaXMgYWxyZWFkeSBpbi4gQ2Fubm90IGFkZCBkdXBsaWNhdGVzLmBcbiAgICAgICAgOiBudWxsO1xuICAgICAgaWYgKCF0aGlzLmlzVmFsaWROZXdFbnRyeSkge1xuICAgICAgICByZXR1cm47XG4gICAgICB9XG4gICAgfVxuICAgIHRoaXMuZXJyb3IgPSB0aGlzLnZhbGlkYXRlSXRlbShuZXdWYWx1ZSk7XG4gICAgdGhpcy5pc1ZhbGlkTmV3RW50cnkgPSAhdGhpcy5lcnJvcjtcbiAgfVxufVxuIl19

package/fesm2015/metadev-lux.js

@@ -107,7 +107,7 @@ const LOST_FOCUS_TIME_WINDOW_MS = 200; // ms
 class AutocompleteComponent {
     constructor(cd) {
         this.cd = cd;
-        this.lostFocusHandled = false;
+        this.lostFocusHandled = true;
         this.t0 = 0;
         this.showSpinner = false;
         this.touched = false;
@@ -280,16 +280,16 @@ class AutocompleteComponent {
     focusOnNext(offset) {
         const list = this.completionList || [];
         const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
-        const next = index !== -1 && list.length > index + offset
-            ? list[index + offset]
-            : list[list.length - 1];
+        const indexNext = -1 && list.length > index + offset ? index + offset : list.length - 1;
+        const next = list[indexNext];
         this.focusItem = next;
         this.ensureItemVisible(index);
     }
     focusOnPrevious(offset) {
         const list = this.completionList || [];
         const index = list.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
-        const next = index !== -1 && index > offset ? list[index - offset] : list[0];
+        const indexPrevious = index !== -1 && index > offset ? index - offset : 0;
+        const next = list[indexPrevious];
         this.focusItem = next;
         this.ensureItemVisible(index);
     }
@@ -310,9 +310,12 @@ class AutocompleteComponent {
                 //   'label:',
                 //   label
                 // );
-                if (label) {
+                if (label && this.label !== label) {
                     this.pickSelectionOrFirstMatch(label);
                 }
+                else {
+                    this.lostFocusHandled = true;
+                }
                 this.toggleCompletion(false, label);
             }
             else {
@@ -327,12 +330,17 @@ class AutocompleteComponent {
         }, LOST_FOCUS_TIME_WINDOW_MS);
     }
     complete(item) {
-        this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
-        const ellapsed = performance.now() - this.t0;
-        if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
-            console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
+        if (!this.lostFocusHandled) {
+            this.lostFocusHandled = true; // prevent a previous lostFocus to trigger a side effect
+            const ellapsed = performance.now() - this.t0;
+            if (ellapsed > LOST_FOCUS_TIME_WINDOW_MS) {
+                console.warn('complete. lostfocus->click timeout of ', LOST_FOCUS_TIME_WINDOW_MS, 'ms exceed: ', performance.now() - this.t0, ' ms');
+            }
+            // console.log(
+            //   'complete. set to true. CANCELED side effect',
+            //   performance.now() - this.t0
+            // );
         }
-        console.log('complete. set to true. CANCELED side effect', performance.now() - this.t0);
         if (item !== null) {
             this.value = item.key;
             this.label = item.label;
@@ -374,12 +382,17 @@ class AutocompleteComponent {
         this.value = text;
         this.label = text;
     }
+    /** Pick selection based on text filtering (ingnores drowdown state) */
     pickSelectionOrFirstMatch(text) {
         if (this.canAddNewValues) {
             this.syncCustomValue(text);
             return;
         }
-        if (this.showCompletion && this.focusItem && this.focusItem.label) {
+        const focusIndex = this.completionList.findIndex((it) => this.focusItem && it.key === this.focusItem.key);
+        if (this.showCompletion &&
+            focusIndex > 0 &&
+            this.focusItem &&
+            this.focusItem.label) {
             if (text === this.focusItem.label && this.focusItem.key === this.value) {
                 // do nothing if value does not change & close dropdow
                 this.showCompletion = false;
@@ -390,13 +403,18 @@ class AutocompleteComponent {
             return;
         }
         const source = (text || '').trim();
-        if (source === '') {
+        if (!source) {
             this.showCompletion = false;
+            // select null value
+            if (this.value !== null) {
+                this.value = null;
+            }
             return;
         }
         this.completionList = [];
         this.computeCompletionList(source).subscribe((suggestions) => {
-            this.complete(suggestions && suggestions.length > 0 ? suggestions[0] : null);
+            const candidate = suggestions && suggestions.length > 0 ? suggestions[0] : null;
+            this.complete(candidate);
         });
     }
     showCompletionList(text) {
@@ -439,8 +457,10 @@ class AutocompleteComponent {
         }
         else if (this.instance && this.populateFunction) {
             return this.populateFunction(this.instance, searchText).pipe(debounceTime(1), first(), map((ds) => {
-                ds.filter((it) => ignoreAccentsInclude(it.label, searchText)).sort((a, b) => a.label.localeCompare(b.label));
-                return decorateDataSource(ds, searchText);
+                const dsFiltered = ds
+                    .filter((it) => ignoreAccentsInclude(it.label, searchText))
+                    .sort((a, b) => a.label.localeCompare(b.label));
+                return decorateDataSource(dsFiltered, searchText);
             }));
         }
         else {
@@ -452,7 +472,7 @@ AutocompleteComponent.idCounter = 0;
 AutocompleteComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-autocomplete',
-                template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n  <div class=\"lux-autocomplete-box\">\n    <input\n      #i0\n      [id]=\"inputId\"\n      [(ngModel)]=\"label\"\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled || null\"\n      [attr.readonly]=\"readonly || null\"\n      (keydown)=\"onKeydown($event, i0.value)\"\n      (keypress)=\"onKeypress($event, i0.value)\"\n      (keyup)=\"onKeyup($event, i0.value)\"\n      (blur)=\"onLostFocus(i0.value)\"\n      (focus)=\"toggleCompletion(true, i0.value)\"\n      (click)=\"toggleCompletion(true, i0.value)\"\n      (resized)=\"onInputResized()\"\n      (window:resize)=\"onInputResized()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"showCompletion\"\n      aria-haspopup=\"true\"\n      attr.aria-owns=\"{{ inputId + '_list' }}\"\n      [attr.aria-activedescendant]=\"selectedOption\"\n    />\n    <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n    <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n    <ng-template #noLoading>\n      <button\n        *ngIf=\"!disabled && i0.value; else dropdown\"\n        class=\"icon-clear\"\n        aria-label=\"Clear\"\n        (click)=\"clear()\"\n      ></button>\n      <ng-template #dropdown>\n        <div\n          class=\"icon-dropdown\"\n          (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n        ></div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div\n    #completeDiv\n    [class.showCompletion]=\"showCompletion\"\n    class=\"lux-completion-list\"\n    id=\"{{ inputId + '_list' }}\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let item of completionList; let index = index\"\n        id=\"{{ inputId + '_' + index }}\"\n        class=\"lux-completion-item\"\n        [class.selected]=\"focusItem && item.key === focusItem.key\"\n        (click)=\"complete(item)\"\n        [attr.aria-label]=\"item.label\"\n      >\n        <span>{{ item.labelPrefix }}</span>\n        <span class=\"bold\">{{ item.labelMatch }}</span>\n        <span>{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\n",
+                template: "<div class=\"lux-autocomplete\" (blur)=\"toggleCompletion(false, i0.value)\">\n  <div class=\"lux-autocomplete-box\">\n    <input\n      #i0\n      [id]=\"inputId\"\n      [(ngModel)]=\"label\"\n      [placeholder]=\"placeholder\"\n      [attr.disabled]=\"disabled || null\"\n      [attr.readonly]=\"readonly || null\"\n      (keydown)=\"onKeydown($event, i0.value)\"\n      (keypress)=\"onKeypress($event, i0.value)\"\n      (keyup)=\"onKeyup($event, i0.value)\"\n      (blur)=\"onLostFocus(i0.value)\"\n      (focus)=\"toggleCompletion(true, i0.value)\"\n      (click)=\"toggleCompletion(true, i0.value)\"\n      (resized)=\"onInputResized()\"\n      (window:resize)=\"onInputResized()\"\n      role=\"combobox\"\n      aria-autocomplete=\"list\"\n      [attr.aria-expanded]=\"showCompletion\"\n      aria-haspopup=\"true\"\n      attr.aria-owns=\"{{ inputId + '_list' }}\"\n      [attr.aria-activedescendant]=\"selectedOption\"\n    />\n    <div *ngIf=\"canAddNewValues\" class=\"icon-suggestions\"></div>\n    <div *ngIf=\"showSpinner; else noLoading\" class=\"icon-spinner\"></div>\n    <ng-template #noLoading>\n      <button\n        *ngIf=\"!disabled && i0.value && !showCompletion; else dropdown\"\n        type=\"button\"\n        class=\"icon-clear\"\n        aria-label=\"Clear\"\n        (click)=\"clear()\"\n      ></button>\n      <ng-template #dropdown>\n        <div\n          class=\"icon-dropdown\"\n          (click)=\"toggleCompletion(!showCompletion, i0.value)\"\n        ></div>\n      </ng-template>\n    </ng-template>\n  </div>\n  <div\n    #completeDiv\n    [class.showCompletion]=\"showCompletion\"\n    class=\"lux-completion-list\"\n    id=\"{{ inputId + '_list' }}\"\n  >\n    <ul>\n      <li\n        *ngFor=\"let item of completionList; let index = index\"\n        id=\"{{ inputId + '_' + index }}\"\n        class=\"lux-completion-item\"\n        [class.selected]=\"focusItem && item.key === focusItem.key\"\n        (click)=\"complete(item)\"\n        [attr.aria-label]=\"item.label\"\n      >\n        <span>{{ item.labelPrefix }}</span>\n        <span class=\"bold\">{{ item.labelMatch }}</span>\n        <span>{{ item.labelPostfix }}</span>\n      </li>\n    </ul>\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -465,7 +485,7 @@ AutocompleteComponent.decorators = [
                         useExisting: forwardRef(() => AutocompleteComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0;padding:0;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0;padding:0}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:bold}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.lux-autocomplete .lux-autocomplete-box{display:grid;grid-template-columns:1fr -webkit-max-content;grid-template-columns:1fr max-content}.lux-autocomplete input{padding:.1rem 1.5rem .1rem .5rem;padding:var(--lux-autocomplete-input-padding, .1rem 1.5rem .1rem .5rem);text-overflow:ellipsis;grid-row:1;grid-column-start:1;grid-column-end:3}.lux-autocomplete .icon-suggestions{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/suggestions.svg) no-repeat center;background-size:.5rem .5rem;z-index:1;position:relative;left:-1rem}.lux-autocomplete .icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);border:none;background-color:transparent;background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-dropdown{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);height:1.3rem;height:var(--lux-autocomplete-icon-height, 1.3rem);border:none;background-color:transparent;background:url(/assets/img/drop-down-arrow.svg) no-repeat center;background:var(--lux-autocomplete-icon-dropdown, url(/assets/img/drop-down-arrow.svg) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-autocomplete .icon-spinner{grid-row:1;grid-column:2;width:1.5rem;border:none;background-color:transparent;background:url(/assets/img/spinner.svg) no-repeat center;background-size:1.2rem 1.2rem;z-index:1}.lux-completion-list{visibility:collapse;position:absolute;border:1px solid #ccc;margin:0;padding:0;max-height:10rem;overflow:auto;z-index:2}.lux-completion-list ul{list-style:none;margin:0;padding:0}.showCompletion{visibility:visible}.lux-completion-item{background-color:#fff;color:#000;padding:.1rem .5rem;cursor:pointer}.selected{background-color:#2e2eac;color:#fff}.disabled{background-color:#f0f0f0;color:#444}.disabled .selected{background-color:#9898ec;color:#fff}.bold{font-weight:bold}\n"]
             },] }
 ];
 AutocompleteComponent.ctorParameters = () => [
@@ -733,7 +753,7 @@ AutocompleteListComponent.idCounter = 0;
 AutocompleteListComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-autocomplete-list',
-                template: "<div [id]=\"inputId\">\n  <ul>\n    <li *ngFor=\"let label of labels; let index = index\">\n      <span>{{ label }}</span>\n      <button\n        *ngIf=\"!disabled\"\n        class=\"remove-item\"\n        (click)=\"removeAt(index)\"\n        attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n      ></button>\n    </li>\n  </ul>\n  <div *ngIf=\"!disabled\" class=\"new-entry\">\n    <lux-autocomplete\n      #auto\n      [dataSource]=\"internalDataSource\"\n      [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n      [(value)]=\"newEntry\"\n      (valueChange)=\"onValueChange()\"\n      (keypress)=\"onNewEntryChange($event, auto)\"\n    >\n    </lux-autocomplete>\n    <button\n      *ngIf=\"canAdd\"\n      class=\"add-item\"\n      attr.aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\n",
+                template: "<div [id]=\"inputId\">\n  <ul>\n    <li *ngFor=\"let label of labels; let index = index\">\n      <span>{{ label }}</span>\n      <button\n        *ngIf=\"!disabled\"\n        class=\"remove-item\"\n        (click)=\"removeAt(index)\"\n        attr.aria-label=\"{{ getDeleteMessage(label) }}\"\n      ></button>\n    </li>\n  </ul>\n  <div *ngIf=\"!disabled\" class=\"new-entry\">\n    <lux-autocomplete\n      #auto\n      [dataSource]=\"internalDataSource\"\n      [placeholder]=\"placeholder ?? literals[lang].placeholder\"\n      [(value)]=\"newEntry\"\n      (valueChange)=\"onValueChange()\"\n      (keypress)=\"onNewEntryChange($event, auto)\"\n    >\n    </lux-autocomplete>\n    <button\n      *ngIf=\"canAdd\"\n      type=\"button\"\n      class=\"add-item\"\n      attr.aria-label=\"addMessage ?? literals[lang].addMessage\"\n      (click)=\"addNew(auto)\"\n    ></button>\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1139,7 +1159,7 @@ DatetimeComponent.idCounter = 0;
 DatetimeComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-datetime',
-                template: "<input\n  #dateInput\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"date\"\n  [id]=\"inputId + '$date'\"\n  [(ngModel)]=\"dateValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<input\n  #timeInput\n  [class]=\"(disabled || readonly) && localTime ? 'rounded-right' : ''\"\n  [ngClass]=\"className\"\n  type=\"time\"\n  [id]=\"inputId + '$time'\"\n  [(ngModel)]=\"timeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  [step]=\"includeSeconds ? 1 : 60\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<ng-container\n  *ngIf=\"!localTime\"\n>\n  <div\n    [class]=\"disabled || readonly ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n    [ngClass]=\"className\"\n  >\n    <span>{{ localTime ? '' : 'UTC' }}</span>\n  </div>\n</ng-container>\n<button\n  #clearButton\n  *ngIf=\"!(disabled || readonly)\"\n  class=\"rounded-right postfix icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
+                template: "<input\n  #dateInput\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"date\"\n  [id]=\"inputId + '$date'\"\n  [(ngModel)]=\"dateValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<input\n  #timeInput\n  [class]=\"(disabled || readonly) && localTime ? 'rounded-right' : ''\"\n  [ngClass]=\"className\"\n  type=\"time\"\n  [id]=\"inputId + '$time'\"\n  [(ngModel)]=\"timeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [placeholder]=\"\"\n  [step]=\"includeSeconds ? 1 : 60\"\n  (keyup)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (change)=\"onEventDatetime(dateInput.value, timeInput.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<ng-container\n  *ngIf=\"!localTime\"\n>\n  <div\n    [class]=\"disabled || readonly ? 'rounded-right postfix symbol' : 'postfix symbol'\"\n    [ngClass]=\"className\"\n  >\n    <span>{{ localTime ? '' : 'UTC' }}</span>\n  </div>\n</ng-container>\n<button\n  #clearButton\n  *ngIf=\"!(disabled || readonly)\"\n  type=\"button\"\n  class=\"rounded-right postfix bordered icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1152,7 +1172,7 @@ DatetimeComponent.decorators = [
                         useExisting: forwardRef(() => DatetimeComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon-clear{grid-row:1;grid-column:2;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}\n"]
             },] }
 ];
 DatetimeComponent.ctorParameters = () => [];
@@ -1690,7 +1710,7 @@ InputComponent.idCounter = 0;
 InputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-input',
-                template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  [ngClass]=\"className\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  [ngClass]=\"className\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
+                template: "<div *ngIf=\"currency && currency === 'USD'\" class=\"prefix rounded-left symbol\" [ngClass]=\"className\">\n  <span>$</span>\n</div>\n<input\n  #input\n  *ngIf=\"type !== 'textarea'\"\n  [class]=\"hasPrefix() ? (hasPostfix() ? 'infix' : 'postfix rounded-right') : (hasPostfix() ? 'prefix rounded-left' : 'rounded')\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [type]=\"domain\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"min?.toString() || undefined\"\n  [attr.max]=\"max?.toString() || undefined\"\n  [attr.step]=\"step?.toString() || undefined\"\n  [attr.pattern]=\"pattern || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(input.value)\"\n  (change)=\"onChangeValue(input.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<textarea\n  #textarea\n  *ngIf=\"type === 'textarea'\"\n  class=\"rounded\"\n  [ngClass]=\"className\"\n  placement=\"top\"\n  [id]=\"inputId\"\n  [attr.value]=\"value\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.cols]=\"cols?.toString() || undefined\"\n  [attr.rows]=\"rows?.toString() || undefined\"\n  [placeholder]=\"placeholder\"\n  (keyup)=\"onKeyUp(textarea.value)\"\n  (change)=\"onChangeValue(textarea.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n></textarea>\n<div *ngIf=\"currency && currency === 'EUR'\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u20AC</span>\n</div>\n<div *ngIf=\"isPercentage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>%</span>\n</div>\n<div *ngIf=\"isPermillage()\" class=\"postfix rounded-right symbol\" [ngClass]=\"className\">\n  <span>\u2030</span>\n</div>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ userErrors[this.lang].required }}\n  </div>\n  <div *ngIf=\"lastErrors.email\">{{ userErrors[this.lang].email }}</div>\n  <div *ngIf=\"lastErrors.min\">\n    {{ userErrors[this.lang].min.replace('$min', lastErrors.min.min) }}\n  </div>\n  <div *ngIf=\"lastErrors.max\">\n    {{ userErrors[this.lang].max.replace('$max', lastErrors.max.max) }}\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1703,7 +1723,7 @@ InputComponent.decorators = [
                         useExisting: forwardRef(() => InputComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}\n"]
             },] }
 ];
 InputComponent.ctorParameters = () => [
@@ -1846,7 +1866,7 @@ FilterComponent.idCounter = 0;
 FilterComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-filter',
-                template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n",
+                template: "<div class=\"filter\">\n  <input\n    #i0\n    type=\"text\"\n    [attr.aria-label]=\"ariaLabel\"\n    [placeholder]=\"placeholder\"\n    [id]=\"inputId\"\n    [disabled]=\"disabled\"\n    [value]=\"searchValue\"\n    (valueChange)=\"onInputValueChange(i0.value)\"\n    (keyup)=\"keyup($event, i0.value)\"\n  />\n\n  <button\n    [class.hide]=\"!searchValue\"\n    aria-label=\"Clear\"\n    class=\"clear-indicator icon icon-clear\"\n    type=\"button\"\n    (click)=\"clear()\"\n  ></button>\n  <i *ngIf=\"1 || searchOnType\" class=\"search-indicator icon icon-search\"></i>\n  <button\n    class=\"btn-search\"\n    *ngIf=\"!searchOnType\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    (click)=\"search()\"\n  >\n    Search\n  </button>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -1854,7 +1874,7 @@ FilterComponent.decorators = [
                         useExisting: forwardRef(() => FilterComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.filter{display:grid;grid-template-columns:auto 1.5rem 1.5rem .5rem auto}.filter input{grid-row:1;grid-column-start:1;grid-column-end:4}.filter .hide{visibility:collapse}.filter .clear-indicator{grid-row:1;grid-column:2;border:none}.filter .search-indicator{grid-row:1;grid-column:3}.filter .btn-search{grid-row:1;grid-column:5}.filter .icon-search{background:url(/assets/img/filter-search.png) no-repeat center;background:var(--lux-filter-icon-search, url(/assets/img/filter-search.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center;width:1rem;width:var(--lux-filter-icon-width, 1rem)}.filter .icon-clear{background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-filter-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:1rem;background-size:var(--lux-filter-icon-bg-size, 1rem);background-position:center}\n"]
             },] }
 ];
 FilterComponent.ctorParameters = () => [];
@@ -2798,7 +2818,7 @@ GeolocationComponent.idCounter = 0;
 GeolocationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-geolocation',
-                template: "<input\n  #latitude\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$latitude'\"\n  [(ngModel)]=\"latitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLatitude !== undefined && minLatitude !== null\n      ? minLatitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLatitude !== undefined && maxLatitude !== null\n      ? maxLatitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lat\"\n  (keyup)=\"onEventLatitude(latitude.value)\"\n  (change)=\"onEventLatitude(latitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\">\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.north\n  }}</span>\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.south\n  }}</span>\n  <span *ngIf=\"!isValidNumber(latitudeValue)\" class=\"icon-globe\"></span>\n</div>\n<input\n  #longitude\n  class=\"prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$longitude'\"\n  [(ngModel)]=\"longitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLongitude !== undefined && minLongitude !== null\n      ? minLongitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLongitude !== undefined && maxLongitude !== null\n      ? maxLongitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lon\"\n  (keyup)=\"onEventLongitude(longitude.value)\"\n  (change)=\"onEventLongitude(longitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  [class]=\"\n    disabled || readonly\n      ? 'clickable rounded-right postfix symbol'\n      : 'clickable postfix symbol'\n  \"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.east\n  }}</span>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.west\n  }}</span>\n  <span *ngIf=\"!isValidNumber(longitudeValue)\" class=\"icon-globe\"></span>\n</div>\n<button\n  #clearButton\n  *ngIf=\"!(disabled || readonly)\"\n  class=\"rounded-right postfix icon icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ i18n[lang].userErrors.required }}\n  </div>\n  <div *ngIf=\"lastErrors.minLatitude\">\n    {{\n      i18n[lang].userErrors.minLatitude.replace(\n        '$minLatitude',\n        lastErrors.minLatitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLatitude\">\n    {{\n      i18n[lang].userErrors.maxLatitude.replace(\n        '$maxLatitude',\n        lastErrors.maxLatitude.max\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.minLongitude\">\n    {{\n      i18n[lang].userErrors.minLongitude.replace(\n        '$minLongitude',\n        lastErrors.minLongitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLongitude\">\n    {{\n      i18n[lang].userErrors.maxLongitude.replace(\n        '$maxLongitude',\n        lastErrors.maxLongitude.max\n      )\n    }}\n  </div>\n</div>\n\n<ng-template #modalMap let-modal>\n  <div class=\"lux-modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n    <button\n      type=\"button\"\n      class=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss('Cross click')\"\n    >\n      <span aria-hidden=\"true\">\u00D7</span>\n    </button>\n  </div>\n  <div class=\"lux-modal-body content\">\n    <lux-autocomplete\n      #searchBar\n      [attr.aria-label]=\"i18n[lang].typeToSearch\"\n      [placeholder]=\"i18n[lang].typeToSearch\"\n      *ngIf=\"!disabled && !readonly\"\n      [instance]=\"self\"\n      [resolveLabelsFunction]=\"getLabels\"\n      [populateFunction]=\"getData\"\n      (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n    ></lux-autocomplete>\n    <div class=\"map-container\">\n      <lux-map\n        #map\n        [center]=\"value\"\n        [markerPoint]=\"value\"\n        [zoom]=\"zoom\"\n        [readonly]=\"readonly === true || disabled === true ? true : false\"\n      ></lux-map>\n    </div>\n  </div>\n  <div class=\"lux-modal-footer\">\n    <button\n      *ngIf=\"disabled || readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].closeAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].cancelAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-select\"\n      (click)=\"modal.close(map.markerPoint.coordinates)\"\n    >\n      {{ i18n[lang].selectAction }}\n    </button>\n  </div>\n</ng-template>\n",
+                template: "<input\n  #latitude\n  class=\"rounded-left prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$latitude'\"\n  [(ngModel)]=\"latitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLatitude !== undefined && minLatitude !== null\n      ? minLatitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLatitude !== undefined && maxLatitude !== null\n      ? maxLatitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lat\"\n  (keyup)=\"onEventLatitude(latitude.value)\"\n  (change)=\"onEventLatitude(latitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  class=\"infix symbol clickable\"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\">\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.north\n  }}</span>\n  <span *ngIf=\"isValidNumber(latitudeValue) && latitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.south\n  }}</span>\n  <span *ngIf=\"!isValidNumber(latitudeValue)\" class=\"icon-globe\"></span>\n</div>\n<input\n  #longitude\n  class=\"prefix\"\n  [ngClass]=\"className\"\n  type=\"number\"\n  [id]=\"inputId + '$longitude'\"\n  [(ngModel)]=\"longitudeValue\"\n  [attr.aria-label]=\"ariaLabel\"\n  [attr.disabled]=\"disabled === true ? 'true' : undefined\"\n  [attr.readonly]=\"readonly === true ? 'true' : undefined\"\n  [attr.min]=\"\n    minLongitude !== undefined && minLongitude !== null\n      ? minLongitude.toString()\n      : undefined\n  \"\n  [attr.max]=\"\n    maxLongitude !== undefined && maxLongitude !== null\n      ? maxLongitude.toString()\n      : undefined\n  \"\n  [attr.step]=\"\n    step !== undefined && step !== null ? step.toString() : undefined\n  \"\n  [placeholder]=\"i18n[lang].lon\"\n  (keyup)=\"onEventLongitude(longitude.value)\"\n  (change)=\"onEventLongitude(longitude.value)\"\n  (keypress)=\"onKeyPress($event)\"\n  (blur)=\"onLostFocus()\"\n/>\n<div\n  [class]=\"\n    disabled || readonly\n      ? 'clickable rounded-right postfix symbol'\n      : 'clickable postfix symbol'\n  \"\n  [ngClass]=\"className\"\n  (click)=\"openModalMap(modalMap)\"\n>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue >= 0\">{{\n    i18n[lang].cardinalPoints.east\n  }}</span>\n  <span *ngIf=\"isValidNumber(longitudeValue) && longitudeValue < 0\">{{\n    i18n[lang].cardinalPoints.west\n  }}</span>\n  <span *ngIf=\"!isValidNumber(longitudeValue)\" class=\"icon-globe\"></span>\n</div>\n<button\n  #clearButton\n  *ngIf=\"!(disabled || readonly)\"\n  class=\"rounded-right postfix bordered icon icon-clear\"\n  [id]=\"inputId + '$clear'\"\n  type=\"button\"\n  (click)=\"clear()\"\n  aria-label=\"clear\"\n></button>\n\n<div *ngIf=\"inlineErrors && lastErrors && (dirty || touched)\" class=\"alert\">\n  <div *ngIf=\"lastErrors.required\">\n    {{ i18n[lang].userErrors.required }}\n  </div>\n  <div *ngIf=\"lastErrors.minLatitude\">\n    {{\n      i18n[lang].userErrors.minLatitude.replace(\n        '$minLatitude',\n        lastErrors.minLatitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLatitude\">\n    {{\n      i18n[lang].userErrors.maxLatitude.replace(\n        '$maxLatitude',\n        lastErrors.maxLatitude.max\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.minLongitude\">\n    {{\n      i18n[lang].userErrors.minLongitude.replace(\n        '$minLongitude',\n        lastErrors.minLongitude.min\n      )\n    }}\n  </div>\n  <div *ngIf=\"lastErrors.maxLongitude\">\n    {{\n      i18n[lang].userErrors.maxLongitude.replace(\n        '$maxLongitude',\n        lastErrors.maxLongitude.max\n      )\n    }}\n  </div>\n</div>\n\n<ng-template #modalMap let-modal>\n  <div class=\"lux-modal-header\">\n    <h4 class=\"modal-title\" id=\"modal-basic-title\">{{ mapTitle }}</h4>\n    <button\n      type=\"button\"\n      class=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss('Cross click')\"\n    >\n      <span aria-hidden=\"true\">\u00D7</span>\n    </button>\n  </div>\n  <div class=\"lux-modal-body content\">\n    <lux-autocomplete\n      #searchBar\n      [attr.aria-label]=\"i18n[lang].typeToSearch\"\n      [placeholder]=\"i18n[lang].typeToSearch\"\n      *ngIf=\"!disabled && !readonly\"\n      [instance]=\"self\"\n      [resolveLabelsFunction]=\"getLabels\"\n      [populateFunction]=\"getData\"\n      (valueChange)=\"onSearchLocationChanged(searchBar.value, map)\"\n    ></lux-autocomplete>\n    <div class=\"map-container\">\n      <lux-map\n        #map\n        [center]=\"value\"\n        [markerPoint]=\"value\"\n        [zoom]=\"zoom\"\n        [readonly]=\"readonly === true || disabled === true ? true : false\"\n      ></lux-map>\n    </div>\n  </div>\n  <div class=\"lux-modal-footer\">\n    <button\n      *ngIf=\"disabled || readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].closeAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-cancel\"\n      (click)=\"modal.close('cancel')\"\n    >\n      {{ i18n[lang].cancelAction }}\n    </button>\n    <button\n      *ngIf=\"!disabled && !readonly\"\n      type=\"button\"\n      class=\"btn btn-select\"\n      (click)=\"modal.close(map.markerPoint.coordinates)\"\n    >\n      {{ i18n[lang].selectAction }}\n    </button>\n  </div>\n</ng-template>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,
@@ -2811,7 +2831,7 @@ GeolocationComponent.decorators = [
                         useExisting: forwardRef(() => GeolocationComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw)}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}:host{display:flex;align-items:stretch}.btn-select{color:#fff;background-color:#4242d1;margin-left:2rem}.btn-cancel{color:#fff;background-color:#c22929}.readonly{border:none}.readonly:focus{border:none;outline:none}.disabled{background-color:#f1f1f1;background-color:var(--lux-disabled-color, #f1f1f1);border-color:#6d6d6d;border-color:var(--lux-disabled-border-color, #6d6d6d)}.icon,.icon-clear,.icon-globe{display:inline-block;background-size:1rem 1rem;background-position:center;background-repeat:no-repeat;min-width:1rem;min-height:1rem;width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);z-index:1}.clickable{cursor:pointer}.icon-globe{background:url(/assets/img/globe.svg) no-repeat center;background:var(--lux-autocomplete-icon-globe, url(/assets/img/globe.svg) no-repeat center);background-size:1rem;height:100%}.icon-clear{width:1.5rem;width:var(--lux-autocomplete-icon-width, 1.5rem);background:url(/assets/img/filter-clear.png) no-repeat center;background:var(--lux-autocomplete-icon-clear, url(/assets/img/filter-clear.png) no-repeat center);background-size:.5rem .5rem;background-size:var(--lux-autocomplete-icon-bg-size, .5rem .5rem);z-index:1}.lux-modal-body{padding:0}.map-container{height:45vh;height:var(--lux-geolocation-map-height, 45vh);width:90vw;width:var(--lux-geolocation-map-width, 90vw)}\n"]
             },] }
 ];
 GeolocationComponent.ctorParameters = () => [
@@ -3566,8 +3586,8 @@ class PaginationComponent {
 PaginationComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-pagination',
-                template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      luxTooltip\n      content=\"{{ pageNum + 1 }}\"\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n",
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid #cfcfcf;border:var(--lux-pagination-enabled-border, 1px solid #cfcfcf);border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid #cfcfcf;border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0 .5rem;padding:0;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right{background-position:.2em}.arrow-left{background-position:.2em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right{background-position:.3em}.arrow-left{background-position:.3em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right{background-position:.2em}.arrow-left{background-position:.2em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}\n"]
+                template: "<div class=\"lux-pagination\" *ngIf=\"showPagination\">\n  <ng-container *ngIf=\"!hidePrevious\">\n    <a\n      luxTooltip\n      [content]=\"first\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onFirst()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left-end\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"previous\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onPrevious()\"\n      [ngClass]=\"{\n        enabledFirstLast: !hidePrevious\n      }\"\n      class=\"button-pagination icon arrow-left\"\n    ></a>\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayPreviousEllipsis\">...</span>\n\n  <ng-container *ngFor=\"let pageNum of pages\">\n    <a\n      placement=\"top\"\n      delay=\"500\"\n      [ngClass]=\"{\n        disabled: pageNum === paginationInfo.page,\n        enabled: pageNum !== paginationInfo.page\n      }\"\n      class=\"button-pagination\"\n      (click)=\"onPage(pageNum)\"\n      >{{ pageNum + 1 }}</a\n    >\n  </ng-container>\n\n  <span class=\"ellipsis\" *ngIf=\"displayNextEllipsis\">...</span>\n\n  <ng-container *ngIf=\"!lastPage\">\n    <a\n      luxTooltip\n      [content]=\"next\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onNext()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right\"\n    ></a>\n    <a\n      luxTooltip\n      [content]=\"last\"\n      placement=\"top\"\n      delay=\"500\"\n      (click)=\"onLast()\"\n      [ngClass]=\"{\n        enabledFirstLast: !lastPage\n      }\"\n      class=\"button-pagination icon arrow-right-end\"\n    ></a>\n  </ng-container>\n</div>\n",
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.lux-pagination{display:flex;flex-direction:row;margin:2% 0;width:100%;background:white;align-items:center}.disabled{cursor:not-allowed;border:1px solid #325c81;border:var(--lux-pagination-disabled-border, 1px solid #325c81);border-radius:10%;border-radius:var(--lux-pagination-disabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#fff;color:var(--lux-pagination-disabled-color, white);background-color:#325c81;background-color:var(--lux-pagination-disabled-background-color, #325c81);text-decoration:none;pointer-events:none}.enabled{border:1px solid #cfcfcf;border:var(--lux-pagination-enabled-border, 1px solid #cfcfcf);border-radius:10%;border-radius:var(--lux-pagination-enabled-border-radius, 10%);padding:1%;margin:0 .7%;color:#325c81;color:var(--lux-pagination-enabled-color, #325c81);width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.enabledFirstLast{border:1px solid #cfcfcf;border-radius:10%;padding:1%;color:#325c81;margin:0 .7%;width:-webkit-min-content;width:-moz-min-content;width:min-content;cursor:pointer}.ellipsis{margin:0 .5rem;padding:0;color:#325c81;width:-webkit-min-content;width:-moz-min-content;width:min-content}.button-pagination{width:1em;width:var(--lux-pagination-button-width, 1em);height:1.2em;height:var(--lux-pagination-button-height, 1.2em);font-size:80%;font-size:var(--lux-pagination-font-size, 80%);text-align:center}.icon{background-size:1.3em 1.4em;background-position:center;background-repeat:no-repeat}.arrow-right{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.4em}.arrow-left{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");transform:rotate(180deg);background-position:.4em}.arrow-right-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em}.arrow-left-end{background-image:url(\"data:image/svg+xml,%3Csvg width%3D%2268%22 height%3D%2248%22 xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E %3Cg%3E  %3Ctitle%3Ebackground%3C%2Ftitle%3E  %3Crect fill%3D%22none%22 id%3D%22canvas_background%22 height%3D%22402%22 width%3D%221082%22 y%3D%22-1%22 x%3D%22-1%22%2F%3E %3C%2Fg%3E %3Cg%3E  %3Ctitle%3ELayer 1%3C%2Ftitle%3E  %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_2%22 points%3D%2221.8%2C45.7 10.4%2C44.3 30.8%2C24 10.4%2C3.7 21.8%2C2.3 43.5%2C24  %22%2F%3E    %3Cpolygon fill%3D%22%23325C81%22 id%3D%22svg_3%22 points%3D%2241.8%2C45.7 30.4%2C44.3 50.8%2C24 30.4%2C3.7 41.8%2C2.3 63.5%2C24  %22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E\");background-position:.1em;transform:rotate(180deg)}@media only screen and (min-width: 300px) and (max-width: 500px){.arrow-right{background-position:.2em}.arrow-left{background-position:.2em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}@media only screen and (min-width: 500px) and (max-width: 850px){.arrow-right{background-position:.3em}.arrow-left{background-position:.3em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}@media only screen and (min-width: 900px){.arrow-right{background-position:.2em}.arrow-left{background-position:.2em}.arrow-right-end{background-position:0em}.arrow-left-end{background-position:0em}}\n"]
             },] }
 ];
 PaginationComponent.ctorParameters = () => [];
@@ -3674,7 +3694,7 @@ RadiogroupComponent.decorators = [
                         useExisting: forwardRef(() => RadiogroupComponent)
                     }
                 ],
-                styles: [":focus{z-index:1}input,select,textarea{border:solid 1px #495057;border:solid 1px var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);border:1px solid #495057;border:1px solid var(--lux-input-border-color, #495057);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border:1px solid;border:var(--lux-input-border, 1px solid)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0 .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, #2e2eac)}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, #9898ec)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"]
+                styles: [":focus{z-index:1}input,select,textarea{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057);margin:0;margin:var(--lux-input-margin, 0rem);padding:0 .5rem;padding:var(--lux-input-padding, 0rem .5rem)}.alert{padding:.2rem 2rem;background:#fe2e2e;background:var(--lux-alert-background, #fe2e2e);color:#fff;color:var(--lux-alert-color, white);font-family:Consolas,monospace;width:45%;margin-right:1rem;display:inline-block}.symbol{display:inline-block;align-items:baseline;padding:0 .5rem;margin-bottom:0;font-weight:400;color:default;color:var(--lux-symbol-color, default);text-align:center;white-space:nowrap;background:default;background:var(--lux-symbol-background, default);font-size:1rem;font-size:var(--lux-symbol-font-size, 1rem)}.bordered,.symbol{border:1px solid #495057;border:var(--lux-input-border, 1px solid) var(--lux-input-border-color, #495057)}.rounded,.rounded-right,.rounded-middle,.rounded-left{border-radius:.25rem;border-radius:var(--lux-border-radius, .25rem)}.rounded-left{border-top-right-radius:0;border-bottom-right-radius:0}.rounded-middle{border-radius:0}.rounded-right{border-top-left-radius:0;border-bottom-left-radius:0}.prefix{border-right:none}.infix{border-left:none;border-right:none}.postfix{border-left:none;display:flex;align-items:center}.radiogroup{display:flex}.radio-item{border-radius:0;border:1px solid #ccc;padding:0 .5rem;padding:var(--lux-radiogroup-padding, 0rem .5rem)}.radio-item input{display:none}.radio-item label{color:initial;color:var(--lux-radiogroup-color, initial);font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);margin-top:.3rem;margin-bottom:.3rem}.radio-item.selected{background-color:#2e2eac;background-color:var(--lux-radiogroup-selected-background-color, #2e2eac)}.radio-item.selected label{font-size:initial;font-size:var(--lux-radiogroup-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-color, white)}.radio-start{border-top-left-radius:.5rem;border-bottom-left-radius:.5rem}.radio-end{border-top-right-radius:.5rem;border-bottom-right-radius:.5rem}.disabled .radio-item{background-color:#f0f0f0;color:#444}.disabled .selected{font-size:initial;font-size:var(--lux-radiogroup-selected-disabled-font-size, initial);color:#fff;color:var(--lux-radiogroup-selected-disabled-color, white);background-color:#9898ec;background-color:var(--lux-radiogroup-selected-disabled-background-color, #9898ec)}.unselectable{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}\n"]
             },] }
 ];
 RadiogroupComponent.ctorParameters = () => [];
@@ -3789,7 +3809,7 @@ class SelectComponent {
 SelectComponent.decorators = [
     { type: Component, args: [{
                 selector: 'lux-select',
-                template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n",
+                template: "<div class=\"lux-select\">\n  <ul class=\"list\">\n    <li *ngFor=\"let item of value; let i = index\">\n      <span>{{ item }}</span>\n      <button *ngIf=\"!disabled\"\n            class=\"remove\"\n            type=\"button\"\n            (click)=\"remove(i)\"\n            [attr.aria-label]=\"'Remove ' + item\"\n            >Remove</button>\n    </li>\n  </ul>\n  <div class=\"add-new-item\" *ngIf=\"!disabled\">\n    <lux-input\n      id=\"{{ id + 'addNew' }}\"\n      type=\"string\"\n      [placeholder]=\"placeholder\"\n      [attr.aria-label]=\"placeholder\"\n      [disabled]=\"disabled\"\n      [(value)]=\"newEntry\"\n      (keyPress)=\"onKeyPress($event)\"\n      (valueChange)=\"onChangeNewEntry($event)\"\n    >\n    </lux-input>\n    <div *ngIf=\"canAdd\">\n      <button *ngIf=\"isValidNewEntry\" type=\"button\" (click)=\"add(newEntry)\">Add</button>\n    </div>\n    <div class=\"error\">\n      {{ error }}\n    </div>\n  </div>\n</div>\n",
                 providers: [
                     {
                         provide: NG_VALUE_ACCESSOR,