import { DOCUMENT, NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Inject, Input } from '@angular/core';
const icons = `
`;
class IconComponent {
constructor(renderer, document, el) {
this.renderer = renderer;
this.document = document;
this.el = el;
this.icon = '';
this.iconClass = '';
this.fill = 'currentColor';
this.strokeWidth = 1.5;
this.strokeColor = 'currentColor';
this.size = 'base';
this.iconPath = '';
}
ngOnInit() {
this.injectSVG();
this.strokeColor = this.getFormattedColor(this.strokeColor);
this.fill = this.getFormattedColor(this.fill);
}
getFormattedColor(color) {
if (color.startsWith('--')) {
const rgbValue = getComputedStyle(document.documentElement).getPropertyValue(color).trim();
return `rgb(${rgbValue})`;
}
return color;
}
getIconPath() {
return `#${this.icon}`;
}
injectSVG() {
const svgElement = this.renderer.createElement('div');
this.renderer.setProperty(svgElement, 'innerHTML', icons);
this.renderer.setStyle(svgElement, 'display', 'none');
this.renderer.appendChild(this.document.body, svgElement);
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: IconComponent, deps: [{ token: i0.Renderer2 }, { token: DOCUMENT }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.1", type: IconComponent, isStandalone: true, selector: "ct-icon", inputs: { icon: "icon", iconClass: "iconClass", fill: "fill", strokeWidth: "strokeWidth", strokeColor: "strokeColor", size: "size" }, ngImport: i0, template: "\n \n\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{ selector: 'ct-icon', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n \n\n" }]
}], ctorParameters: () => [{ type: i0.Renderer2 }, { type: Document, decorators: [{
type: Inject,
args: [DOCUMENT]
}] }, { type: i0.ElementRef }], propDecorators: { icon: [{
type: Input
}], iconClass: [{
type: Input
}], fill: [{
type: Input
}], strokeWidth: [{
type: Input
}], strokeColor: [{
type: Input
}], size: [{
type: Input
}] } });
class ButtonComponent {
constructor() {
this.text = '';
this.type = 'default';
this.size = 'base';
this.variant = 'default';
this.icon = undefined;
}
getCssClasses() {
const sizeAndTextClasses = this.getSizeAndTextClasses();
const borderClasses = this.getBorderClasses();
const backgroundClasses = this.getBackgroundClasses();
const allClasses = { ...sizeAndTextClasses, ...borderClasses, ...backgroundClasses };
return this.getClassesAsString(allClasses);
}
getBackgroundClasses() {
return {
'bg-primary hover:bg-primary-variation dark:bg-primary-dark': this.type === 'default' && this.variant === 'default',
'bg-secondary hover:bg-primary dark:bg-secondary-dark': this.type === 'alternate' && this.variant === 'default',
'bg-warning hover:bg-warning-variation': this.type === 'warning' && this.variant === 'default',
'bg-error hover:bg-error-variation': this.type === 'error' && this.variant === 'default',
'bg-success hover:bg-success-variation': this.type === 'success' && this.variant === 'default',
};
}
getBorderClasses() {
return {
border: this.variant === 'outline',
'border-primary dark:border-primary-dark': this.type === 'default' && this.variant === 'outline',
'border-secondary dark:border-secondary-dark': this.type === 'alternate' && this.variant === 'outline',
'border-warning': this.type === 'warning' && this.variant === 'outline',
'border-error': this.type === 'error' && this.variant === 'outline',
'border-success': this.type === 'success' && this.variant === 'outline',
};
}
getSizeAndTextClasses() {
return {
'px-3 py-2': this.size === 'xs' || this.size === 'sm',
'px-5 py-2.5': this.size === 'base' || this.size === 'lg',
'px-6 py-3.5': this.size === 'xl',
'text-xs': this.size === 'xs',
'text-sm': this.size === 'sm' || this.size === 'base',
'text-base': this.size === 'lg' || this.size === 'xl',
};
}
getClassesAsString(classesObj) {
return Object.entries(classesObj)
.filter(([_, value]) => value)
.map(([key, _]) => key)
.join(' ');
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.1", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", type: "type", size: "size", variant: "variant", icon: "icon" }, ngImport: i0, template: "\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "iconClass", "fill", "strokeWidth", "strokeColor", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImport: i0, type: ButtonComponent, decorators: [{
type: Component,
args: [{ selector: 'ct-button', standalone: true, imports: [NgClass, IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "\n" }]
}], propDecorators: { text: [{
type: Input,
args: [{ required: true }]
}], type: [{
type: Input
}], size: [{
type: Input
}], variant: [{
type: Input
}], icon: [{
type: Input
}] } });
/*
* Public API Surface of circletone
*/
/**
* Generated bundle index. Do not edit.
*/
export { ButtonComponent, IconComponent };
//# sourceMappingURL=circletone.mjs.map