@dev-tcloud/tcloud-ui 6.19.1 → 6.19.3

package/docs/tcloud-ui-progress-status-bar.md

@@ -0,0 +1,92 @@
+# Progress Status Bar
+
+## Características
+- Componente standalone para exibir progresso com gradiente por faixa de status.
+- Permite definir múltiplas faixas (`start` e `end`) para trocar automaticamente a cor.
+- Suporte aos status de gradiente: `info`, `danger`, `success` e `alert`.
+- Quando o valor atual ultrapassa a última faixa, mantém o gradiente da última configuração.
+
+## Instalação
+```ts
+import { TCloudUiProgressStatusBarComponent } from 'projects/tcloud-ui/src/public-api';
+
+@Component({
+  selector: 'app-example',
+  standalone: true,
+  imports: [TCloudUiProgressStatusBarComponent],
+  template: `
+    <tcloud-ui-progress-status-bar
+      [currentValue]="42"
+      [progressStatusConfig]="statusConfig">
+    </tcloud-ui-progress-status-bar>
+  `
+})
+export class ExampleComponent {
+  statusConfig = [
+    { start: 0, end: 25, gradientStatus: 'info' },
+    { start: 26, end: 60, gradientStatus: 'alert' },
+    { start: 61, end: 85, gradientStatus: 'danger' },
+    { start: 86, end: 100, gradientStatus: 'success' }
+  ];
+}
+```
+
+## Propriedades (API)
+### Inputs
+| Nome | Tipo | Descrição | Valor Default |
+| --- | --- | --- | --- |
+| currentValue | number | Valor percentual atual da barra. | obrigatório |
+| progressStatusConfig | ProgressStatusConfig[] | Lista de faixas para definir gradiente por intervalo. | obrigatório |
+
+### Tipo ProgressStatusConfig
+| Nome | Tipo | Descrição |
+| --- | --- | --- |
+| start | number | Valor inicial da faixa (inclusivo). |
+| end | number | Valor final da faixa (inclusivo). |
+| gradientStatus | ProgressStatusBarGradientStatus | Tipo de gradiente aplicado para a faixa. |
+
+### Enum ProgressStatusBarGradientStatus
+- `info`
+- `danger`
+- `success`
+- `alert`
+
+### Outputs
+| Nome | Tipo de Evento | Descrição |
+| --- | --- | --- |
+| (não possui) | - | Componente não emite eventos. |
+
+## Exemplos de Uso
+### Uso Básico
+```html
+<tcloud-ui-progress-status-bar
+  [currentValue]="42"
+  [progressStatusConfig]="statusConfig">
+</tcloud-ui-progress-status-bar>
+```
+
+### Exemplo com faixas operacionais
+```ts
+statusConfig = [
+  { start: 0, end: 40, gradientStatus: 'success' },
+  { start: 41, end: 75, gradientStatus: 'info' },
+  { start: 76, end: 90, gradientStatus: 'alert' },
+  { start: 91, end: 100, gradientStatus: 'danger' }
+];
+```
+
+```html
+<tcloud-ui-progress-status-bar
+  [currentValue]="82"
+  [progressStatusConfig]="statusConfig">
+</tcloud-ui-progress-status-bar>
+```
+
+### Valor acima da última faixa
+```html
+<!-- Usa o gradiente da última faixa configurada -->
+<tcloud-ui-progress-status-bar
+  [currentValue]="120"
+  [progressStatusConfig]="statusConfig">
+</tcloud-ui-progress-status-bar>
+```

package/fesm2022/dev-tcloud-tcloud-ui.mjs

@@ -5631,6 +5631,69 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 type: Input
             }] } });
 
+var ProgressStatusBarGradientStatus$1;
+(function (ProgressStatusBarGradientStatus) {
+    ProgressStatusBarGradientStatus["info"] = "info";
+    ProgressStatusBarGradientStatus["danger"] = "danger";
+    ProgressStatusBarGradientStatus["success"] = "success";
+    ProgressStatusBarGradientStatus["alert"] = "alert";
+})(ProgressStatusBarGradientStatus$1 || (ProgressStatusBarGradientStatus$1 = {}));
+var ProgressStatusBarRangeColor$1;
+(function (ProgressStatusBarRangeColor) {
+    ProgressStatusBarRangeColor["dangerStart"] = "#F48E85";
+    ProgressStatusBarRangeColor["dangerEnd"] = "#DC3545";
+    ProgressStatusBarRangeColor["alertStart"] = "#FECD6E";
+    ProgressStatusBarRangeColor["alertEnd"] = "#FEAC0E";
+    ProgressStatusBarRangeColor["infoStart"] = "#6BC1F2";
+    ProgressStatusBarRangeColor["infoEnd"] = "#0897E9";
+    ProgressStatusBarRangeColor["successStart"] = "#A3E78C";
+    ProgressStatusBarRangeColor["successEnd"] = "#47B13D";
+})(ProgressStatusBarRangeColor$1 || (ProgressStatusBarRangeColor$1 = {}));
+class TCloudUiProgressStatusBarComponent {
+    constructor() {
+        this.currentValue = input.required();
+        this.progressStatusConfig = input.required();
+        this.backgroundStyle = '';
+        effect(() => {
+            this.backgroundStyle = this.getBackgroundStyle();
+        });
+    }
+    getBackgroundStyle() {
+        if (!this.currentValue())
+            return '';
+        let currentStatusConfig = this.progressStatusConfig().find((x) => (this.currentValue() >= x.start && this.currentValue() <= x.end));
+        const lastStatusConfig = this.progressStatusConfig()[this.progressStatusConfig()?.length - 1];
+        if (!currentStatusConfig && this.currentValue() < lastStatusConfig.end)
+            return '';
+        if (!currentStatusConfig && this.currentValue() > lastStatusConfig.end) {
+            currentStatusConfig = { start: 0, end: 100, gradientStatus: lastStatusConfig.gradientStatus };
+        }
+        const startStatus = this.getProgressStatusBarRangeColor(currentStatusConfig.gradientStatus, 'start');
+        const endStatus = this.getProgressStatusBarRangeColor(currentStatusConfig.gradientStatus, 'end');
+        let style = `width:${this.currentValue()}%;backgroundImage:linear-gradient(90deg`;
+        style += `,${startStatus} 0%,${endStatus} 100%);`;
+        return style;
+    }
+    getProgressStatusBarRangeColor(_gradientStatus, position) {
+        switch (_gradientStatus) {
+            case ProgressStatusBarGradientStatus$1.alert:
+                return position === 'start' ? ProgressStatusBarRangeColor$1.alertStart : ProgressStatusBarRangeColor$1.alertEnd;
+            case ProgressStatusBarGradientStatus$1.danger:
+                return position === 'start' ? ProgressStatusBarRangeColor$1.dangerStart : ProgressStatusBarRangeColor$1.dangerEnd;
+            case ProgressStatusBarGradientStatus$1.success:
+                return position === 'start' ? ProgressStatusBarRangeColor$1.successStart : ProgressStatusBarRangeColor$1.successEnd;
+            default:
+                return position === 'start' ? ProgressStatusBarRangeColor$1.infoStart : ProgressStatusBarRangeColor$1.infoEnd;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiProgressStatusBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.21", type: TCloudUiProgressStatusBarComponent, isStandalone: true, selector: "tcloud-ui-progress-status-bar", inputs: { currentValue: { classPropertyName: "currentValue", publicName: "currentValue", isSignal: true, isRequired: true, transformFunction: null }, progressStatusConfig: { classPropertyName: "progressStatusConfig", publicName: "progressStatusConfig", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"progress-status-bar-container\">\n  <div\n    class=\"progress-status-bar\"\n    [style]=\"this.backgroundStyle\">\n  </div>\n</div>\n", styles: [":host{display:block}.progress-status-bar-container{background-color:var(--c-neutral-200);border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);position:relative}.progress-status-bar-container .progress-status-bar{border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);left:0;max-width:100%;position:absolute;top:0;transition:width .2s linear;width:0}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TCloudUiProgressStatusBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'tcloud-ui-progress-status-bar', imports: [], template: "<div class=\"progress-status-bar-container\">\n  <div\n    class=\"progress-status-bar\"\n    [style]=\"this.backgroundStyle\">\n  </div>\n</div>\n", styles: [":host{display:block}.progress-status-bar-container{background-color:var(--c-neutral-200);border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);position:relative}.progress-status-bar-container .progress-status-bar{border-radius:var(--bor-radius-pill);display:block;height:var(--size-12);left:0;max-width:100%;position:absolute;top:0;transition:width .2s linear;width:0}\n"] }]
+        }], ctorParameters: () => [] });
+
 class TCloudUiReorderItemsComponent {
     constructor() {
         this.sort_items = [];
@@ -7556,7 +7619,7 @@ class TCloudUiPaginationPipe {
             this._tcloudUiPaginationService.notifyCollectionChange(args.id);
         }
         this._previousLengths.set(args.id, currentLength);
-        const total = Math.ceil((collection?.length || 0) / args.itemsPerPage);
+        const total = args?.totalPages || Math.ceil((collection?.length || 0) / args.itemsPerPage);
         this._tcloudUiPaginationService.set_total(args, total);
         if (!Array.isArray(collection) ||
             isNaN(args.currentPage) ||
@@ -9020,6 +9083,7 @@ const COMPONENTS = [
     TCloudUiCubesComponent,
     TCloudUiMultiplesValuesComponent,
     TCloudUiProgressBarComponent,
+    TCloudUiProgressStatusBarComponent,
     TCloudUiReorderItemsComponent,
     TCloudUiWelcomeComponent,
     TCloudUiContainerComponent,
@@ -9146,6 +9210,7 @@ class TCloudUiModule {
             TCloudUiCubesComponent,
             TCloudUiMultiplesValuesComponent,
             TCloudUiProgressBarComponent,
+            TCloudUiProgressStatusBarComponent,
             TCloudUiReorderItemsComponent,
             TCloudUiWelcomeComponent,
             TCloudUiContainerComponent,
@@ -9237,6 +9302,7 @@ class TCloudUiModule {
             TCloudUiCubesComponent,
             TCloudUiMultiplesValuesComponent,
             TCloudUiProgressBarComponent,
+            TCloudUiProgressStatusBarComponent,
             TCloudUiReorderItemsComponent,
             TCloudUiWelcomeComponent,
             TCloudUiContainerComponent,
@@ -11309,5 +11375,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
+export { AcceptedFileType, BytesPipe, CNPJPipe, CPFPipe, CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR$2 as CUSTOM_INPUT_CONTROL_VALUE_ACCESSOR, DateBRPipe, DropdownGroupedSize, DropdownMultiSize$1 as DropdownMultiSize, DropdownSize$1 as DropdownSize, MonthNamePipe, MultiLevelDropdownSize, ProductActionPipe, ProgressStatusBarGradientStatus$1 as ProgressStatusBarGradientStatus, RespectivePipe, StatusInfoPipe, TCCondition, TCFiltersType, TCLOUD_UI_CONFIG, TCLOUD_UI_LAYOUT_SERVICE, TCLOUD_UI_LOCALE_SERVICE, TCLOUD_UI_USER_SERVICE, TCLOUD_UI_VIEWPORT_SERVICE, TCloudUiAccordionBodyComponent, TCloudUiAccordionComponent, TCloudUiAccordionTitleComponent, TCloudUiAlertBannerComponent, TCloudUiAlignDirective, TCloudUiBreadcrumbComponent, TCloudUiBreadcrumbService, TCloudUiButtonDirective, TCloudUiCalendarComponent, TCloudUiCardAccordionComponent, TCloudUiCardComponent, TCloudUiCardTitleComponent, TCloudUiCheckAccessDirective, TCloudUiCheckAccessService, TCloudUiCheckboxDirective, TCloudUiChoiceIssuesComponent, TCloudUiContainerColComponent, TCloudUiContainerComponent, TCloudUiContainerContentComponent, TCloudUiCubesComponent, TCloudUiCurrencyDirective, TCloudUiDataListComponent, TCloudUiDataListOptionComponent, TCloudUiDatepickerComponent, TCloudUiDatepickerTimeComponent, TCloudUiDigitOnlyDirective, TCloudUiDropdownComponent, TCloudUiDropdownMultiComponent, TCloudUiElCopyDirective, TCloudUiEmptyContentComponent, TCloudUiFaqComponent, TCloudUiFilterBarComponent, TCloudUiFiltersComponent, TCloudUiFormDirective, TCloudUiHighLightDirective, TCloudUiHoverParentDirective, TCloudUiIconButtonDirective, TCloudUiInputContainerComponent, TCloudUiInputDirective, TCloudUiInputPasswordComponent, TCloudUiInputSearchComponent, TCloudUiIpMaskDirective, TCloudUiLabelTokenComponent, TCloudUiLegendComponent, TCloudUiLineStepCircleComponent, TCloudUiLineStepTitleComponent, TCloudUiLinhaLogoComponent, TCloudUiLoadingComponent, TCloudUiLoadingTransitionsService, TCloudUiMessageComponent, TCloudUiModalBodyComponent, TCloudUiModalComponent, TCloudUiModalFooterComponent, TCloudUiModalHeaderComponent, TCloudUiModule, TCloudUiMultiInputComponent, TCloudUiMultiSelectComponent, TCloudUiMultiplesValuesComponent, TCloudUiNgCheckAccessDirective, TCloudUiNgFeatureFlagsDirective, TCloudUiNotFoundComponent, TCloudUiNumberStepComponent, TCloudUiPaginationComponent, TCloudUiPaginationPipe, TCloudUiProgressBarComponent, TCloudUiProgressStatusBarComponent, TCloudUiRadioDirective, TCloudUiRangeDateComponent, TCloudUiReorderItemsComponent, TCloudUiScrollBoxComponent, TCloudUiSearchBarComponent, TCloudUiSearchInObjectService, TCloudUiSearchInputComponent, TCloudUiSkeletonLoadingComponent, TCloudUiSkeletonLoadingComponentStyle, TCloudUiSlideToggleDirective, TCloudUiSubNavbarComponent, TCloudUiSubNavbarGroupComponent, TCloudUiSubNavbarItemComponent, TCloudUiTabContentComponent, TCloudUiTabGroupComponent, TCloudUiTabHeadComponent, TCloudUiTabItemComponent, TCloudUiTabMenuComponent, TCloudUiTabSubtitleComponent, TCloudUiTabTitleComponent, TCloudUiTableComponent, TCloudUiTagComponent, TCloudUiToastComponent, TCloudUiTooltipDirective, TCloudUiUploadAreaComponent, TCloudUiWelcomeComponent, TCloudUiWizardStepsComponent, TagColorsEnum, TcRevButtonDirective, TcRevCalendarComponent, TcRevCardAccordionComponent, TcRevCardComponent, TcRevCardTitleComponent, TcRevCheckboxDirective, TcRevComponentsLibModule, TcRevDropdownComponent, TcRevDropdownGroupedComponent, TcRevDropdownMultiComponent, TcRevDropdownMultiLevelComponent, TcRevEmptyContentComponent, TcRevFaqComponent, TcRevIconButtonDirective, TcRevInputContainerComponent, TcRevInputDirective, TcRevLoadingComponent, TcRevMessageComponent, TcRevMultiInputComponent, TcRevPaginationComponent, TcRevProgressStatusBarComponent, TcRevRadioDirective, TcRevSearchInputComponent, TcRevSideDrawerComponent, TcRevSkeletonLoadingComponent, TcRevSkeletonLoadingComponentStyle, TcRevSlideToggleDirective, TcRevSmallLoadingComponent, TcRevSmallLoadingComponentStyle, TcRevSubNavbarComponent, TcRevSubNavbarItemComponent, TcRevTabGroupComponent, TcRevTabItemComponent, TcRevTagComponent, TcRevToastComponent, TcRevTooltipDirective, TcRevWizardStepsComponent, ToTextPipe, TopologyEnvironmentPipe, TopologyProductPipe, TopologyRegionPipe, TopologyStatusPipe, echartBarConfig, isTextEllipsed, provideTCloudUi };
 //# sourceMappingURL=dev-tcloud-tcloud-ui.mjs.map