Update to v0.60.0

esm2022/lib/components/atoms/icon/icon.constants.mjs

@@ -1,8 +1,14 @@
 export const icons = ` 
 <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
-    <symbol id="arrow-down" viewBox="0 0 24 24">
+    <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>
 `;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb25zdGFudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9pY29uL2ljb24uY29uc3RhbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRzs7Ozs7O0NBTXBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgaWNvbnMgPSBgIFxuPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgc3R5bGU9XCJkaXNwbGF5Om5vbmVcIj5cbiAgICA8c3ltYm9sIGlkPVwiYXJyb3ctZG93blwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIj5cbiAgICAgICAgPHBhdGggc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIgZD1cIk0xOS41IDEzLjVMMTIgMjFtMCAwbC03LjUtNy41TTEyIDIxVjNcIiAvPlxuICAgIDwvc3ltYm9sPlxuPC9zdmc+XG5gO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaWNvbi5jb25zdGFudHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jaXJjbGV0b25lL3NyYy9saWIvY29tcG9uZW50cy9hdG9tcy9pY29uL2ljb24uY29uc3RhbnRzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLEtBQUssR0FBRzs7Ozs7Ozs7Ozs7O0NBWXBCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgaWNvbnMgPSBgIFxuPHN2ZyB4bWxucz1cImh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnXCIgc3R5bGU9XCJkaXNwbGF5Om5vbmVcIj5cbiAgICA8c3ltYm9sIGlkPVwiYXJyb3ctZG93blwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBmaWxsPVwibm9uZVwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZT1cImN1cnJlbnRDb2xvclwiPlxuICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiBkPVwiTTE5LjUgMTMuNUwxMiAyMW0wIDBsLTcuNS03LjVNMTIgMjFWM1wiIC8+XG4gICAgPC9zeW1ib2w+XG4gICAgPHN5bWJvbCBpZD1cImluZm9ybWF0aW9uLWNpcmNsZVwiIHZpZXdCb3g9XCIwIDAgMjQgMjRcIiBmaWxsPVwibm9uZVwiPlxuICAgICAgICA8cGF0aCBzdHJva2UtbGluZWNhcD1cInJvdW5kXCIgc3Ryb2tlLWxpbmVqb2luPVwicm91bmRcIiBkPVwibTExLjI1IDExLjI1LjA0MS0uMDJhLjc1Ljc1IDAgMCAxIDEuMDYzLjg1MmwtLjcwOCAyLjgzNmEuNzUuNzUgMCAwIDAgMS4wNjMuODUzbC4wNDEtLjAyMU0yMSAxMmE5IDkgMCAxIDEtMTggMCA5IDkgMCAwIDEgMTggMFptLTktMy43NWguMDA4di4wMDhIMTJWOC4yNVpcIiAvPlxuICAgIDwvc3ltYm9sPlxuICAgIDxzeW1ib2wgaWQ9XCJwYXBlci1jbGlwXCIgZmlsbD1cIm5vbmVcIiB2aWV3Qm94PVwiMCAwIDI0IDI0XCIgc3Ryb2tlLXdpZHRoPVwiMS41XCIgc3Ryb2tlPVwiY3VycmVudENvbG9yXCI+XG4gICAgICAgIDxwYXRoIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiIGQ9XCJtMTguMzc1IDEyLjczOS03LjY5MyA3LjY5M2E0LjUgNC41IDAgMCAxLTYuMzY0LTYuMzY0bDEwLjk0LTEwLjk0QTMgMyAwIDEgMSAxOS41IDcuMzcyTDguNTUyIDE4LjMybS4wMDktLjAxLS4wMS4wMW01LjY5OS05Ljk0MS03LjgxIDcuODFhMS41IDEuNSAwIDAgMCAyLjExMiAyLjEzXCIgLz5cbiAgICA8L3N5bWJvbD5cbjwvc3ZnPlxuYDtcbiJdfQ==

fesm2022/circletone.mjs

@@ -4,9 +4,15 @@ 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">
+    <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>
 `;
 
@@ -74,14 +80,55 @@ class ButtonComponent {
         this.size = 'base';
         this.variant = 'default';
         this.icon = undefined;
-        this.iconSize = 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", iconSize: "iconSize" }, ngImport: i0, template: "<button\n  class=\"flex flex-row items-center gap-2 rounded-md px-4 py-2\"\n  [class.bg-primary]=\"type === 'default' && variant === 'default'\"\n  [class.bg-on-primary]=\"type === 'alternate' && variant === 'default'\"\n  [class.bg-yellow-400]=\"type === 'warning' && variant === 'default'\"\n  [class.bg-red-400]=\"type === 'error' && variant === 'default'\"\n  [class.bg-lime-600]=\"type === 'success' && variant === 'default'\"\n  [class.border]=\"variant === 'outline'\"\n  [class.border-primary]=\"type === 'default' && variant === 'outline'\"\n  [class.border-on-primary]=\"type === 'alternate' && variant === 'outline'\"\n  [class.border-yellow-400]=\"type === 'warning' && variant === 'outline'\"\n  [class.border-red-400]=\"type === 'error' && variant === 'outline'\"\n  [class.border-lime-600]=\"type === 'success' && variant === 'outline'\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"iconSize || 'base'\" [icon]=\"icon\" />\n  }\n  {{ text }}\n</button>\n", dependencies: [{ kind: "component", type: IconComponent, selector: "ct-icon", inputs: ["icon", "iconClass", "fill", "strokeWidth", "strokeColor", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    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: [IconComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  class=\"flex flex-row items-center gap-2 rounded-md px-4 py-2\"\n  [class.bg-primary]=\"type === 'default' && variant === 'default'\"\n  [class.bg-on-primary]=\"type === 'alternate' && variant === 'default'\"\n  [class.bg-yellow-400]=\"type === 'warning' && variant === 'default'\"\n  [class.bg-red-400]=\"type === 'error' && variant === 'default'\"\n  [class.bg-lime-600]=\"type === 'success' && variant === 'default'\"\n  [class.border]=\"variant === 'outline'\"\n  [class.border-primary]=\"type === 'default' && variant === 'outline'\"\n  [class.border-on-primary]=\"type === 'alternate' && variant === 'outline'\"\n  [class.border-yellow-400]=\"type === 'warning' && variant === 'outline'\"\n  [class.border-red-400]=\"type === 'error' && variant === 'outline'\"\n  [class.border-lime-600]=\"type === 'success' && variant === 'outline'\">\n  @if (icon) {\n    <ct-icon class=\"flex\" [size]=\"iconSize || 'base'\" [icon]=\"icon\" />\n  }\n  {{ text }}\n</button>\n" }]
+            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 }]
@@ -93,8 +140,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.1", ngImpor
                 type: Input
             }], icon: [{
                 type: Input
-            }], iconSize: [{
-                type: Input
             }] } });
 
 /*

lib/components/atoms/button/button.component.d.ts

@@ -6,7 +6,11 @@ export declare class ButtonComponent {
     size: SizeType;
     variant: 'default' | 'outline';
     icon?: string;
-    iconSize?: SizeType;
+    getCssClasses(): string;
+    private getBackgroundClasses;
+    private getBorderClasses;
+    private getSizeAndTextClasses;
+    private getClassesAsString;
     static ɵfac: i0.ɵɵFactoryDeclaration<ButtonComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ct-button", never, { "text": { "alias": "text"; "required": true; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; "iconSize": { "alias": "iconSize"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ButtonComponent, "ct-button", never, { "text": { "alias": "text"; "required": true; }; "type": { "alias": "type"; "required": false; }; "size": { "alias": "size"; "required": false; }; "variant": { "alias": "variant"; "required": false; }; "icon": { "alias": "icon"; "required": false; }; }, {}, never, never, true, never>;
 }

lib/components/atoms/icon/icon.constants.d.ts

@@ -1 +1 @@
-export declare const icons = " \n<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n    <symbol id=\"arrow-down\" viewBox=\"0 0 24 24\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3\" />\n    </symbol>\n</svg>\n";
+export declare const icons = " \n<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display:none\">\n    <symbol id=\"arrow-down\" viewBox=\"0 0 24 24\" fill=\"none\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <path stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3\" />\n    </symbol>\n    <symbol id=\"information-circle\" viewBox=\"0 0 24 24\" fill=\"none\">\n        <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\" />\n    </symbol>\n    <symbol id=\"paper-clip\" fill=\"none\" viewBox=\"0 0 24 24\" stroke-width=\"1.5\" stroke=\"currentColor\">\n        <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\" />\n    </symbol>\n</svg>\n";

tailwind.config.js

@@ -1,8 +1,10 @@
 var colors = require('tailwindcss/colors');
+var plugin = require('tailwindcss/plugin');
 
 /** @type {import('tailwindcss').Config} */
 
 module.exports = {
+  darkMode: 'selector',
   content: ['./src/**/*.{html,js,ts}'],
   theme: {
     extend: {
@@ -58,7 +60,29 @@ module.exports = {
           'surface-dark': 'rgb(var(--on-surface-dark) / <alpha-value>)',
           'surface-variation-dark': 'rgb(var(--on-surface-variation-dark) / <alpha-value>)',
         },
+        success: {
+          DEFAULT: colors.lime[600],
+          variation: colors.green[700],
+        },
+        warning: {
+          DEFAULT: colors.amber[400],
+          variation: colors.amber[600],
+        },
+        error: {
+          DEFAULT: colors.red[400],
+          variation: colors.red[600],
+        },
       },
     },
   },
+  plugins: [
+    plugin(function ({ addBase, theme }) {
+      addBase({
+        h1: { fontSize: theme('fontSize.3xl'), fontWeight: theme('fontWeight.bold') },
+        h2: { fontSize: theme('fontSize.2xl'), fontWeight: theme('fontWeight.bold') },
+        h3: { fontSize: theme('fontSize.xl'), fontWeight: theme('fontWeight.semibold') },
+        h4: { fontSize: theme('fontSize.lg'), fontWeight: theme('fontWeight.semibold') },
+      });
+    }),
+  ],
 };