circletone/fesm2022/circletone.mjs

import { DOCUMENT, NgClass } from '@angular/common';
import * as i0 from '@angular/core';
import { Component, ChangeDetectionStrategy, Inject, Input } from '@angular/core';

const icons = ` 
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <symbol id="arrow-down" viewBox="0 0 24 24" fill="none" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
    </symbol>
    <symbol id="information-circle" viewBox="0 0 24 24" fill="none">
        <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" />
    </symbol>
    <symbol id="paper-clip" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
    </symbol>
</svg>
`;

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: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex\"\n  [class.size-3]=\"size === 'xs'\"\n  [class.size-4]=\"size === 'sm'\"\n  [class.size-5]=\"size === 'base'\"\n  [class.size-6]=\"size === 'lg'\"\n  [class.size-8]=\"size === 'xl'\">\n  <use [attr.xlink:href]=\"getIconPath()\"></use>\n</svg>\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: "<svg\n  [ngClass]=\"iconClass\"\n  [attr.fill]=\"fill\"\n  [attr.stroke-width]=\"strokeWidth\"\n  [attr.stroke]=\"strokeColor\"\n  class=\"flex\"\n  [class.size-3]=\"size === 'xs'\"\n  [class.size-4]=\"size === 'sm'\"\n  [class.size-5]=\"size === 'base'\"\n  [class.size-6]=\"size === 'lg'\"\n  [class.size-8]=\"size === 'xl'\">\n  <use [attr.xlink:href]=\"getIconPath()\"></use>\n</svg>\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: "<button class=\"flex flex-row items-center gap-1.5 rounded-md\" [ngClass]=\"getCssClasses()\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size || 'base'\" [icon]=\"icon\" />\n  }\n  {{ text }}\n</button>\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: "<button class=\"flex flex-row items-center gap-1.5 rounded-md\" [ngClass]=\"getCssClasses()\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"size || 'base'\" [icon]=\"icon\" />\n  }\n  {{ text }}\n</button>\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