@acpaas-ui/ngx-forms 4.6.1 → 4.7.0

package/bundles/acpaas-ui-ngx-forms.umd.js

@@ -389,6 +389,7 @@
             this.mask = null;
             this.clearInvalid = false;
             this.showAllByDefault = false;
+            this.autoComplete = 'off';
             // Eventemitter for searchvalue (parent object should update the results with this param)
             this.search = new core.EventEmitter();
             this.select = new core.EventEmitter();
@@ -752,7 +753,7 @@
         AutoCompleteComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-auto-complete',
-                        template: "<div (closed)=\"onFlyoutClosed()\" [toggleClick]=\"false\" aria-haspopup=\"listbox\"\n     auiFlyout class=\"m-flyout--scrollable m-flyout--full o-auto-complete\">\n  <input (focus)=\"onFocus()\"\n         (keyArrowDown)=\"onKeyArrowDown()\"\n         (keyArrowUp)=\"onKeyArrowUp()\"\n         (keyEnter)=\"onKeyEnter($event)\"\n         (keyEscape)=\"onKeyEscape()\"\n         [(ngModel)]=\"query\"\n         (ngModelChange)=\"doSearch()\"\n         *ngIf=\"!mask\"\n         [disabled]=\"isDisabled ? true : null\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         aria-autocomplete=\"list\"\n         auiFlyoutAction\n         auiSelectableActions\n         autocomplete=\"off\"\n         type=\"text\"\n  />\n  <input (focus)=\"onFocus()\"\n         (keyArrowDown)=\"onKeyArrowDown()\"\n         (keyArrowUp)=\"onKeyArrowUp()\"\n         (keyEnter)=\"onKeyEnter($event)\"\n         (keyEscape)=\"onKeyEscape()\"\n         [(ngModel)]=\"query\"\n         (ngModelChange)=\"doSearch()\"\n         *ngIf=\"mask\"\n         [auiMask]=\"mask\"\n         [disabled]=\"isDisabled ? true : null\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         aria-autocomplete=\"list\"\n         auiFlyoutAction\n         auiSelectableActions\n         autocomplete=\"off\"\n         type=\"text\"\n  />\n\n  <div *ngIf=\"!isDisabled\" auiFlyoutZone>\n\t\t<span *ngIf=\"focused && loadingText && searching\" class=\"o-auto-complete__info u-text-light u-margin-xs\">\n\t\t\t<span class=\"a-spinner a-spinner--inline a-spinner--sm u-margin-right-xs\"></span>\n      {{ loadingText }}\n\t\t</span>\n    <span *ngIf=\"focused && searchIncentiveText && !searching && !query && !results.length\"\n          class=\"o-auto-complete__info u-text-light u-margin-xs\">{{ searchIncentiveText }}</span>\n    <span *ngIf=\"focused && noResultsText && !searching && query && !results.length\"\n          class=\"o-auto-complete__info u-text-light u-margin-xs\">{{ noResultsText }}</span>\n\n    <aui-selectable-list (selected)=\"onSelect($event)\" *ngIf=\"results.length > 0 && !(focused && loadingText && searching)\" [index]=\"index\" [itemTemplate]=\"template\"\n                         [items]=\"results\" [label]=\"label\"\n                         [search]=\"query\"></aui-selectable-list>\n  </div>\n</div>\n",
+                        template: "<div (closed)=\"onFlyoutClosed()\" [toggleClick]=\"false\" aria-haspopup=\"listbox\"\n     auiFlyout class=\"m-flyout--scrollable m-flyout--full o-auto-complete\">\n  <input (focus)=\"onFocus()\"\n         (keyArrowDown)=\"onKeyArrowDown()\"\n         (keyArrowUp)=\"onKeyArrowUp()\"\n         (keyEnter)=\"onKeyEnter($event)\"\n         (keyEscape)=\"onKeyEscape()\"\n         [(ngModel)]=\"query\"\n         (ngModelChange)=\"doSearch()\"\n         *ngIf=\"!mask\"\n         [disabled]=\"isDisabled ? true : null\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         aria-autocomplete=\"list\"\n         auiFlyoutAction\n         auiSelectableActions\n         [autocomplete]=\"autoComplete\"\n         type=\"text\"\n  />\n  <input (focus)=\"onFocus()\"\n         (keyArrowDown)=\"onKeyArrowDown()\"\n         (keyArrowUp)=\"onKeyArrowUp()\"\n         (keyEnter)=\"onKeyEnter($event)\"\n         (keyEscape)=\"onKeyEscape()\"\n         [(ngModel)]=\"query\"\n         (ngModelChange)=\"doSearch()\"\n         *ngIf=\"mask\"\n         [auiMask]=\"mask\"\n         [disabled]=\"isDisabled ? true : null\"\n         [id]=\"id\"\n         [placeholder]=\"placeholder\"\n         aria-autocomplete=\"list\"\n         auiFlyoutAction\n         auiSelectableActions\n         [autocomplete]=\"autoComplete\"\n         type=\"text\"\n  />\n\n  <div *ngIf=\"!isDisabled\" auiFlyoutZone>\n\t\t<span *ngIf=\"focused && loadingText && searching\" class=\"o-auto-complete__info u-text-light u-margin-xs\">\n\t\t\t<span class=\"a-spinner a-spinner--inline a-spinner--sm u-margin-right-xs\"></span>\n      {{ loadingText }}\n\t\t</span>\n    <span *ngIf=\"focused && searchIncentiveText && !searching && !query && !results.length\"\n          class=\"o-auto-complete__info u-text-light u-margin-xs\">{{ searchIncentiveText }}</span>\n    <span *ngIf=\"focused && noResultsText && !searching && query && !results.length\"\n          class=\"o-auto-complete__info u-text-light u-margin-xs\">{{ noResultsText }}</span>\n\n    <aui-selectable-list (selected)=\"onSelect($event)\" *ngIf=\"results.length > 0 && !(focused && loadingText && searching)\" [index]=\"index\" [itemTemplate]=\"template\"\n                         [items]=\"results\" [label]=\"label\"\n                         [search]=\"query\"></aui-selectable-list>\n  </div>\n</div>\n",
                         providers: [
                             {
                                 provide: forms.NG_VALUE_ACCESSOR,
@@ -785,6 +786,7 @@
             loadingText: [{ type: core.Input }],
             noResultsText: [{ type: core.Input }],
             showAllByDefault: [{ type: core.Input }],
+            autoComplete: [{ type: core.Input }],
             label: [{ type: core.Input }],
             value: [{ type: core.Input }],
             search: [{ type: core.Output }],
@@ -821,6 +823,8 @@
         /** @type {?} */
         AutoCompleteComponent.prototype.showAllByDefault;
         /** @type {?} */
+        AutoCompleteComponent.prototype.autoComplete;
+        /** @type {?} */
         AutoCompleteComponent.prototype.label;
         /** @type {?} */
         AutoCompleteComponent.prototype.value;
@@ -2843,8 +2847,10 @@
     var UploadComponent = /** @class */ (function () {
         function UploadComponent() {
             this.id = '';
+            this.accept = [];
             this.ariaLabelRemove = 'Verwijder';
             this.disabled = false;
+            this.multiple = true;
             this.options = UPLOAD_OPTIONS_DEFAULT;
             this.selectUploadedFiles = new core.EventEmitter();
             this.uploadedFiles = [];
@@ -2900,14 +2906,16 @@
         UploadComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-upload',
-                        template: "<div class=\"m-upload aui-upload\">\n  <aui-upload-zone (invalidFiles)=\"onInvalidFiles($event)\" (queuedFiles)=\"onQueuedFiles($event)\" (uploadedFiles)=\"onUploadedFiles($event)\" [ariaId]=\"ariaId\"\n                   [disabled]=\"disabled\" [id]=\"id\"\n                   [uploader]=\"uploader\">\n    <div class=\"m-upload__message\">\n      <ng-content select=\".m-upload__message\"></ng-content>\n    </div>\n    <div class=\"m-upload__description\">\n      <ng-content select=\".m-upload__description\"></ng-content>\n    </div>\n    <div class=\"m-upload__button\">\n      <ng-content select=\".m-upload__button\"></ng-content>\n    </div>\n  </aui-upload-zone>\n  <aui-validation-list [ariaLabelRemove]=\"ariaLabelRemove\" [invalidFiles]=\"invalidFiles\"></aui-validation-list>\n  <aui-upload-queue (uploadedFiles)=\"onUploadedFiles($event)\" *ngIf=\"!options?.autoUpload\" [ariaLabelRemove]=\"ariaLabelRemove\"\n                    [files]=\"queuedFiles\" [uploader]=\"uploader\"></aui-upload-queue>\n</div>\n",
+                        template: "<div class=\"m-upload aui-upload\">\n  <aui-upload-zone (invalidFiles)=\"onInvalidFiles($event)\" (queuedFiles)=\"onQueuedFiles($event)\" (uploadedFiles)=\"onUploadedFiles($event)\" [ariaId]=\"ariaId\"\n                   [disabled]=\"disabled\" [id]=\"id\" [accept]=\"accept\" [multiple]=\"multiple\"\n                   [uploader]=\"uploader\">\n    <div class=\"m-upload__message\">\n      <ng-content select=\".m-upload__message\"></ng-content>\n    </div>\n    <div class=\"m-upload__description\">\n      <ng-content select=\".m-upload__description\"></ng-content>\n    </div>\n    <div class=\"m-upload__button\">\n      <ng-content select=\".m-upload__button\"></ng-content>\n    </div>\n  </aui-upload-zone>\n  <aui-validation-list [ariaLabelRemove]=\"ariaLabelRemove\" [invalidFiles]=\"invalidFiles\"></aui-validation-list>\n  <aui-upload-queue (uploadedFiles)=\"onUploadedFiles($event)\" *ngIf=\"!options?.autoUpload\" [ariaLabelRemove]=\"ariaLabelRemove\"\n                    [files]=\"queuedFiles\" [uploader]=\"uploader\"></aui-upload-queue>\n</div>\n",
                         styles: [".m-upload__button>.m-upload__input{display:none}"]
                     }] }
         ];
         UploadComponent.propDecorators = {
             id: [{ type: core.Input }],
+            accept: [{ type: core.Input }],
             ariaLabelRemove: [{ type: core.Input }],
             disabled: [{ type: core.Input }],
+            multiple: [{ type: core.Input }],
             options: [{ type: core.Input }],
             selectUploadedFiles: [{ type: core.Output }]
         };
@@ -2917,10 +2925,14 @@
         /** @type {?} */
         UploadComponent.prototype.id;
         /** @type {?} */
+        UploadComponent.prototype.accept;
+        /** @type {?} */
         UploadComponent.prototype.ariaLabelRemove;
         /** @type {?} */
         UploadComponent.prototype.disabled;
         /** @type {?} */
+        UploadComponent.prototype.multiple;
+        /** @type {?} */
         UploadComponent.prototype.options;
         /** @type {?} */
         UploadComponent.prototype.selectUploadedFiles;
@@ -3098,11 +3110,13 @@
      * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
     var UploadZoneComponent = /** @class */ (function () {
-        function UploadZoneComponent() {
+        function UploadZoneComponent(renderer) {
+            this.renderer = renderer;
             this.disabled = false;
             this.multiple = true;
             this.id = '';
             this.ariaId = '';
+            this.accept = [];
             this.uploadedFiles = new core.EventEmitter();
             this.queuedFiles = new core.EventEmitter();
             this.invalidFiles = new core.EventEmitter();
@@ -3168,6 +3182,36 @@
             var files = this.fileListToArray(this.fileInput.nativeElement.files);
             this.handleFiles(files);
         };
+        /**
+         * @param {?} event
+         * @return {?}
+         */
+        UploadZoneComponent.prototype.onFileClick = /**
+         * @param {?} event
+         * @return {?}
+         */
+        function (event) {
+            // When removing a file make sure you can add it again later
+            // See: https://stackoverflow.com/questions/59870335/ng2-file-upload-not-allowing-me-to-add-same-doc-after-ive-removed-it-from-que
+            event.target.value = '';
+        };
+        /**
+         * @return {?}
+         */
+        UploadZoneComponent.prototype.ngAfterViewInit = /**
+         * @return {?}
+         */
+        function () {
+            if (this.multiple !== false) {
+                this.renderer.setProperty(this.fileInput.nativeElement, 'multiple', 'multiple');
+            }
+            if (this.accept) {
+                this.renderer.setProperty(this.fileInput.nativeElement, 'accept', this.accept.join());
+            }
+            if (this.disabled) {
+                this.renderer.setProperty(this.fileInput.nativeElement, 'disabled', 'disabled');
+            }
+        };
         /**
          * @protected
          * @param {?} files
@@ -3254,9 +3298,13 @@
         UploadZoneComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-upload-zone',
-                        template: "<div *ngIf=\"uploader.options.type === 'drop'\" [class.is-disabled]=\"disabled\" class=\"m-upload\">\n  <div class=\"m-upload__inner\">\n    <div class=\"m-upload__dropzone\">\n      <input #fileInput (change)=\"updateFiles()\" *ngIf=\"multiple\" [attr.aria-labelledby]=\"ariaId\" [disabled]=\"disabled\" [id]=\"id\"\n             class=\"m-upload__input\" multiple type=\"file\">\n      <input #fileInput (change)=\"updateFiles()\" *ngIf=\"!multiple\" [attr.aria-labelledby]=\"ariaId\" [disabled]=\"disabled\"\n             [id]=\"id\" class=\"m-upload__input\" type=\"file\">\n\n      <div *ngIf=\"!uploadProgress || uploadProgress === 0\" class=\"m-upload__content\">\n        <p [id]=\"ariaId\" class=\"m-upload__message\">\n          <ng-content select=\".m-upload__message\"></ng-content>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"uploadProgress > 0\">\n        <p class=\"m-upload__uploads u-text-bold u-margin-bottom-xs\">\n          <ng-container *ngFor=\"let file of uploadingFiles; let last = last\">\n            {{ file.name }}\n            <ng-container *ngIf=\"!last\">,</ng-container>\n          </ng-container>\n        </p>\n        <aui-progress-bar [value]=\"uploadProgress\" max=\"100\"></aui-progress-bar>\n      </ng-container>\n    </div>\n  </div>\n\n  <small class=\"m-upload__description\">\n    <ng-content select=\".m-upload__description\"></ng-content>\n  </small>\n</div>\n\n<button (click)=\"triggerFile()\" *ngIf=\"uploader.options.type === 'button'\" [disabled]=\"disabled\" class=\"a-button m-upload__button\"\n        type=\"button\">\n  <span [id]=\"ariaId\"><ng-content select=\".m-upload__button\"></ng-content></span>\n  <input #fileInput (change)=\"updateFiles()\" [attr.aria-labelledby]=\"ariaId\" [disabled]=\"disabled\" [id]=\"id\"\n         class=\"m-upload__input\" multiple=\"multiple\" type=\"file\">\n</button>\n"
+                        template: "<div *ngIf=\"uploader.options.type === 'drop'\" [class.is-disabled]=\"disabled\" class=\"m-upload\">\n  <div class=\"m-upload__inner\">\n    <div class=\"m-upload__dropzone\">\n\n      <input\n        #fileInput\n        type=\"file\"\n        class=\"m-upload__input\"\n        [id]=\"id\"\n        [attr.aria-labelledby]=\"ariaId\"\n        (change)=\"updateFiles()\"\n        (click)=\"onFileClick($event)\">\n\n      <div *ngIf=\"!uploadProgress || uploadProgress === 0\" class=\"m-upload__content\">\n        <p [id]=\"ariaId\" class=\"m-upload__message\">\n          <ng-content select=\".m-upload__message\"></ng-content>\n        </p>\n      </div>\n\n      <ng-container *ngIf=\"uploadProgress > 0\">\n        <p class=\"m-upload__uploads u-text-bold u-margin-bottom-xs\">\n          <ng-container *ngFor=\"let file of uploadingFiles; let last = last\">\n            {{ file.name }}\n            <ng-container *ngIf=\"!last\">,</ng-container>\n          </ng-container>\n        </p>\n        <aui-progress-bar [value]=\"uploadProgress\" max=\"100\"></aui-progress-bar>\n      </ng-container>\n    </div>\n  </div>\n\n  <small class=\"m-upload__description\">\n    <ng-content select=\".m-upload__description\"></ng-content>\n  </small>\n</div>\n\n<button (click)=\"triggerFile()\" *ngIf=\"uploader.options.type === 'button'\" [disabled]=\"disabled\" class=\"a-button m-upload__button\"\n        type=\"button\">\n  <span [id]=\"ariaId\"><ng-content select=\".m-upload__button\"></ng-content></span>\n  <input\n    #fileInput\n    type=\"file\"\n    class=\"m-upload__input\"\n    [id]=\"id\"\n    [attr.aria-labelledby]=\"ariaId\"\n    (change)=\"updateFiles()\"\n    (click)=\"onFileClick($event)\">\n</button>\n"
                     }] }
         ];
+        /** @nocollapse */
+        UploadZoneComponent.ctorParameters = function () { return [
+            { type: core.Renderer2 }
+        ]; };
         UploadZoneComponent.propDecorators = {
             fileInput: [{ type: core.ViewChild, args: ['fileInput', { static: false },] }],
             uploader: [{ type: core.Input }],
@@ -3264,6 +3312,7 @@
             multiple: [{ type: core.Input }],
             id: [{ type: core.Input }],
             ariaId: [{ type: core.Input }],
+            accept: [{ type: core.Input }],
             uploadedFiles: [{ type: core.Output }],
             queuedFiles: [{ type: core.Output }],
             invalidFiles: [{ type: core.Output }],
@@ -3287,6 +3336,8 @@
         /** @type {?} */
         UploadZoneComponent.prototype.ariaId;
         /** @type {?} */
+        UploadZoneComponent.prototype.accept;
+        /** @type {?} */
         UploadZoneComponent.prototype.uploadedFiles;
         /** @type {?} */
         UploadZoneComponent.prototype.queuedFiles;
@@ -3300,6 +3351,11 @@
         UploadZoneComponent.prototype.uploadProgress;
         /** @type {?} */
         UploadZoneComponent.prototype.uploadingFiles;
+        /**
+         * @type {?}
+         * @private
+         */
+        UploadZoneComponent.prototype.renderer;
     }
 
     /**