@acpaas-ui/ngx-forms 4.6.2 → 5.1.1

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

@@ -11,6 +11,7 @@ import { takeUntil } from 'rxjs/operators';
 import { DateHelper } from '@acpaas-ui/js-date-utils';
 import { CALENDAR_DEFAULT_MONTH_LABELS, CALENDAR_DEFAULT_WEEKDAY_LABELS, CALENDAR_MONTH_LABELS, CALENDAR_WEEKDAY_LABELS, CalendarService, CalendarModule } from '@acpaas-ui/ngx-calendar';
 import { IntervalBuilder } from '@acpaas-ui/ngx-utils';
+import { IconModule } from '@acpaas-ui/ngx-icon';
 import { ProgressBarModule } from '@acpaas-ui/ngx-progress-bar';
 import { CKEditorModule } from 'ng2-ckeditor';
 
@@ -759,7 +760,7 @@ var DatepickerComponent = /** @class */ (function () {
                 /** @type {?} */
                 var format = value.split(DATEPICKER_SEPARATOR_CHAR).reverse().join('-');
                 /** @type {?} */
-                var date = DateHelper.parseDate(format, 'YYYY-MM-DD', true);
+                var date = DateHelper.parseDate(format, 'yyyy-MM-dd');
                 if (date) {
                     _this.selectedDate = date;
                     _this.onChange(date.toISOString());
@@ -812,7 +813,7 @@ var DatepickerComponent = /** @class */ (function () {
      */
     function (value) {
         this.selectedDate = typeof value === 'string'
-            ? this.isISODateFormat(value) ? new Date(value) : DateHelper.parseDate(value, 'DD/MM/YYYY', true)
+            ? this.isISODateFormat(value) ? new Date(value) : DateHelper.parseDate(value, 'dd/MM/yyyy')
             : value;
         /** @type {?} */
         var dateString = this.selectedDate ? this.formatDate(this.selectedDate) : '';
@@ -952,7 +953,7 @@ var DatepickerComponent = /** @class */ (function () {
     DatepickerComponent.decorators = [
         { type: 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: ChangeDetectionStrategy.OnPush,
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -1107,6 +1108,7 @@ var DatepickerModule = /** @class */ (function () {
                         FormsModule,
                         ReactiveFormsModule,
                         CalendarModule,
+                        IconModule,
                         FlyoutModule,
                         MaskModule,
                     ],
@@ -1850,7 +1852,7 @@ var SearchFilterComponent = /** @class */ (function () {
     SearchFilterComponent.decorators = [
         { type: 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: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef((/**
@@ -1941,9 +1943,10 @@ var SearchFilterModule = /** @class */ (function () {
     SearchFilterModule.decorators = [
         { type: NgModule, args: [{
                     imports: [
-                        FormsModule,
                         CommonModule,
                         FlyoutModule,
+                        FormsModule,
+                        IconModule,
                     ],
                     declarations: [
                         SearchFilterComponent,
@@ -2253,7 +2256,7 @@ var TimepickerComponent = /** @class */ (function () {
     TimepickerComponent.decorators = [
         { type: 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: ChangeDetectionStrategy.OnPush,
                     providers: [{
                             provide: NG_VALUE_ACCESSOR,
@@ -2340,6 +2343,7 @@ var TimepickerModule = /** @class */ (function () {
                     imports: [
                         ReactiveFormsModule,
                         CommonModule,
+                        IconModule,
                     ],
                     declarations: [
                         TimepickerComponent,
@@ -2691,7 +2695,7 @@ 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\" [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}"]
                 }] }
     ];
@@ -2865,7 +2869,7 @@ var UploadQueueComponent = /** @class */ (function () {
     UploadQueueComponent.decorators = [
         { type: 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 = {
@@ -2897,11 +2901,11 @@ if (false) {
 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 EventEmitter();
         this.queuedFiles = new EventEmitter();
         this.invalidFiles = new EventEmitter();
@@ -3083,7 +3087,7 @@ 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\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 */
@@ -3093,11 +3097,11 @@ var UploadZoneComponent = /** @class */ (function () {
     UploadZoneComponent.propDecorators = {
         fileInput: [{ type: ViewChild, args: ['fileInput', { static: false },] }],
         uploader: [{ type: Input }],
-        disabled: [{ type: Input }],
-        multiple: [{ type: Input }],
         id: [{ type: Input }],
-        ariaId: [{ type: Input }],
         accept: [{ type: Input }],
+        ariaId: [{ type: Input }],
+        disabled: [{ type: Input }],
+        multiple: [{ type: Input }],
         uploadedFiles: [{ type: Output }],
         queuedFiles: [{ type: Output }],
         invalidFiles: [{ type: Output }],
@@ -3113,15 +3117,15 @@ 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.accept;
+    UploadZoneComponent.prototype.disabled;
+    /** @type {?} */
+    UploadZoneComponent.prototype.multiple;
     /** @type {?} */
     UploadZoneComponent.prototype.uploadedFiles;
     /** @type {?} */
@@ -3239,7 +3243,7 @@ var ValidationListComponent = /** @class */ (function () {
     ValidationListComponent.decorators = [
         { type: 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 */
@@ -3296,6 +3300,7 @@ var UploadModule = /** @class */ (function () {
                         CommonModule,
                         ProgressBarModule,
                         FormsModule,
+                        IconModule,
                     ],
                     declarations: [
                         UploadComponent,
@@ -3334,7 +3339,7 @@ var UploadModule = /** @class */ (function () {
 /** @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',
@@ -3494,7 +3499,7 @@ var WysiwygComponent = /** @class */ (function () {
                             // 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 = {