@acpaas-ui/ngx-forms 5.0.1 → 5.2.0

package/fesm5/acpaas-ui-ngx-forms.js

@@ -179,6 +179,7 @@ var AutoCompleteComponent = /** @class */ (function () {
         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 EventEmitter();
         this.select = new EventEmitter();
@@ -542,7 +543,7 @@ var AutoCompleteComponent = /** @class */ (function () {
     AutoCompleteComponent.decorators = [
         { type: 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: NG_VALUE_ACCESSOR,
@@ -575,6 +576,7 @@ var AutoCompleteComponent = /** @class */ (function () {
         loadingText: [{ type: Input }],
         noResultsText: [{ type: Input }],
         showAllByDefault: [{ type: Input }],
+        autoComplete: [{ type: Input }],
         label: [{ type: Input }],
         value: [{ type: Input }],
         search: [{ type: Output }],
@@ -611,6 +613,8 @@ if (false) {
     /** @type {?} */
     AutoCompleteComponent.prototype.showAllByDefault;
     /** @type {?} */
+    AutoCompleteComponent.prototype.autoComplete;
+    /** @type {?} */
     AutoCompleteComponent.prototype.label;
     /** @type {?} */
     AutoCompleteComponent.prototype.value;
@@ -2636,8 +2640,10 @@ if (false) {
 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 EventEmitter();
         this.uploadedFiles = [];
@@ -2693,14 +2699,16 @@ var UploadComponent = /** @class */ (function () {
     UploadComponent.decorators = [
         { type: 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\n    [id]=\"id\"\n    [accept]=\"accept\"\n    [ariaId]=\"ariaId\"\n    [disabled]=\"disabled\"\n    [multiple]=\"multiple\"\n    [uploader]=\"uploader\"\n    (invalidFiles)=\"onInvalidFiles($event)\"\n    (queuedFiles)=\"onQueuedFiles($event)\"\n    (uploadedFiles)=\"onUploadedFiles($event)\">\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: Input }],
+        accept: [{ type: Input }],
         ariaLabelRemove: [{ type: Input }],
         disabled: [{ type: Input }],
+        multiple: [{ type: Input }],
         options: [{ type: Input }],
         selectUploadedFiles: [{ type: Output }]
     };
@@ -2710,10 +2718,14 @@ if (false) {
     /** @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;
@@ -2891,11 +2903,13 @@ if (false) {
  * @suppress {checkTypes,constantProperty,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 var UploadZoneComponent = /** @class */ (function () {
-    function UploadZoneComponent() {
-        this.disabled = false;
-        this.multiple = true;
+    function UploadZoneComponent(renderer) {
+        this.renderer = renderer;
         this.id = '';
+        this.accept = [];
         this.ariaId = '';
+        this.disabled = false;
+        this.multiple = true;
         this.uploadedFiles = new EventEmitter();
         this.queuedFiles = new EventEmitter();
         this.invalidFiles = new EventEmitter();
@@ -2961,6 +2975,36 @@ var UploadZoneComponent = /** @class */ (function () {
         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
@@ -3047,16 +3091,21 @@ var UploadZoneComponent = /** @class */ (function () {
     UploadZoneComponent.decorators = [
         { type: 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      <input\n        #fileInput\n        type=\"file\"\n        class=\"m-upload__input\"\n        [id]=\"id\"\n        [attr.aria-labelledby]=\"ariaId\"\n        (click)=\"onFileClick($event)\"\n        (change)=\"updateFiles()\">\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    (click)=\"onFileClick($event)\"\n    (change)=\"updateFiles()\">\n</button>\n"
                 }] }
     ];
+    /** @nocollapse */
+    UploadZoneComponent.ctorParameters = function () { return [
+        { type: Renderer2 }
+    ]; };
     UploadZoneComponent.propDecorators = {
         fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
         uploader: [{ type: Input }],
-        disabled: [{ type: Input }],
-        multiple: [{ type: Input }],
         id: [{ type: Input }],
+        accept: [{ type: Input }],
         ariaId: [{ type: Input }],
+        disabled: [{ type: Input }],
+        multiple: [{ type: Input }],
         uploadedFiles: [{ type: Output }],
         queuedFiles: [{ type: Output }],
         invalidFiles: [{ type: Output }],
@@ -3072,14 +3121,16 @@ if (false) {
     /** @type {?} */
     UploadZoneComponent.prototype.uploader;
     /** @type {?} */
-    UploadZoneComponent.prototype.disabled;
-    /** @type {?} */
-    UploadZoneComponent.prototype.multiple;
-    /** @type {?} */
     UploadZoneComponent.prototype.id;
     /** @type {?} */
+    UploadZoneComponent.prototype.accept;
+    /** @type {?} */
     UploadZoneComponent.prototype.ariaId;
     /** @type {?} */
+    UploadZoneComponent.prototype.disabled;
+    /** @type {?} */
+    UploadZoneComponent.prototype.multiple;
+    /** @type {?} */
     UploadZoneComponent.prototype.uploadedFiles;
     /** @type {?} */
     UploadZoneComponent.prototype.queuedFiles;
@@ -3093,6 +3144,11 @@ if (false) {
     UploadZoneComponent.prototype.uploadProgress;
     /** @type {?} */
     UploadZoneComponent.prototype.uploadingFiles;
+    /**
+     * @type {?}
+     * @private
+     */
+    UploadZoneComponent.prototype.renderer;
 }
 
 /**