circletone/fesm2022/circletone.mjs

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

class ButtonComponent {
    constructor() {
        this.text = '';
        this.type = 'default';
        this.size = 'base';
        this.variant = 'default';
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", type: ButtonComponent, isStandalone: true, selector: "ct-button", inputs: { text: "text", type: "type", size: "size", variant: "variant" }, ngImport: i0, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default',\n    'border-primary': type === 'default' && variant === 'outline',\n    'border-on-primary': type === 'alternate' && variant === 'outline',\n    'border-yellow-400': type === 'warning' && variant === 'outline',\n    'border-red-400': type === 'error' && variant === 'outline',\n    'border-lime-600': type === 'success' && variant === 'outline',\n    'px-3 py-2 text-xs text-center': size === 'xs',\n    'px-3 py-2 text-sm text-center': size === 'sm',\n    'px-5 py-3 text-sm text-center': size === 'base',\n    'px-5 py-3 text-base text-center': size === 'lg',\n    'px-6 py-3.5 text-base text-center': size === 'xl'\n  }\"\n  class=\"rounded-md border-0 bg-transparent\">\n  {{ text }}\n</button>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
            type: Component,
            args: [{ selector: 'ct-button', standalone: true, imports: [NgClass], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  [ngClass]=\"{\n    'bg-primary': type === 'default' && variant === 'default',\n    'bg-on-primary': type === 'alternate' && variant === 'default',\n    'bg-yellow-400': type === 'warning' && variant === 'default',\n    'bg-red-400': type === 'error' && variant === 'default',\n    'bg-lime-600': type === 'success' && variant === 'default',\n    'border-primary': type === 'default' && variant === 'outline',\n    'border-on-primary': type === 'alternate' && variant === 'outline',\n    'border-yellow-400': type === 'warning' && variant === 'outline',\n    'border-red-400': type === 'error' && variant === 'outline',\n    'border-lime-600': type === 'success' && variant === 'outline',\n    'px-3 py-2 text-xs text-center': size === 'xs',\n    'px-3 py-2 text-sm text-center': size === 'sm',\n    'px-5 py-3 text-sm text-center': size === 'base',\n    'px-5 py-3 text-base text-center': size === 'lg',\n    'px-6 py-3.5 text-base text-center': size === 'xl'\n  }\"\n  class=\"rounded-md border-0 bg-transparent\">\n  {{ text }}\n</button>\n" }]
        }], propDecorators: { text: [{
                type: Input,
                args: [{ required: true }]
            }], type: [{
                type: Input
            }], size: [{
                type: Input
            }], variant: [{
                type: Input
            }] } });

class IconComponent {
    constructor() {
        this.icon = '';
        this.iconClass = '';
        this.fill = 'currentColor';
        this.strokeWidth = 1.5;
        this.strokeColor = 'currentColor';
        this.size = '6';
        this.iconPath = '';
    }
    ngOnInit() {
        this.iconPath = this.getIconPath();
        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 `./icons.svg#${this.icon}`;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.0", ngImport: i0, type: IconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.0", 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 size-full\">\n  <use [attr.xlink:href]=\"iconPath\"></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.0", 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 size-full\">\n  <use [attr.xlink:href]=\"iconPath\"></use>\n</svg>\n" }]
        }], propDecorators: { icon: [{
                type: Input
            }], iconClass: [{
                type: Input
            }], fill: [{
                type: Input
            }], strokeWidth: [{
                type: Input
            }], strokeColor: [{
                type: Input
            }], size: [{
                type: Input
            }] } });

const tailwindPreset = {
    theme: {
        extend: {
            darkMode: 'class',
            fontFamily: {
                primary: 'var(--font-primary)',
                title: 'var(--font-title)',
            },
            colors: {
                primary: {
                    DEFAULT: 'rgb(var(--primary) / <alpha-value>)',
                    dark: 'rgb(var(--primary-dark) / <alpha-value>)',
                    variation: 'rgb(var(--primary-variation) / <alpha-value>)',
                    'variation-dark': 'rgb(var(--primary-variation-dark) / <alpha-value>)',
                },
                secondary: {
                    DEFAULT: 'rgb(var(--secondary) / <alpha-value>)',
                    dark: 'rgb(var(--secondary-dark) / <alpha-value>)',
                },
                background: {
                    DEFAULT: 'rgb(var(--background) / <alpha-value>)',
                    dark: 'rgb(var(--background-dark) / <alpha-value>)',
                },
                surface: {
                    DEFAULT: 'rgb(var(--surface) / <alpha-value>)',
                    variation: 'rgb(var(--surface-variation) / <alpha-value>)',
                    dark: 'rgb(var(--surface-dark) / <alpha-value>)',
                    'variation-dark': 'rgb(var(--surface-variation-dark) / <alpha-value>)',
                },
                accent: {
                    DEFAULT: 'rgb(var(--accent) / <alpha-value>)',
                    dark: 'rgb(var(--accent-dark) / <alpha-value>)',
                },
                on: {
                    primary: 'rgb(var(--on-primary) / <alpha-value>)',
                    'primary-variation': 'rgb(var(--on-primary-variation) / <alpha-value>)',
                    secondary: 'rgb(var(--on-secondary) / <alpha-value>)',
                    'secondary-variation': 'rgb(var(--on-secondary-variation) / <alpha-value>)',
                    accent: 'rgb(var(--on-accent) / <alpha-value>)',
                    background: 'rgb(var(--on-background) / <alpha-value>)',
                    'background-variation': 'rgb(var(--on-background-variation) / <alpha-value>)',
                    surface: 'rgb(var(--on-surface) / <alpha-value>)',
                    'surface-variation': 'rgb(var(--on-surface-variation) / <alpha-value>)',
                    'primary-dark': 'rgb(var(--on-primary-dark) / <alpha-value>)',
                    'primary-variation-dark': 'rgb(var(--on-primary-variation-dark) / <alpha-value>)',
                    'secondary-dark': 'rgb(var(--on-secondary-dark) / <alpha-value>)',
                    'secondary-variation-dark': 'rgb(var(--on-secondary-variation-dark) / <alpha-value>)',
                    'accent-dark': 'rgb(var(--on-accent-dark) / <alpha-value>)',
                    'background-dark': 'rgb(var(--on-background-dark) / <alpha-value>)',
                    'background-variation-dark': 'rgb(var(--on-background-variation-dark) / <alpha-value>)',
                    'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
                    'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
                },
            },
        },
    },
};

/*
 * Public API Surface of circletone
 */

/**
 * Generated bundle index. Do not edit.
 */

export { ButtonComponent, IconComponent, tailwindPreset };
//# sourceMappingURL=circletone.mjs.map