@libs-ui/components-buttons-group 0.1.1-1

package/README.md

@@ -0,0 +1,131 @@
+# Button Group
+
+## Giới thiệu
+
+`@libs-ui/components-buttons-group` là một component nhóm Button cho Angular, cho phép hiển thị nhiều nút theo hàng, hỗ trợ quản lý trạng thái active và disable cho toàn nhóm.
+
+## Tính năng
+
+- Hiển thị danh sách nút theo hàng ngang
+- Hỗ trợ two-way binding cho chỉ số nút đang active (`indexActive`)
+- Emit sự kiện khi thay đổi nút active (`outChange`)
+- Hỗ trợ disable toàn bộ nhóm nút
+- Tích hợp popover control event (`outFunctionsControl`)
+
+## Cài đặt
+
+```bash
+npm install @libs-ui/components-buttons-group
+```
+
+hoặc
+
+```bash
+yarn add @libs-ui/components-buttons-group
+```
+
+## Sử dụng
+
+### Inline Template
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsButtonsGroupComponent],
+  template: `
+    <libs_ui-components-buttons-group
+      [buttons]="buttons"
+      [(indexActive)]="activeIndex"
+      (outChange)="onChange($event)"></libs_ui-components-buttons-group>
+  `,
+})
+export class ExampleComponent {
+  buttons = [
+    { key: '1', label: 'Option 1' },
+    { key: '2', label: 'Option 2' },
+    { key: '3', label: 'Option 3' },
+  ];
+  activeIndex = 0;
+  onChange(button: any) {
+    console.log('Changed:', button);
+  }
+}
+```
+
+### File HTML riêng
+
+```typescript
+import { Component } from '@angular/core';
+import { LibsUiComponentsButtonsGroupComponent } from '@libs-ui/components-buttons-group';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [LibsUiComponentsButtonsGroupComponent],
+  templateUrl: './example.component.html',
+})
+export class ExampleComponent {
+  buttons = [
+    /* ... */
+  ];
+  activeIndex = 0;
+  onChange(button: any) {}
+}
+```
+
+```html
+<libs_ui-components-buttons-group
+  [buttons]="buttons"
+  [(indexActive)]="activeIndex"
+  (outChange)="onChange($event)"></libs_ui-components-buttons-group>
+```
+
+## Công nghệ sử dụng
+
+- **Angular 18** với standalone components và Signals
+- **Tailwind CSS** 3.x (phong cách demo)
+
+## API Reference
+
+### Inputs
+
+| Tên         | Kiểu             | Mặc định | Mô tả                                   |
+| ----------- | ---------------- | -------- | --------------------------------------- |
+| buttons     | `Array<IButton>` | required | Mảng các nút sẽ hiển thị trong nhóm.    |
+| indexActive | `number`         | `0`      | Chỉ số của nút đang được chọn (từ 0).   |
+| disable     | `boolean`        | `false`  | Nếu true: vô hiệu hóa toàn bộ nhóm nút. |
+
+### Outputs
+
+| Tên                 | Kiểu                           | Mô tả                               |
+| ------------------- | ------------------------------ | ----------------------------------- |
+| outChange           | `(button: IButton) => void`    | Trả về nút vừa được chọn.           |
+| outFunctionsControl | `IPopoverFunctionControlEvent` | Cung cấp API để điều khiển popover. |
+
+### Interfaces
+
+#### `IButton`
+
+| Property       | Type               | Required | Description                                     |
+| -------------- | ------------------ | -------- | ----------------------------------------------- |
+| key            | `string`           | no       | Khóa định danh của nút (unique).                |
+| type           | `TYPE_BUTTON`      | no       | Kiểu giao diện của nút (primary, secondary...). |
+| sizeButton     | `TYPE_SIZE_BUTTON` | no       | Kích thước của nút (nhỏ, trung, lớn).           |
+| iconOnlyType   | `boolean`          | no       | Nếu true: chỉ hiện icon, không hiện nhãn.       |
+| label          | `string`           | no       | Văn bản hiển thị trên nút.                      |
+| disable        | `boolean`          | no       | Vô hiệu hóa nút khi true.                       |
+| classInclude   | `string`           | no       | Class CSS thêm cho container của nút.           |
+| classIconLeft  | `string`           | no       | Class CSS thêm cho icon bên trái.               |
+| classIconRight | `string`           | no       | Class CSS thêm cho icon bên phải.               |
+| classLabel     | `string`           | no       | Class CSS thêm cho nhãn.                        |
+| popover        | `IPopover`         | no       | Cấu hình popover cho nút (nếu cần).             |
+
+#### `IPopoverFunctionControlEvent`
+
+| Property | Type | Required | Description                                         |
+| -------- | ---- | -------- | --------------------------------------------------- |
+| ...      | ...  | ...      | Xem `@libs-ui/components-popover` để biết chi tiết. |

package/esm2022/group.component.mjs

@@ -0,0 +1,36 @@
+import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i0 from "@angular/core";
+export class LibsUiComponentsButtonsGroupComponent {
+    functionsControlPopover = signal(undefined);
+    // #region INPUT
+    buttons = input.required();
+    indexActive = model(0);
+    disable = input(false);
+    // #region OUTPUT
+    outChange = output();
+    outFunctionsControl = output();
+    /* FUNCTIONS */
+    async handlerClickButton(index, button) {
+        if (this.indexActive() === index) {
+            return;
+        }
+        this.indexActive.set(index);
+        this.outChange.emit(button);
+    }
+    async handlerFunctionsControl(control) {
+        this.outFunctionsControl.emit(control);
+        this.functionsControlPopover.set(control);
+    }
+    get FunctionsControl() {
+        return this.functionsControlPopover();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsGroupComponent, isStandalone: true, selector: "libs_ui-components-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, indexActive: { classPropertyName: "indexActive", publicName: "indexActive", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexActive: "indexActiveChange", outChange: "outChange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-buttons-group\">\n  @for (button of buttons(); track button) {\n    <libs_ui-components-buttons-button\n      [type]=\"indexActive() === $index ? 'button-primary' : 'button-primary-revert'\"\n      [label]=\"button.label || ''\"\n      [disable]=\"disable() || button.disable || false\"\n      [classIconLeft]=\"button.classIconLeft || ''\"\n      [classInclude]=\"button.classInclude || ''\"\n      [classIconRight]=\"button.classIconRight || ''\"\n      [popover]=\"button.popover || {}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n      (outClick)=\"handlerClickButton($index, button)\" />\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-buttons-group{display:flex}:host ::ng-deep .libs-ui-buttons-group .libs-ui-button-disable{border:1px solid var(--libs-ui-button-other-color-border, #226ff5)!important}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button:hover{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button-disable{border-left:0!important}:host ::ng-deep .libs-ui-buttons-group>:first-child libs_ui-components-popover .libs-ui-button{border-radius:4px 0 0 4px}:host ::ng-deep .libs-ui-buttons-group>:last-child libs_ui-components-popover .libs-ui-button{border-left:0!important;border-radius:0 4px 4px 0}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-buttons-group', standalone: true, imports: [TranslateModule, LibsUiComponentsButtonsButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"libs-ui-buttons-group\">\n  @for (button of buttons(); track button) {\n    <libs_ui-components-buttons-button\n      [type]=\"indexActive() === $index ? 'button-primary' : 'button-primary-revert'\"\n      [label]=\"button.label || ''\"\n      [disable]=\"disable() || button.disable || false\"\n      [classIconLeft]=\"button.classIconLeft || ''\"\n      [classInclude]=\"button.classInclude || ''\"\n      [classIconRight]=\"button.classIconRight || ''\"\n      [popover]=\"button.popover || {}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n      (outClick)=\"handlerClickButton($index, button)\" />\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-buttons-group{display:flex}:host ::ng-deep .libs-ui-buttons-group .libs-ui-button-disable{border:1px solid var(--libs-ui-button-other-color-border, #226ff5)!important}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button:hover{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button-disable{border-left:0!important}:host ::ng-deep .libs-ui-buttons-group>:first-child libs_ui-components-popover .libs-ui-button{border-radius:4px 0 0 4px}:host ::ng-deep .libs-ui-buttons-group>:last-child libs_ui-components-popover .libs-ui-button{border-left:0!important;border-radius:0 4px 4px 0}\n"] }]
+        }] });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3JvdXAuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vbGlicy11aS9jb21wb25lbnRzL2J1dHRvbnMvZ3JvdXAvc3JjL2dyb3VwLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL2xpYnMtdWkvY29tcG9uZW50cy9idXR0b25zL2dyb3VwL3NyYy9ncm91cC5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNqRyxPQUFPLEVBQVcsc0NBQXNDLEVBQUUsTUFBTSxvQ0FBb0MsQ0FBQztBQUVyRyxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0scUJBQXFCLENBQUM7O0FBV3RELE1BQU0sT0FBTyxxQ0FBcUM7SUFDeEMsdUJBQXVCLEdBQUcsTUFBTSxDQUEyQyxTQUFTLENBQUMsQ0FBQztJQUU5RixnQkFBZ0I7SUFDUCxPQUFPLEdBQUcsS0FBSyxDQUFDLFFBQVEsRUFBa0IsQ0FBQztJQUMzQyxXQUFXLEdBQUcsS0FBSyxDQUFTLENBQUMsQ0FBQyxDQUFDO0lBQy9CLE9BQU8sR0FBRyxLQUFLLENBQVUsS0FBSyxDQUFDLENBQUM7SUFFekMsaUJBQWlCO0lBQ1IsU0FBUyxHQUFHLE1BQU0sRUFBVyxDQUFDO0lBQzlCLG1CQUFtQixHQUFHLE1BQU0sRUFBZ0MsQ0FBQztJQUV0RSxlQUFlO0lBQ0wsS0FBSyxDQUFDLGtCQUFrQixDQUFDLEtBQWEsRUFBRSxNQUFlO1FBQy9ELElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRSxLQUFLLEtBQUssRUFBRSxDQUFDO1lBQ2pDLE9BQU87UUFDVCxDQUFDO1FBQ0QsSUFBSSxDQUFDLFdBQVcsQ0FBQyxHQUFHLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDNUIsSUFBSSxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDOUIsQ0FBQztJQUVTLEtBQUssQ0FBQyx1QkFBdUIsQ0FBQyxPQUFxQztRQUMzRSxJQUFJLENBQUMsbUJBQW1CLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1FBQ3ZDLElBQUksQ0FBQyx1QkFBdUIsQ0FBQyxHQUFHLENBQUMsT0FBTyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUVELElBQVcsZ0JBQWdCO1FBQ3pCLE9BQU8sSUFBSSxDQUFDLHVCQUF1QixFQUFFLENBQUM7SUFDeEMsQ0FBQzt3R0E1QlUscUNBQXFDOzRGQUFyQyxxQ0FBcUMsZ21CQ2RsRCw2b0JBY0EsdzhCREhZLGVBQWUsK0JBQUUsc0NBQXNDOzs0RkFHdEQscUNBQXFDO2tCQVRqRCxTQUFTOytCQUVFLGtDQUFrQyxjQUdoQyxJQUFJLFdBQ1AsQ0FBQyxlQUFlLEVBQUUsc0NBQXNDLENBQUMsbUJBQ2pELHVCQUF1QixDQUFDLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBpbnB1dCwgbW9kZWwsIG91dHB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBJQnV0dG9uLCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtYnV0dG9ucy1idXR0b24nO1xuaW1wb3J0IHsgSVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudCB9IGZyb20gJ0BsaWJzLXVpL2NvbXBvbmVudHMtcG9wb3Zlcic7XG5pbXBvcnQgeyBUcmFuc2xhdGVNb2R1bGUgfSBmcm9tICdAbmd4LXRyYW5zbGF0ZS9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gIHNlbGVjdG9yOiAnbGlic191aS1jb21wb25lbnRzLWJ1dHRvbnMtZ3JvdXAnLFxuICB0ZW1wbGF0ZVVybDogJy4vZ3JvdXAuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybDogJy4vZ3JvdXAuY29tcG9uZW50LnNjc3MnLFxuICBzdGFuZGFsb25lOiB0cnVlLFxuICBpbXBvcnRzOiBbVHJhbnNsYXRlTW9kdWxlLCBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0J1dHRvbkNvbXBvbmVudF0sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBMaWJzVWlDb21wb25lbnRzQnV0dG9uc0dyb3VwQ29tcG9uZW50IHtcbiAgcHJpdmF0ZSBmdW5jdGlvbnNDb250cm9sUG9wb3ZlciA9IHNpZ25hbDxJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkPih1bmRlZmluZWQpO1xuXG4gIC8vICNyZWdpb24gSU5QVVRcbiAgcmVhZG9ubHkgYnV0dG9ucyA9IGlucHV0LnJlcXVpcmVkPEFycmF5PElCdXR0b24+PigpO1xuICByZWFkb25seSBpbmRleEFjdGl2ZSA9IG1vZGVsPG51bWJlcj4oMCk7XG4gIHJlYWRvbmx5IGRpc2FibGUgPSBpbnB1dDxib29sZWFuPihmYWxzZSk7XG5cbiAgLy8gI3JlZ2lvbiBPVVRQVVRcbiAgcmVhZG9ubHkgb3V0Q2hhbmdlID0gb3V0cHV0PElCdXR0b24+KCk7XG4gIHJlYWRvbmx5IG91dEZ1bmN0aW9uc0NvbnRyb2wgPSBvdXRwdXQ8SVBvcG92ZXJGdW5jdGlvbkNvbnRyb2xFdmVudD4oKTtcblxuICAvKiBGVU5DVElPTlMgKi9cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJDbGlja0J1dHRvbihpbmRleDogbnVtYmVyLCBidXR0b246IElCdXR0b24pIHtcbiAgICBpZiAodGhpcy5pbmRleEFjdGl2ZSgpID09PSBpbmRleCkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cbiAgICB0aGlzLmluZGV4QWN0aXZlLnNldChpbmRleCk7XG4gICAgdGhpcy5vdXRDaGFuZ2UuZW1pdChidXR0b24pO1xuICB9XG5cbiAgcHJvdGVjdGVkIGFzeW5jIGhhbmRsZXJGdW5jdGlvbnNDb250cm9sKGNvbnRyb2w6IElQb3BvdmVyRnVuY3Rpb25Db250cm9sRXZlbnQpIHtcbiAgICB0aGlzLm91dEZ1bmN0aW9uc0NvbnRyb2wuZW1pdChjb250cm9sKTtcbiAgICB0aGlzLmZ1bmN0aW9uc0NvbnRyb2xQb3BvdmVyLnNldChjb250cm9sKTtcbiAgfVxuXG4gIHB1YmxpYyBnZXQgRnVuY3Rpb25zQ29udHJvbCgpOiBJUG9wb3ZlckZ1bmN0aW9uQ29udHJvbEV2ZW50IHwgdW5kZWZpbmVkIHtcbiAgICByZXR1cm4gdGhpcy5mdW5jdGlvbnNDb250cm9sUG9wb3ZlcigpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwibGlicy11aS1idXR0b25zLWdyb3VwXCI+XG4gIEBmb3IgKGJ1dHRvbiBvZiBidXR0b25zKCk7IHRyYWNrIGJ1dHRvbikge1xuICAgIDxsaWJzX3VpLWNvbXBvbmVudHMtYnV0dG9ucy1idXR0b25cbiAgICAgIFt0eXBlXT1cImluZGV4QWN0aXZlKCkgPT09ICRpbmRleCA/ICdidXR0b24tcHJpbWFyeScgOiAnYnV0dG9uLXByaW1hcnktcmV2ZXJ0J1wiXG4gICAgICBbbGFiZWxdPVwiYnV0dG9uLmxhYmVsIHx8ICcnXCJcbiAgICAgIFtkaXNhYmxlXT1cImRpc2FibGUoKSB8fCBidXR0b24uZGlzYWJsZSB8fCBmYWxzZVwiXG4gICAgICBbY2xhc3NJY29uTGVmdF09XCJidXR0b24uY2xhc3NJY29uTGVmdCB8fCAnJ1wiXG4gICAgICBbY2xhc3NJbmNsdWRlXT1cImJ1dHRvbi5jbGFzc0luY2x1ZGUgfHwgJydcIlxuICAgICAgW2NsYXNzSWNvblJpZ2h0XT1cImJ1dHRvbi5jbGFzc0ljb25SaWdodCB8fCAnJ1wiXG4gICAgICBbcG9wb3Zlcl09XCJidXR0b24ucG9wb3ZlciB8fCB7fVwiXG4gICAgICAob3V0RnVuY3Rpb25zQ29udHJvbCk9XCJoYW5kbGVyRnVuY3Rpb25zQ29udHJvbCgkZXZlbnQpXCJcbiAgICAgIChvdXRDbGljayk9XCJoYW5kbGVyQ2xpY2tCdXR0b24oJGluZGV4LCBidXR0b24pXCIgLz5cbiAgfVxuPC9kaXY+XG4iXX0=

package/esm2022/index.mjs

@@ -0,0 +1,2 @@
+export * from './group.component';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9ncm91cC9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxtQkFBbUIsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vZ3JvdXAuY29tcG9uZW50JztcbiJdfQ==

package/esm2022/libs-ui-components-buttons-group.mjs

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+export * from './index';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtZ3JvdXAuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9saWJzLXVpL2NvbXBvbmVudHMvYnV0dG9ucy9ncm91cC9zcmMvbGlicy11aS1jb21wb25lbnRzLWJ1dHRvbnMtZ3JvdXAudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7O0dBRUc7QUFFSCxjQUFjLFNBQVMsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbIi8qKlxuICogR2VuZXJhdGVkIGJ1bmRsZSBpbmRleC4gRG8gbm90IGVkaXQuXG4gKi9cblxuZXhwb3J0ICogZnJvbSAnLi9pbmRleCc7XG4iXX0=

package/fesm2022/libs-ui-components-buttons-group.mjs

@@ -0,0 +1,43 @@
+import * as i0 from '@angular/core';
+import { signal, input, model, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';
+import { TranslateModule } from '@ngx-translate/core';
+
+class LibsUiComponentsButtonsGroupComponent {
+    functionsControlPopover = signal(undefined);
+    // #region INPUT
+    buttons = input.required();
+    indexActive = model(0);
+    disable = input(false);
+    // #region OUTPUT
+    outChange = output();
+    outFunctionsControl = output();
+    /* FUNCTIONS */
+    async handlerClickButton(index, button) {
+        if (this.indexActive() === index) {
+            return;
+        }
+        this.indexActive.set(index);
+        this.outChange.emit(button);
+    }
+    async handlerFunctionsControl(control) {
+        this.outFunctionsControl.emit(control);
+        this.functionsControlPopover.set(control);
+    }
+    get FunctionsControl() {
+        return this.functionsControlPopover();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: LibsUiComponentsButtonsGroupComponent, isStandalone: true, selector: "libs_ui-components-buttons-group", inputs: { buttons: { classPropertyName: "buttons", publicName: "buttons", isSignal: true, isRequired: true, transformFunction: null }, indexActive: { classPropertyName: "indexActive", publicName: "indexActive", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { indexActive: "indexActiveChange", outChange: "outChange", outFunctionsControl: "outFunctionsControl" }, ngImport: i0, template: "<div class=\"libs-ui-buttons-group\">\n  @for (button of buttons(); track button) {\n    <libs_ui-components-buttons-button\n      [type]=\"indexActive() === $index ? 'button-primary' : 'button-primary-revert'\"\n      [label]=\"button.label || ''\"\n      [disable]=\"disable() || button.disable || false\"\n      [classIconLeft]=\"button.classIconLeft || ''\"\n      [classInclude]=\"button.classInclude || ''\"\n      [classIconRight]=\"button.classIconRight || ''\"\n      [popover]=\"button.popover || {}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n      (outClick)=\"handlerClickButton($index, button)\" />\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-buttons-group{display:flex}:host ::ng-deep .libs-ui-buttons-group .libs-ui-button-disable{border:1px solid var(--libs-ui-button-other-color-border, #226ff5)!important}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button:hover{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button-disable{border-left:0!important}:host ::ng-deep .libs-ui-buttons-group>:first-child libs_ui-components-popover .libs-ui-button{border-radius:4px 0 0 4px}:host ::ng-deep .libs-ui-buttons-group>:last-child libs_ui-components-popover .libs-ui-button{border-left:0!important;border-radius:0 4px 4px 0}\n"], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "component", type: LibsUiComponentsButtonsButtonComponent, selector: "libs_ui-components-buttons-button", inputs: ["flagMouse", "type", "buttonCustom", "sizeButton", "label", "disable", "isPending", "imageLeft", "classInclude", "classIconLeft", "classIconRight", "classLabel", "iconOnlyType", "popover", "ignoreStopPropagationEvent", "zIndex", "widthLabelPopover", "styleIconLeft", "styleButton", "ignoreFocusWhenInputTab", "ignoreSetClickWhenShowPopover", "ignorePointerEvent", "isActive", "isHandlerEnterDocumentClickButton"], outputs: ["outClick", "outPopoverEvent", "outFunctionsControl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LibsUiComponentsButtonsGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'libs_ui-components-buttons-group', standalone: true, imports: [TranslateModule, LibsUiComponentsButtonsButtonComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"libs-ui-buttons-group\">\n  @for (button of buttons(); track button) {\n    <libs_ui-components-buttons-button\n      [type]=\"indexActive() === $index ? 'button-primary' : 'button-primary-revert'\"\n      [label]=\"button.label || ''\"\n      [disable]=\"disable() || button.disable || false\"\n      [classIconLeft]=\"button.classIconLeft || ''\"\n      [classInclude]=\"button.classInclude || ''\"\n      [classIconRight]=\"button.classIconRight || ''\"\n      [popover]=\"button.popover || {}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n      (outClick)=\"handlerClickButton($index, button)\" />\n  }\n</div>\n", styles: [":host ::ng-deep .libs-ui-buttons-group{display:flex}:host ::ng-deep .libs-ui-buttons-group .libs-ui-button-disable{border:1px solid var(--libs-ui-button-other-color-border, #226ff5)!important}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button:hover{border-radius:0;border-left:0}:host ::ng-deep .libs-ui-buttons-group>:not(:first-child):not(:last-child) libs_ui-components-popover .libs-ui-button-disable{border-left:0!important}:host ::ng-deep .libs-ui-buttons-group>:first-child libs_ui-components-popover .libs-ui-button{border-radius:4px 0 0 4px}:host ::ng-deep .libs-ui-buttons-group>:last-child libs_ui-components-popover .libs-ui-button{border-left:0!important;border-radius:0 4px 4px 0}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LibsUiComponentsButtonsGroupComponent };
+//# sourceMappingURL=libs-ui-components-buttons-group.mjs.map

package/fesm2022/libs-ui-components-buttons-group.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"libs-ui-components-buttons-group.mjs","sources":["../../../../../../libs-ui/components/buttons/group/src/group.component.ts","../../../../../../libs-ui/components/buttons/group/src/group.component.html","../../../../../../libs-ui/components/buttons/group/src/libs-ui-components-buttons-group.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, input, model, output, signal } from '@angular/core';\nimport { IButton, LibsUiComponentsButtonsButtonComponent } from '@libs-ui/components-buttons-button';\nimport { IPopoverFunctionControlEvent } from '@libs-ui/components-popover';\nimport { TranslateModule } from '@ngx-translate/core';\n\n@Component({\n  // eslint-disable-next-line @angular-eslint/component-selector\n  selector: 'libs_ui-components-buttons-group',\n  templateUrl: './group.component.html',\n  styleUrl: './group.component.scss',\n  standalone: true,\n  imports: [TranslateModule, LibsUiComponentsButtonsButtonComponent],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class LibsUiComponentsButtonsGroupComponent {\n  private functionsControlPopover = signal<IPopoverFunctionControlEvent | undefined>(undefined);\n\n  // #region INPUT\n  readonly buttons = input.required<Array<IButton>>();\n  readonly indexActive = model<number>(0);\n  readonly disable = input<boolean>(false);\n\n  // #region OUTPUT\n  readonly outChange = output<IButton>();\n  readonly outFunctionsControl = output<IPopoverFunctionControlEvent>();\n\n  /* FUNCTIONS */\n  protected async handlerClickButton(index: number, button: IButton) {\n    if (this.indexActive() === index) {\n      return;\n    }\n    this.indexActive.set(index);\n    this.outChange.emit(button);\n  }\n\n  protected async handlerFunctionsControl(control: IPopoverFunctionControlEvent) {\n    this.outFunctionsControl.emit(control);\n    this.functionsControlPopover.set(control);\n  }\n\n  public get FunctionsControl(): IPopoverFunctionControlEvent | undefined {\n    return this.functionsControlPopover();\n  }\n}\n","<div class=\"libs-ui-buttons-group\">\n  @for (button of buttons(); track button) {\n    <libs_ui-components-buttons-button\n      [type]=\"indexActive() === $index ? 'button-primary' : 'button-primary-revert'\"\n      [label]=\"button.label || ''\"\n      [disable]=\"disable() || button.disable || false\"\n      [classIconLeft]=\"button.classIconLeft || ''\"\n      [classInclude]=\"button.classInclude || ''\"\n      [classIconRight]=\"button.classIconRight || ''\"\n      [popover]=\"button.popover || {}\"\n      (outFunctionsControl)=\"handlerFunctionsControl($event)\"\n      (outClick)=\"handlerClickButton($index, button)\" />\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/group.component.d.ts

@@ -0,0 +1,16 @@
+import { IButton } from '@libs-ui/components-buttons-button';
+import { IPopoverFunctionControlEvent } from '@libs-ui/components-popover';
+import * as i0 from "@angular/core";
+export declare class LibsUiComponentsButtonsGroupComponent {
+    private functionsControlPopover;
+    readonly buttons: import("@angular/core").InputSignal<IButton[]>;
+    readonly indexActive: import("@angular/core").ModelSignal<number>;
+    readonly disable: import("@angular/core").InputSignal<boolean>;
+    readonly outChange: import("@angular/core").OutputEmitterRef<IButton>;
+    readonly outFunctionsControl: import("@angular/core").OutputEmitterRef<IPopoverFunctionControlEvent>;
+    protected handlerClickButton(index: number, button: IButton): Promise<void>;
+    protected handlerFunctionsControl(control: IPopoverFunctionControlEvent): Promise<void>;
+    get FunctionsControl(): IPopoverFunctionControlEvent | undefined;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LibsUiComponentsButtonsGroupComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LibsUiComponentsButtonsGroupComponent, "libs_ui-components-buttons-group", never, { "buttons": { "alias": "buttons"; "required": true; "isSignal": true; }; "indexActive": { "alias": "indexActive"; "required": false; "isSignal": true; }; "disable": { "alias": "disable"; "required": false; "isSignal": true; }; }, { "indexActive": "indexActiveChange"; "outChange": "outChange"; "outFunctionsControl": "outFunctionsControl"; }, never, never, true, never>;
+}

package/index.d.ts

@@ -0,0 +1 @@
+export * from './group.component';

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@libs-ui/components-buttons-group",
+  "version": "0.1.1-1",
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@libs-ui/components-buttons-button": "0.1.1-1",
+    "@libs-ui/components-popover": "0.1.1-1",
+    "@ngx-translate/core": "^15.0.0"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/libs-ui-components-buttons-group.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "esm2022": "./esm2022/libs-ui-components-buttons-group.mjs",
+      "esm": "./esm2022/libs-ui-components-buttons-group.mjs",
+      "default": "./fesm2022/libs-ui-components-buttons-group.mjs"
+    }
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}