@seniorsistemas/angular-components 16.9.3 → 16.10.0

package/bundles/seniorsistemas-angular-components.umd.js

@@ -12010,6 +12010,91 @@
         ProgressBarColors["Yellow"] = "yellow";
     })(exports.ProgressBarColors || (exports.ProgressBarColors = {}));
 
+
+    (function (SplitButtonType) {
+        SplitButtonType["Primary"] = "primary";
+        SplitButtonType["Secondary"] = "secondary";
+        SplitButtonType["Default"] = "default";
+    })(exports.SplitButtonType || (exports.SplitButtonType = {}));
+
+    var SplitButtonComponent = /** @class */ (function () {
+        function SplitButtonComponent(eRef) {
+            this.eRef = eRef;
+            this.disabled = false;
+            this.type = exports.SplitButtonType.Primary;
+            this.buttonClicked = new core.EventEmitter();
+            this.open = false;
+        }
+        SplitButtonComponent.prototype.onClickout = function (event) {
+            if (!this.eRef.nativeElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        };
+        SplitButtonComponent.prototype.onButtonClick = function () {
+            if (!this.disabled) {
+                this.buttonClicked.emit();
+                this.closeDropdown();
+            }
+        };
+        SplitButtonComponent.prototype.onDropdownClick = function () {
+            if (!this.disabled) {
+                this.open = !this.open;
+            }
+        };
+        SplitButtonComponent.prototype.onOptionClick = function (option) {
+            option.action && option.action();
+            this.closeDropdown();
+        };
+        SplitButtonComponent.prototype.closeDropdown = function () {
+            this.open = false;
+        };
+        SplitButtonComponent.ctorParameters = function () { return [
+            { type: core.ElementRef }
+        ]; };
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "disabled", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "iconClass", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "label", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "type", void 0);
+        __decorate([
+            core.Input()
+        ], SplitButtonComponent.prototype, "options", void 0);
+        __decorate([
+            core.Output()
+        ], SplitButtonComponent.prototype, "buttonClicked", void 0);
+        __decorate([
+            core.HostListener("document:click", ["$event"])
+        ], SplitButtonComponent.prototype, "onClickout", null);
+        SplitButtonComponent = __decorate([
+            core.Component({
+                selector: "s-split-button",
+                template: "<div class=\"split-button\" [ngClass]=\"{\n        'split-button--primary': type == 'primary',\n        'split-button--secondary': type == 'secondary',\n        'split-button--default': type == 'default',\n        'split-button--disabled': disabled\n    }\">\n    <button class=\"button\" (click)=\"onButtonClick()\">\n        <span class=\"button__icon\" [ngClass]=\"iconClass\"></span>\n        <span class=\"button__label\">{{ label }}</span>\n    </button>\n    <button class=\"dropdown\" (click)=\"onDropdownClick()\">\n        <span class=\"dropdown__icon\" [ngClass]=\"{\n                'far': true,\n                'fa-chevron-down': !open,\n                'fa-chevron-up': open\n            }\">\n        </span>\n    </button>\n</div>\n\n<ul *ngIf=\"this.open\" class=\"options\">\n    <li *ngFor=\"let option of options\" (click)=\"onOptionClick(option)\">\n        {{ option.title }}\n    </li>\n</ul>",
+                styles: [".split-button{display:-ms-flexbox;display:flex;-webkit-user-select:none;-ms-user-select:none;user-select:none}.split-button .button{-ms-flex-align:center;align-items:center;border:none;border-radius:4px 0 0 4px;display:-ms-flexbox;display:flex;padding:8px 8px 8px 12px;transition:.3s ease-in-out}.split-button .button__icon{font-size:16px;padding:0 4px}.split-button .button__title{font-family:\"Open Sans\",sans-serif;font-size:14px;font-weight:400;line-height:21px}.split-button .dropdown{-ms-flex-align:center;align-items:center;border:none;border-left:1px solid #608190;border-radius:0 4px 4px 0;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;padding:12px 8px;transition:.3s ease-in-out}.split-button--disabled{opacity:.5}.split-button--primary .button,.split-button--primary .dropdown{background-color:#428bca;color:#fff}.split-button--primary:not(.split-button--primary--disabled) .button,.split-button--primary:not(.split-button--primary--disabled) .dropdown{cursor:pointer}.split-button--primary:not(.split-button--primary--disabled) .button:hover,.split-button--primary:not(.split-button--primary--disabled) .dropdown:hover{background-color:#063951}.split-button--secondary .button,.split-button--secondary .dropdown{background-color:#7892a1;color:#fff}.split-button--secondary:not(.split-button--secondary--disabled) .button,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown{cursor:pointer}.split-button--secondary:not(.split-button--secondary--disabled) .button:hover,.split-button--secondary:not(.split-button--secondary--disabled) .dropdown:hover{background-color:#697882}.split-button--default .button,.split-button--default .dropdown{background-color:unset;border:1px solid #d8d8d8;color:#333}.split-button--default:not(.split-button--default--disabled) .button,.split-button--default:not(.split-button--default--disabled) .dropdown{cursor:pointer}.split-button--default:not(.split-button--default--disabled) .button:hover,.split-button--default:not(.split-button--default--disabled) .dropdown:hover{background-color:#d8d8d8}.options{background-color:#fff;border-radius:4px;box-shadow:0 1px 5px rgba(0,0,0,.25);display:inline-block;list-style:none;margin:2px 0;padding:8px 0;position:absolute;-webkit-user-select:none;-ms-user-select:none;user-select:none}.options li{color:#333;cursor:pointer;font-family:\"Open Sans\",sans-serif;font-weight:400;font-size:14px;line-height:21px;padding:8px 16px}.options li:hover{background-color:#d8d8d8}"]
+            })
+        ], SplitButtonComponent);
+        return SplitButtonComponent;
+    }());
+
+    var SplitButtonModule = /** @class */ (function () {
+        function SplitButtonModule() {
+        }
+        SplitButtonModule = __decorate([
+            core.NgModule({
+                imports: [common.CommonModule],
+                declarations: [SplitButtonComponent],
+                exports: [SplitButtonComponent],
+            })
+        ], SplitButtonModule);
+        return SplitButtonModule;
+    }());
+
     var PanelComponent = /** @class */ (function () {
         function PanelComponent() {
             this.toggleable = true;
@@ -12412,6 +12497,8 @@
     exports.SelectOption = SelectOption;
     exports.SidebarComponent = SidebarComponent;
     exports.SidebarModule = SidebarModule;
+    exports.SplitButtonComponent = SplitButtonComponent;
+    exports.SplitButtonModule = SplitButtonModule;
     exports.StatsCardComponent = StatsCardComponent;
     exports.StatsCardModule = StatsCardModule;
     exports.StepsComponent = StepsComponent;