@gipisistemas/ng-core 1.1.4 → 1.1.5

package/bundles/gipisistemas-ng-core.umd.js

@@ -720,6 +720,32 @@
         StringUtil.truncateWithEllipses = function (text, max) {
             return text.trim().substring(0, max - 1) + (text.trim().length > max) ? '...' : '';
         };
+        /** Codifica a string em Base64 */
+        StringUtil.encodeBase64 = function (input) {
+            if (this.isEmpty(input)) {
+                return '';
+            }
+            var utf8Encoder = new TextEncoder();
+            var utf8Bytes = utf8Encoder.encode(input);
+            var binary = '';
+            utf8Bytes.forEach(function (byte) {
+                binary += String.fromCharCode(byte);
+            });
+            return btoa(binary);
+        };
+        /** Decodifica a string Base64 */
+        StringUtil.decodeBase64 = function (input) {
+            if (this.isEmpty(input)) {
+                return '';
+            }
+            var binary = atob(input);
+            var utf8Decoder = new TextDecoder();
+            var utf8Bytes = new Uint8Array(binary.length);
+            for (var i = 0; i < binary.length; i++) {
+                utf8Bytes[i] = binary.charCodeAt(i);
+            }
+            return utf8Decoder.decode(utf8Bytes);
+        };
         StringUtil.EMPTY = '';
         return StringUtil;
     }());
@@ -4303,7 +4329,7 @@
         SelectSearchComponent = SelectSearchComponent_1 = __decorate([
             core.Component({
                 selector: 'itss-input-search',
-                template: "<!-- Espa\u00E7o reservado para ajustar o deslocamento vertical dos elementos mat-option -->\n<input matInput\n       class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: o mat-datepicker-content mat-tab-header \u00E9 necess\u00E1rio para herdar as cores do tema do material, consulte PR n\u00BA 22 -->\n<div #innerSelectSearch\n     class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n     [ngClass]=\"{'mat-select-search-inner-multiple': matSelect.multiple, 'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible() }\">\n\n    <mat-checkbox *ngIf=\"_isToggleAllCheckboxVisible()\"\n                  class=\"mat-select-search-toggle-all-checkbox\"\n                  color=\"primary\"\n                  [color]=\"matFormField?.color\"\n                  [disabled]=\"searching\"\n                  [matTooltip]=\"toggleAllCheckboxTooltipMessage\"\n                  matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n                  [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\n                  [(ngModel)]=\"toggleAllCheckboxChecked\"\n                  [(indeterminate)]=\"toggleAllCheckboxIndeterminate\">\n    </mat-checkbox>\n\n    <input class=\"mat-select-search-input mat-input-element\"\n           autocomplete=\"off\"\n           [type]=\"type\"\n           [formControl]=\"_formControl\"\n           #searchSelectInput\n           (keydown)=\"_handleKeydown($event)\"\n           (keyup)=\"_handleKeyup($event)\"\n           (blur)=\"onBlur()\"\n           [placeholder]=\"placeholderLabel\"\n           [attr.aria-label]=\"ariaLabel\">\n\n    <mat-spinner *ngIf=\"searching\"\n                 class=\"mat-select-search-spinner\"\n                 diameter=\"16\">\n    </mat-spinner>\n\n    <button *ngIf=\"!hideClearSearchButton && value && !searching\"\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"_reset(true)\"\n            class=\"mat-select-search-clear\">\n        <ng-content *ngIf=\"clearIcon; else defaultIcon\"\n                    select=\"[itssSelectSearchClear]\">\n        </ng-content>\n\n        <ng-template #defaultIcon>\n            <mat-icon [svgIcon]=\"closeSvgIcon\">\n                {{ !closeSvgIcon ? closeIcon : null }}\n            </mat-icon>\n        </ng-template>\n    </button>\n\n    <ng-content select=\".mat-select-search-custom-header-content\"> </ng-content>\n\n    <mat-divider> </mat-divider>\n</div>\n\n<div *ngIf=\"(_showNoEntriesFound$ | async) && !searching\"\n     class=\"mat-select-search-no-entries-found\">\n    <ng-content *ngIf=\"noEntriesFound; else defaultNoEntriesFound\"\n                select=\"[itssSelectNoEntriesFound]\">\n    </ng-content>\n\n    <ng-template #defaultNoEntriesFound>\n        {{ noEntriesFoundLabel }}\n    </ng-template>\n</div>\n",
+                template: "<!-- Espa\u00E7o reservado para ajustar o deslocamento vertical dos elementos mat-option -->\n<input matInput\n       class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: o mat-datepicker-content mat-tab-header \u00E9 necess\u00E1rio para herdar as cores do tema do material, consulte PR n\u00BA 22 -->\n<div #innerSelectSearch\n     class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\"\n     [ngClass]=\"{'mat-select-search-inner-multiple': matSelect.multiple, 'mat-select-search-inner-toggle-all': _isToggleAllCheckboxVisible() }\">\n\n    <mat-checkbox *ngIf=\"_isToggleAllCheckboxVisible()\"\n                  class=\"mat-select-search-toggle-all-checkbox\"\n                  color=\"primary\"\n                  [color]=\"matFormField?.color\"\n                  [disabled]=\"searching\"\n                  [matTooltip]=\"toggleAllCheckboxTooltipMessage\"\n                  matTooltipClass=\"ngx-mat-select-search-toggle-all-tooltip\"\n                  [matTooltipPosition]=\"toggleAllCheckboxTooltipPosition\"\n                  [(ngModel)]=\"toggleAllCheckboxChecked\"\n                  [(indeterminate)]=\"toggleAllCheckboxIndeterminate\">\n    </mat-checkbox>\n\n    <input class=\"mat-select-search-input mat-input-element\"\n           autocomplete=\"off\"\n           [type]=\"type\"\n           [formControl]=\"_formControl\"\n           #searchSelectInput\n           (keydown)=\"_handleKeydown($event)\"\n           (keyup)=\"_handleKeyup($event)\"\n           (blur)=\"onBlur()\"\n           [placeholder]=\"placeholderLabel\"\n           [attr.aria-label]=\"ariaLabel\"\n           aria-hidden=\"false\">\n\n    <mat-spinner *ngIf=\"searching\"\n                 class=\"mat-select-search-spinner\"\n                 diameter=\"16\">\n    </mat-spinner>\n\n    <button *ngIf=\"!hideClearSearchButton && value && !searching\"\n            mat-icon-button\n            aria-label=\"Clear\"\n            (click)=\"_reset(true)\"\n            class=\"mat-select-search-clear\">\n        <ng-content *ngIf=\"clearIcon; else defaultIcon\"\n                    select=\"[itssSelectSearchClear]\">\n        </ng-content>\n\n        <ng-template #defaultIcon>\n            <mat-icon [svgIcon]=\"closeSvgIcon\">\n                {{ !closeSvgIcon ? closeIcon : null }}\n            </mat-icon>\n        </ng-template>\n    </button>\n\n    <ng-content select=\".mat-select-search-custom-header-content\"> </ng-content>\n\n    <mat-divider> </mat-divider>\n</div>\n\n<div *ngIf=\"(_showNoEntriesFound$ | async) && !searching\"\n     class=\"mat-select-search-no-entries-found\">\n    <ng-content *ngIf=\"noEntriesFound; else defaultNoEntriesFound\"\n                select=\"[itssSelectNoEntriesFound]\">\n    </ng-content>\n\n    <ng-template #defaultNoEntriesFound>\n        {{ noEntriesFoundLabel }}\n    </ng-template>\n</div>",
                 providers: [
                     {
                         provide: forms.NG_VALUE_ACCESSOR,
@@ -8553,7 +8579,7 @@
             var _this = this;
             if (this._overlayRef) {
                 /** Only subscribe to backdrop if trigger event is click */
-                if (this.triggerEvent === 'click' && this.backdropCloseOnClick === true) {
+                if (this.triggerEvent !== 'hover' && this.backdropCloseOnClick) {
                     this._overlayRef.backdropClick()
                         .pipe(operators.takeUntil(this.popoverClosed), operators.takeUntil(this._onDestroy))
                         .subscribe(function () {
@@ -8637,8 +8663,8 @@
         GIPIPopoverTrigger.prototype._getOverlayConfig = function () {
             var overlayState = new overlay.OverlayConfig();
             overlayState.positionStrategy = this._getPosition();
-            /** Display overlay backdrop if trigger event is click */
-            if (this.triggerEvent === 'click') {
+            /** Display overlay backdrop if trigger event is different of hover */
+            if (this.triggerEvent !== 'hover') {
                 overlayState.hasBackdrop = true;
                 overlayState.backdropClass = 'cdk-overlay-transparent-backdrop';
             }
@@ -8927,6 +8953,26 @@
             this.onBlur = new core.EventEmitter(true);
         }
         GIPIButtonComponent_1 = GIPIButtonComponent;
+        Object.defineProperty(GIPIButtonComponent.prototype, "internalButtonClass", {
+            get: function () {
+                return {
+                    'button-base': true,
+                    'button-primary': (this.isButtonPrimary || this.isButtonPrimaryIcon),
+                    'button-primary-icon': this.isButtonPrimaryIcon,
+                    'button-secondary': (this.isButtonSecondary || this.isButtonSecondaryIcon),
+                    'button-secondary-icon': this.isButtonSecondaryIcon,
+                    'button-tertiary': (this.isButtonTertiary || this.isButtonTertiaryIcon),
+                    'button-tertiary-icon': this.isButtonTertiaryIcon,
+                    'button-link': this.isButtonLink,
+                    'button-only-icon': this.isButtonIcon,
+                    'button-for-input': this.isForInput,
+                    'button-notification': this.notification,
+                    'button-action': this.isButtonAction
+                };
+            },
+            enumerable: false,
+            configurable: true
+        });
         GIPIButtonComponent.prototype.ngOnInit = function () { };
         GIPIButtonComponent.prototype.ngOnDestroy = function () {
             if (this.popoverTrigger) {
@@ -9126,7 +9172,7 @@
             core.Component({
                 selector: "gipi-button[gipi-primary], gipi-button[gipi-primary-icon], gipi-button[gipi-secondary], gipi-button[gipi-secondary-icon],\n               gipi-button[gipi-tertiary], gipi-button[gipi-link], gipi-button[gipi-icon], gipi-button[gipi-action]",
                 exportAs: 'gipiButton',
-                template: "<button [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.type]=\"type\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : label\"\n        [attr.title]=\"title ? title : label\"\n        [disabled]=\"disabled || loading\"\n        [matTooltip]=\"tooltip\"\n        role=\"button\"\n        [class]=\"buttonClass\"\n        [ngClass]=\"{'button-base': true,\n                    'button-primary': (isButtonPrimary || isButtonPrimaryIcon),\n                    'button-primary-icon': isButtonPrimaryIcon,\n                    'button-secondary': (isButtonSecondary || isButtonSecondaryIcon),\n                    'button-secondary-icon': isButtonSecondaryIcon,\n                    'button-tertiary': (isButtonTertiary || isButtonTertiaryIcon),\n                    'button-tertiary-icon': isButtonTertiaryIcon,\n                    'button-link': isButtonLink,\n                    'button-only-icon': isButtonIcon,\n                    'button-for-input': isForInput,\n                    'button-notification': notification,\n                    'button-action': isButtonAction}\"\n        [style.padding.px]=\"buttonPadding\"\n        #popoverTrigger=\"popoverTrigger\"\n        [popoverTriggerFor]=\"btnPopover\"\n        [popoverTriggerOn]=\"popover ? 'click' : 'none'\"\n        [popoverBackdropCloseOnClick]=\"true\"\n        (opened)=\"onOpenPopover.emit()\"\n        (closed)=\"onClosePopover.emit()\"\n        (click)=\"handleClick($event)\"\n        (focus)=\"handleFocus($event)\"\n        (blur)=\"handleBlur($event)\">\n\n    <span [ngClass]=\"{'button-content': true,\n                      'button-disabled': disabled,\n                      'button-icon-left': ((iconPos === 'left') && label),\n                      'button-icon-right': ((iconPos === 'right') && label),\n                      'button-icon-top': ((iconPos === 'top') && label),\n                      'button-icon-bottom': ((iconPos === 'bottom') && label),\n                      'button-icon-center': (iconPos === 'center')}\">\n\n        <mat-icon *ngIf=\"svgIcon || icon\"\n                  [svgIcon]=\"svgIcon\"\n                  [style.width.px]=\"iconWidth\"\n                  [style.height.px]=\"iconHeight\"\n                  [style.font-size.px]=\"iconWidth || iconHeight\">\n            {{ (!svgIcon && icon) ? icon : '' }}\n        </mat-icon>\n\n        <span class=\"button-label\"\n              [attr.aria-hidden]=\"(icon || svgIcon) && !label\"\n              *ngIf=\"!isButtonIcon && label\">\n            {{ label }}\n        </span>\n    </span>\n\n</button>\n<gipi-overlay *ngIf=\"overlay && !popover\"\n              [(visible)]=\"_overlayVisible\"\n              [appendTo]=\"'body'\"\n              (onShow)=\"onShowOverlay.emit()\">\n    <ng-content> </ng-content>\n</gipi-overlay>\n\n<gipi-popover #btnPopover=\"gipiPopover\"\n              [popoverOverlapTrigger]=\"false\"\n              [popoverCloseOnClick]=\"false\"\n              [popoverArrowWidth]=\"0\"\n              [popoverOffsetY]=\"3\"\n              [fxHide]=\"!popover\">\n    <div class=\"btn-popover-content\">\n        <ng-content> </ng-content>\n    </div>\n</gipi-popover>",
+                template: "<button [attr.id]=\"id\"\n        [attr.name]=\"name\"\n        [attr.type]=\"type\"\n        [attr.aria-label]=\"ariaLabel ? ariaLabel : label\"\n        [attr.title]=\"title ? title : label\"\n        [disabled]=\"disabled || loading\"\n        [matTooltip]=\"tooltip\"\n        role=\"button\"\n        [class]=\"buttonClass\"\n        [ngClass]=\"internalButtonClass\"\n        [style.padding.px]=\"buttonPadding\"\n        #popoverTrigger=\"popoverTrigger\"\n        [popoverTriggerFor]=\"btnPopover\"\n        [popoverTriggerOn]=\"popover ? 'click' : 'none'\"\n        [popoverBackdropCloseOnClick]=\"true\"\n        (opened)=\"onOpenPopover.emit()\"\n        (closed)=\"onClosePopover.emit()\"\n        (click)=\"handleClick($event)\"\n        (focus)=\"handleFocus($event)\"\n        (blur)=\"handleBlur($event)\">\n    <span [ngClass]=\"{'button-content': true,\n                      'button-disabled': disabled,\n                      'button-icon-left': ((iconPos === 'left') && label),\n                      'button-icon-right': ((iconPos === 'right') && label),\n                      'button-icon-top': ((iconPos === 'top') && label),\n                      'button-icon-bottom': ((iconPos === 'bottom') && label),\n                      'button-icon-center': (iconPos === 'center')}\">\n        <mat-icon *ngIf=\"svgIcon || icon\"\n                  [svgIcon]=\"svgIcon\"\n                  [style.width.px]=\"iconWidth\"\n                  [style.height.px]=\"iconHeight\"\n                  [style.font-size.px]=\"iconWidth || iconHeight\">\n            {{ (!svgIcon && icon) ? icon : '' }}\n        </mat-icon>\n\n        <span class=\"button-label\"\n              [attr.aria-hidden]=\"(icon || svgIcon) && !label\"\n              *ngIf=\"!isButtonIcon && label\">\n            {{ label }}\n        </span>\n    </span>\n</button>\n\n<gipi-overlay *ngIf=\"overlay && !popover\"\n              [(visible)]=\"_overlayVisible\"\n              [appendTo]=\"'body'\"\n              (onShow)=\"onShowOverlay.emit()\">\n    <ng-content> </ng-content>\n</gipi-overlay>\n\n<gipi-popover #btnPopover=\"gipiPopover\"\n              [popoverOverlapTrigger]=\"false\"\n              [popoverCloseOnClick]=\"false\"\n              [popoverArrowWidth]=\"0\"\n              [popoverOffsetY]=\"3\"\n              [fxHide]=\"!popover\">\n    <div class=\"btn-popover-content\">\n        <ng-content> </ng-content>\n    </div>\n</gipi-popover>",
                 providers: [
                     {
                         provide: forms.NG_VALUE_ACCESSOR,
@@ -13685,7 +13731,7 @@
             core.Component({
                 selector: "gipi-input-search",
                 exportAs: 'gipiInputSearch',
-                template: "<!-- Espa\u00E7o reservado para ajustar o deslocamento vertical dos elementos mat-option -->\n<input matInput\n       class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: o mat-datepicker-content mat-tab-header \u00E9 necess\u00E1rio para herdar as cores do tema do material, consulte PR n\u00BA 22 -->\n<div #innerSelectSearch\n     class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\">\n\n    <input class=\"mat-select-search-input mat-input-element\"\n           aria-label=\"Pesquisa suspensa\"\n           autocomplete=\"off\"\n           type=\"text\"\n           #searchSelectInput\n           [placeholder]=\"placeholderLabel\"\n           [formControl]=\"_formControl\"\n           (keydown)=\"_handleKeydown($event)\"\n           (keyup)=\"_handleKeyup($event)\"\n           (blur)=\"onBlur()\">\n\n    <mat-spinner *ngIf=\"searching\"\n                 class=\"mat-select-search-spinner\"\n                 diameter=\"16\">\n    </mat-spinner>\n\n    <button *ngIf=\"!hideClearSearchButton && value && !searching\"\n            class=\"mat-select-search-clear\"\n            aria-label=\"Limpar\"\n            mat-icon-button\n            (click)=\"_reset(true)\">\n        <mat-icon> close </mat-icon>\n    </button>\n\n    <mat-divider> </mat-divider>\n</div>\n\n<div *ngIf=\"(_showNoEntriesFound$ | async) && !searching\"\n     class=\"mat-select-search-no-entries-found\">\n    <mat-icon>sentiment_very_dissatisfied</mat-icon>\n    Nenhum registro foi encontrado\n</div>",
+                template: "<!-- Espa\u00E7o reservado para ajustar o deslocamento vertical dos elementos mat-option -->\n<input matInput\n       class=\"mat-select-search-input mat-select-search-hidden\" />\n\n<!-- Note: o mat-datepicker-content mat-tab-header \u00E9 necess\u00E1rio para herdar as cores do tema do material, consulte PR n\u00BA 22 -->\n<div #innerSelectSearch\n     class=\"mat-select-search-inner mat-typography mat-datepicker-content mat-tab-header\">\n\n    <input class=\"mat-select-search-input mat-input-element\"\n           aria-label=\"Pesquisa suspensa\"\n           aria-hidden=\"false\"\n           autocomplete=\"off\"\n           type=\"text\"\n           #searchSelectInput\n           [placeholder]=\"placeholderLabel\"\n           [formControl]=\"_formControl\"\n           (keydown)=\"_handleKeydown($event)\"\n           (keyup)=\"_handleKeyup($event)\"\n           (blur)=\"onBlur()\">\n\n    <mat-spinner *ngIf=\"searching\"\n                 class=\"mat-select-search-spinner\"\n                 diameter=\"16\">\n    </mat-spinner>\n\n    <button *ngIf=\"!hideClearSearchButton && value && !searching\"\n            class=\"mat-select-search-clear\"\n            aria-label=\"Limpar\"\n            mat-icon-button\n            (click)=\"_reset(true)\">\n        <mat-icon> close </mat-icon>\n    </button>\n\n    <mat-divider> </mat-divider>\n</div>\n\n<div *ngIf=\"(_showNoEntriesFound$ | async) && !searching\"\n     class=\"mat-select-search-no-entries-found\">\n    <mat-icon>sentiment_very_dissatisfied</mat-icon>\n    Nenhum registro foi encontrado\n</div>",
                 providers: [
                     {
                         provide: forms.NG_VALUE_ACCESSOR,
@@ -24763,11 +24809,253 @@
     }());
 
     var nextUniqueId$m = 0;
+    var GIPISplitButtonComponent = /** @class */ (function () {
+        function GIPISplitButtonComponent(elementRef) {
+            this.elementRef = elementRef;
+            this._uniqueId = nextUniqueId$m++;
+            this._name = "gipi-split-button-" + this._uniqueId;
+            this.idBtnDefault = "gipi-split-button-default-" + this._uniqueId;
+            this.idBtnMenu = "gipi-split-button-menu-" + this._uniqueId;
+            this.isSplitButtonPrimary = this._hasHostAttributes('gipi-primary');
+            this.isSplitButtonSecondary = this._hasHostAttributes('gipi-secondary');
+            this.isSplitButtonTertiary = this._hasHostAttributes('gipi-tertiary');
+            this.isSplitButtonAction = this._hasHostAttributes('gipi-action');
+            this.id = this._name;
+            this.name = this._name;
+            this.type = 'button';
+            this.ariaLabel = '';
+            this.title = '';
+            this.label = '';
+            this.disabled = false;
+            this.loading = false;
+            this.tooltip = '';
+            this.splitOptions = [];
+            this.onOpenPopover = new core.EventEmitter();
+            this.onClosePopover = new core.EventEmitter();
+            this.onClick = new core.EventEmitter(true);
+            this.onFocus = new core.EventEmitter(true);
+            this.onBlur = new core.EventEmitter(true);
+        }
+        GIPISplitButtonComponent_1 = GIPISplitButtonComponent;
+        GIPISplitButtonComponent.prototype.ngOnInit = function () { };
+        GIPISplitButtonComponent.prototype.ngOnDestroy = function () {
+            if (this.popoverTrigger) {
+                this.popoverTrigger.destroyPopover();
+            }
+        };
+        GIPISplitButtonComponent.prototype.getHostElement = function () {
+            return this.elementRef.nativeElement;
+        };
+        GIPISplitButtonComponent.prototype._hasHostAttributes = function () {
+            var _this = this;
+            var attributes = [];
+            for (var _i = 0; _i < arguments.length; _i++) {
+                attributes[_i] = arguments[_i];
+            }
+            return attributes.some(function (attribute) { return _this.getHostElement().hasAttribute(attribute); });
+        };
+        GIPISplitButtonComponent.prototype.btnIdAndName = function () {
+            var uniqueId = nextUniqueId$m++;
+            return {
+                btnDefault: "gipi-split-button-default-" + uniqueId,
+                btnMenu: "gipi-split-button-menu-" + uniqueId,
+            };
+        };
+        GIPISplitButtonComponent.prototype.getInternalButtonClass = function (isBtnDefault) {
+            return {
+                'button-default': isBtnDefault,
+                'button-menu': !isBtnDefault,
+                'button-primary': this.isSplitButtonPrimary,
+                'button-secondary': this.isSplitButtonSecondary,
+                'button-tertiary': this.isSplitButtonTertiary,
+                'button-action': this.isSplitButtonAction,
+            };
+        };
+        GIPISplitButtonComponent.prototype.showPopover = function () {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                this.popoverTrigger.openPopover();
+            }
+        };
+        GIPISplitButtonComponent.prototype.closePopover = function () {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                this.popoverTrigger.closePopover();
+            }
+        };
+        GIPISplitButtonComponent.prototype.handleClick = function (event) {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                this.onClick.emit(event);
+                this.closePopover();
+                event.stopPropagation();
+            }
+        };
+        GIPISplitButtonComponent.prototype.handleFocus = function (event) {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                this.onFocus.emit(event);
+                event.stopPropagation();
+            }
+        };
+        GIPISplitButtonComponent.prototype.handleBlur = function (event) {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                this.onBlur.emit(event);
+                event.stopPropagation();
+            }
+        };
+        GIPISplitButtonComponent.prototype.handleClickBtnMenu = function (event) {
+            if (this.disabled || this.loading) {
+                return;
+            }
+            else {
+                if (!ObjectUtil.isNull(this.popoverTrigger)) {
+                    this.popoverTrigger.togglePopover();
+                }
+                event.stopPropagation();
+            }
+        };
+        GIPISplitButtonComponent.prototype.handleClickBtnSplitOption = function (option) {
+            if (this.disabled || this.loading || !option || option.disabled || !option.clickFn) {
+                return;
+            }
+            else {
+                option.clickFn();
+                this.closePopover();
+            }
+        };
+        GIPISplitButtonComponent.prototype.onResize = function (event) {
+            if (this.popoverTrigger) {
+                this.popoverTrigger.closePopover();
+                event.stopPropagation();
+            }
+        };
+        var GIPISplitButtonComponent_1;
+        GIPISplitButtonComponent.ctorParameters = function () { return [
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.ViewChild(GIPIPopoverTrigger, { static: false }),
+            __metadata("design:type", GIPIPopoverTrigger)
+        ], GIPISplitButtonComponent.prototype, "popoverTrigger", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "id", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "name", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "type", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "ariaLabel", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "title", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "buttonClass", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], GIPISplitButtonComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", Boolean)
+        ], GIPISplitButtonComponent.prototype, "loading", void 0);
+        __decorate([
+            core.Input(),
+            __metadata("design:type", String)
+        ], GIPISplitButtonComponent.prototype, "tooltip", void 0);
+        __decorate([
+            core.Input('options'),
+            __metadata("design:type", Array)
+        ], GIPISplitButtonComponent.prototype, "splitOptions", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], GIPISplitButtonComponent.prototype, "onOpenPopover", void 0);
+        __decorate([
+            core.Output(),
+            __metadata("design:type", core.EventEmitter)
+        ], GIPISplitButtonComponent.prototype, "onClosePopover", void 0);
+        __decorate([
+            core.Output('click'),
+            __metadata("design:type", core.EventEmitter)
+        ], GIPISplitButtonComponent.prototype, "onClick", void 0);
+        __decorate([
+            core.Output('focus'),
+            __metadata("design:type", core.EventEmitter)
+        ], GIPISplitButtonComponent.prototype, "onFocus", void 0);
+        __decorate([
+            core.Output('blur'),
+            __metadata("design:type", core.EventEmitter)
+        ], GIPISplitButtonComponent.prototype, "onBlur", void 0);
+        __decorate([
+            core.HostListener('window:resize', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [UIEvent]),
+            __metadata("design:returntype", void 0)
+        ], GIPISplitButtonComponent.prototype, "onResize", null);
+        GIPISplitButtonComponent = GIPISplitButtonComponent_1 = __decorate([
+            core.Component({
+                selector: "gipi-split-button[gipi-primary], gipi-split-button[gipi-secondary],\n               gipi-split-button[gipi-tertiary], gipi-split-button[gipi-action]",
+                exportAs: 'gipiSplitButton',
+                template: "<div [matTooltip]=\"tooltip\"\n     [class]=\"buttonClass || ''\"\n     [class.button-base]=\"true\"\n     [class.disabled]=\"disabled || loading\"\n     #popoverTrigger=\"popoverTrigger\"\n     [popoverTriggerFor]=\"btnPopover\"\n     [popoverTriggerOn]=\"'none'\"\n     [popoverBackdropCloseOnClick]=\"true\"\n     (opened)=\"onOpenPopover.emit()\"\n     (closed)=\"onClosePopover.emit()\">\n    <button [attr.id]=\"idBtnDefault\"\n            [attr.name]=\"idBtnDefault\"\n            [attr.type]=\"type\"\n            [attr.aria-label]=\"ariaLabel ? ariaLabel : label\"\n            [attr.title]=\"title ? title : label\"\n            [disabled]=\"disabled || loading\"\n            [ngClass]=\"getInternalButtonClass(true)\"\n            role=\"button\"\n            (click)=\"handleClick($event)\"\n            (focus)=\"handleFocus($event)\"\n            (blur)=\"handleBlur($event)\">\n        {{ label ? label : '' }}\n    </button>\n    <button [attr.id]=\"idBtnMenu\"\n            [attr.name]=\"idBtnMenu\"\n            [attr.type]=\"type\"\n            [attr.aria-label]=\"ariaLabel ? ariaLabel : label\"\n            [attr.title]=\"title ? title : label\"\n            [disabled]=\"disabled || loading\"\n            [ngClass]=\"getInternalButtonClass(false)\"\n            role=\"button\"\n            (click)=\"handleClickBtnMenu($event)\">\n        <mat-icon [@indicatorRotate]=\"popoverTrigger?.popoverOpen ? 'opened': 'closed'\"> expand_more </mat-icon>\n    </button>\n</div>\n\n<gipi-popover #btnPopover=\"gipiPopover\"\n              [popoverOverlapTrigger]=\"false\"\n              [popoverCloseOnClick]=\"false\"\n              [popoverArrowWidth]=\"0\"\n              [popoverOffsetY]=\"3\">\n    <div class=\"btn-popover-content\">\n        <button class=\"btn-split-option\"\n                *ngFor=\"let option of splitOptions\"\n                [disabled]=\"option?.disabled\"\n                (click)=\"handleClickBtnSplitOption(option)\">\n            {{ option.label }}\n        </button>\n    </div>\n</gipi-popover>",
+                providers: [
+                    {
+                        provide: forms.NG_VALUE_ACCESSOR,
+                        useExisting: core.forwardRef(function () { return GIPISplitButtonComponent_1; }),
+                        multi: true
+                    }
+                ],
+                host: {
+                    'class': 'gipi-split-button',
+                    '[attr.id]': 'id',
+                    '[attr.name]': 'name',
+                },
+                animations: [
+                    animations.trigger('indicatorRotate', [
+                        animations.state('closed', animations.style({ transform: 'rotate(0deg)' })),
+                        animations.state('opened', animations.style({ transform: 'rotate(-180deg)' })),
+                        animations.transition('opened <=> closed', animations.animate('225ms cubic-bezier(0.4,0.0,0.2,1)')),
+                    ])
+                ],
+                styles: [".button-base{display:flex;flex-direction:row;justify-content:center;border-radius:4px;font-weight:600;font-size:1.4rem;line-height:1.6rem;cursor:pointer;outline:0;white-space:nowrap;text-decoration:none;vertical-align:middle;text-align:center;box-shadow:1px 1px 5px 0 rgba(0,0,0,.1);transition:.2s;width:100%;max-height:4rem;border:1px solid transparent;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.button-base.disabled{cursor:not-allowed!important;box-shadow:none}.button-base>button{display:flex;align-items:center;justify-content:center;border:none;outline:0;box-shadow:none;width:100%;height:40px;padding:12px 16px;overflow:hidden;border-radius:inherit;cursor:inherit;font-size:inherit;font-weight:inherit;white-space:nowrap;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;position:relative}.button-base>button:not(.disabled):active{opacity:.8}.button-base .button-default{border-top-right-radius:0!important;border-bottom-right-radius:0!important}.button-base .button-menu{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;border-top-left-radius:0!important;border-bottom-left-radius:0!important}.button-primary:not(:disabled),.button-primary:not(:disabled)>mat-icon{background-color:#e0313e;color:#fff;fill:#fff}.button-primary:not(:disabled).button-default,.button-primary:not(:disabled)>mat-icon.button-default{border-right:1px solid #9f232c}.button-primary:not(:disabled) svg,.button-primary:not(:disabled) svg g path,.button-primary:not(:disabled) svg path,.button-primary:not(:disabled)>mat-icon svg,.button-primary:not(:disabled)>mat-icon svg g path,.button-primary:not(:disabled)>mat-icon svg path{color:#fff;fill:#fff}.button-primary:disabled,.button-primary:disabled>mat-icon{background-color:#d1d2d4;color:#9a9da2;fill:#9a9da2}.button-primary:disabled.button-default,.button-primary:disabled>mat-icon.button-default{border-right:1px solid #9a9da2}.button-primary:disabled svg,.button-primary:disabled svg g path,.button-primary:disabled svg path,.button-primary:disabled>mat-icon svg,.button-primary:disabled>mat-icon svg g path,.button-primary:disabled>mat-icon svg path{color:#9a9da2;fill:#9a9da2}.button-primary:not(:disabled):hover,.button-primary:not(:disabled):hover>mat-icon{background-color:#cc2d38;color:#fff;fill:#fff}.button-primary:not(:disabled):hover svg,.button-primary:not(:disabled):hover svg g path,.button-primary:not(:disabled):hover svg path,.button-primary:not(:disabled):hover>mat-icon svg,.button-primary:not(:disabled):hover>mat-icon svg g path,.button-primary:not(:disabled):hover>mat-icon svg path{color:#fff;fill:#fff}.button-secondary{background-color:transparent}.button-secondary:not(:disabled),.button-secondary:not(:disabled)>mat-icon{border-color:#595959;color:#595959;fill:#595959}.button-secondary:not(:disabled).button-default,.button-secondary:not(:disabled)>mat-icon.button-default{border-right:1px solid #595959}.button-secondary:not(:disabled) svg,.button-secondary:not(:disabled) svg g path,.button-secondary:not(:disabled) svg path,.button-secondary:not(:disabled)>mat-icon svg,.button-secondary:not(:disabled)>mat-icon svg g path,.button-secondary:not(:disabled)>mat-icon svg path{color:#595959;fill:#595959}.button-secondary:disabled,.button-secondary:disabled>mat-icon{border-color:#d1d2d4;background-color:#d1d2d4;color:#9a9da2;fill:#9a9da2}.button-secondary:disabled.button-default,.button-secondary:disabled>mat-icon.button-default{border-right:1px solid #9a9da2}.button-secondary:disabled svg,.button-secondary:disabled svg g path,.button-secondary:disabled svg path,.button-secondary:disabled>mat-icon svg,.button-secondary:disabled>mat-icon svg g path,.button-secondary:disabled>mat-icon svg path{color:#9a9da2;fill:#9a9da2}.button-secondary:not(:disabled):hover,.button-secondary:not(:disabled):hover>mat-icon{border-color:#595959;background-color:#e0e1e2;color:#595959;fill:#595959}.button-secondary:not(:disabled):hover svg,.button-secondary:not(:disabled):hover svg g path,.button-secondary:not(:disabled):hover svg path,.button-secondary:not(:disabled):hover>mat-icon svg,.button-secondary:not(:disabled):hover>mat-icon svg g path,.button-secondary:not(:disabled):hover>mat-icon svg path{color:#595959;fill:#595959}.button-tertiary{background-color:#e7ebee;box-shadow:none}.button-tertiary:not(:disabled),.button-tertiary:not(:disabled)>mat-icon{color:#595959;fill:#595959}.button-tertiary:not(:disabled).button-default,.button-tertiary:not(:disabled)>mat-icon.button-default{border-right:1px solid #595959}.button-tertiary:not(:disabled) svg,.button-tertiary:not(:disabled) svg g path,.button-tertiary:not(:disabled) svg path,.button-tertiary:not(:disabled)>mat-icon svg,.button-tertiary:not(:disabled)>mat-icon svg g path,.button-tertiary:not(:disabled)>mat-icon svg path{color:#595959;fill:#595959}.button-tertiary:disabled,.button-tertiary:disabled>mat-icon{background-color:#d1d2d4;color:#9a9da2;fill:#9a9da2}.button-tertiary:disabled.button-default,.button-tertiary:disabled>mat-icon.button-default{border-right:1px solid #9a9da2}.button-tertiary:disabled svg,.button-tertiary:disabled svg g path,.button-tertiary:disabled svg path,.button-tertiary:disabled>mat-icon svg,.button-tertiary:disabled>mat-icon svg g path,.button-tertiary:disabled>mat-icon svg path{color:#9a9da2;fill:#9a9da2}.button-tertiary:not(:disabled):hover,.button-tertiary:not(:disabled):hover>mat-icon{background-color:#e0e1e2;color:#595959;fill:#595959}.button-tertiary:not(:disabled):hover svg,.button-tertiary:not(:disabled):hover svg g path,.button-tertiary:not(:disabled):hover svg path,.button-tertiary:not(:disabled):hover>mat-icon svg,.button-tertiary:not(:disabled):hover>mat-icon svg g path,.button-tertiary:not(:disabled):hover>mat-icon svg path{color:#595959;fill:#595959}.button-action{background-color:transparent;box-shadow:none;display:flex;justify-content:flex-start!important}.button-action:not(:disabled),.button-action:not(:disabled)>mat-icon{color:#262626;fill:#262626}.button-action:not(:disabled).button-default,.button-action:not(:disabled)>mat-icon.button-default{border-right:1px solid #262626}.button-action:not(:disabled) svg,.button-action:not(:disabled) svg g path,.button-action:not(:disabled) svg path,.button-action:not(:disabled)>mat-icon svg,.button-action:not(:disabled)>mat-icon svg g path,.button-action:not(:disabled)>mat-icon svg path{color:#262626;fill:#262626}.button-action:disabled,.button-action:disabled>mat-icon{color:#9a9da2;fill:#9a9da2}.button-action:disabled.button-default,.button-action:disabled>mat-icon.button-default{border-right:1px solid #9a9da2}.button-action:disabled svg,.button-action:disabled svg g path,.button-action:disabled svg path,.button-action:disabled>mat-icon svg,.button-action:disabled>mat-icon svg g path,.button-action:disabled>mat-icon svg path{color:#9a9da2;fill:#9a9da2}.button-action:not(:disabled):hover,.button-action:not(:disabled):hover>mat-icon{background-color:#f5f5f6;color:#262626;fill:#262626}.button-action:not(:disabled):hover svg,.button-action:not(:disabled):hover svg g path,.button-action:not(:disabled):hover svg path,.button-action:not(:disabled):hover>mat-icon svg,.button-action:not(:disabled):hover>mat-icon svg g path,.button-action:not(:disabled):hover>mat-icon svg path{color:#262626;fill:#262626}.disabled,:disabled{pointer-events:none!important}.btn-popover-content{display:flex;flex-direction:column;gap:.8rem;background-color:#fff;border-radius:4px;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);padding:8px}.btn-split-option{width:100%;padding:.8rem;border-radius:.4rem;border:1px solid transparent;text-align:left;outline:0;background-color:transparent;cursor:pointer}.btn-split-option:not(:disabled){color:#595959}.btn-split-option:disabled{border-color:#d1d2d4;background-color:#d1d2d4;color:#9a9da2;cursor:not-allowed}.btn-split-option:not(:disabled):hover{border-color:#595959;background-color:#e0e1e2;color:#595959}"]
+            }),
+            __metadata("design:paramtypes", [core.ElementRef])
+        ], GIPISplitButtonComponent);
+        return GIPISplitButtonComponent;
+    }());
+
+    var nextUniqueId$n = 0;
     var GIPITextareaComponent = /** @class */ (function () {
         function GIPITextareaComponent(elementRef, _changeDetectorRef) {
             this.elementRef = elementRef;
             this._changeDetectorRef = _changeDetectorRef;
-            this._name = "gipi-textarea-" + nextUniqueId$m++;
+            this._name = "gipi-textarea-" + nextUniqueId$n++;
             this.id = this._name;
             this.name = this._name;
             this.label = '';
@@ -25154,6 +25442,7 @@
         GIPIEmptyStateComponent,
         GIPICardComponent,
         GIPITextareaComponent,
+        GIPISplitButtonComponent,
         // Tabs
         GIPITabGroupComponent,
         GIPITabComponent,
@@ -28742,6 +29031,7 @@
     exports.GIPISidenavContainerComponent = GIPISidenavContainerComponent;
     exports.GIPISlideToggleComponent = GIPISlideToggleComponent;
     exports.GIPISortModel = GIPISortModel;
+    exports.GIPISplitButtonComponent = GIPISplitButtonComponent;
     exports.GIPIStepperComponent = GIPIStepperComponent;
     exports.GIPITabComponent = GIPITabComponent;
     exports.GIPITabGroupComponent = GIPITabGroupComponent;