@sixbell-telco/sdk
Version:
A collection of reusable components designed for use in Sixbell Telco Angular projects
220 lines (216 loc) • 9.95 kB
JavaScript
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { input, computed, Component } from '@angular/core';
import { IconComponent } from '@sixbell-telco/sdk/components/icon';
import { cn } from '@sixbell-telco/sdk/utils/cn';
import { cva } from 'class-variance-authority';
/**
* @internal
* Generates base button classes with style variants
*/
const buttonComponent = cva(['btn', 'text-pretty', 'font-medium', 'leading-normal', 'items-center', 'align-top'], {
variants: {
variant: {
primary: ['btn-primary'],
secondary: ['btn-secondary'],
tertiary: ['btn-tertiary'],
accent: ['btn-accent'],
info: ['btn-info'],
success: ['btn-success'],
warning: ['btn-warning'],
error: ['btn-error'],
icon: [
'btn-ghost',
'text-neutral',
'hover:text-primary',
'hover:bg-transparent',
'active:focus:bg-transparent',
'active:focus:border-transparent',
'focus-visible:outline-current',
],
},
size: {
xs: ['btn-xs'],
sm: ['btn-sm'],
md: ['btn-md'],
lg: ['btn-lg'],
xl: ['btn-xl'],
},
iconPosition: {
left: [''],
right: ['flex-row-reverse'],
},
},
compoundVariants: [],
defaultVariants: {
variant: 'primary',
size: 'md',
iconPosition: 'left',
},
});
/**
* A customizable button component with multiple variants and icon support
*
* @remarks
* Built with Tailwind CSS and class-variance-authority for style management.
* Supports various styling variants, sizes, icon positions, and state modifiers.
*
* @example
* ```html
* <st-button
* variant="primary"
* size="md"
* icon="check"
* iconPosition="left"
* >
* Submit
* </st-button>
* ```
*/
class ButtonComponent {
/**
* Button style variant
* @defaultValue 'primary'
*/
variant = input();
/**
* Ghost button style (transparent background)
* @defaultValue false
*/
ghost = input(false);
/**
* Outline button style (border with transparent fill)
* @defaultValue false
*/
outline = input(false);
/**
* Link button style (appears as a hyperlink)
* @defaultValue false
*/
link = input(false);
/**
* Soft button style (muted/subdued color variant)
* @defaultValue false
*/
soft = input(false);
/**
* Dash button style (dashed border)
* @defaultValue false
*/
dash = input(false);
/**
* Wide button style (increased horizontal padding)
* @defaultValue false
*/
wide = input(false);
/**
* Circular button shape
* @defaultValue false
*/
circle = input(false);
/**
* Square button shape
* @defaultValue false
*/
square = input(false);
/**
* Glass effect styling
* @defaultValue false
*/
glass = input(false);
/**
* Full-width button
* @defaultValue false
*/
block = input(false);
/**
* Show loading spinner
* @defaultValue false
*/
loader = input(false);
/**
* Button size variant
* @defaultValue 'md'
*/
size = input();
/**
* Add drop shadow
* @defaultValue false
*/
shadow = input(false);
/**
* Button is focusable
* @defaultValue true
*/
focusable = input(true);
/**
* Icon name (from icon library)
*/
icon = input();
/**
* Position of icon relative to text
* @defaultValue 'left'
*/
iconPosition = input();
/**
* HTML button type attribute
* @defaultValue 'button'
*/
type = input('button');
/**
* Disabled state
* @defaultValue false
*/
disabled = input(false);
/**
* @internal
* Computed class string for the button container
*/
containerClass = computed(() => cn(buttonComponent({
variant: this.variant(),
size: this.size(),
iconPosition: this.iconPosition(),
}), {
'btn-ghost': this.ghost(),
'btn-outline': this.outline(),
'btn-link': this.link(),
'btn-soft': this.soft(),
'btn-dash': this.dash(),
'btn-wide': this.wide(),
'btn-circle': this.circle(),
'btn-square': this.square(),
glass: this.glass(),
'w-full': this.block(),
'btn-loading': this.loader(),
'shadow-main': this.shadow(),
}));
linkClass = computed(() => {
return cn('link font-body font-normal inline-flex items-center leading-normal align-top gap-1 no-underline', this.iconPosition(), {
'link-primary': this.variant() === 'primary',
'link-secondary': this.variant() === 'secondary',
'link-tertiary': this.variant() === 'tertiary',
'link-accent': this.variant() === 'accent',
'link-success': this.variant() === 'success',
'link-info': this.variant() === 'info',
'link-warning': this.variant() === 'warning',
'link-error': this.variant() === 'error',
'text-[12px]': this.size() === 'xs',
'text-[13px]': this.size() === 'sm',
'text-[14px]': this.size() === 'md',
'text-[15px]': this.size() === 'lg',
'text-[16px]': this.size() === 'xl',
'text-base-content/10 hover:text-base-content/10 cursor-default hover:cursor-default': this.disabled(),
});
});
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.0", type: ButtonComponent, isStandalone: true, selector: "st-button", inputs: { variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, ghost: { classPropertyName: "ghost", publicName: "ghost", isSignal: true, isRequired: false, transformFunction: null }, outline: { classPropertyName: "outline", publicName: "outline", isSignal: true, isRequired: false, transformFunction: null }, link: { classPropertyName: "link", publicName: "link", isSignal: true, isRequired: false, transformFunction: null }, soft: { classPropertyName: "soft", publicName: "soft", isSignal: true, isRequired: false, transformFunction: null }, dash: { classPropertyName: "dash", publicName: "dash", isSignal: true, isRequired: false, transformFunction: null }, wide: { classPropertyName: "wide", publicName: "wide", isSignal: true, isRequired: false, transformFunction: null }, circle: { classPropertyName: "circle", publicName: "circle", isSignal: true, isRequired: false, transformFunction: null }, square: { classPropertyName: "square", publicName: "square", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, block: { classPropertyName: "block", publicName: "block", isSignal: true, isRequired: false, transformFunction: null }, loader: { classPropertyName: "loader", publicName: "loader", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPosition: { classPropertyName: "iconPosition", publicName: "iconPosition", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@let iconVar = icon();\n@let loaderVar = loader();\n@let focusableVar = focusable();\n<button [class]=\"link() === false ? containerClass() : linkClass()\" [type]=\"type()\" [disabled]=\"disabled()\" [tabIndex]=\"focusableVar ? 0 : -1\">\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t@if (loaderVar) {\n\t\t<span class=\"loading loading-spinner h-[1.2em] w-[1.2em]\"></span>\n\t}\n\t<ng-content></ng-content>\n</button>\n", styles: [""], dependencies: [{ kind: "component", type: IconComponent, selector: "st-icon", inputs: ["color", "size", "icon"] }, { kind: "ngmodule", type: CommonModule }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.0", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'st-button', imports: [IconComponent, CommonModule], template: "@let iconVar = icon();\n@let loaderVar = loader();\n@let focusableVar = focusable();\n<button [class]=\"link() === false ? containerClass() : linkClass()\" [type]=\"type()\" [disabled]=\"disabled()\" [tabIndex]=\"focusableVar ? 0 : -1\">\n\t@if (iconVar) {\n\t\t<st-icon [icon]=\"iconVar\" color=\"inherit\" size=\"auto\"></st-icon>\n\t}\n\t@if (loaderVar) {\n\t\t<span class=\"loading loading-spinner h-[1.2em] w-[1.2em]\"></span>\n\t}\n\t<ng-content></ng-content>\n</button>\n" }]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, buttonComponent };
//# sourceMappingURL=sixbell-telco-sdk-components-button.mjs.map