angular-bootstrap-italia
Version:
<p align="center"> <h1 align="center">Bootstrap Italia + Angular 9</h1>
39 lines • 6.14 kB
JavaScript
import { __decorate } from "tslib";
import { Component, Input } from '@angular/core';
var SelectComponent = /** @class */ (function () {
function SelectComponent() {
}
SelectComponent.prototype.ngAfterViewInit = function () {
$('.custom-select').selectpicker();
};
SelectComponent.prototype.getFormattedValue = function (value) {
if (this.field.formattedValueKey && typeof value === 'object') {
return value[this.field.formattedValueKey];
}
else {
return value;
}
};
__decorate([
Input()
], SelectComponent.prototype, "field", void 0);
__decorate([
Input()
], SelectComponent.prototype, "form", void 0);
__decorate([
Input()
], SelectComponent.prototype, "valid", void 0);
__decorate([
Input()
], SelectComponent.prototype, "invalid", void 0);
SelectComponent = __decorate([
Component({
selector: 'lib-select',
template: "<div class=\"form-group\" [formGroup]=\"form\">\n <div class=\"bootstrap-select-wrapper\" [class.ng-valid]=\"valid\" [class.ng-invalid]=\"invalid\">\n <select class=\"custom-select\" [id]=\"field.key\" [formControlName]=\"field.key\" [required]=\"field.required\">\n <option value=\"\" title=\"Scegli un'opzione\" data-content=\"Annulla <span class='reset-label'></span>\"></option>\n <option *ngFor=\"let opt of field.options\" [ngValue]=\"getFormattedValue(opt.value)\">{{opt.key}}</option>\n </select>\n <label [for]=\"field.key\">\n {{ field.label }}\n <span *ngIf=\"field.required\"> *</span>\n </label>\n <lib-validation-messages [field]=\"field\" [valid]=\"valid\" [invalid]=\"invalid\"></lib-validation-messages>\n </div>\n</div>\n",
styles: [".bootstrap-select-wrapper.ng-valid{border-color:#28a745;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2300cc85' viewBox='0 0 460 512'%3E%3Cpath d='M435.848 83.466L172.804 346.51l-96.652-96.652c-4.686-4.686-12.284-4.686-16.971 0l-28.284 28.284c-4.686 4.686-4.686 12.284 0 16.971l133.421 133.421c4.686 4.686 12.284 4.686 16.971 0l299.813-299.813c4.686-4.686 4.686-12.284 0-16.971l-28.284-28.284c-4.686-4.686-12.284-4.686-16.97 0z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);background-position:center right calc(1.275em + .1875rem)}.bootstrap-select-wrapper.ng-valid button .filter-option{position:relative}.bootstrap-select-wrapper.ng-valid button .filter-option:after{content:\"\";height:1px;position:absolute;left:0;right:0;background:#28a745!important;bottom:0;transition:.3s;transform-origin:bottom}.bootstrap-select-wrapper.ng-invalid{border-bottom:1px #dc3545;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f73e5a' viewBox='0 0 384 512'%3E%3Cpath d='M231.6 256l130.1-130.1c4.7-4.7 4.7-12.3 0-17l-22.6-22.6c-4.7-4.7-12.3-4.7-17 0L192 216.4 61.9 86.3c-4.7-4.7-12.3-4.7-17 0l-22.6 22.6c-4.7 4.7-4.7 12.3 0 17L152.4 256 22.3 386.1c-4.7 4.7-4.7 12.3 0 17l22.6 22.6c4.7 4.7 12.3 4.7 17 0L192 295.6l130.1 130.1c4.7 4.7 12.3 4.7 17 0l22.6-22.6c4.7-4.7 4.7-12.3 0-17L231.6 256z'/%3E%3C/svg%3E\");background-repeat:no-repeat;background-size:calc(.75em + .375rem) calc(.75em + .375rem);background-position:top calc(.465em + .1875rem) right calc(1.275em + .1875rem)}.bootstrap-select-wrapper.ng-invalid button .filter-option{position:relative}.bootstrap-select-wrapper.ng-invalid button .filter-option:after{content:\"\";height:1px;position:absolute;left:0;right:0;background:#dc3545!important;bottom:0;transition:.3s;transform-origin:bottom}"]
})
], SelectComponent);
return SelectComponent;
}());
export { SelectComponent };
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL2FuZ3VsYXItYm9vdHN0cmFwLWl0YWxpYS8iLCJzb3VyY2VzIjpbImxpYi9jb21wb25lbnRzL2Zvcm0vc2VsZWN0L3NlbGVjdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IjtBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQWlCLEtBQUssRUFBRSxNQUFNLGVBQWUsQ0FBQztBQWVoRTtJQU9FO0lBQWdCLENBQUM7SUFFakIseUNBQWUsR0FBZjtRQUNFLENBQUMsQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDLFlBQVksRUFBRSxDQUFDO0lBQ3JDLENBQUM7SUFFRCwyQ0FBaUIsR0FBakIsVUFBa0IsS0FBVTtRQUMxQixJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsaUJBQWlCLElBQUksT0FBTyxLQUFLLEtBQUssUUFBUSxFQUFFO1lBQzdELE9BQU8sS0FBSyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsaUJBQWlCLENBQUMsQ0FBQztTQUM1QzthQUFNO1lBQ0wsT0FBTyxLQUFLLENBQUM7U0FDZDtJQUNILENBQUM7SUFsQlE7UUFBUixLQUFLLEVBQUU7a0RBQXFCO0lBQ3BCO1FBQVIsS0FBSyxFQUFFO2lEQUFpQjtJQUVoQjtRQUFSLEtBQUssRUFBRTtrREFBZ0I7SUFDZjtRQUFSLEtBQUssRUFBRTtvREFBa0I7SUFMZixlQUFlO1FBTDNCLFNBQVMsQ0FBQztZQUNULFFBQVEsRUFBRSxZQUFZO1lBQ3RCLG94QkFBc0M7O1NBRXZDLENBQUM7T0FDVyxlQUFlLENBcUIzQjtJQUFELHNCQUFDO0NBQUEsQUFyQkQsSUFxQkM7U0FyQlksZUFBZSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgQWZ0ZXJWaWV3SW5pdCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcclxuaW1wb3J0IHsgRm9ybUdyb3VwIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuLy8galF1ZXJ5XHJcbmRlY2xhcmUgdmFyICQ6IGFueTtcclxuXHJcbi8vIE1vZGVsc1xyXG5pbXBvcnQgeyBGb3JtRHJvcGRvd24gfSBmcm9tICcuL2Zvcm0tZHJvcGRvd24nO1xyXG5cclxuXHJcbkBDb21wb25lbnQoe1xyXG4gIHNlbGVjdG9yOiAnbGliLXNlbGVjdCcsXHJcbiAgdGVtcGxhdGVVcmw6ICcuL3NlbGVjdC5jb21wb25lbnQuaHRtbCcsXHJcbiAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LmNvbXBvbmVudC5zY3NzJ11cclxufSlcclxuZXhwb3J0IGNsYXNzIFNlbGVjdENvbXBvbmVudCBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xyXG4gIEBJbnB1dCgpIGZpZWxkOiBGb3JtRHJvcGRvd247XHJcbiAgQElucHV0KCkgZm9ybTogRm9ybUdyb3VwO1xyXG5cclxuICBASW5wdXQoKSB2YWxpZDogYm9vbGVhbjtcclxuICBASW5wdXQoKSBpbnZhbGlkOiBib29sZWFuO1xyXG5cclxuICBjb25zdHJ1Y3RvcigpIHsgfVxyXG5cclxuICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XHJcbiAgICAkKCcuY3VzdG9tLXNlbGVjdCcpLnNlbGVjdHBpY2tlcigpO1xyXG4gIH1cclxuXHJcbiAgZ2V0Rm9ybWF0dGVkVmFsdWUodmFsdWU6IGFueSkge1xyXG4gICAgaWYgKHRoaXMuZmllbGQuZm9ybWF0dGVkVmFsdWVLZXkgJiYgdHlwZW9mIHZhbHVlID09PSAnb2JqZWN0Jykge1xyXG4gICAgICByZXR1cm4gdmFsdWVbdGhpcy5maWVsZC5mb3JtYXR0ZWRWYWx1ZUtleV07XHJcbiAgICB9IGVsc2Uge1xyXG4gICAgICByZXR1cm4gdmFsdWU7XHJcbiAgICB9XHJcbiAgfVxyXG5cclxufVxyXG4iXX0=