@acpaas-ui/ngx-forms 4.6.2 → 5.1.1

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@acpaas-ui/ngx-flyout'), require('@acpaas-ui/ngx-selectable-list'), require('inputmask'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@acpaas-ui/js-date-utils'), require('@acpaas-ui/ngx-calendar'), require('@acpaas-ui/ngx-utils'), require('@acpaas-ui/ngx-progress-bar'), require('ng2-ckeditor')) :
-    typeof define === 'function' && define.amd ? define('@acpaas-ui/ngx-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@acpaas-ui/ngx-flyout', '@acpaas-ui/ngx-selectable-list', 'inputmask', 'lodash-es', 'rxjs', 'rxjs/operators', '@acpaas-ui/js-date-utils', '@acpaas-ui/ngx-calendar', '@acpaas-ui/ngx-utils', '@acpaas-ui/ngx-progress-bar', 'ng2-ckeditor'], factory) :
-    (global = global || self, factory((global['acpaas-ui'] = global['acpaas-ui'] || {}, global['acpaas-ui']['ngx-forms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.flyout, global.selectableList, global.Inputmask, global.lodashEs, global.rxjs, global.rxjs.operators, global.jsDateUtils, global.calendar, global.ngxUtils, global.progressBar, global.ng2Ckeditor));
-}(this, (function (exports, core, common, forms, ngxFlyout, ngxSelectableList, Inputmask, lodashEs, rxjs, operators, jsDateUtils, ngxCalendar, ngxUtils, ngxProgressBar, ng2Ckeditor) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@angular/forms'), require('@acpaas-ui/ngx-flyout'), require('@acpaas-ui/ngx-selectable-list'), require('inputmask'), require('lodash-es'), require('rxjs'), require('rxjs/operators'), require('@acpaas-ui/js-date-utils'), require('@acpaas-ui/ngx-calendar'), require('@acpaas-ui/ngx-utils'), require('@acpaas-ui/ngx-icon'), require('@acpaas-ui/ngx-progress-bar'), require('ng2-ckeditor')) :
+    typeof define === 'function' && define.amd ? define('@acpaas-ui/ngx-forms', ['exports', '@angular/core', '@angular/common', '@angular/forms', '@acpaas-ui/ngx-flyout', '@acpaas-ui/ngx-selectable-list', 'inputmask', 'lodash-es', 'rxjs', 'rxjs/operators', '@acpaas-ui/js-date-utils', '@acpaas-ui/ngx-calendar', '@acpaas-ui/ngx-utils', '@acpaas-ui/ngx-icon', '@acpaas-ui/ngx-progress-bar', 'ng2-ckeditor'], factory) :
+    (global = global || self, factory((global['acpaas-ui'] = global['acpaas-ui'] || {}, global['acpaas-ui']['ngx-forms'] = {}), global.ng.core, global.ng.common, global.ng.forms, global.ngxFlyout, global.ngxSelectableList, global.Inputmask, global.lodashEs, global.rxjs, global.rxjs.operators, global.jsDateUtils, global.ngxCalendar, global.ngxUtils, global.ngxIcon, global.ngxProgressBar, global.ng2Ckeditor));
+}(this, (function (exports, core, common, forms, ngxFlyout, ngxSelectableList, Inputmask, lodashEs, rxjs, operators, jsDateUtils, ngxCalendar, ngxUtils, ngxIcon, ngxProgressBar, ng2Ckeditor) { 'use strict';
 
     Inputmask = Inputmask && Inputmask.hasOwnProperty('default') ? Inputmask['default'] : Inputmask;
 
@@ -970,7 +970,7 @@
                     /** @type {?} */
                     var format = value.split(DATEPICKER_SEPARATOR_CHAR).reverse().join('-');
                     /** @type {?} */
-                    var date = jsDateUtils.DateHelper.parseDate(format, 'YYYY-MM-DD', true);
+                    var date = jsDateUtils.DateHelper.parseDate(format, 'yyyy-MM-dd');
                     if (date) {
                         _this.selectedDate = date;
                         _this.onChange(date.toISOString());
@@ -1023,7 +1023,7 @@
          */
         function (value) {
             this.selectedDate = typeof value === 'string'
-                ? this.isISODateFormat(value) ? new Date(value) : jsDateUtils.DateHelper.parseDate(value, 'DD/MM/YYYY', true)
+                ? this.isISODateFormat(value) ? new Date(value) : jsDateUtils.DateHelper.parseDate(value, 'dd/MM/yyyy')
                 : value;
             /** @type {?} */
             var dateString = this.selectedDate ? this.formatDate(this.selectedDate) : '';
@@ -1163,7 +1163,7 @@
         DatepickerComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-datepicker',
-                        template: "<div aria-haspopup=\"grid\" auiFlyout class=\"aui-datepicker a-input__wrapper\">\n  <input\n    (blur)=\"handleBlur($event)\"\n    [attr.disabled]=\"isDisabled ? true : null\"\n    [auiMask]=\"dateMask.mask\"\n    [autocomplete]=\"autocomplete\"\n    [formControl]=\"formControl\"\n    id=\"{{ id }}\"\n    name=\"{{ name }}\"\n    placeholder=\"{{ placeholder }}\"\n    type=\"text\"\n  >\n  <span *ngIf=\"isDisabled\" class=\"fa fa-calendar\"></span>\n\n  <ng-container *ngIf=\"!isDisabled\">\n    <span [openOnFocus]=\"false\" auiFlyoutAction class=\"fa fa-calendar is-clickable\"></span>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isDisabled\">\n    <div auiFlyoutZone class=\"m-datepicker m-datepicker--fixed\" role=\"dialog\">\n      <aui-calendar (selectDate)=\"selectDateFromCalendar($event)\" [range]=\"range\"\n                    [selectedDate]=\"selectedDate\" [interval]=\"interval\"></aui-calendar>\n    </div>\n  </ng-container>\n</div>\n",
+                        template: "<div aria-haspopup=\"grid\" auiFlyout class=\"aui-datepicker a-input__wrapper\">\n  <input\n    (blur)=\"handleBlur($event)\"\n    [attr.disabled]=\"isDisabled ? true : null\"\n    [auiMask]=\"dateMask.mask\"\n    [autocomplete]=\"autocomplete\"\n    [formControl]=\"formControl\"\n    id=\"{{ id }}\"\n    name=\"{{ name }}\"\n    placeholder=\"{{ placeholder }}\"\n    type=\"text\"\n  >\n  <aui-icon *ngIf=\"isDisabled\" name=\"ai-calendar-3\" role=\"button\" tabindex=\"0\"></aui-icon>\n\n  <ng-container *ngIf=\"!isDisabled\">\n    <aui-icon auiFlyoutAction [openOnFocus]=\"false\" name=\"ai-calendar-3\" className=\"is-clickable\" role=\"button\" tabindex=\"0\"></aui-icon>\n  </ng-container>\n\n  <ng-container *ngIf=\"!isDisabled\">\n    <div auiFlyoutZone class=\"m-datepicker m-datepicker--fixed\" role=\"dialog\">\n      <aui-calendar (selectDate)=\"selectDateFromCalendar($event)\" [range]=\"range\"\n                    [selectedDate]=\"selectedDate\" [interval]=\"interval\"></aui-calendar>\n    </div>\n  </ng-container>\n</div>\n",
                         changeDetection: core.ChangeDetectionStrategy.OnPush,
                         providers: [{
                                 provide: forms.NG_VALUE_ACCESSOR,
@@ -1318,6 +1318,7 @@
                             forms.FormsModule,
                             forms.ReactiveFormsModule,
                             ngxCalendar.CalendarModule,
+                            ngxIcon.IconModule,
                             ngxFlyout.FlyoutModule,
                             MaskModule,
                         ],
@@ -2061,7 +2062,7 @@
         SearchFilterComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-search-filter',
-                        template: "<div [align]=\"flyoutAlign\" [size]=\"flyoutSize\" auiFlyout class=\"m-search-filter\">\n  <button class=\"has-icon-right a-button--default\" [attr.disabled]=\"isDisabled ? 'true' : null\" aria-haspopup=\u201Dtrue\u201D\n          auiFlyoutAction\n          [ngClass]=\"{\n          'a-button' : selectedItems.length,\n          'a-button-outline' : !selectedItems.length,\n          'a-button--large' : size === 'large',\n          'a-button--small': size === 'small',\n           'a-button--tiny' : size === 'tiny'\n           }\">\n    <span id=\"{{ id + '-label' }}\">{{ label }}</span>\n    <span *ngIf=\"selectedItems.length\">({{ selectedItems.length }})</span>\n    <span class=\"fa fa-angle-down\"></span>\n  </button>\n\n  <div auiFlyoutZone class=\"m-search-filter__search m-search-filter__search--scroll\">\n    <div *ngIf=\"!isDisabled\" class=\"m-search-filter__input a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <input (input)=\"filterDataFromSearch()\" [(ngModel)]=\"query\" [attr.aria-labelledby]=\"id + '-label'\"\n               [attr.placeholder]=\"placeholder\"\n               aria-autocomplete=\"list\" id=\"{{ id + '-search' }}\" name=\"{{ name + '-search' }}\"\n               type=\"text\">\n        <span class=\"fa fa-search\"></span>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isDisabled && selectedItems.length > 0\" class=\"m-search-filter__clear\">\n      <button (click)=\"clear()\" class=\"a-button-outline a-button--small a-button--danger has-icon-left\" type=\"button\">\n        <span class=\"fa fa-close\"></span>\n        {{ labelDeselect }}\n      </button>\n    </div>\n\n    <p *ngIf=\"labelResults\" class=\"h6 m-search-filter__results-title\">{{ labelResults }}</p>\n    <div *ngIf=\"loading\" class=\"u-text-center u-padding a-spinner\"></div>\n    <ul *ngIf=\"!loading\" class=\"a-list a-list--lined a-list--unstyled\">\n      <li *ngIf=\"!filteredChoices.length\" class=\"m-search-filter__results-item a-list__item\">\n        <p class=\"u-margin-xs\">{{ labelNoResults }}</p>\n      </li>\n      <li *ngFor=\"let choice of filteredChoices; index as i\" class=\"m-search-filter__results-item a-list__item\">\n        <div class=\"a-input__checkbox\">\n          <input\n            (change)=\"toggleSelected(choice.value)\"\n            [attr.disabled]=\"isDisabled ? true : null\"\n            [checked]=\"selectedItems.indexOf(choice.value) >= 0\"\n            id=\"{{ 'checkbox--' + i + '--' + id }}\"\n            name=\"{{ 'checkbox--' + i + '--' + id }}\"\n            type=\"checkbox\"\n          />\n          <label for=\"{{ 'checkbox--' + i + '--' + id }}\">{{ choice.label }}</label>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
+                        template: "<div [align]=\"flyoutAlign\" [size]=\"flyoutSize\" auiFlyout class=\"m-search-filter\">\n  <button class=\"has-icon-right a-button--default\" [attr.disabled]=\"isDisabled ? 'true' : null\" aria-haspopup=\u201Dtrue\u201D\n          auiFlyoutAction\n          [ngClass]=\"{\n          'a-button' : selectedItems.length,\n          'a-button-outline' : !selectedItems.length,\n          'a-button--large' : size === 'large',\n          'a-button--small': size === 'small',\n           'a-button--tiny' : size === 'tiny'\n           }\">\n    <span id=\"{{ id + '-label' }}\">{{ label }}</span>\n    <span *ngIf=\"selectedItems.length\"> ({{ selectedItems.length }})</span>\n    <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n  </button>\n\n  <div auiFlyoutZone class=\"m-search-filter__search m-search-filter__search--scroll\">\n    <div *ngIf=\"!isDisabled\" class=\"m-search-filter__input a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <input (input)=\"filterDataFromSearch()\" [(ngModel)]=\"query\" [attr.aria-labelledby]=\"id + '-label'\"\n               [attr.placeholder]=\"placeholder\"\n               aria-autocomplete=\"list\" id=\"{{ id + '-search' }}\" name=\"{{ name + '-search' }}\"\n               type=\"text\">\n        <aui-icon name=\"ai-search\"></aui-icon>\n      </div>\n    </div>\n\n    <div *ngIf=\"!isDisabled && selectedItems.length > 0\" class=\"m-search-filter__clear\">\n      <button (click)=\"clear()\" class=\"a-button-outline a-button--small a-button--danger has-icon-left\" type=\"button\">\n        <aui-icon name=\"ai-close\"></aui-icon>\n        {{ labelDeselect }}\n      </button>\n    </div>\n\n    <p *ngIf=\"labelResults\" class=\"h6 m-search-filter__results-title u-margin-bottom-xs\">{{ labelResults }}</p>\n    <div *ngIf=\"loading\" class=\"u-text-center u-padding a-spinner\"></div>\n    <ul *ngIf=\"!loading\" class=\"a-list a-list--lined a-list--unstyled\">\n      <li *ngIf=\"!filteredChoices.length\" class=\"m-search-filter__results-item a-list__item\">\n        <p class=\"u-margin-xs\">{{ labelNoResults }}</p>\n      </li>\n      <li *ngFor=\"let choice of filteredChoices; index as i\" class=\"m-search-filter__results-item a-list__item\">\n        <div class=\"a-input__checkbox\">\n          <input\n            (change)=\"toggleSelected(choice.value)\"\n            [attr.disabled]=\"isDisabled ? true : null\"\n            [checked]=\"selectedItems.indexOf(choice.value) >= 0\"\n            id=\"{{ 'checkbox--' + i + '--' + id }}\"\n            name=\"{{ 'checkbox--' + i + '--' + id }}\"\n            type=\"checkbox\"\n          />\n          <label for=\"{{ 'checkbox--' + i + '--' + id }}\">{{ choice.label }}</label>\n        </div>\n      </li>\n    </ul>\n  </div>\n</div>\n",
                         providers: [{
                                 provide: forms.NG_VALUE_ACCESSOR,
                                 useExisting: core.forwardRef((/**
@@ -2152,9 +2153,10 @@
         SearchFilterModule.decorators = [
             { type: core.NgModule, args: [{
                         imports: [
-                            forms.FormsModule,
                             common.CommonModule,
                             ngxFlyout.FlyoutModule,
+                            forms.FormsModule,
+                            ngxIcon.IconModule,
                         ],
                         declarations: [
                             SearchFilterComponent,
@@ -2464,7 +2466,7 @@
         TimepickerComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-timepicker',
-                        template: "<div class=\"m-timepicker\">\n  <div *ngIf=\"!shouldUseFallback\" [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input\">\n    <input [attr.aria-label]=\"ariaLabelHours + ':' + ariaLabelMinutes\" [formControl]=\"timeControl\" [id]=\"id\"\n           type=\"time\">\n  </div>\n\n  <div *ngIf=\"shouldUseFallback\" [formGroup]=\"fallbackForm\">\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelHours\" [id]=\"id\" formControlName=\"hours\">\n          <option disabled value=\"null\">{{ hoursPlaceholder }}</option>\n          <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</option>\n        </select>\n        <span class=\"fa fa-angle-down\"></span>\n      </div>\n    </div>\n\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelMinutes\" formControlName=\"minutes\">\n          <option disabled value=\"null\">{{ minutesPlaceholder }}</option>\n          <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</option>\n        </select>\n        <span class=\"fa fa-angle-down\"></span>\n      </div>\n    </div>\n  </div>\n</div>\n",
+                        template: "<div class=\"m-timepicker\">\n  <div *ngIf=\"!shouldUseFallback\" [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input\">\n    <input [attr.aria-label]=\"ariaLabelHours + ':' + ariaLabelMinutes\" [formControl]=\"timeControl\" [id]=\"id\"\n           type=\"time\">\n  </div>\n\n  <div *ngIf=\"shouldUseFallback\" [formGroup]=\"fallbackForm\">\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelHours\" [id]=\"id\" formControlName=\"hours\">\n          <option disabled value=\"null\">{{ hoursPlaceholder }}</option>\n          <option *ngFor=\"let hour of hours\" [value]=\"hour\">{{ hour }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n\n    <div [class]=\"'a-input--' + size\" [ngClass]=\"{ 'has-error': hasError }\" class=\"a-input has-icon-right\">\n      <div class=\"a-input__wrapper\">\n        <select [attr.aria-label]=\"ariaLabelMinutes\" formControlName=\"minutes\">\n          <option disabled value=\"null\">{{ minutesPlaceholder }}</option>\n          <option *ngFor=\"let minute of minutes\" [value]=\"minute\">{{ minute }}</option>\n        </select>\n        <aui-icon name=\"ai-arrow-down-1\"></aui-icon>\n      </div>\n    </div>\n  </div>\n</div>\n",
                         changeDetection: core.ChangeDetectionStrategy.OnPush,
                         providers: [{
                                 provide: forms.NG_VALUE_ACCESSOR,
@@ -2551,6 +2553,7 @@
                         imports: [
                             forms.ReactiveFormsModule,
                             common.CommonModule,
+                            ngxIcon.IconModule,
                         ],
                         declarations: [
                             TimepickerComponent,
@@ -2902,7 +2905,7 @@
         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\" [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",
+                        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}"]
                     }] }
         ];
@@ -3076,7 +3079,7 @@
         UploadQueueComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-upload-queue',
-                        template: "<ul class=\"m-upload__files u-margin-bottom-xs\">\n  <li *ngFor=\"let file of files; let i = index\">\n    <span class=\"fa fa-file-o\"></span>\n    <span class=\"m-upload__filename\">{{ file.name }}</span>\n\n    <button (click)=\"remove(i)\" class=\"m-upload__delete a-button-transparent a-button--default a-button--small has-icon\"\n            type=\"button\">\n            <span class=\"fa fa-close\">\n                <span class=\"u-screen-reader-only\">{{ ariaLabelRemove }}</span>\n            </span>\n    </button>\n  </li>\n</ul>\n\n<button (click)=\"uploadFiles()\" *ngIf=\"files.length > 0\" class=\"a-button\" type=\"button\">Upload</button>\n"
+                        template: "<ul class=\"m-upload__files u-margin-bottom-xs\">\n  <li *ngFor=\"let file of files; let i = index\">\n    <aui-icon name=\"ai-common-file-empty\"></aui-icon>\n    <span class=\"m-upload__filename\">{{ file.name }}</span>\n\n    <button (click)=\"remove(i)\" class=\"m-upload__delete a-button-transparent a-button--default a-button--small has-icon\" type=\"button\">\n      <aui-icon name=\"ai-close\" [ariaLabel]=\"ariaLabelRemove\"></aui-icon>\n    </button>\n  </li>\n</ul>\n\n<button (click)=\"uploadFiles()\" *ngIf=\"files.length > 0\" class=\"a-button\" type=\"button\">Upload</button>\n"
                     }] }
         ];
         UploadQueueComponent.propDecorators = {
@@ -3108,11 +3111,11 @@
     var UploadZoneComponent = /** @class */ (function () {
         function UploadZoneComponent(renderer) {
             this.renderer = renderer;
-            this.disabled = false;
-            this.multiple = true;
             this.id = '';
-            this.ariaId = '';
             this.accept = [];
+            this.ariaId = '';
+            this.disabled = false;
+            this.multiple = true;
             this.uploadedFiles = new core.EventEmitter();
             this.queuedFiles = new core.EventEmitter();
             this.invalidFiles = new core.EventEmitter();
@@ -3294,7 +3297,7 @@
         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\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"
+                        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 */
@@ -3304,11 +3307,11 @@
         UploadZoneComponent.propDecorators = {
             fileInput: [{ type: core.ViewChild, args: ['fileInput', { static: false },] }],
             uploader: [{ type: core.Input }],
-            disabled: [{ type: core.Input }],
-            multiple: [{ type: core.Input }],
             id: [{ type: core.Input }],
-            ariaId: [{ type: core.Input }],
             accept: [{ type: core.Input }],
+            ariaId: [{ type: core.Input }],
+            disabled: [{ type: core.Input }],
+            multiple: [{ type: core.Input }],
             uploadedFiles: [{ type: core.Output }],
             queuedFiles: [{ type: core.Output }],
             invalidFiles: [{ type: core.Output }],
@@ -3324,15 +3327,15 @@
         /** @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.accept;
+        UploadZoneComponent.prototype.disabled;
+        /** @type {?} */
+        UploadZoneComponent.prototype.multiple;
         /** @type {?} */
         UploadZoneComponent.prototype.uploadedFiles;
         /** @type {?} */
@@ -3450,7 +3453,7 @@
         ValidationListComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'aui-validation-list',
-                        template: "<ul class=\"m-upload__files\">\n  <li *ngFor=\"let invalidFile of invalidFiles; let i = index\" class=\"is-error\">\n    <span class=\"fa fa-warning\"></span>\n    <span class=\"m-upload__filename\">{{ invalidFile.file.name }}</span>\n    <span class=\"m-upload__error\">{{ formatReasons(invalidFile.reasons) }}</span>\n\n    <button (click)=\"remove(i)\" class=\"m-upload__delete a-button-transparent a-button--danger a-button--small has-icon\"\n            type=\"button\">\n            <span class=\"fa fa-close\">\n                <span class=\"u-screen-reader-only\">{{ ariaLabelRemove }}</span>\n            </span>\n    </button>\n  </li>\n</ul>\n"
+                        template: "<ul class=\"m-upload__files\">\n  <li *ngFor=\"let invalidFile of invalidFiles; let i = index\" class=\"is-error\">\n    <aui-icon name=\"ai-alert-triangle\"></aui-icon>\n    <span class=\"m-upload__filename\">{{ invalidFile.file.name }}</span>\n    <span class=\"m-upload__error\">{{ formatReasons(invalidFile.reasons) }}</span>\n\n    <button (click)=\"remove(i)\" class=\"m-upload__delete a-button-transparent a-button--danger a-button--small has-icon\"\n            type=\"button\">\n      <aui-icon name=\"ai-close\" [ariaLabel]=\"ariaLabelRemove\"></aui-icon>\n    </button>\n  </li>\n</ul>\n"
                     }] }
         ];
         /** @nocollapse */
@@ -3507,6 +3510,7 @@
                             common.CommonModule,
                             ngxProgressBar.ProgressBarModule,
                             forms.FormsModule,
+                            ngxIcon.IconModule,
                         ],
                         declarations: [
                             UploadComponent,
@@ -3545,7 +3549,7 @@
     /** @type {?} */
     var WYSIWYG_DEFAULT_CONFIG = {
         bodyClass: 'a-input ckeditor-editable-body',
-        contentsCss: ['https://cdn.antwerpen.be/core_branding_scss/4.0.0/main.min.css'],
+        contentsCss: ['https://cdn.antwerpen.be/core_branding_scss/5.0.0/main.min.css'],
         extraPlugins: 'divarea',
         find_highlight: {
             element: 'span',
@@ -3705,7 +3709,7 @@
                                 // tslint:disable-line:no-forward-ref
                                 multi: true,
                             }],
-                        styles: [":host ::ng-deep .cke .cke_chrome{border:1px solid #949494}:host ::ng-deep .cke .cke_top{border-color:#949494}:host ::ng-deep .cke .cke_bottom,:host ::ng-deep .cke .cke_top{background-color:#f3f3f3}:host ::ng-deep .cke .cke_wysiwyg_div{padding:.25rem}:host ::ng-deep .cke.cke_focus .cke_contents{box-shadow:0 0 0 1px #949494,0 0 0 4px #c0dffe;position:relative;z-index:1}"]
+                        styles: [":host ::ng-deep .cke .cke_chrome{border:1px solid #6f6f6f}:host ::ng-deep .cke .cke_top{border-color:#6f6f6f}:host ::ng-deep .cke .cke_bottom,:host ::ng-deep .cke .cke_top{background-color:#f3f3f3}:host ::ng-deep .cke .cke_wysiwyg_div{padding:.25rem}:host ::ng-deep .cke.cke_focus .cke_contents{box-shadow:0 0 0 1px #6f6f6f,0 0 0 4px #c0dffe;position:relative;z-index:1}"]
                     }] }
         ];
         WysiwygComponent.propDecorators = {