ng-inail-common 2.0.24 → 2.0.25

package/bundles/ng-inail-common.umd.js

@@ -2975,6 +2975,7 @@
                     _this.error = undefined;
                     _this.errorChange.emit(undefined);
                 }
+                _this.formElementCdr.detectChanges();
             });
         };
         FormElementComponent.prototype.registerOnChange = function (fn) {
@@ -5790,11 +5791,13 @@
             if (!this.addButton) {
                 this.fileChange.emit(this.fileModel);
             }
+            this.cleanError();
             this.cdr.detectChanges();
         };
         InputFileComponent.prototype.reset = function () {
             this.fileModel = undefined;
             this.fileChange.emit(undefined);
+            this.cleanError();
             this.cdr.detectChanges();
         };
         return InputFileComponent;
@@ -6349,6 +6352,131 @@
         valuenow: [{ type: core.Input }]
     };
 
+    var MultiSelectComponent = /** @class */ (function (_super) {
+        __extends(MultiSelectComponent, _super);
+        function MultiSelectComponent(cdr) {
+            var _this = _super.call(this, cdr) || this;
+            _this.cdr = cdr;
+            _this.options = [];
+            _this.values = [];
+            _this.valuesChange = new core.EventEmitter();
+            _this.placeholder = '- seleziona opzioni -';
+            _this.toggle = function () { return window['$'](_this.formControlElement.nativeElement).dropdown('toggle'); };
+            _this.isExpanded = function () { return _this.formControlElement.nativeElement.getAttribute('aria-expanded') === 'true'; };
+            _this.hasFormControlFocus = function () { return _this.formControlElement.nativeElement.matches(':focus'); };
+            _this.hasDropdownMenuFocus = function () { return _this.dropdownMenu.nativeElement.matches(':focus-within'); };
+            _this.isChecked = function (value) { return _this.values.some(function (v) { return v === value; }); };
+            _this.getInputTextValue = function () { return _this.options.filter(function (opt) { return _this.isChecked(opt.value); }).map(function (opt) { return opt.label; }).join(', '); };
+            _this.pushValue = function (value) { return _this.values = _this.options.filter(function (opt) { return opt.value === value || _this.isChecked(opt.value); }).map(function (opt) { return opt.value; }); };
+            _this.isFocusOut = function () { return window['$'](_this.multiSelect.nativeElement).find(document.activeElement).length == 0; };
+            _this.logPrefix = "[inail-multi-select]";
+            _this.detach();
+            return _this;
+        }
+        MultiSelectComponent.prototype.ngOnChanges = function (changes) {
+            var _a, _b, _c;
+            _super.prototype.ngOnChanges.call(this, changes);
+            if ((((_a = changes === null || changes === void 0 ? void 0 : changes.options) === null || _a === void 0 ? void 0 : _a.currentValue) || ((_b = changes === null || changes === void 0 ? void 0 : changes.sort) === null || _b === void 0 ? void 0 : _b.currentValue)) && this.sort) {
+                var direction_1 = "ASC" == this.sort.toUpperCase() ? 1 : "DESC" == this.sort.toUpperCase() ? -1 : 0;
+                if (direction_1 != 0 && this.options != undefined) {
+                    this.options.sort(function (a, b) { return a.label < b.label ? -direction_1 : a.label > b.label ? direction_1 : 0; });
+                }
+            }
+            if ((_c = changes === null || changes === void 0 ? void 0 : changes.options) === null || _c === void 0 ? void 0 : _c.currentValue) {
+                this.inputTextValue = this.getInputTextValue();
+            }
+            this.cdr.detectChanges();
+        };
+        MultiSelectComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            _super.prototype.ngOnInit.call(this);
+            this.emitDebug("@ViewChild('formControl')");
+            this.emitDebug(this.formControlElement);
+            if (this.focus) {
+                this.push(this.focus.subscribe(function (scroll) {
+                    _this.emitDebug("Catch focus!");
+                    setFocus(_this.formControlElement.nativeElement, scroll);
+                }));
+            }
+        };
+        MultiSelectComponent.prototype.ngAfterViewInit = function () {
+        };
+        MultiSelectComponent.prototype.ngOnDestroy = function () {
+            _super.prototype.ngOnDestroy.call(this);
+        };
+        MultiSelectComponent.prototype.onKeypress = function ($event) {
+            $event.preventDefault();
+        };
+        MultiSelectComponent.prototype.onFocusIn = function () {
+            var _this = this;
+            setTimeout(function () {
+                _this.showDropdownMenu();
+            }, 250);
+        };
+        MultiSelectComponent.prototype.onFocusOut = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (_this.isFocusOut()) {
+                    _this.closeDropdownMenu();
+                }
+            }, 150);
+        };
+        MultiSelectComponent.prototype.showDropdownMenu = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (!_this.isExpanded()) {
+                    _this.toggle();
+                }
+            });
+        };
+        MultiSelectComponent.prototype.closeDropdownMenu = function () {
+            var _this = this;
+            setTimeout(function () {
+                if (_this.isExpanded()) {
+                    _this.toggle();
+                }
+            });
+        };
+        MultiSelectComponent.prototype.onCheck = function (cb) {
+            if (!cb.firstChange) {
+                if (cb.checked && !this.isChecked(cb.value)) {
+                    this.pushValue(cb.value);
+                    this.cleanError();
+                }
+                else if (!cb.checked && this.isChecked(cb.value)) {
+                    this.values = this.values.filter(function (value) { return value != cb.value; });
+                    this.cleanError();
+                }
+                this.valuesChange.emit(this.values);
+                this.inputTextValue = this.getInputTextValue();
+                this.cdr.detectChanges();
+            }
+        };
+        return MultiSelectComponent;
+    }(FormElementComponent));
+    MultiSelectComponent.decorators = [
+        { type: core.Component, args: [{
+                    selector: 'inail-multi-select',
+                    template: "<div #multiSelect\n     class=\"form-group {{getResponsiveClass()}} noPaddingLeft {{class}} inail-multi-select\"\n     [ngClass]=\"{'has-error': isThereError()}\">\n  <label *ngIf=\"label\"\n         class=\"control-label {{labelClass}}\"\n         [ngClass]=\"{'sr-only': hiddenLabel}\"\n         [attr.title]=\"labelTitle\"\n         [for]=\"id\"\n         [innerHTML]=\"getLabel()\"></label>\n  <span *ngIf=\"showPopover()\"\n        [style.padding-left.px]=\"5\">\n    <inail-popover [iconClass]=\"popoverButtonIcon\"\n                   [buttonTitle]=\"popoverButtonTitle\"\n                   [header]=\"popoverHeader\"\n                   [content]=\"popoverContent\">\n    </inail-popover>\n  </span>\n  <div class=\"form-control-wrapper\"\n       [ngClass]=\"{'no-label' : hiddenLabel || !label}\">\n    <input #formControl\n           type=\"text\"\n           [id]=\"id\"\n           class=\"form-control dropdown-toggle {{inputClass}}\"\n           data-toggle=\"dropdown\"\n           aria-haspopup=\"true\"\n           aria-expanded=\"false\"\n           [ngClass]=\"{'disabled': disabled}\"\n           [attr.name]=\"name\"\n           [attr.title]=\"title\"\n           [disabled]=\"disabled\"\n           [readonly]=\"true\"\n           [attr.placeholder]=\"placeholder\"\n           [attr.aria-required]=\"required === true ? true : undefined\"\n           [attr.aria-invalid]=\"isThereError() === true ? true : undefined\"\n           [attr.aria-describedBy]=\"getAriaDescribedBy()\"\n           (blur)=\"onBlur()\"\n           (focusin)=\"onFocusIn()\"\n           (focusout)=\"onFocusOut()\"\n           (keypress)=\"onKeypress($event)\"\n           (keyup.enter)=\"enterUp.emit()\"\n           [ngModel]=\"inputTextValue\">\n    <div #dropdownMenu\n         class=\"dropdown-menu\"\n         (focusout)=\"onFocusOut()\"\n         [attr.aria-labelledby]=\"id\">\n      <ng-container *ngFor=\"let opt of options\">\n        <div *ngIf=\"opt.beforeDivider\" class=\"divider\"></div>\n        <div class=\"row\" [attr.tabIndex]=\"opt.disabled ? 0 : undefined\">\n          <inail-checkbox [label]=\"opt.label\"\n                          [value]=\"opt.value\"\n                          [title]=\"opt.title\"\n                          [checked]=\"isChecked(opt.value)\"\n                          [disabled]=\"opt.disabled\"\n                          (stateChange)=\"onCheck($event)\">\n          </inail-checkbox>\n        </div>\n        <div *ngIf=\"opt.afterDivider\" class=\"divider\"></div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"showError()\" [id]=\"id+'-description'\">\n    <div class=\"msg msg-errore\">\n      <strong [innerHTML]=\"'ERRORE: '+this.error\"></strong>\n    </div>\n    <div *ngIf=\"description\" [innerHTML]=\"this.description\"></div>\n  </div>\n  <div *ngIf=\"description && !showError()\"\n       [id]=\"id+'-description'\"\n       [innerHTML]=\"this.description\">\n  </div>\n</div>\n",
+                    changeDetection: CHANGE_DETECTION_STRATEGY,
+                    encapsulation: core.ViewEncapsulation.None,
+                    styles: [".inail-multi-select .form-control-wrapper:after{font-family:FontAwesome;content:\"\\f078\";right:31px;position:absolute;top:35px;font-size:10px;color:#0083f5}.inail-multi-select .form-control-wrapper.no-label:after{top:11px}.inail-multi-select .form-control[readonly]:not([disabled]){background-color:#fff}.inail-multi-select .form-control:not([disabled]){cursor:pointer}.inail-multi-select .dropdown-menu .form-group{margin:0!important;padding-left:20px!important}.inail-multi-select .dropdown-menu .form-group:hover{background-color:#eaedf2}.inail-multi-select .dropdown-menu .form-group .checkbox{margin:0!important}.inail-multi-select .dropdown-menu .form-group .checkbox label{margin-top:5px!important;margin-bottom:5px!important;display:block!important}"]
+                },] }
+    ];
+    MultiSelectComponent.ctorParameters = function () { return [
+        { type: core.ChangeDetectorRef }
+    ]; };
+    MultiSelectComponent.propDecorators = {
+        multiSelect: [{ type: core.ViewChild, args: ['multiSelect', { static: true },] }],
+        formControlElement: [{ type: core.ViewChild, args: ['formControl', { static: true },] }],
+        dropdownMenu: [{ type: core.ViewChild, args: ['dropdownMenu', { static: true },] }],
+        options: [{ type: core.Input }],
+        values: [{ type: core.Input }],
+        valuesChange: [{ type: core.Output }],
+        placeholder: [{ type: core.Input }],
+        sort: [{ type: core.Input }]
+    };
+
     var NgInailCommonModule = /** @class */ (function () {
         function NgInailCommonModule() {
         }
@@ -6403,7 +6531,8 @@
                         WizardComponent,
                         ContainerComponent,
                         TrCheckboxComponent,
-                        ProgressBarComponent
+                        ProgressBarComponent,
+                        MultiSelectComponent
                     ],
                     imports: [
                         common.CommonModule,
@@ -6452,7 +6581,8 @@
                         WizardComponent,
                         ContainerComponent,
                         TrCheckboxComponent,
-                        ProgressBarComponent
+                        ProgressBarComponent,
+                        MultiSelectComponent
                     ],
                     providers: [common.DatePipe]
                 },] }
@@ -6494,6 +6624,7 @@
     exports.MenuIntranetComponent = MenuIntranetComponent;
     exports.MenuItem = MenuItem;
     exports.ModalComponent = ModalComponent;
+    exports.MultiSelectComponent = MultiSelectComponent;
     exports.NavigazioneInternaComponent = NavigazioneInternaComponent;
     exports.NavigazionePrincipaleComponent = NavigazionePrincipaleComponent;
     exports.NavigazioneSecondariaComponent = NavigazioneSecondariaComponent;