@seniorsistemas/angular-components 17.27.1-feature-sds-110-8be5f7f5 → 17.27.1-feature-sds-110-1bb20c20

package/fesm2022/seniorsistemas-angular-components-picklist.mjs

@@ -231,10 +231,10 @@ class PicklistComponent {
         this.itensToSelectChange.emit(parseValueEmit(this.itensToSelect));
         this.selectedItensChange.emit(parseValueEmit(this.selectedItens));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PicklistComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: PicklistComponent, selector: "s-picklist", inputs: { itensToSelect: "itensToSelect", selectedItens: "selectedItens", availableItensLabel: "availableItensLabel", availableItensPlaceholder: "availableItensPlaceholder", addSelectedItensLabel: "addSelectedItensLabel", addAllItensLabel: "addAllItensLabel", selectedItensLabel: "selectedItensLabel", selectedItensPlaceholder: "selectedItensPlaceholder", removeSelectedItemsLabel: "removeSelectedItemsLabel", removeAllItemsLabel: "removeAllItemsLabel", showCheckbox: "showCheckbox", filterBy: "filterBy" }, outputs: { selectedItensChange: "selectedItensChange", itensToSelectChange: "itensToSelectChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template\n    #previewRender\n    let-itens=\"itens\"\n    let-template=\"template\"\n>\n    <section class=\"picklist-items\">\n        @for (item of itens; track $index) {\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        }\n    </section>\n</ng-template>\n\n<ng-template\n    #picklistItensRender\n    let-id=\"id\"\n    let-itens=\"itens\"\n    let-template=\"template\"\n    let-listConnectedTo=\"listConnectedTo\"\n>\n    <div\n        class=\"picklist-items\"\n        cdkDropList\n        [id]=\"id\"\n        [cdkDropListSortingDisabled]=\"true\"\n        [cdkDropListData]=\"itens\"\n        [cdkDropListConnectedTo]=\"listConnectedTo\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        @for (item of itens; track $index) {\n            <div\n                cdkDrag\n                [cdkDragDisabled]=\"item.disabled\"\n                [cdkDragData]=\"item\"\n                (click)=\"toggleSelected(item, id)\"\n                (cdkDragStarted)=\"onDragStart($event, id)\"\n                (cdkDragReleased)=\"onDragRelease()\"\n                class=\"picklist-item\"\n                [class.picklist-disabled]=\"item.disabled\"\n                [class.picklist-item-invisible]=\"item.invisible\"\n                [class.picklist-item-active]=\"item.selected\"\n            >\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        class=\"input-checkbox\"\n                        [(ngModel)]=\"item.selected\"\n                        [disabled]=\"item.disabled\"\n                    />\n                }\n                <div class=\"picklist-content\">\n                    <ng-container *ngTemplateOutlet=\"template; context: { item: item.data, selected: item.selected, disabled: item.disabled }\"></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"></ng-container>\n                </ng-container>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template\n    #checkboxTitleRender\n    let-disabled=\"disabled\"\n    let-checked=\"checked\"\n    let-changeFn=\"changeFn\"\n>\n    @if (showCheckbox) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($event.target)\"\n        />\n    }\n</ng-template>\n\n<div class=\"picklist-container\">\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy && showCheckbox) {\n                <div class=\"picklist-filter\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                    @if (filterBy) {\n                        <input\n                            type=\"text\"\n                            class=\"input-search\"\n                            [(ngModel)]=\"availableItensFilter\"\n                            (ngModelChange)=\"filterItensToSelect()\"\n                            [placeholder]=\"availableItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                        />\n                    }\n                </div>\n            }\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: itensToSelectId,\n                        itens: itensToSelectFilterUtil.filteredItensToSelect,\n                        template: itemToSelectTemplate,\n                        listConnectedTo: selectedItensId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"addSelectedItensLabel || 'platform.angular_components.add' | translate\"\n                priority=\"primary\"\n                rightIconClass=\"fa fa-fw fa-arrow-right\"\n                [disabled]=\"!canAddItens\"\n                (clicked)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"add(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div\n                class=\"picklist-filter\"\n                *ngIf=\"filterBy && showCheckbox\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        checkboxTitleRender;\n                        context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\n                    \"\n                ></ng-container>\n                @if (filterBy) {\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                    />\n                }\n            </div>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"removeSelectedItemsLabel || 'platform.angular_components.remove' | translate\"\n                priority=\"primary\"\n                iconClass=\"fa fa-fw fa-arrow-left\"\n                [disabled]=\"!canRemoveItens\"\n                [auxiliary]=\"false\"\n                (clicked)=\"remove()\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"remove(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n</div>\n", styles: [".picklist-container{display:flex;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:flex;flex-direction:column;flex:1}.picklist-container .picklist-item-container .picklist-box{border:1px solid #dedce5;padding:8px;height:100%;min-width:200px}.picklist-container .picklist-item-container .picklist-box .picklist-filter{display:flex;width:100%}.picklist-container .picklist-item-container .picklist-box .picklist-filter .input-search{border:1px solid #dedce5;min-height:35px;width:100%;border-radius:3px;margin-bottom:10px;margin-top:10px;padding:0 8px;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:flex;align-items:center}.picklist-container .picklist-item-container .picklist-box .picklist-title-container .picklist-title{font-family:Open Sans;font-size:14px;font-weight:700;line-height:21px;text-underline-position:from-font;text-decoration-skip-ink:none}.picklist-container .picklist-item-container .picklist-box .picklist-items{max-height:23em;overflow:auto;height:100%;min-height:55px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-content{width:100%;height:100%;padding-right:8px;border-radius:3px;margin-bottom:8px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item{height:55px;border:3px;display:flex}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:not(.picklist-disabled){cursor:pointer}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:hover:not(.picklist-disabled,.picklist-item-active,.picklist-item-invisible){background-color:#f1f7f8}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-active:not(.picklist-item-invisible){background-color:#d5e8ec}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-disabled{opacity:.5;background-color:#fbfafc}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-invisible{display:none!important}.picklist-container .picklist-item-container .buttons-container{padding-top:10px;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: PicklistComponent, selector: "s-picklist", inputs: { itensToSelect: "itensToSelect", selectedItens: "selectedItens", availableItensLabel: "availableItensLabel", availableItensPlaceholder: "availableItensPlaceholder", addSelectedItensLabel: "addSelectedItensLabel", addAllItensLabel: "addAllItensLabel", selectedItensLabel: "selectedItensLabel", selectedItensPlaceholder: "selectedItensPlaceholder", removeSelectedItemsLabel: "removeSelectedItemsLabel", removeAllItemsLabel: "removeAllItemsLabel", showCheckbox: "showCheckbox", filterBy: "filterBy" }, outputs: { selectedItensChange: "selectedItensChange", itensToSelectChange: "itensToSelectChange" }, queries: [{ propertyName: "templates", predicate: TemplateDirective }], usesOnChanges: true, ngImport: i0, template: "<ng-template\n    #previewRender\n    let-itens=\"itens\"\n    let-template=\"template\"\n>\n    <section class=\"picklist-items\">\n        @for (item of itens; track $index) {\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        }\n    </section>\n</ng-template>\n\n<ng-template\n    #picklistItensRender\n    let-id=\"id\"\n    let-itens=\"itens\"\n    let-template=\"template\"\n    let-listConnectedTo=\"listConnectedTo\"\n>\n    <div\n        class=\"picklist-items\"\n        cdkDropList\n        [id]=\"id\"\n        [cdkDropListSortingDisabled]=\"true\"\n        [cdkDropListData]=\"itens\"\n        [cdkDropListConnectedTo]=\"listConnectedTo\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        @for (item of itens; track $index) {\n            <div\n                cdkDrag\n                [cdkDragDisabled]=\"item.disabled\"\n                [cdkDragData]=\"item\"\n                (click)=\"toggleSelected(item, id)\"\n                (cdkDragStarted)=\"onDragStart($event, id)\"\n                (cdkDragReleased)=\"onDragRelease()\"\n                class=\"picklist-item\"\n                [class.picklist-disabled]=\"item.disabled\"\n                [class.picklist-item-invisible]=\"item.invisible\"\n                [class.picklist-item-active]=\"item.selected\"\n            >\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        class=\"input-checkbox\"\n                        [(ngModel)]=\"item.selected\"\n                        [disabled]=\"item.disabled\"\n                    />\n                }\n                <div class=\"picklist-content\">\n                    <ng-container *ngTemplateOutlet=\"template; context: { item: item.data, selected: item.selected, disabled: item.disabled }\"></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"></ng-container>\n                </ng-container>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template\n    #checkboxTitleRender\n    let-disabled=\"disabled\"\n    let-checked=\"checked\"\n    let-changeFn=\"changeFn\"\n>\n    @if (showCheckbox) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($event.target)\"\n        />\n    }\n</ng-template>\n\n<div class=\"picklist-container\">\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy && showCheckbox) {\n                <div class=\"picklist-filter\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                    @if (filterBy) {\n                        <input\n                            type=\"text\"\n                            class=\"input-search\"\n                            [(ngModel)]=\"availableItensFilter\"\n                            (ngModelChange)=\"filterItensToSelect()\"\n                            [placeholder]=\"availableItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                        />\n                    }\n                </div>\n            }\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: itensToSelectId,\n                        itens: itensToSelectFilterUtil.filteredItensToSelect,\n                        template: itemToSelectTemplate,\n                        listConnectedTo: selectedItensId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"addSelectedItensLabel || 'platform.angular_components.add' | translate\"\n                priority=\"primary\"\n                rightIconClass=\"fa fa-fw fa-arrow-right\"\n                [disabled]=\"!canAddItens\"\n                (clicked)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"add(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div\n                class=\"picklist-filter\"\n                *ngIf=\"filterBy && showCheckbox\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        checkboxTitleRender;\n                        context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\n                    \"\n                ></ng-container>\n                @if (filterBy) {\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                    />\n                }\n            </div>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"removeSelectedItemsLabel || 'platform.angular_components.remove' | translate\"\n                priority=\"primary\"\n                iconClass=\"fa fa-fw fa-arrow-left\"\n                [disabled]=\"!canRemoveItens\"\n                [auxiliary]=\"false\"\n                (clicked)=\"remove()\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"remove(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n</div>\n", styles: [".picklist-container{display:flex;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:flex;flex-direction:column;flex:1}.picklist-container .picklist-item-container .picklist-box{border:1px solid #dedce5;padding:8px;height:100%;min-width:200px}.picklist-container .picklist-item-container .picklist-box .picklist-filter{display:flex;width:100%}.picklist-container .picklist-item-container .picklist-box .picklist-filter .input-search{border:1px solid #dedce5;min-height:35px;width:100%;border-radius:3px;margin-bottom:10px;margin-top:10px;padding:0 8px;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:flex;align-items:center}.picklist-container .picklist-item-container .picklist-box .picklist-title-container .picklist-title{font-family:Open Sans;font-size:14px;font-weight:700;line-height:21px;text-underline-position:from-font;text-decoration-skip-ink:none}.picklist-container .picklist-item-container .picklist-box .picklist-items{max-height:23em;overflow:auto;height:100%;min-height:55px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-content{width:100%;height:100%;padding-right:8px;border-radius:3px;margin-bottom:8px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item{height:55px;border:3px;display:flex}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:not(.picklist-disabled){cursor:pointer}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:hover:not(.picklist-disabled,.picklist-item-active,.picklist-item-invisible){background-color:#f1f7f8}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-active:not(.picklist-item-invisible){background-color:#d5e8ec}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-disabled{opacity:.5;background-color:#fbfafc}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-invisible{display:none!important}.picklist-container .picklist-item-container .buttons-container{padding-top:10px;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i2.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i2.CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "directive", type: i3.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: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }, { kind: "pipe", type: i5.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PicklistComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-picklist', template: "<ng-template\n    #previewRender\n    let-itens=\"itens\"\n    let-template=\"template\"\n>\n    <section class=\"picklist-items\">\n        @for (item of itens; track $index) {\n            <ng-container *ngTemplateOutlet=\"template; context: { item: item.data }\"></ng-container>\n        }\n    </section>\n</ng-template>\n\n<ng-template\n    #picklistItensRender\n    let-id=\"id\"\n    let-itens=\"itens\"\n    let-template=\"template\"\n    let-listConnectedTo=\"listConnectedTo\"\n>\n    <div\n        class=\"picklist-items\"\n        cdkDropList\n        [id]=\"id\"\n        [cdkDropListSortingDisabled]=\"true\"\n        [cdkDropListData]=\"itens\"\n        [cdkDropListConnectedTo]=\"listConnectedTo\"\n        (cdkDropListDropped)=\"drop($event)\"\n    >\n        @for (item of itens; track $index) {\n            <div\n                cdkDrag\n                [cdkDragDisabled]=\"item.disabled\"\n                [cdkDragData]=\"item\"\n                (click)=\"toggleSelected(item, id)\"\n                (cdkDragStarted)=\"onDragStart($event, id)\"\n                (cdkDragReleased)=\"onDragRelease()\"\n                class=\"picklist-item\"\n                [class.picklist-disabled]=\"item.disabled\"\n                [class.picklist-item-invisible]=\"item.invisible\"\n                [class.picklist-item-active]=\"item.selected\"\n            >\n                @if (showCheckbox) {\n                    <input\n                        type=\"checkbox\"\n                        class=\"input-checkbox\"\n                        [(ngModel)]=\"item.selected\"\n                        [disabled]=\"item.disabled\"\n                    />\n                }\n                <div class=\"picklist-content\">\n                    <ng-container *ngTemplateOutlet=\"template; context: { item: item.data, selected: item.selected, disabled: item.disabled }\"></ng-container>\n                </div>\n                <ng-container *cdkDragPreview>\n                    <ng-container *ngTemplateOutlet=\"previewRender; context: { itens: selectedItensMap, template: template }\"></ng-container>\n                </ng-container>\n            </div>\n        }\n    </div>\n</ng-template>\n\n<ng-template\n    #checkboxTitleRender\n    let-disabled=\"disabled\"\n    let-checked=\"checked\"\n    let-changeFn=\"changeFn\"\n>\n    @if (showCheckbox) {\n        <input\n            class=\"input-checkbox\"\n            type=\"checkbox\"\n            [disabled]=\"disabled\"\n            [checked]=\"checked\"\n            (change)=\"changeFn($event.target)\"\n        />\n    }\n</ng-template>\n\n<div class=\"picklist-container\">\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ availableItensLabel || 'platform.angular_components.available-items' | translate }}\n                </span>\n            </div>\n            @if (filterBy && showCheckbox) {\n                <div class=\"picklist-filter\">\n                    <ng-container\n                        *ngTemplateOutlet=\"\n                            checkboxTitleRender;\n                            context: {\n                                disabled: disableItensToSelectCheckbox,\n                                checked: itensToSelectAllSelected,\n                                changeFn: checkAllAvailableItensChange.bind(this),\n                            }\n                        \"\n                    ></ng-container>\n                    @if (filterBy) {\n                        <input\n                            type=\"text\"\n                            class=\"input-search\"\n                            [(ngModel)]=\"availableItensFilter\"\n                            (ngModelChange)=\"filterItensToSelect()\"\n                            [placeholder]=\"availableItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                        />\n                    }\n                </div>\n            }\n\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: itensToSelectId,\n                        itens: itensToSelectFilterUtil.filteredItensToSelect,\n                        template: itemToSelectTemplate,\n                        listConnectedTo: selectedItensId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"addSelectedItensLabel || 'platform.angular_components.add' | translate\"\n                priority=\"primary\"\n                rightIconClass=\"fa fa-fw fa-arrow-right\"\n                [disabled]=\"!canAddItens\"\n                (clicked)=\"add()\"\n                [auxiliary]=\"false\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"addAllItensLabel || 'platform.angular_components.add_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"add(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n    <div class=\"picklist-item-container\">\n        <div class=\"picklist-box\">\n            <div class=\"picklist-title-container\">\n                @if (!filterBy) {\n                    <ng-container>\n                        <ng-container\n                            *ngTemplateOutlet=\"\n                                checkboxTitleRender;\n                                context: {\n                                    disabled: disableSelectedItensCheckbox,\n                                    checked: selectedItensAllSelected,\n                                    changeFn: checkAllSelectedItensChange.bind(this),\n                                }\n                            \"\n                        ></ng-container>\n                    </ng-container>\n                }\n                <span class=\"picklist-title\">\n                    {{ selectedItensLabel || 'platform.angular_components.selected-items' | translate }}\n                </span>\n            </div>\n            <div\n                class=\"picklist-filter\"\n                *ngIf=\"filterBy && showCheckbox\"\n            >\n                <ng-container\n                    *ngTemplateOutlet=\"\n                        checkboxTitleRender;\n                        context: { disabled: disableSelectedItensCheckbox, checked: selectedItensAllSelected, changeFn: checkAllSelectedItensChange.bind(this) }\n                    \"\n                ></ng-container>\n                @if (filterBy) {\n                    <input\n                        type=\"text\"\n                        class=\"input-search\"\n                        [(ngModel)]=\"selectedItensFilter\"\n                        (ngModelChange)=\"filterSelectedItens()\"\n                        [placeholder]=\"selectedItensPlaceholder || 'platform.angular_components.picklist-placeholder' | translate\"\n                    />\n                }\n            </div>\n            <ng-container\n                *ngTemplateOutlet=\"\n                    picklistItensRender;\n                    context: {\n                        id: selectedItensId,\n                        itens: selectedItensFilterUtil.filteredSelectedItens,\n                        template: itemSelectedTemplate,\n                        listConnectedTo: itensToSelectId,\n                    }\n                \"\n            >\n            </ng-container>\n        </div>\n        <div class=\"buttons-container\">\n            <s-button\n                [label]=\"removeSelectedItemsLabel || 'platform.angular_components.remove' | translate\"\n                priority=\"primary\"\n                iconClass=\"fa fa-fw fa-arrow-left\"\n                [disabled]=\"!canRemoveItens\"\n                [auxiliary]=\"false\"\n                (clicked)=\"remove()\"\n                [caret]=\"false\"\n            >\n            </s-button>\n            <s-button\n                [label]=\"removeAllItemsLabel || 'platform.angular_components.remove_all' | translate\"\n                priority=\"link\"\n                (clicked)=\"remove(true)\"\n                [auxiliary]=\"false\"\n            >\n            </s-button>\n        </div>\n    </div>\n</div>\n", styles: [".picklist-container{display:flex;flex-wrap:wrap;border-radius:4px solid #dedce5;width:100%;background-color:#fff;gap:20px;padding:8px}.picklist-container .picklist-item-container{display:flex;flex-direction:column;flex:1}.picklist-container .picklist-item-container .picklist-box{border:1px solid #dedce5;padding:8px;height:100%;min-width:200px}.picklist-container .picklist-item-container .picklist-box .picklist-filter{display:flex;width:100%}.picklist-container .picklist-item-container .picklist-box .picklist-filter .input-search{border:1px solid #dedce5;min-height:35px;width:100%;border-radius:3px;margin-bottom:10px;margin-top:10px;padding:0 8px;flex:1}.picklist-container .picklist-item-container .picklist-box .picklist-title-container{width:100%;display:flex;align-items:center}.picklist-container .picklist-item-container .picklist-box .picklist-title-container .picklist-title{font-family:Open Sans;font-size:14px;font-weight:700;line-height:21px;text-underline-position:from-font;text-decoration-skip-ink:none}.picklist-container .picklist-item-container .picklist-box .picklist-items{max-height:23em;overflow:auto;height:100%;min-height:55px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-content{width:100%;height:100%;padding-right:8px;border-radius:3px;margin-bottom:8px}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item{height:55px;border:3px;display:flex}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:not(.picklist-disabled){cursor:pointer}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item:hover:not(.picklist-disabled,.picklist-item-active,.picklist-item-invisible){background-color:#f1f7f8}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-active:not(.picklist-item-invisible){background-color:#d5e8ec}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-disabled{opacity:.5;background-color:#fbfafc}.picklist-container .picklist-item-container .picklist-box .picklist-items .picklist-item-invisible{display:none!important}.picklist-container .picklist-item-container .buttons-container{padding-top:10px;display:flex}.picklist-container .picklist-item-container .input-checkbox{margin:12px}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { itensToSelect: [{
@@ -304,19 +304,19 @@ const parseItensPickList = (array, disabledFn) => {
 };
 
 class PicklistModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PicklistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: PicklistModule, declarations: [PicklistComponent], imports: [CommonModule,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, declarations: [PicklistComponent], imports: [CommonModule,
             TranslateModule,
             DragDropModule,
             FormsModule,
             ButtonModule], exports: [PicklistComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PicklistModule, imports: [CommonModule,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, imports: [CommonModule,
             TranslateModule,
             DragDropModule,
             FormsModule,
             ButtonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PicklistModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PicklistModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [PicklistComponent],

package/fesm2022/seniorsistemas-angular-components-product-header.mjs

@@ -26,10 +26,10 @@ class ProductHeaderComponent {
             this.container.nativeElement.style.borderTop = '1px solid #ddd';
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: ProductHeaderComponent, selector: "s-product-header", inputs: { id: "id", header: "header", baseZIndex: "baseZIndex", isHeaderFrame: "isHeaderFrame" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["headerContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n", styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;position:fixed;z-index:32}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:flex;width:100%;height:70px;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width: 768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}\n"] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ProductHeaderComponent, selector: "s-product-header", inputs: { id: "id", header: "header", baseZIndex: "baseZIndex", isHeaderFrame: "isHeaderFrame" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["headerContainer"], descendants: true }], ngImport: i0, template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n", styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;position:fixed;z-index:32}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:flex;width:100%;height:70px;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width: 768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}\n"] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-product-header', template: "<div [id]=\"id\" class=\"box\">\n    <div\n      #headerContainer\n      class=\"sds-container\"\n      [class]=\"isHeaderFrame ? 'header-frame' : 'primary-header'\"\n    >\n      <h1 [class]=\"isHeaderFrame ? 'title' : 'primary-title'\">{{ header }}</h1>\n      <div class=\"content\">\n        <ng-content></ng-content>\n      </div>\n    </div>\n  </div>\n", styles: [".box{position:relative;width:100%;height:70px}.header-frame{padding-top:15px;padding-bottom:15px;width:100%;top:0;left:0;height:70px;background-color:#fff;display:flex;justify-content:space-between;align-items:center;position:fixed;z-index:32}.title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.content{display:flex;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.primary-header{display:flex;width:100%;height:70px;padding:15px 20px;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;background-color:#fff;gap:24px}@media (max-width: 768px){.primary-header{width:100%}}.primary-header .primary-title{color:#999;font-weight:400;font-size:16pt;margin-right:15px;min-width:140px;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], propDecorators: { id: [{
@@ -47,11 +47,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ProductHeaderModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderModule, declarations: [ProductHeaderComponent], imports: [CommonModule, TooltipModule, ThumbnailModule], exports: [ProductHeaderComponent, ThumbnailModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderModule, imports: [CommonModule, TooltipModule, ThumbnailModule, ThumbnailModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderModule, declarations: [ProductHeaderComponent], imports: [CommonModule, TooltipModule, ThumbnailModule], exports: [ProductHeaderComponent, ThumbnailModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderModule, imports: [CommonModule, TooltipModule, ThumbnailModule, ThumbnailModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProductHeaderModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProductHeaderModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TooltipModule, ThumbnailModule],

package/fesm2022/seniorsistemas-angular-components-profile-picture-picker.mjs

@@ -206,8 +206,8 @@ class ProfilePicturePickerComponent {
         const { left, right } = element.nativeElement.getBoundingClientRect();
         return right - left;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerComponent, deps: [{ token: i1.ImageCropperService }, { token: i2.ConfirmationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProfilePicturePickerComponent, selector: "s-profile-picture-picker", inputs: { simpleTitle: "simpleTitle", actionTitle: "actionTitle", subtitle: "subtitle", aspectRatio: "aspectRatio", cropperLabelsConfig: "cropperLabelsConfig", removeButtonLabel: "removeButtonLabel", changeButtonLabel: "changeButtonLabel", confirmationTexts: "confirmationTexts", maxFileSize: "maxFileSize", accept: "accept", supportedExtensions: "supportedExtensions", image: "image" }, outputs: { changedImage: "changedImage", imageChange: "imageChange", removedImage: "removedImage", invalidFile: "invalidFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)", "window:resize": "onResize()" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerComponent, deps: [{ token: i1.ImageCropperService }, { token: i2.ConfirmationService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProfilePicturePickerComponent, selector: "s-profile-picture-picker", inputs: { simpleTitle: "simpleTitle", actionTitle: "actionTitle", subtitle: "subtitle", aspectRatio: "aspectRatio", cropperLabelsConfig: "cropperLabelsConfig", removeButtonLabel: "removeButtonLabel", changeButtonLabel: "changeButtonLabel", confirmationTexts: "confirmationTexts", maxFileSize: "maxFileSize", accept: "accept", supportedExtensions: "supportedExtensions", image: "image" }, outputs: { changedImage: "changedImage", imageChange: "imageChange", removedImage: "removedImage", invalidFile: "invalidFile" }, host: { listeners: { "dragover": "onDragOver($event)", "dragleave": "onDragLeave($event)", "drop": "onDrop($event)", "window:resize": "onResize()" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ProfilePicturePickerComponent),
@@ -215,7 +215,7 @@ class ProfilePicturePickerComponent {
             },
         ], viewQueries: [{ propertyName: "uploadPicture", first: true, predicate: ["uploadPicture"], descendants: true }, { propertyName: "info", first: true, predicate: ["info"], descendants: true }, { propertyName: "thumbnail", first: true, predicate: ["thumbnail"], descendants: true, read: ElementRef }, { propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<p-confirmDialog></p-confirmDialog>\n\n<input\n    #fileInput\n    [accept]=\"accept\"\n    class=\"file-input\"\n    type=\"file\"\n    (change)=\"photoSelected($event)\"\n/>\n<div\n    #uploadPicture\n    class=\"upload-picture\"\n>\n    <s-thumbnail\n        #thumbnail\n        iconClass=\"far fa-user\"\n        [imageSource]=\"imageBase64\"\n        [hasAction]=\"!image\"\n        (click)=\"selectPhoto()\"\n    >\n    </s-thumbnail>\n    <div\n        #info\n        class=\"info\"\n    >\n        @if (image) {\n            <div class=\"buttons\">\n                <s-button\n                    [label]=\"changeButtonLabel || 'platform.angular_components.change_photo' | translate\"\n                    priority=\"primary\"\n                    (clicked)=\"selectPhoto()\"\n                >\n                </s-button>\n                <s-button\n                    [label]=\"removeButtonLabel || 'platform.angular_components.remove' | translate\"\n                    priority=\"secondary\"\n                    (clicked)=\"removePhoto()\"\n                >\n                </s-button>\n            </div>\n        } @else {\n            <p class=\"title\">\n                {{ simpleTitle || 'platform.angular_components.drag_your_photo_or' | translate }}\n                <span\n                    class=\"action-title\"\n                    (click)=\"selectPhoto()\"\n                >\n                    {{ actionTitle || 'platform.angular_components.select_a_file' | translate }}\n                </span>\n            </p>\n        }\n        <p class=\"subtitle\">{{ subtitle }}</p>\n    </div>\n</div>\n", styles: [".file-input{display:none}.upload-picture{display:flex;flex-wrap:wrap}.upload-picture .info{display:flex;flex-direction:column;padding:12px 20px;align-items:flex-start}.upload-picture .info .title{font-family:Open Sans,sans-serif;font-weight:700;font-size:.875rem;line-height:150%;color:#333}.upload-picture .info .title .action-title{cursor:pointer;color:#428bca}.upload-picture .info .buttons{display:flex;gap:8px}.upload-picture .info .buttons s-button{margin:0}.upload-picture .info .subtitle{padding:6px 0;font-family:Open Sans,sans-serif;font-weight:400;font-size:.75rem;line-height:150%;color:#697882;text-align:center}.upload-picture--small .info{align-items:center}.upload-picture--small .info .title,.upload-picture--small .info .subtitle{text-align:center}.upload-picture--small .info .buttons{justify-content:center;flex-wrap:wrap}\n"], dependencies: [{ kind: "component", type: i4.ButtonComponent, selector: "s-button", inputs: ["id", "label", "tooltip", "tooltipPosition", "iconClass", "rightIconClass", "caret", "styleClass", "baseZIndex", "disabled", "auxiliary", "type", "priority", "menuOptions", "size", "slide", "animation", "badge", "iconColor"], outputs: ["clicked"] }, { kind: "component", type: i5.ThumbnailComponent, selector: "s-thumbnail", inputs: ["id", "size", "imageSource", "imageFallback", "imageAlt", "iconClass", "hasAction", "actionIconClass", "isTile", "isBrand"] }, { kind: "component", type: i6.ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-profile-picture-picker', providers: [
                         {
@@ -284,11 +284,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
             }] } });
 
 class ProfilePicturePickerModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerModule, declarations: [ProfilePicturePickerComponent], imports: [CommonModule, TranslateModule, ButtonModule, ThumbnailModule, ImageCropperModule, ConfirmDialogModule], exports: [ProfilePicturePickerComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerModule, providers: [ImageCropperService, ConfirmationService], imports: [CommonModule, TranslateModule, ButtonModule, ThumbnailModule, ImageCropperModule, ConfirmDialogModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerModule, declarations: [ProfilePicturePickerComponent], imports: [CommonModule, TranslateModule, ButtonModule, ThumbnailModule, ImageCropperModule, ConfirmDialogModule], exports: [ProfilePicturePickerComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerModule, providers: [ImageCropperService, ConfirmationService], imports: [CommonModule, TranslateModule, ButtonModule, ThumbnailModule, ImageCropperModule, ConfirmDialogModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProfilePicturePickerModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProfilePicturePickerModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule, TranslateModule, ButtonModule, ThumbnailModule, ImageCropperModule, ConfirmDialogModule],

package/fesm2022/seniorsistemas-angular-components-progressbar.mjs

@@ -38,10 +38,10 @@ class ProgressBarDeterminateComponent {
             throw new Error('Invalid value for targetValue');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarDeterminateComponent, deps: [{ token: i1.LocaleService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProgressBarDeterminateComponent, selector: "s-progressbar-determinate", inputs: { value: "value", activeColor: "activeColor", numberFormatOptions: "numberFormatOptions", targetValue: "targetValue", targetLabel: "targetLabel", showValue: "showValue" }, ngImport: i0, template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n        <div\n            class=\"progressbar-active\"\n            [ngClass]=\"{\n                'progressbar-active--blue': activeColor === 'blue',\n                'progressbar-active--green': activeColor === 'green',\n                'progressbar-active--red': activeColor === 'red',\n                'progressbar-active--yellow': activeColor === 'yellow',\n            }\"\n            [ngStyle]=\"{ width: value + '%' }\"\n        >\n            {{ showValue && value ? numberFormat?.format(value) + '%' : '' }}\n        </div>\n    </div>\n    @if (targetValue) {\n        <div\n            class=\"target\"\n            [ngStyle]=\"{\n                left: targetValue <= 50 ? targetValue + '%' : 'unset',\n                right: targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n                'align-items': targetValue > 50 ? 'flex-end' : 'flex-start',\n            }\"\n        >\n            <span class=\"target-line\"></span>\n            <span class=\"target-label\">\n                {{ targetLabel || numberFormat?.format(value) + '%' }}\n            </span>\n        </div>\n    }\n</div>\n", styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarDeterminateComponent, deps: [{ token: i1.LocaleService }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarDeterminateComponent, selector: "s-progressbar-determinate", inputs: { value: "value", activeColor: "activeColor", numberFormatOptions: "numberFormatOptions", targetValue: "targetValue", targetLabel: "targetLabel", showValue: "showValue" }, ngImport: i0, template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n        <div\n            class=\"progressbar-active\"\n            [ngClass]=\"{\n                'progressbar-active--blue': activeColor === 'blue',\n                'progressbar-active--green': activeColor === 'green',\n                'progressbar-active--red': activeColor === 'red',\n                'progressbar-active--yellow': activeColor === 'yellow',\n            }\"\n            [ngStyle]=\"{ width: value + '%' }\"\n        >\n            {{ showValue && value ? numberFormat?.format(value) + '%' : '' }}\n        </div>\n    </div>\n    @if (targetValue) {\n        <div\n            class=\"target\"\n            [ngStyle]=\"{\n                left: targetValue <= 50 ? targetValue + '%' : 'unset',\n                right: targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n                'align-items': targetValue > 50 ? 'flex-end' : 'flex-start',\n            }\"\n        >\n            <span class=\"target-line\"></span>\n            <span class=\"target-label\">\n                {{ targetLabel || numberFormat?.format(value) + '%' }}\n            </span>\n        </div>\n    }\n</div>\n", styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarDeterminateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarDeterminateComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-progressbar-determinate', template: "<div class=\"progressbar-determinate\">\n    <div class=\"progressbar-container\">\n        <div\n            class=\"progressbar-active\"\n            [ngClass]=\"{\n                'progressbar-active--blue': activeColor === 'blue',\n                'progressbar-active--green': activeColor === 'green',\n                'progressbar-active--red': activeColor === 'red',\n                'progressbar-active--yellow': activeColor === 'yellow',\n            }\"\n            [ngStyle]=\"{ width: value + '%' }\"\n        >\n            {{ showValue && value ? numberFormat?.format(value) + '%' : '' }}\n        </div>\n    </div>\n    @if (targetValue) {\n        <div\n            class=\"target\"\n            [ngStyle]=\"{\n                left: targetValue <= 50 ? targetValue + '%' : 'unset',\n                right: targetValue > 50 ? 100 - targetValue + '%' : 'unset',\n                'align-items': targetValue > 50 ? 'flex-end' : 'flex-start',\n            }\"\n        >\n            <span class=\"target-line\"></span>\n            <span class=\"target-label\">\n                {{ targetLabel || numberFormat?.format(value) + '%' }}\n            </span>\n        </div>\n    }\n</div>\n", styles: [".progressbar-determinate{position:relative}.progressbar-determinate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progressbar-determinate .progressbar-container .progressbar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progressbar-determinate .progressbar-container .progressbar-active--blue{background-color:#428bca}.progressbar-determinate .progressbar-container .progressbar-active--green{background-color:#0c9348}.progressbar-determinate .progressbar-container .progressbar-active--red{background-color:#c13018}.progressbar-determinate .progressbar-container .progressbar-active--yellow{background-color:#fcbf10;color:#212533}.progressbar-determinate .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progressbar-determinate .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progressbar-determinate .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"] }]
         }], ctorParameters: () => [{ type: i1.LocaleService }], propDecorators: { value: [{
@@ -63,10 +63,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 class ProgressBarIndeterminateComponent {
     activeColor;
     label;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarIndeterminateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProgressBarIndeterminateComponent, selector: "s-progressbar-indeterminate", inputs: { activeColor: "activeColor", label: "label" }, ngImport: i0, template: "<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n\n    @if (label) {\n        <span class=\"progressbar-label\">{{ label }}</span>\n    }\n</div>\n", styles: [".progressbar-indeterminate{display:flex;flex-direction:column;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:indeterminate-progress 5s infinite;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translate(-250%)}to{transform:translate(250%)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarIndeterminateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarIndeterminateComponent, selector: "s-progressbar-indeterminate", inputs: { activeColor: "activeColor", label: "label" }, ngImport: i0, template: "<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n\n    @if (label) {\n        <span class=\"progressbar-label\">{{ label }}</span>\n    }\n</div>\n", styles: [".progressbar-indeterminate{display:flex;flex-direction:column;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:indeterminate-progress 5s infinite;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translate(-250%)}to{transform:translate(250%)}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarIndeterminateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarIndeterminateComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-progressbar-indeterminate', template: "<div class=\"progressbar-indeterminate\">\n    <div class=\"progressbar-container\">\n        <div class=\"indeterminate-bar\" [ngClass]=\"{\n            'indeterminate-bar--blue': activeColor === 'blue',\n            'indeterminate-bar--green': activeColor === 'green',\n            'indeterminate-bar--red': activeColor === 'red',\n            'indeterminate-bar--yellow': activeColor === 'yellow'\n        }\"></div>\n    </div>\n\n    @if (label) {\n        <span class=\"progressbar-label\">{{ label }}</span>\n    }\n</div>\n", styles: [".progressbar-indeterminate{display:flex;flex-direction:column;align-items:center}.progressbar-indeterminate .progressbar-container{background-color:#d8d8d8;border-radius:4px;height:24px;margin:8px 0;overflow:hidden;width:100%}.progressbar-indeterminate .indeterminate-bar{animation:indeterminate-progress 5s infinite;background-color:#428bca;height:100%;width:40%}.progressbar-indeterminate .indeterminate-bar--blue{background-color:#428bca}.progressbar-indeterminate .indeterminate-bar--green{background-color:#0c9348}.progressbar-indeterminate .indeterminate-bar--red{background-color:#c13018}.progressbar-indeterminate .indeterminate-bar--yellow{background-color:#fcbf10}.progressbar-indeterminate .progressbar-label{font-family:\"Open Sans\" sans-serif;font-size:12px;line-height:150%;color:#212533}@keyframes indeterminate-progress{0%{transform:translate(-250%)}to{transform:translate(250%)}}\n"] }]
         }], propDecorators: { activeColor: [{
@@ -104,10 +104,10 @@ class ProgressBarComponent {
             throw new Error('When the mode is indeterminate, the value, targetValue and targetLabel parameters are not expected.');
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.13", type: ProgressBarComponent, selector: "s-progressbar", inputs: { value: "value", activeColor: "activeColor", numberFormatOptions: "numberFormatOptions", targetValue: "targetValue", label: "label", targetLabel: "targetLabel", showValue: "showValue", mode: "mode" }, ngImport: i0, template: "@if (mode === 'determinate') {\n    <s-progressbar-determinate\n        [value]=\"value\"\n        [numberFormatOptions]=\"numberFormatOptions\"\n        [targetValue]=\"targetValue\"\n        [targetLabel]=\"targetLabel\"\n        [activeColor]=\"activeColor\"\n        [showValue]=\"showValue\"\n    >\n    </s-progressbar-determinate>\n} @else {\n    <s-progressbar-indeterminate\n        [activeColor]=\"activeColor\"\n        [label]=\"label\"\n    >\n    </s-progressbar-indeterminate>\n}\n", styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"], dependencies: [{ kind: "component", type: ProgressBarDeterminateComponent, selector: "s-progressbar-determinate", inputs: ["value", "activeColor", "numberFormatOptions", "targetValue", "targetLabel", "showValue"] }, { kind: "component", type: ProgressBarIndeterminateComponent, selector: "s-progressbar-indeterminate", inputs: ["activeColor", "label"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: ProgressBarComponent, selector: "s-progressbar", inputs: { value: "value", activeColor: "activeColor", numberFormatOptions: "numberFormatOptions", targetValue: "targetValue", label: "label", targetLabel: "targetLabel", showValue: "showValue", mode: "mode" }, ngImport: i0, template: "@if (mode === 'determinate') {\n    <s-progressbar-determinate\n        [value]=\"value\"\n        [numberFormatOptions]=\"numberFormatOptions\"\n        [targetValue]=\"targetValue\"\n        [targetLabel]=\"targetLabel\"\n        [activeColor]=\"activeColor\"\n        [showValue]=\"showValue\"\n    >\n    </s-progressbar-determinate>\n} @else {\n    <s-progressbar-indeterminate\n        [activeColor]=\"activeColor\"\n        [label]=\"label\"\n    >\n    </s-progressbar-indeterminate>\n}\n", styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"], dependencies: [{ kind: "component", type: ProgressBarDeterminateComponent, selector: "s-progressbar-determinate", inputs: ["value", "activeColor", "numberFormatOptions", "targetValue", "targetLabel", "showValue"] }, { kind: "component", type: ProgressBarIndeterminateComponent, selector: "s-progressbar-indeterminate", inputs: ["activeColor", "label"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 's-progressbar', template: "@if (mode === 'determinate') {\n    <s-progressbar-determinate\n        [value]=\"value\"\n        [numberFormatOptions]=\"numberFormatOptions\"\n        [targetValue]=\"targetValue\"\n        [targetLabel]=\"targetLabel\"\n        [activeColor]=\"activeColor\"\n        [showValue]=\"showValue\"\n    >\n    </s-progressbar-determinate>\n} @else {\n    <s-progressbar-indeterminate\n        [activeColor]=\"activeColor\"\n        [label]=\"label\"\n    >\n    </s-progressbar-indeterminate>\n}\n", styles: [".progress-bar{position:relative}.progress-bar .progress-bar-all{background-color:#d8d8d8;border-radius:4px;height:24px;overflow:hidden;width:100%}.progress-bar .progress-bar-all .progress-bar-active{align-items:center;color:#fff;display:flex;font-family:Open Sans,sans-serif;font-size:14px;height:100%;justify-content:center;line-height:150%;-webkit-user-select:none;user-select:none;width:80%}.progress-bar .progress-bar-all .progress-bar-active--blue{background-color:#428bca}.progress-bar .progress-bar-all .progress-bar-active--green{background-color:#0c9348}.progress-bar .progress-bar-all .progress-bar-active--red{background-color:#c13018}.progress-bar .progress-bar-all .progress-bar-active--yellow{background-color:#fcbf10}.progress-bar .target{align-items:flex-start;bottom:-38px;display:flex;flex-direction:column;position:absolute}.progress-bar .target .target-line{background-color:#333;height:40px;margin:8px 0;width:1px}.progress-bar .target .target-label{background-color:#426e78;border-radius:10px;color:#e5eaea;font-family:Open Sans,sans-serif;font-size:12px;line-height:150%;padding:2px 12px}\n"] }]
         }], propDecorators: { value: [{
@@ -131,11 +131,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
 
 /* eslint-disable max-len */
 class ProgressBarModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ProgressBarDeterminateComponent, ProgressBarIndeterminateComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarModule, imports: [CommonModule] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarModule, declarations: [ProgressBarComponent, ProgressBarDeterminateComponent, ProgressBarIndeterminateComponent], imports: [CommonModule], exports: [ProgressBarComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarModule, imports: [CommonModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ProgressBarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressBarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [CommonModule],

package/fesm2022/seniorsistemas-angular-components-radio-button.mjs

@@ -0,0 +1,182 @@
+import { NgClass } from '@angular/common';
+import * as i0 from '@angular/core';
+import { Injectable, inject, Injector, computed, signal, model, input, output, forwardRef, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
+import { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';
+import { randomHash } from '@seniorsistemas/angular-components/utils';
+
+class RadioButtonRegistryService {
+    componentRefs = [];
+    add(control, componentInstance) {
+        this.componentRefs.push({
+            componentInstance,
+            formControl: control,
+        });
+    }
+    remove(componentInstance) {
+        this.componentRefs = this.componentRefs.filter((item) => item.componentInstance !== componentInstance);
+    }
+    select(componentInstance) {
+        this.componentRefs.forEach((item) => {
+            if (this.isSameGroup(item, componentInstance) && item.componentInstance !== componentInstance) {
+                item.componentInstance.writeValue(componentInstance.value());
+            }
+        });
+    }
+    isSameGroup({ componentInstance, formControl }, currentComponentInstance) {
+        if (!formControl) {
+            return false;
+        }
+        const controlRoot = formControl.control?.root;
+        return (controlRoot === componentInstance?.['control']?.control?.root &&
+            componentInstance.name() === currentComponentInstance.name());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonRegistryService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonRegistryService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class RadioButtonComponent {
+    static ID = 0;
+    radioButtonRegistry = inject(RadioButtonRegistryService);
+    injector = inject(Injector);
+    control = null;
+    disabled = computed(() => {
+        return this.buttonDisabled() || this.formItemDisabled();
+    });
+    onChange = () => { };
+    onTouched = () => { };
+    checked = null;
+    formItemDisabled = signal(false);
+    buttonDisabled = model(false);
+    label = input.required();
+    name = input.required();
+    value = model.required();
+    inputId = input(`RadioButton_${RadioButtonComponent.ID++}`);
+    focusedInput = output();
+    inputFocusLost = output();
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formItemDisabled.set(isDisabled);
+    }
+    writeValue(value) {
+        this.checked = value === this.value();
+    }
+    ngOnInit() {
+        this.control = this.injector.get(NgControl, null);
+        if (this.control) {
+            this.radioButtonRegistry.add(this.control, this);
+        }
+    }
+    ngOnDestroy() {
+        if (this.control) {
+            this.radioButtonRegistry.remove(this);
+        }
+    }
+    setValue() {
+        if (this.disabled()) {
+            return;
+        }
+        this.checked = true;
+        this.onChange(this.value());
+        this.radioButtonRegistry.select(this);
+        this.onTouched(this.value());
+    }
+    activedContent(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        this.setValue();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.14", type: RadioButtonComponent, isStandalone: true, selector: "s-radiobutton", inputs: { buttonDisabled: { classPropertyName: "buttonDisabled", publicName: "buttonDisabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: true, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonDisabled: "buttonDisabledChange", value: "valueChange", focusedInput: "focusedInput", inputFocusLost: "inputFocusLost" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n    class=\"flex items-center gap-3\"\n    (sInteractiveContent)=\"activedContent($event)\"\n    [stopPropagation]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n>\n    <input\n        type=\"radio\"\n        [value]=\"value()\"\n        [checked]=\"checked\"\n        [name]=\"name()\"\n        [id]=\"inputId()\"\n        (change)=\"setValue()\"\n        [disabled]=\"disabled()\"\n        class=\"h-4 w-4 appearance-none rounded-[50%] transition-all ease-in-out disabled:opacity-50\"\n        [ngClass]=\"{\n            'border-2 border-primary': checked,\n            'border-[1px] border-grayscale-30': !checked,\n            'cursor-pointer': !disabled(),\n            'focus-within:!border-primary hover:border-[1px] hover:border-[#063951]': !disabled() && checked,\n            'hover:border-grayscale-50': !disabled() && !checked,\n        }\"\n        [stopPropagation]=\"true\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        (focus)=\"focusedInput.emit($event)\"\n        (blur)=\"inputFocusLost.emit($event)\"\n    />\n\n    <label\n        class=\"font-open-sans m-0 text-sm text-grayscale-90\"\n        [disabled]=\"disabled()\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        [stopPropagation]=\"true\"\n        [tabindex]=\"disabled() ? -1 : 0\"\n        [ngClass]=\"{\n            'cursor-pointer': !disabled(),\n            'opacity-50': disabled(),\n        }\"\n        [for]=\"inputId()\"\n    >\n        {{ label() }}\n    </label>\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: InteractiveContentDirective, selector: "[sInteractiveContent]", inputs: ["focusable", "disabled", "stopPropagation"], outputs: ["sInteractiveContent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-radiobutton', standalone: true, imports: [FormsModule, NgClass, InteractiveContentDirective], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n    class=\"flex items-center gap-3\"\n    (sInteractiveContent)=\"activedContent($event)\"\n    [stopPropagation]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n>\n    <input\n        type=\"radio\"\n        [value]=\"value()\"\n        [checked]=\"checked\"\n        [name]=\"name()\"\n        [id]=\"inputId()\"\n        (change)=\"setValue()\"\n        [disabled]=\"disabled()\"\n        class=\"h-4 w-4 appearance-none rounded-[50%] transition-all ease-in-out disabled:opacity-50\"\n        [ngClass]=\"{\n            'border-2 border-primary': checked,\n            'border-[1px] border-grayscale-30': !checked,\n            'cursor-pointer': !disabled(),\n            'focus-within:!border-primary hover:border-[1px] hover:border-[#063951]': !disabled() && checked,\n            'hover:border-grayscale-50': !disabled() && !checked,\n        }\"\n        [stopPropagation]=\"true\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        (focus)=\"focusedInput.emit($event)\"\n        (blur)=\"inputFocusLost.emit($event)\"\n    />\n\n    <label\n        class=\"font-open-sans m-0 text-sm text-grayscale-90\"\n        [disabled]=\"disabled()\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        [stopPropagation]=\"true\"\n        [tabindex]=\"disabled() ? -1 : 0\"\n        [ngClass]=\"{\n            'cursor-pointer': !disabled(),\n            'opacity-50': disabled(),\n        }\"\n        [for]=\"inputId()\"\n    >\n        {{ label() }}\n    </label>\n</div>\n" }]
+        }] });
+
+class RadioButtonGroupComponent {
+    onChange = () => { };
+    onTouched = () => { };
+    modelValue = signal(undefined);
+    disabled = model(false);
+    items = input.required();
+    inputName = input.required();
+    viewMode = input('horizontal');
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled.set(isDisabled);
+    }
+    writeValue(value) {
+        this.modelValue.set(value);
+    }
+    radioButtonItems = computed(() => {
+        const items = this.items();
+        return items.map((item) => {
+            return {
+                ...item,
+                hash: randomHash(),
+            };
+        });
+    });
+    setValue(value) {
+        if (this.disabled()) {
+            return;
+        }
+        this.onChange(value);
+        this.onTouched(value);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: RadioButtonGroupComponent, isStandalone: true, selector: "s-radiobutton-group", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, inputName: { classPropertyName: "inputName", publicName: "inputName", isSignal: true, isRequired: true, transformFunction: null }, viewMode: { classPropertyName: "viewMode", publicName: "viewMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => RadioButtonGroupComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<section\n    class=\"flex gap-2\"\n    [class.flex-col]=\"viewMode() === 'horizontal'\"\n>\n    @for (radioButtonItem of radioButtonItems(); track radioButtonItem.hash) {\n        @let itemDisabled = disabled() ? true : radioButtonItem.disabled || false;\n\n        <s-radiobutton\n            [(ngModel)]=\"modelValue\"\n            (ngModelChange)=\"setValue($event)\"\n            [value]=\"radioButtonItem.value\"\n            [buttonDisabled]=\"itemDisabled\"\n            [name]=\"inputName()\"\n            [label]=\"radioButtonItem.label\"\n        >\n        </s-radiobutton>\n    }\n</section>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: RadioButtonComponent, selector: "s-radiobutton", inputs: ["buttonDisabled", "label", "name", "value", "inputId"], outputs: ["buttonDisabledChange", "valueChange", "focusedInput", "inputFocusLost"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioButtonGroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 's-radiobutton-group', standalone: true, imports: [FormsModule, RadioButtonComponent], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => RadioButtonGroupComponent),
+                            multi: true,
+                        },
+                    ], template: "<section\n    class=\"flex gap-2\"\n    [class.flex-col]=\"viewMode() === 'horizontal'\"\n>\n    @for (radioButtonItem of radioButtonItems(); track radioButtonItem.hash) {\n        @let itemDisabled = disabled() ? true : radioButtonItem.disabled || false;\n\n        <s-radiobutton\n            [(ngModel)]=\"modelValue\"\n            (ngModelChange)=\"setValue($event)\"\n            [value]=\"radioButtonItem.value\"\n            [buttonDisabled]=\"itemDisabled\"\n            [name]=\"inputName()\"\n            [label]=\"radioButtonItem.label\"\n        >\n        </s-radiobutton>\n    }\n</section>\n" }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RadioButtonComponent, RadioButtonGroupComponent };
+//# sourceMappingURL=seniorsistemas-angular-components-radio-button.mjs.map

package/fesm2022/seniorsistemas-angular-components-radio-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"seniorsistemas-angular-components-radio-button.mjs","sources":["../../projects/angular-components/radio-button/src/lib/services/radio-button-registry.service.ts","../../projects/angular-components/radio-button/src/lib/radio-button/radio-button.component.ts","../../projects/angular-components/radio-button/src/lib/radio-button/radio-button.component.html","../../projects/angular-components/radio-button/src/lib/radio-button-group/radio-button-group.component.ts","../../projects/angular-components/radio-button/src/lib/radio-button-group/radio-button-group.component.html","../../projects/angular-components/radio-button/src/seniorsistemas-angular-components-radio-button.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { NgControl } from '@angular/forms';\n\nimport { RadioButtonComponent } from '../radio-button/radio-button.component';\n\ntype ComponentRef = { componentInstance: RadioButtonComponent; formControl: NgControl };\n\n@Injectable({\n    providedIn: 'root',\n})\nexport class RadioButtonRegistryService {\n    private componentRefs: ComponentRef[] = [];\n\n    add(control: NgControl, componentInstance: RadioButtonComponent) {\n        this.componentRefs.push({\n            componentInstance,\n            formControl: control,\n        });\n    }\n\n    remove(componentInstance: RadioButtonComponent) {\n        this.componentRefs = this.componentRefs.filter((item) => item.componentInstance !== componentInstance);\n    }\n\n    select(componentInstance: RadioButtonComponent) {\n        this.componentRefs.forEach((item) => {\n            if (this.isSameGroup(item, componentInstance) && item.componentInstance !== componentInstance) {\n                item.componentInstance.writeValue(componentInstance.value());\n            }\n        });\n    }\n\n    private isSameGroup(\n        { componentInstance, formControl }: ComponentRef,\n        currentComponentInstance: RadioButtonComponent,\n    ): boolean {\n        if (!formControl) {\n            return false;\n        }\n        const controlRoot = formControl.control?.root;\n        return (\n            controlRoot === componentInstance?.['control']?.control?.root &&\n            componentInstance.name() === currentComponentInstance.name()\n        );\n    }\n}\n","import { NgClass } from '@angular/common';\nimport {\n    Component,\n    computed,\n    forwardRef,\n    inject,\n    Injector,\n    input,\n    model,\n    OnDestroy,\n    OnInit,\n    output,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, NgControl } from '@angular/forms';\nimport { InteractiveContentDirective } from '@seniorsistemas/angular-components/interactive-content';\nimport { RadioButtonRegistryService } from '../services/radio-button-registry.service';\n\n@Component({\n    selector: 's-radiobutton',\n    standalone: true,\n    imports: [FormsModule, NgClass, InteractiveContentDirective],\n    templateUrl: './radio-button.component.html',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => RadioButtonComponent),\n            multi: true,\n        },\n    ],\n})\nexport class RadioButtonComponent implements ControlValueAccessor, OnInit, OnDestroy {\n    private static ID = 0;\n    private readonly radioButtonRegistry = inject(RadioButtonRegistryService);\n    private readonly injector = inject(Injector);\n    private control: NgControl | null = null;\n\n    protected readonly disabled = computed(() => {\n        return this.buttonDisabled() || this.formItemDisabled();\n    });\n\n    protected onChange: (value: unknown) => void = () => {};\n    protected onTouched: (value: unknown) => void = () => {};\n    protected checked: boolean | null = null;\n    protected formItemDisabled = signal(false);\n\n    buttonDisabled = model(false);\n    label = input.required<string>();\n    name = input.required<string>();\n    value = model.required<unknown>();\n    inputId = input(`RadioButton_${RadioButtonComponent.ID++}`);\n\n    focusedInput = output<FocusEvent>();\n    inputFocusLost = output<FocusEvent>();\n\n    registerOnChange(fn: (value: unknown) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.formItemDisabled.set(isDisabled);\n    }\n\n    writeValue(value: unknown): void {\n        this.checked = value === this.value();\n    }\n\n    ngOnInit(): void {\n        this.control = this.injector.get(NgControl, null);\n        if (this.control) {\n            this.radioButtonRegistry.add(this.control, this);\n        }\n    }\n\n    ngOnDestroy(): void {\n        if (this.control) {\n            this.radioButtonRegistry.remove(this);\n        }\n    }\n\n    protected setValue() {\n        if (this.disabled()) {\n            return;\n        }\n        this.checked = true;\n        this.onChange(this.value());\n        this.radioButtonRegistry.select(this);\n        this.onTouched(this.value());\n    }\n\n    protected activedContent(event: Event | KeyboardEvent) {\n        event.stopPropagation();\n        event.preventDefault();\n        this.setValue();\n    }\n}\n","<div\n    class=\"flex items-center gap-3\"\n    (sInteractiveContent)=\"activedContent($event)\"\n    [stopPropagation]=\"true\"\n    [disabled]=\"disabled()\"\n    [tabindex]=\"disabled() ? -1 : 0\"\n>\n    <input\n        type=\"radio\"\n        [value]=\"value()\"\n        [checked]=\"checked\"\n        [name]=\"name()\"\n        [id]=\"inputId()\"\n        (change)=\"setValue()\"\n        [disabled]=\"disabled()\"\n        class=\"h-4 w-4 appearance-none rounded-[50%] transition-all ease-in-out disabled:opacity-50\"\n        [ngClass]=\"{\n            'border-2 border-primary': checked,\n            'border-[1px] border-grayscale-30': !checked,\n            'cursor-pointer': !disabled(),\n            'focus-within:!border-primary hover:border-[1px] hover:border-[#063951]': !disabled() && checked,\n            'hover:border-grayscale-50': !disabled() && !checked,\n        }\"\n        [stopPropagation]=\"true\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        (focus)=\"focusedInput.emit($event)\"\n        (blur)=\"inputFocusLost.emit($event)\"\n    />\n\n    <label\n        class=\"font-open-sans m-0 text-sm text-grayscale-90\"\n        [disabled]=\"disabled()\"\n        (sInteractiveContent)=\"activedContent($event)\"\n        [stopPropagation]=\"true\"\n        [tabindex]=\"disabled() ? -1 : 0\"\n        [ngClass]=\"{\n            'cursor-pointer': !disabled(),\n            'opacity-50': disabled(),\n        }\"\n        [for]=\"inputId()\"\n    >\n        {{ label() }}\n    </label>\n</div>\n","import { Component, computed, forwardRef, input, model, signal } from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { randomHash } from '@seniorsistemas/angular-components/utils';\nimport { RadioButtonComponent } from '../radio-button/radio-button.component';\nimport { RadioButtonGroupItem } from './models/radio-button-group.models';\n\n@Component({\n    selector: 's-radiobutton-group',\n    standalone: true,\n    imports: [FormsModule, RadioButtonComponent],\n    templateUrl: './radio-button-group.component.html',\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => RadioButtonGroupComponent),\n            multi: true,\n        },\n    ],\n})\nexport class RadioButtonGroupComponent implements ControlValueAccessor {\n    protected onChange: (value: unknown) => void = () => {};\n    protected onTouched: (value: unknown) => void = () => {};\n    protected modelValue = signal<unknown>(undefined);\n\n    readonly disabled = model(false);\n    readonly items = input.required<RadioButtonGroupItem[]>();\n    readonly inputName = input.required<string>();\n    readonly viewMode = input<'horizontal' | 'vertical'>('horizontal');\n\n    registerOnChange(fn: (value: unknown) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled.set(isDisabled);\n    }\n\n    writeValue(value: unknown): void {\n        this.modelValue.set(value);\n    }\n\n    protected radioButtonItems = computed(() => {\n        const items = this.items();\n        return items.map((item) => {\n            return {\n                ...item,\n                hash: randomHash(),\n            };\n        });\n    });\n\n    protected setValue(value: unknown) {\n        if (this.disabled()) {\n            return;\n        }\n\n        this.onChange(value);\n        this.onTouched(value);\n    }\n}\n","<section\n    class=\"flex gap-2\"\n    [class.flex-col]=\"viewMode() === 'horizontal'\"\n>\n    @for (radioButtonItem of radioButtonItems(); track radioButtonItem.hash) {\n        @let itemDisabled = disabled() ? true : radioButtonItem.disabled || false;\n\n        <s-radiobutton\n            [(ngModel)]=\"modelValue\"\n            (ngModelChange)=\"setValue($event)\"\n            [value]=\"radioButtonItem.value\"\n            [buttonDisabled]=\"itemDisabled\"\n            [name]=\"inputName()\"\n            [label]=\"radioButtonItem.label\"\n        >\n        </s-radiobutton>\n    }\n</section>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}