@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
99 lines (95 loc) • 5.1 kB
JavaScript
import * as i0 from '@angular/core';
import { input, computed, ChangeDetectionStrategy, Component } from '@angular/core';
import { TypographyDirective } from '@sixbell-telco/sdk/directives/typography';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/**
* @internal
* Generates base progress bar classes with style variants
*/
const progressComponent = cva(['progress'], {
variants: {
variant: {
primary: ['progress-primary'],
secondary: ['progress-secondary'],
success: ['progress-success'],
info: ['progress-info'],
error: ['progress-error'],
warning: ['progress-warning'],
accent: ['progress-accent'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
},
});
/**
* A customizable progress indicator component
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports multiple color variants, indeterminate state, and label positioning.
*
* @example
* ```html
* <st-progress
* variant="primary"
* [value]="75"
* labelPosition="top"
* ></st-progress>
* ```
*
* @example
* ```html
* <st-progress
* variant="success"
* [indeterminate]="true"
* ></st-progress>
* ```
*/
class ProgressComponent {
/**
* Progress bar color variant
* @defaultValue 'primary'
*/
variant = input();
/**
* Current progress value (0-100)
* @defaultValue -1 (indeterminate when value < 0)
*/
value = input(-1);
/**
* Maximum progress value
* @defaultValue 100
*/
max = input(100);
/**
* Enable indeterminate animation
* @defaultValue false
*/
indeterminate = input(false);
/**
* Position of progress value label
* @defaultValue 'none'
*/
labelPosition = input('none');
/**
* @internal
* Computed class string for the progress bar container
*/
componentClass = computed(() => cn(progressComponent({
variant: this.variant(),
})));
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ProgressComponent, isStandalone: true, selector: "st-progress", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let labelPositionVar = labelPosition();\n@let valueVar = value();\n@let indeterminateVar = indeterminate();\n@let maxVar = max();\n@let componentClassVar = componentClass();\n\n<div class=\"flex flex-col items-center gap-1\">\n\t@if (valueVar >= 0 && labelPositionVar === 'top') {\n\t\t<span typography [tyVariant]=\"'body-xs'\">{{ valueVar }} %</span>\n\t}\n\t<progress [class]=\"componentClassVar\" [attr.value]=\"!indeterminateVar ? valueVar : null\" [max]=\"maxVar\"></progress>\n\t@if (valueVar >= 0 && labelPositionVar === 'bottom') {\n\t\t<span typography [tyVariant]=\"'body-xs'\">{{ valueVar }} %</span>\n\t}\n</div>\n", dependencies: [{ kind: "directive", type: TypographyDirective, selector: "[typography]", inputs: ["tyVariant", "tyColor", "tyFontWeight", "tyTextOverflow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ProgressComponent, decorators: [{
type: Component,
args: [{ selector: 'st-progress', imports: [TypographyDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let labelPositionVar = labelPosition();\n@let valueVar = value();\n@let indeterminateVar = indeterminate();\n@let maxVar = max();\n@let componentClassVar = componentClass();\n\n<div class=\"flex flex-col items-center gap-1\">\n\t@if (valueVar >= 0 && labelPositionVar === 'top') {\n\t\t<span typography [tyVariant]=\"'body-xs'\">{{ valueVar }} %</span>\n\t}\n\t<progress [class]=\"componentClassVar\" [attr.value]=\"!indeterminateVar ? valueVar : null\" [max]=\"maxVar\"></progress>\n\t@if (valueVar >= 0 && labelPositionVar === 'bottom') {\n\t\t<span typography [tyVariant]=\"'body-xs'\">{{ valueVar }} %</span>\n\t}\n</div>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ProgressComponent, progressComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-progress.mjs.map