suis 0.14.0 → 0.16.0

package/fesm2022/suis.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild } from '@angular/core';
+import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, ElementRef, Renderer2, Directive, ChangeDetectorRef, TemplateRef, ContentChild, HostListener, ViewEncapsulation, forwardRef, ViewChild, signal, Injectable } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
@@ -699,6 +699,127 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                 type: Input
             }] } });
 
+class SuisNotificationComponent {
+    constructor() {
+        /** @internal */
+        this.SuisIconType = SuisIconType;
+        /**
+         * Emits on close button action.
+         */
+        this.closed = new EventEmitter();
+    }
+    onClose() {
+        this.closed.emit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNotificationComponent, isStandalone: true, selector: "suis-notification", inputs: { notification: "notification" }, outputs: { closed: "closed" }, ngImport: i0, template: "<div\n  *ngIf=\"notification\"\n  class=\"suis-notification\"\n  [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n  <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n  <div class=\"suis-notification__message\">\n    {{ notification.message }}\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SuisNgClassPipe, name: "suisNgClass" }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-notification', standalone: true, imports: [CommonModule, SuisNgClassPipe, SuisIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"notification\"\n  class=\"suis-notification\"\n  [ngClass]=\"'suis-notification' | suisNgClass : notification.type\"\n>\n  <button class=\"suis-notification__close\" type=\"button\" (click)=\"onClose()\">\n    <suis-icon\n      [type]=\"SuisIconType.CROSS\"\n      [color]=\"'white'\"\n      [size]=\"'lg'\"\n    ></suis-icon>\n  </button>\n  <div class=\"suis-notification__message\">\n    {{ notification.message }}\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-notification{min-width:15rem;max-width:15rem;padding:1rem;border-radius:.25rem;color:#fff;position:relative}.suis-notification--success{background-color:#2ed573}.suis-notification--warning{background-color:#ffa502}.suis-notification--danger{background-color:#ff4757}.suis-notification__close{position:absolute;top:0;right:0;width:100%;padding:.75rem;background-color:transparent;border:none;cursor:pointer;display:flex;justify-content:end}.suis-notification__message{margin-top:1.25rem;text-align:justify}\n"] }]
+        }], propDecorators: { notification: [{
+                type: Input,
+                args: [{ required: true }]
+            }], closed: [{
+                type: Output
+            }] } });
+
+let UNIQUE_ID = 1;
+class SuisNotificationService {
+    constructor() {
+        this.notifications = signal([]);
+    }
+    /**
+     * @returns array of the current notifications. Type of SuisNotification[].
+     */
+    getNotifications() {
+        return this.notifications.asReadonly();
+    }
+    /**
+     * Adds success notification
+     * @param message text displayed in the notification
+     * @param delay time in ms after notification will be destroyed
+     */
+    success(message, delay = 2500) {
+        this.addNotification(message, delay, 'success');
+    }
+    /**
+     * Adds warning notification
+     * @param message text displayed in the notification
+     * @param delay time in ms after notification will be destroyed
+     */
+    warning(message, delay = 2500) {
+        this.addNotification(message, delay, 'warning');
+    }
+    /**
+     * Adds danger notification
+     * @param message text displayed in the notification
+     * @param delay time in ms after notification will be destroyed
+     */
+    danger(message, delay = 2500) {
+        this.addNotification(message, delay, 'danger');
+    }
+    /**
+     * Removes notification immediately
+     * @param id id of the notification to be removed
+     */
+    forceRemoveNotification(id) {
+        this.removeNotification(id);
+    }
+    /** @internal */
+    getId() {
+        return `suis-notification--${UNIQUE_ID++}`;
+    }
+    /** @internal */
+    addNotification(message, delay, type) {
+        const notification = {
+            id: this.getId(),
+            message: message,
+            delay: delay,
+            type: type,
+        };
+        this.notifications.set([...this.notifications(), notification]);
+        this.removeNotificationWithDelay(notification.id, notification.delay);
+    }
+    /** @internal */
+    removeNotification(id) {
+        this.notifications.set([
+            ...this.notifications().filter((notification) => notification.id !== id),
+        ]);
+    }
+    /** @internal */
+    removeNotificationWithDelay(id, delay) {
+        setTimeout(() => {
+            this.removeNotification(id);
+        }, delay);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationService, decorators: [{
+            type: Injectable
+        }] });
+
+class SuisNotificationsComponent {
+    constructor() {
+        this.notificationService = inject(SuisNotificationService);
+        this.notifications = this.notificationService.getNotifications();
+    }
+    remove(id) {
+        this.notificationService.forceRemoveNotification(id);
+    }
+    /** @internal */
+    notificationTrackBy(index, notification) {
+        return notification.id;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisNotificationsComponent, isStandalone: true, selector: "suis-notifications", ngImport: i0, template: "<suis-notification\n  *ngFor=\"let notification of notifications(); trackBy: notificationTrackBy\"\n  [notification]=\"notification\"\n  (closed)=\"remove(notification.id)\"\n></suis-notification>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:0;right:0;padding:1rem}:host suis-notification{display:block;margin-top:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: SuisNotificationComponent, selector: "suis-notification", inputs: ["notification"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisNotificationsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-notifications', standalone: true, imports: [CommonModule, SuisNotificationComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<suis-notification\n  *ngFor=\"let notification of notifications(); trackBy: notificationTrackBy\"\n  [notification]=\"notification\"\n  (closed)=\"remove(notification.id)\"\n></suis-notification>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host{position:absolute;bottom:0;right:0;padding:1rem}:host suis-notification{display:block;margin-top:.75rem}\n"] }]
+        }] });
+
 class SuisProgressBarPipe {
     transform(value) {
         return `${(value / 100) * 100}%`;
@@ -899,7 +1020,7 @@ class SuisSelectComponent extends SuisSelectBase {
                 multi: true,
                 useExisting: forwardRef(() => SuisSelectComponent),
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"onExpand()\"\r\n    class=\"suis-select__button\"\r\n    [class.suis-select__button--invalid]=\"invalid\"\r\n    [disabled]=\"readonly\"\r\n  >\r\n    <span class=\"suis-select__button__value\">\r\n      {{ value | suisSelectLabel : options : placeholder }}\r\n    </span>\r\n    <span class=\"suis-select__button__actions\">\r\n      <suis-icon\r\n        *ngIf=\"value\"\r\n        class=\"suis-select__button__cross\"\r\n        [type]=\"SuisIconType.CROSS\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        (click)=\"onClear($event)\"\r\n      ></suis-icon>\r\n      <suis-icon\r\n        class=\"suis-select__button__chevron\"\r\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n      ></suis-icon>\r\n    </span>\r\n  </button>\r\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\r\n    <input\r\n      *ngIf=\"search\"\r\n      [ngModel]=\"searchPhrase\"\r\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\r\n      class=\"suis-select__list__search\"\r\n      type=\"search\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n    />\r\n    <suis-select-option\r\n      *ngFor=\"\r\n        let option of options\r\n          | suisSelectSortOptions\r\n          | suisSelectFilterOptions : searchPhrase\r\n      \"\r\n      [option]=\"option\"\r\n      [templateRef]=\"suisSelectOption?.templateRef\"\r\n      [selected]=\"option.value | suisSelectIsSelected : value\"\r\n      (clicked)=\"onSelect(option.value)\"\r\n    ></suis-select-option>\r\n  </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectLabelPipe, name: "suisSelectLabel" }, { kind: "pipe", type: SuisSelectIsSelectedPipe, name: "suisSelectIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectComponent, decorators: [{
             type: Component,
@@ -918,9 +1039,130 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
                             multi: true,
                             useExisting: forwardRef(() => SuisSelectComponent),
                         },
-                    ], template: "<div class=\"suis-select\">\n  <button\n    type=\"button\"\n    (click)=\"onExpand()\"\n    class=\"suis-select__button\"\n    [class.suis-select__button--invalid]=\"invalid\"\n    [disabled]=\"readonly\"\n  >\n    <span class=\"suis-select__button__value\">\n      {{ value | suisSelectLabel : options : placeholder }}\n    </span>\n    <span class=\"suis-select__button__actions\">\n      <suis-icon\n        *ngIf=\"value\"\n        class=\"suis-select__button__cross\"\n        [type]=\"SuisIconType.CROSS\"\n        size=\"lg\"\n        color=\"primary\"\n        (click)=\"onClear($event)\"\n      ></suis-icon>\n      <suis-icon\n        class=\"suis-select__button__chevron\"\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\n        size=\"lg\"\n        color=\"primary\"\n      ></suis-icon>\n    </span>\n  </button>\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\n    <input\n      *ngIf=\"search\"\n      [ngModel]=\"searchPhrase\"\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\n      class=\"suis-select__list__search\"\n      type=\"search\"\n      [placeholder]=\"searchPlaceholder\"\n    />\n    <suis-select-option\n      *ngFor=\"\n        let option of options\n          | suisSelectSortOptions\n          | suisSelectFilterOptions : searchPhrase\n      \"\n      [option]=\"option\"\n      [templateRef]=\"suisSelectOption?.templateRef\"\n      [selected]=\"option.value | suisSelectIsSelected : value\"\n      (clicked)=\"onSelect(option.value)\"\n    ></suis-select-option>\n  </div>\n</div>\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
+                    ], template: "<div class=\"suis-select\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"onExpand()\"\r\n    class=\"suis-select__button\"\r\n    [class.suis-select__button--invalid]=\"invalid\"\r\n    [disabled]=\"readonly\"\r\n  >\r\n    <span class=\"suis-select__button__value\">\r\n      {{ value | suisSelectLabel : options : placeholder }}\r\n    </span>\r\n    <span class=\"suis-select__button__actions\">\r\n      <suis-icon\r\n        *ngIf=\"value\"\r\n        class=\"suis-select__button__cross\"\r\n        [type]=\"SuisIconType.CROSS\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        (click)=\"onClear($event)\"\r\n      ></suis-icon>\r\n      <suis-icon\r\n        class=\"suis-select__button__chevron\"\r\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n      ></suis-icon>\r\n    </span>\r\n  </button>\r\n  <div *ngIf=\"expanded\" class=\"suis-select__list\">\r\n    <input\r\n      *ngIf=\"search\"\r\n      [ngModel]=\"searchPhrase\"\r\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\r\n      class=\"suis-select__list__search\"\r\n      type=\"search\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n    />\r\n    <suis-select-option\r\n      *ngFor=\"\r\n        let option of options\r\n          | suisSelectSortOptions\r\n          | suisSelectFilterOptions : searchPhrase\r\n      \"\r\n      [option]=\"option\"\r\n      [templateRef]=\"suisSelectOption?.templateRef\"\r\n      [selected]=\"option.value | suisSelectIsSelected : value\"\r\n      (clicked)=\"onSelect(option.value)\"\r\n    ></suis-select-option>\r\n  </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select{position:relative}.suis-select__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select__list__search:focus{outline:none}.suis-select__list::-webkit-scrollbar{width:.5rem}.suis-select__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
         }] });
 
+class SuisSelectMultiChipsPipe {
+    transform(values, options) {
+        const selectedOptions = [];
+        values.forEach((value) => {
+            const selectedOption = options.find((option) => JSON.stringify(option.value) === JSON.stringify(value));
+            if (!selectedOption)
+                throw Error('[SuisSelectMultiLabelPipe] Provided value does not belong to valid values');
+            selectedOptions.push(selectedOption.label);
+        });
+        return selectedOptions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiChipsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiChipsPipe, isStandalone: true, name: "suisSelectMultiChips" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiChipsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectMultiChips',
+                }]
+        }] });
+
+class SuisSelectMultiIsSelectedPipe {
+    transform(optionValue, values) {
+        return values.some((value) => JSON.stringify(value) === JSON.stringify(optionValue));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, isStandalone: true, name: "suisSelectMultiIsSelected" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiIsSelectedPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    standalone: true,
+                    name: 'suisSelectMultiIsSelected',
+                }]
+        }] });
+
+class SuisSelectMultiComponent extends SuisSelectBase {
+    constructor() {
+        super(...arguments);
+        /** @internal */
+        this.values = [];
+        /**
+         * Allows to select duplicated values and remove checkboxes next to options' label. By default set to false.
+         */
+        this.duplicate = false;
+        /**
+         * Sets the color pallette of the chips. Type of SuisColor. By default set to 'primary'.
+         */
+        this.chipColor = 'primary';
+        /**
+         * Sets the color of the chips' cross icon. Type of SuisColor. By default set to 'white'.
+         */
+        this.chipIconColor = 'white';
+    }
+    writeValue(obj) {
+        this.values = obj;
+        this._onChange(this.values);
+        this.cdRef.markForCheck();
+    }
+    onSelect(value) {
+        if (this.duplicate ||
+            !this.values.some((value) => JSON.stringify(value) === JSON.stringify(value))) {
+            this.setValue([...this.values, value]);
+        }
+        else {
+            this.setValue([
+                ...this.values.filter((value) => JSON.stringify(value) !== JSON.stringify(value)),
+            ]);
+        }
+    }
+    onRemove(index) {
+        const values = [...this.values];
+        values.splice(index, 1);
+        this.setValue([...values]);
+    }
+    clearValue() {
+        this.setValue([]);
+    }
+    setValue(value) {
+        this.values = value;
+        this._onChange(this.values);
+        this.changed.emit();
+        this.cdRef.markForCheck();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.0", type: SuisSelectMultiComponent, isStandalone: true, selector: "suis-select-multi", inputs: { duplicate: "duplicate", chipColor: "chipColor", chipIconColor: "chipIconColor" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                multi: true,
+                useExisting: forwardRef(() => SuisSelectMultiComponent),
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"suis-select-multi\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"onExpand()\"\r\n    class=\"suis-select-multi__button\"\r\n    [class.suis-select-multi__button--invalid]=\"invalid\"\r\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\r\n    [disabled]=\"readonly\"\r\n  >\r\n    <span class=\"suis-select-multi__button__value\">\r\n      <ng-container *ngIf=\"!values?.length\">\r\n        {{ placeholder }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"values?.length\">\r\n        <suis-chip\r\n          *ngFor=\"\r\n            let value of values | suisSelectMultiChips : options;\r\n            let index = index\r\n          \"\r\n          [removable]=\"true\"\r\n          [color]=\"chipColor\"\r\n          [iconColor]=\"chipIconColor\"\r\n          (remove)=\"onRemove(index)\"\r\n        >\r\n          {{ value }}\r\n        </suis-chip>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"suis-select-multi__button__actions\">\r\n      <suis-icon\r\n        *ngIf=\"values?.length\"\r\n        class=\"suis-select-multi__button__cross\"\r\n        [type]=\"SuisIconType.CROSS\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        (click)=\"onClear($event)\"\r\n        tabindex=\"0\"\r\n      ></suis-icon>\r\n      <suis-icon\r\n        class=\"suis-select-multi__button__chevron\"\r\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        tabindex=\"0\"\r\n      ></suis-icon>\r\n    </span>\r\n  </button>\r\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\r\n    <input\r\n      *ngIf=\"search\"\r\n      [ngModel]=\"searchPhrase\"\r\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\r\n      class=\"suis-select-multi__list__search\"\r\n      type=\"search\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n    />\r\n    <suis-select-option\r\n      *ngFor=\"\r\n        let option of options\r\n          | suisSelectSortOptions\r\n          | suisSelectFilterOptions : searchPhrase\r\n      \"\r\n      [option]=\"option\"\r\n      [templateRef]=\"suisSelectOption?.templateRef\"\r\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\r\n      [checkbox]=\"!duplicate\"\r\n      (clicked)=\"onSelect(option.value)\"\r\n    ></suis-select-option>\r\n  </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SuisIconComponent, selector: "suis-icon", inputs: ["size", "color", "type", "outlined", "filled", "pointer", "bold"] }, { kind: "component", type: SuisChipComponent, selector: "suis-chip", inputs: ["color", "iconColor", "removable"], outputs: ["remove"] }, { kind: "component", type: SuisSelectOptionComponent, selector: "suis-select-option", inputs: ["option", "templateRef", "selected", "checkbox"], outputs: ["clicked"] }, { kind: "pipe", type: SuisSelectMultiChipsPipe, name: "suisSelectMultiChips" }, { kind: "pipe", type: SuisSelectMultiIsSelectedPipe, name: "suisSelectMultiIsSelected" }, { kind: "pipe", type: SuisSelectSortOptionsPipe, name: "suisSelectSortOptions" }, { kind: "pipe", type: SuisSelectFilterOptionsPipe, name: "suisSelectFilterOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImport: i0, type: SuisSelectMultiComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'suis-select-multi', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        SuisIconComponent,
+                        SuisChipComponent,
+                        SuisSelectOptionComponent,
+                        SuisSelectMultiChipsPipe,
+                        SuisSelectMultiIsSelectedPipe,
+                        SuisSelectSortOptionsPipe,
+                        SuisSelectFilterOptionsPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            multi: true,
+                            useExisting: forwardRef(() => SuisSelectMultiComponent),
+                        },
+                    ], template: "<div class=\"suis-select-multi\">\r\n  <button\r\n    type=\"button\"\r\n    (click)=\"onExpand()\"\r\n    class=\"suis-select-multi__button\"\r\n    [class.suis-select-multi__button--invalid]=\"invalid\"\r\n    [class.suis-select-multi__button--valid]=\"values.length > 0\"\r\n    [disabled]=\"readonly\"\r\n  >\r\n    <span class=\"suis-select-multi__button__value\">\r\n      <ng-container *ngIf=\"!values?.length\">\r\n        {{ placeholder }}\r\n      </ng-container>\r\n      <ng-container *ngIf=\"values?.length\">\r\n        <suis-chip\r\n          *ngFor=\"\r\n            let value of values | suisSelectMultiChips : options;\r\n            let index = index\r\n          \"\r\n          [removable]=\"true\"\r\n          [color]=\"chipColor\"\r\n          [iconColor]=\"chipIconColor\"\r\n          (remove)=\"onRemove(index)\"\r\n        >\r\n          {{ value }}\r\n        </suis-chip>\r\n      </ng-container>\r\n    </span>\r\n    <span class=\"suis-select-multi__button__actions\">\r\n      <suis-icon\r\n        *ngIf=\"values?.length\"\r\n        class=\"suis-select-multi__button__cross\"\r\n        [type]=\"SuisIconType.CROSS\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        (click)=\"onClear($event)\"\r\n        tabindex=\"0\"\r\n      ></suis-icon>\r\n      <suis-icon\r\n        class=\"suis-select-multi__button__chevron\"\r\n        [type]=\"expanded ? SuisIconType.CHEVRON_UP : SuisIconType.CHEVRON_DOWN\"\r\n        size=\"lg\"\r\n        color=\"primary\"\r\n        tabindex=\"0\"\r\n      ></suis-icon>\r\n    </span>\r\n  </button>\r\n  <div *ngIf=\"expanded\" class=\"suis-select-multi__list\">\r\n    <input\r\n      *ngIf=\"search\"\r\n      [ngModel]=\"searchPhrase\"\r\n      (ngModelChange)=\"onSearchPhraseChange($event)\"\r\n      class=\"suis-select-multi__list__search\"\r\n      type=\"search\"\r\n      [placeholder]=\"searchPlaceholder\"\r\n    />\r\n    <suis-select-option\r\n      *ngFor=\"\r\n        let option of options\r\n          | suisSelectSortOptions\r\n          | suisSelectFilterOptions : searchPhrase\r\n      \"\r\n      [option]=\"option\"\r\n      [templateRef]=\"suisSelectOption?.templateRef\"\r\n      [selected]=\"option.value | suisSelectMultiIsSelected : values\"\r\n      [checkbox]=\"!duplicate\"\r\n      (clicked)=\"onSelect(option.value)\"\r\n    ></suis-select-option>\r\n  </div>\r\n</div>\r\n", styles: ["*{margin:0;padding:0;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.suis-select-multi{position:relative}.suis-select-multi__button{width:100%;background-color:#fff;box-shadow:0 2px 5px #00000080;border-radius:.25rem;padding:.5rem 1rem;border:0;min-height:2rem;position:relative;display:flex;align-items:center;justify-content:space-between;padding:.25rem .5rem .25rem 1rem;cursor:pointer}.suis-select-multi__button:focus{box-shadow:0 2px 5px #192a56bf;outline:none}.suis-select-multi__button--invalid{box-shadow:0 2px 5px #ff4757bf}.suis-select-multi__button__value{width:100%;text-align:left;text-overflow:ellipsis;text-wrap:nowrap;overflow:hidden}.suis-select-multi__button__actions{margin-left:.25rem;display:flex;justify-content:right;align-items:center}.suis-select-multi__button--valid{padding-bottom:.125rem}.suis-select-multi__button suis-chip{margin-right:.25rem;margin-bottom:.125rem}.suis-select-multi__button suis-chip:last-child{margin-right:0}.suis-select-multi__button__value{display:flex;flex-wrap:wrap}.suis-select-multi__list{position:absolute;z-index:10;background-color:#fff;box-shadow:0 2px 5px #00000080;border-bottom-left-radius:.25rem;border-bottom-right-radius:.25rem;width:100%;top:2rem;left:0;max-height:12.25rem;overflow-y:auto}.suis-select-multi__list__search{width:100%;border:none;border-bottom:1px solid #dcdde1;padding:.375rem 1rem}.suis-select-multi__list__search:focus{outline:none}.suis-select-multi__list::-webkit-scrollbar{width:.5rem}.suis-select-multi__list::-webkit-scrollbar-track{background:#f5f6fa}.suis-select-multi__list::-webkit-scrollbar-thumb{background:#dcdde1}.suis-select-multi__list::-webkit-scrollbar-thumb:hover{background:#bcbcbc}\n"] }]
+        }], propDecorators: { duplicate: [{
+                type: Input
+            }], chipColor: [{
+                type: Input
+            }], chipIconColor: [{
+                type: Input
+            }] } });
+
 class SuisSpinnerComponent {
     constructor() {
         /**
@@ -983,5 +1225,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisProgressBarComponent, SuisSelectComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
+export { SuisAlertComponent, SuisAnchorButtonComponent, SuisBoxComponent, SuisButtonComponent, SuisButtonOutlinedComponent, SuisChipComponent, SuisContainerComponent, SuisFormFieldComponent, SuisIconComponent, SuisIconType, SuisInputChipsComponent, SuisInputNumberComponent, SuisInputTextComponent, SuisLabelComponent, SuisNgClassPipe, SuisNotificationComponent, SuisNotificationService, SuisNotificationsComponent, SuisProgressBarComponent, SuisSelectComponent, SuisSelectMultiComponent, SuisSelectOptionComponent, SuisSelectOptionDirective, SuisSpinnerComponent, SuisSpinnerContainerComponent };
 //# sourceMappingURL=suis.mjs.map