@xosue-utils/actions 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# @xosue-utils/actions
+
+Botones Angular 19 standalone (`text-btn`, `icon-btn`) con estética **flat** y altura fija **32px**.
+
+## Uso
+
+```ts
+import { TextBtnComponent, IconBtnComponent } from '@xosue-utils/actions';
+```
+
+```html
+<text-btn label="Guardar" icon="save" color="primary"></text-btn>
+<icon-btn icon="trash-2" color="danger" variant="ghost"></icon-btn>
+```
+
+## Diseño
+
+- Altura siempre `32px` (igual que Entry).
+- `IconBtn`: también `width: 32px`, padding `4px`.
+- `TextBtn`: padding `4px 8px` (md); sm `2px 4px`; lg `4px 12px`.
+- Rounded por defecto: `normal` (`var(--radius-lg)`).
+- Flat: sin `box-shadow`, sin `scale` en active; hover/active vía CSS vars.
+
+## Colores (host)
+
+El host debe definir variables como `--btn-primary-*`, `--success-*`, `--error-*`, etc. La librería **no** hardcodea colores.
+
+## Desarrollo local
+
+```json
+"@xosue-utils/actions": "file:../xosue-utils/actions"
+```
+
+## Build
+
+```bash
+cd D:\apps\xosue-utils\actions
+npm install
+npm run build
+```

package/fesm2022/xosue-utils-actions.mjs

@@ -0,0 +1,416 @@
+import * as i0 from '@angular/core';
+import { input, booleanAttribute, computed, Component, output } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
+import { RouterLink } from '@angular/router';
+import { LucideDynamicIcon } from '@lucide/angular';
+
+/**
+ * Icono Lucide.
+ *
+ * HTML:
+ *   <lucide-icon name="star"></lucide-icon>
+ *   <lucide-icon name="heart" filled></lucide-icon>  // relleno + trazo
+ *
+ * SASS — variables CSS (heredan del padre):
+ *   --lucide-stroke: var(--primary)
+ *   --lucide-fill: var(--accent)
+ *   --lucide-stroke-width: 2
+ */
+class LucideIconComponent {
+    name = input.required();
+    size = input(undefined);
+    spin = input(false, { transform: booleanAttribute });
+    /** Activa relleno (--lucide-fill); el trazo se conserva. */
+    filled = input(false, { transform: booleanAttribute });
+    dimStyle = computed(() => {
+        const s = this.size();
+        if (s === undefined || s === null || s === '')
+            return null;
+        if (typeof s === 'number') {
+            return { width: `${s}px`, height: `${s}px` };
+        }
+        const trimmed = String(s).trim();
+        if (/^\d+(\.\d+)?$/.test(trimmed)) {
+            return { width: `${trimmed}px`, height: `${trimmed}px` };
+        }
+        return { width: trimmed, height: trimmed };
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LucideIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.2.11", type: LucideIconComponent, isStandalone: true, selector: "lucide-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, filled: { classPropertyName: "filled", publicName: "filled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.lucide-icon--filled": "filled()", "attr.filled": "filled() ? \"\" : null" } }, ngImport: i0, template: `
+    <svg
+      class="lucide-svg inline-block shrink-0 align-middle"
+      [class.lucide-svg--filled]="filled()"
+      [class.animate-spin]="spin()"
+      [style.width]="dimStyle()?.width"
+      [style.height]="dimStyle()?.height"
+      [lucideIcon]="name()"
+      aria-hidden="true"
+    />
+  `, isInline: true, dependencies: [{ kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: LucideIconComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'lucide-icon',
+                    standalone: true,
+                    imports: [LucideDynamicIcon],
+                    host: {
+                        '[class.lucide-icon--filled]': 'filled()',
+                        '[attr.filled]': 'filled() ? "" : null',
+                    },
+                    template: `
+    <svg
+      class="lucide-svg inline-block shrink-0 align-middle"
+      [class.lucide-svg--filled]="filled()"
+      [class.animate-spin]="spin()"
+      [style.width]="dimStyle()?.width"
+      [style.height]="dimStyle()?.height"
+      [lucideIcon]="name()"
+      aria-hidden="true"
+    />
+  `,
+                }]
+        }] });
+
+function buildUiClasses(opts) {
+    const classes = [
+        opts.base,
+        'Ui',
+        `Ui--size-${opts.size ?? 'md'}`,
+        `Ui--rounded-${opts.rounded ?? 'normal'}`,
+        `Ui--color-${opts.color ?? 'primary'}`,
+        `Ui--${opts.variant ?? 'solid'}`,
+        `Ui--fit-${opts.fit ?? 'content'}`,
+    ];
+    if (opts.ripple !== false) {
+        classes.push('Ui--ripple');
+    }
+    if (opts.disabled) {
+        classes.push('Ui--disabled');
+    }
+    if (opts.base === 'TextBtn') {
+        classes.push(`TextBtn--${opts.layout ?? 'horizontal'}`);
+    }
+    return classes.join(' ');
+}
+function buildUiHostStyle(colors, fit, width) {
+    const style = {};
+    if (colors.text)
+        style['--ui-text'] = colors.text;
+    if (colors.bg)
+        style['--ui-bg'] = colors.bg;
+    if (colors.border)
+        style['--ui-border'] = colors.border;
+    if (fit === 'fixed' && width) {
+        style['width'] = width;
+    }
+    return style;
+}
+
+class TextBtnComponent {
+    label = input('');
+    icon = input(null);
+    iconPosition = input('left');
+    iconSpin = input(false, { transform: booleanAttribute });
+    layout = input('horizontal');
+    variant = input('solid');
+    color = input('primary');
+    rounded = input('normal');
+    size = input('md');
+    ripple = input(true, { transform: booleanAttribute });
+    disabled = input(false, { transform: booleanAttribute });
+    buttonType = input('button');
+    href = input(null);
+    routerLink = input(null);
+    fit = input('content');
+    width = input(null);
+    textColor = input(null);
+    bgColor = input(null);
+    borderColor = input(null);
+    title = input(null);
+    clicked = output();
+    classes = computed(() => buildUiClasses({
+        base: 'TextBtn',
+        size: this.size(),
+        rounded: this.rounded(),
+        color: this.color(),
+        variant: this.variant(),
+        ripple: this.ripple(),
+        disabled: this.disabled(),
+        fit: this.fit(),
+        layout: this.layout(),
+    }));
+    hostStyle = computed(() => buildUiHostStyle({
+        text: this.textColor(),
+        bg: this.bgColor(),
+        border: this.borderColor(),
+    }, this.fit(), this.width()));
+    onActivate(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TextBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: TextBtnComponent, isStandalone: true, selector: "text-btn", inputs: { label: { classPropertyName: "label", publicName: "label", 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 }, iconSpin: { classPropertyName: "iconSpin", publicName: "iconSpin", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    @if (href()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [href]="disabled() ? null : href()"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </a>
+    } @else if (routerLink()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [routerLink]="disabled() ? null : routerLink()"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </a>
+    } @else {
+      <button
+        [class]="classes()"
+        [style]="hostStyle()"
+        [type]="buttonType()"
+        [disabled]="disabled()"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </button>
+    }
+
+    <ng-template #content>
+      @if (icon() && iconPosition() === 'left') {
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="iconSpin()">
+          <lucide-icon [name]="icon()!" [spin]="iconSpin()"></lucide-icon>
+        </span>
+      }
+      @if (label()) {
+        <span class="Ui__Label">{{ label() }}</span>
+      }
+      <ng-content></ng-content>
+      @if (icon() && iconPosition() === 'right') {
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="iconSpin()">
+          <lucide-icon [name]="icon()!" [spin]="iconSpin()"></lucide-icon>
+        </span>
+      }
+    </ng-template>
+  `, isInline: true, styles: [".Ui,.IconBtn,.TextBtn{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;min-height:32px;border:1px solid transparent;font-family:inherit;font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease;position:relative;overflow:hidden;max-width:100%;box-shadow:none}.Ui:focus-visible,.IconBtn:focus-visible,.TextBtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Ui--fit-content{width:auto;max-width:100%}.Ui--fit-fill{width:100%;max-width:100%}.Ui--fit-fixed{max-width:100%}.Ui--size-sm{--ui-pad-y: 2px;--ui-pad-x: 4px;--ui-font: .8rem;--ui-icon: 14px;--ui-gap: 4px}.Ui--size-md{--ui-pad-y: 4px;--ui-pad-x: 8px;--ui-font: .875rem;--ui-icon: 16px;--ui-gap: 4px}.Ui--size-lg{--ui-pad-y: 4px;--ui-pad-x: 12px;--ui-font: 1rem;--ui-icon: 18px;--ui-gap: 8px}.Ui--rounded-full{border-radius:9999px}.Ui--rounded-medium{border-radius:var(--radius-xl, 24px)}.Ui--rounded-normal{border-radius:var(--radius-lg, 12px)}.Ui--rounded-small{border-radius:var(--radius-md, 8px)}.Ui--rounded-square{border-radius:var(--radius-sm, 4px)}.Ui--color-primary{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active)}.Ui--color-secondary{--ui-text: var(--btn-secondary-text);--ui-bg: var(--btn-secondary-bg);--ui-border: var(--btn-secondary-border);--ui-text-hover: var(--btn-secondary-text-hover);--ui-bg-hover: var(--btn-secondary-bg-hover);--ui-border-hover: var(--btn-secondary-border-hover);--ui-text-active: var(--btn-secondary-text-active);--ui-bg-active: var(--btn-secondary-bg-active);--ui-border-active: var(--btn-secondary-border-active)}.Ui--color-danger{--ui-text: var(--btn-danger-text);--ui-bg: var(--btn-danger-bg);--ui-border: var(--btn-danger-border);--ui-text-hover: var(--btn-danger-text-hover);--ui-bg-hover: var(--btn-danger-bg-hover);--ui-border-hover: var(--btn-danger-border-hover);--ui-text-active: var(--btn-danger-text-active);--ui-bg-active: var(--btn-danger-bg-active);--ui-border-active: var(--btn-danger-border-active)}.Ui--color-neutral{--ui-text: var(--btn-neutral-text);--ui-bg: var(--btn-neutral-bg);--ui-border: var(--btn-neutral-border);--ui-text-hover: var(--btn-neutral-text-hover);--ui-bg-hover: var(--btn-neutral-bg-hover);--ui-border-hover: var(--btn-neutral-border-hover);--ui-text-active: var(--btn-neutral-text-active);--ui-bg-active: var(--btn-neutral-bg-active);--ui-border-active: var(--btn-neutral-border-active)}.Ui--color-cancel{--ui-text: var(--btn-cancel-text);--ui-bg: var(--btn-cancel-bg);--ui-border: var(--btn-cancel-border);--ui-text-hover: var(--btn-cancel-text-hover);--ui-bg-hover: var(--btn-cancel-bg-hover);--ui-border-hover: var(--btn-cancel-border-hover);--ui-text-active: var(--btn-cancel-text-active);--ui-bg-active: var(--btn-cancel-bg-active);--ui-border-active: var(--btn-cancel-border-active)}.Ui--color-success{--ui-text: var(--success-text);--ui-bg: var(--success-bg);--ui-border: var(--success-border);--ui-text-hover: var(--success-text);--ui-bg-hover: color-mix(in srgb, var(--success-bg) 80%, var(--success-text));--ui-border-hover: var(--success-border);--ui-text-active: var(--success-text);--ui-bg-active: color-mix(in srgb, var(--success-bg) 65%, var(--success-text));--ui-border-active: var(--success-border)}.Ui--color-warning{--ui-text: var(--warning-text);--ui-bg: var(--warning-bg);--ui-border: var(--warning-border);--ui-text-hover: var(--warning-text);--ui-bg-hover: color-mix(in srgb, var(--warning-bg) 80%, var(--warning-text));--ui-border-hover: var(--warning-border);--ui-text-active: var(--warning-text);--ui-bg-active: color-mix(in srgb, var(--warning-bg) 65%, var(--warning-text));--ui-border-active: var(--warning-border)}.Ui--color-error{--ui-text: var(--error-text);--ui-bg: var(--error-bg);--ui-border: var(--error-border);--ui-text-hover: var(--error-text);--ui-bg-hover: color-mix(in srgb, var(--error-bg) 80%, var(--error-text));--ui-border-hover: var(--error-border);--ui-text-active: var(--error-text);--ui-bg-active: color-mix(in srgb, var(--error-bg) 65%, var(--error-text));--ui-border-active: var(--error-border)}.Ui--color-info{--ui-text: var(--info-text);--ui-bg: var(--info-bg);--ui-border: var(--info-border);--ui-text-hover: var(--info-text);--ui-bg-hover: color-mix(in srgb, var(--info-bg) 80%, var(--info-text));--ui-border-hover: var(--info-border);--ui-text-active: var(--info-text);--ui-bg-active: color-mix(in srgb, var(--info-bg) 65%, var(--info-text));--ui-border-active: var(--info-border)}.Ui--color-muted{--ui-text: var(--text-muted);--ui-bg: var(--surface-2, var(--surface));--ui-border: var(--border);--ui-text-hover: var(--text-base);--ui-bg-hover: var(--surface);--ui-border-hover: var(--border);--ui-text-active: var(--text-base);--ui-bg-active: var(--surface);--ui-border-active: var(--border)}.Ui--variant-solid,.Ui--solid{color:var(--ui-text);background-color:var(--ui-bg);border-color:var(--ui-border)}.Ui--variant-solid:hover:not(.Ui--disabled),.Ui--solid:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-solid:active:not(.Ui--disabled),.Ui--solid:active:not(.Ui--disabled){color:var(--ui-text-active);background-color:var(--ui-bg-active);border-color:var(--ui-border-active);opacity:.92}.Ui--variant-line,.Ui--line{color:var(--ui-text);background-color:transparent;border-color:var(--ui-border)}.Ui--variant-line:hover:not(.Ui--disabled),.Ui--line:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-line:active:not(.Ui--disabled),.Ui--line:active:not(.Ui--disabled){opacity:.85}.Ui--variant-ghost,.Ui--ghost{color:var(--ui-text);background-color:transparent;border-color:transparent}.Ui--variant-ghost:hover:not(.Ui--disabled),.Ui--ghost:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover)}.Ui--variant-ghost:active:not(.Ui--disabled),.Ui--ghost:active:not(.Ui--disabled){opacity:.75}.Ui--ripple:after{content:\"\";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity .35s ease}.Ui--ripple:active:not(.Ui--disabled):after{opacity:.14}.Ui--disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.Ui__Icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}.Ui__Label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TextBtn{padding:var(--ui-pad-y) var(--ui-pad-x);font-size:var(--ui-font);gap:var(--ui-gap)}.TextBtn--horizontal{flex-direction:row}.TextBtn--vertical{flex-direction:column;gap:calc(var(--ui-gap) * .75)}.IconBtn{width:32px;min-width:32px;padding:4px;flex-shrink:0}.IconBtn .Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: TextBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'text-btn', standalone: true, imports: [LucideIconComponent, RouterLink, NgTemplateOutlet], template: `
+    @if (href()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [href]="disabled() ? null : href()"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </a>
+    } @else if (routerLink()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [routerLink]="disabled() ? null : routerLink()"
+        [attr.aria-disabled]="disabled() || null"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </a>
+    } @else {
+      <button
+        [class]="classes()"
+        [style]="hostStyle()"
+        [type]="buttonType()"
+        [disabled]="disabled()"
+        [attr.title]="title() || null"
+        (click)="onActivate($event)"
+      >
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </button>
+    }
+
+    <ng-template #content>
+      @if (icon() && iconPosition() === 'left') {
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="iconSpin()">
+          <lucide-icon [name]="icon()!" [spin]="iconSpin()"></lucide-icon>
+        </span>
+      }
+      @if (label()) {
+        <span class="Ui__Label">{{ label() }}</span>
+      }
+      <ng-content></ng-content>
+      @if (icon() && iconPosition() === 'right') {
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="iconSpin()">
+          <lucide-icon [name]="icon()!" [spin]="iconSpin()"></lucide-icon>
+        </span>
+      }
+    </ng-template>
+  `, styles: [".Ui,.IconBtn,.TextBtn{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;min-height:32px;border:1px solid transparent;font-family:inherit;font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease;position:relative;overflow:hidden;max-width:100%;box-shadow:none}.Ui:focus-visible,.IconBtn:focus-visible,.TextBtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Ui--fit-content{width:auto;max-width:100%}.Ui--fit-fill{width:100%;max-width:100%}.Ui--fit-fixed{max-width:100%}.Ui--size-sm{--ui-pad-y: 2px;--ui-pad-x: 4px;--ui-font: .8rem;--ui-icon: 14px;--ui-gap: 4px}.Ui--size-md{--ui-pad-y: 4px;--ui-pad-x: 8px;--ui-font: .875rem;--ui-icon: 16px;--ui-gap: 4px}.Ui--size-lg{--ui-pad-y: 4px;--ui-pad-x: 12px;--ui-font: 1rem;--ui-icon: 18px;--ui-gap: 8px}.Ui--rounded-full{border-radius:9999px}.Ui--rounded-medium{border-radius:var(--radius-xl, 24px)}.Ui--rounded-normal{border-radius:var(--radius-lg, 12px)}.Ui--rounded-small{border-radius:var(--radius-md, 8px)}.Ui--rounded-square{border-radius:var(--radius-sm, 4px)}.Ui--color-primary{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active)}.Ui--color-secondary{--ui-text: var(--btn-secondary-text);--ui-bg: var(--btn-secondary-bg);--ui-border: var(--btn-secondary-border);--ui-text-hover: var(--btn-secondary-text-hover);--ui-bg-hover: var(--btn-secondary-bg-hover);--ui-border-hover: var(--btn-secondary-border-hover);--ui-text-active: var(--btn-secondary-text-active);--ui-bg-active: var(--btn-secondary-bg-active);--ui-border-active: var(--btn-secondary-border-active)}.Ui--color-danger{--ui-text: var(--btn-danger-text);--ui-bg: var(--btn-danger-bg);--ui-border: var(--btn-danger-border);--ui-text-hover: var(--btn-danger-text-hover);--ui-bg-hover: var(--btn-danger-bg-hover);--ui-border-hover: var(--btn-danger-border-hover);--ui-text-active: var(--btn-danger-text-active);--ui-bg-active: var(--btn-danger-bg-active);--ui-border-active: var(--btn-danger-border-active)}.Ui--color-neutral{--ui-text: var(--btn-neutral-text);--ui-bg: var(--btn-neutral-bg);--ui-border: var(--btn-neutral-border);--ui-text-hover: var(--btn-neutral-text-hover);--ui-bg-hover: var(--btn-neutral-bg-hover);--ui-border-hover: var(--btn-neutral-border-hover);--ui-text-active: var(--btn-neutral-text-active);--ui-bg-active: var(--btn-neutral-bg-active);--ui-border-active: var(--btn-neutral-border-active)}.Ui--color-cancel{--ui-text: var(--btn-cancel-text);--ui-bg: var(--btn-cancel-bg);--ui-border: var(--btn-cancel-border);--ui-text-hover: var(--btn-cancel-text-hover);--ui-bg-hover: var(--btn-cancel-bg-hover);--ui-border-hover: var(--btn-cancel-border-hover);--ui-text-active: var(--btn-cancel-text-active);--ui-bg-active: var(--btn-cancel-bg-active);--ui-border-active: var(--btn-cancel-border-active)}.Ui--color-success{--ui-text: var(--success-text);--ui-bg: var(--success-bg);--ui-border: var(--success-border);--ui-text-hover: var(--success-text);--ui-bg-hover: color-mix(in srgb, var(--success-bg) 80%, var(--success-text));--ui-border-hover: var(--success-border);--ui-text-active: var(--success-text);--ui-bg-active: color-mix(in srgb, var(--success-bg) 65%, var(--success-text));--ui-border-active: var(--success-border)}.Ui--color-warning{--ui-text: var(--warning-text);--ui-bg: var(--warning-bg);--ui-border: var(--warning-border);--ui-text-hover: var(--warning-text);--ui-bg-hover: color-mix(in srgb, var(--warning-bg) 80%, var(--warning-text));--ui-border-hover: var(--warning-border);--ui-text-active: var(--warning-text);--ui-bg-active: color-mix(in srgb, var(--warning-bg) 65%, var(--warning-text));--ui-border-active: var(--warning-border)}.Ui--color-error{--ui-text: var(--error-text);--ui-bg: var(--error-bg);--ui-border: var(--error-border);--ui-text-hover: var(--error-text);--ui-bg-hover: color-mix(in srgb, var(--error-bg) 80%, var(--error-text));--ui-border-hover: var(--error-border);--ui-text-active: var(--error-text);--ui-bg-active: color-mix(in srgb, var(--error-bg) 65%, var(--error-text));--ui-border-active: var(--error-border)}.Ui--color-info{--ui-text: var(--info-text);--ui-bg: var(--info-bg);--ui-border: var(--info-border);--ui-text-hover: var(--info-text);--ui-bg-hover: color-mix(in srgb, var(--info-bg) 80%, var(--info-text));--ui-border-hover: var(--info-border);--ui-text-active: var(--info-text);--ui-bg-active: color-mix(in srgb, var(--info-bg) 65%, var(--info-text));--ui-border-active: var(--info-border)}.Ui--color-muted{--ui-text: var(--text-muted);--ui-bg: var(--surface-2, var(--surface));--ui-border: var(--border);--ui-text-hover: var(--text-base);--ui-bg-hover: var(--surface);--ui-border-hover: var(--border);--ui-text-active: var(--text-base);--ui-bg-active: var(--surface);--ui-border-active: var(--border)}.Ui--variant-solid,.Ui--solid{color:var(--ui-text);background-color:var(--ui-bg);border-color:var(--ui-border)}.Ui--variant-solid:hover:not(.Ui--disabled),.Ui--solid:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-solid:active:not(.Ui--disabled),.Ui--solid:active:not(.Ui--disabled){color:var(--ui-text-active);background-color:var(--ui-bg-active);border-color:var(--ui-border-active);opacity:.92}.Ui--variant-line,.Ui--line{color:var(--ui-text);background-color:transparent;border-color:var(--ui-border)}.Ui--variant-line:hover:not(.Ui--disabled),.Ui--line:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-line:active:not(.Ui--disabled),.Ui--line:active:not(.Ui--disabled){opacity:.85}.Ui--variant-ghost,.Ui--ghost{color:var(--ui-text);background-color:transparent;border-color:transparent}.Ui--variant-ghost:hover:not(.Ui--disabled),.Ui--ghost:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover)}.Ui--variant-ghost:active:not(.Ui--disabled),.Ui--ghost:active:not(.Ui--disabled){opacity:.75}.Ui--ripple:after{content:\"\";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity .35s ease}.Ui--ripple:active:not(.Ui--disabled):after{opacity:.14}.Ui--disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.Ui__Icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}.Ui__Label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TextBtn{padding:var(--ui-pad-y) var(--ui-pad-x);font-size:var(--ui-font);gap:var(--ui-gap)}.TextBtn--horizontal{flex-direction:row}.TextBtn--vertical{flex-direction:column;gap:calc(var(--ui-gap) * .75)}.IconBtn{width:32px;min-width:32px;padding:4px;flex-shrink:0}.IconBtn .Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}\n"] }]
+        }] });
+
+class IconBtnComponent {
+    icon = input.required();
+    variant = input('ghost');
+    color = input('neutral');
+    rounded = input('normal');
+    size = input('md');
+    ripple = input(true, { transform: booleanAttribute });
+    disabled = input(false, { transform: booleanAttribute });
+    spin = input(false, { transform: booleanAttribute });
+    buttonType = input('button');
+    href = input(null);
+    routerLink = input(null);
+    fit = input('content');
+    width = input(null);
+    textColor = input(null);
+    bgColor = input(null);
+    borderColor = input(null);
+    title = input(null);
+    ariaLabel = input(null);
+    clicked = output();
+    classes = computed(() => buildUiClasses({
+        base: 'IconBtn',
+        size: this.size(),
+        rounded: this.rounded(),
+        color: this.color(),
+        variant: this.variant(),
+        ripple: this.ripple(),
+        disabled: this.disabled(),
+        fit: this.fit(),
+    }));
+    hostStyle = computed(() => buildUiHostStyle({
+        text: this.textColor(),
+        bg: this.bgColor(),
+        border: this.borderColor(),
+    }, this.fit(), this.width()));
+    onActivate(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconBtnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.11", type: IconBtnComponent, isStandalone: true, selector: "icon-btn", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ripple: { classPropertyName: "ripple", publicName: "ripple", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, spin: { classPropertyName: "spin", publicName: "spin", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, href: { classPropertyName: "href", publicName: "href", isSignal: true, isRequired: false, transformFunction: null }, routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, fit: { classPropertyName: "fit", publicName: "fit", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, textColor: { classPropertyName: "textColor", publicName: "textColor", isSignal: true, isRequired: false, transformFunction: null }, bgColor: { classPropertyName: "bgColor", publicName: "bgColor", isSignal: true, isRequired: false, transformFunction: null }, borderColor: { classPropertyName: "borderColor", publicName: "borderColor", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { clicked: "clicked" }, ngImport: i0, template: `
+    @if (href()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [href]="disabled() ? null : href()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        [attr.aria-disabled]="disabled() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </a>
+    } @else if (routerLink()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [routerLink]="disabled() ? null : routerLink()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        [attr.aria-disabled]="disabled() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </a>
+    } @else {
+      <button
+        [class]="classes()"
+        [style]="hostStyle()"
+        [type]="buttonType()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </button>
+    }
+  `, isInline: true, styles: [".Ui,.IconBtn,.TextBtn{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;min-height:32px;border:1px solid transparent;font-family:inherit;font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease;position:relative;overflow:hidden;max-width:100%;box-shadow:none}.Ui:focus-visible,.IconBtn:focus-visible,.TextBtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Ui--fit-content{width:auto;max-width:100%}.Ui--fit-fill{width:100%;max-width:100%}.Ui--fit-fixed{max-width:100%}.Ui--size-sm{--ui-pad-y: 2px;--ui-pad-x: 4px;--ui-font: .8rem;--ui-icon: 14px;--ui-gap: 4px}.Ui--size-md{--ui-pad-y: 4px;--ui-pad-x: 8px;--ui-font: .875rem;--ui-icon: 16px;--ui-gap: 4px}.Ui--size-lg{--ui-pad-y: 4px;--ui-pad-x: 12px;--ui-font: 1rem;--ui-icon: 18px;--ui-gap: 8px}.Ui--rounded-full{border-radius:9999px}.Ui--rounded-medium{border-radius:var(--radius-xl, 24px)}.Ui--rounded-normal{border-radius:var(--radius-lg, 12px)}.Ui--rounded-small{border-radius:var(--radius-md, 8px)}.Ui--rounded-square{border-radius:var(--radius-sm, 4px)}.Ui--color-primary{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active)}.Ui--color-secondary{--ui-text: var(--btn-secondary-text);--ui-bg: var(--btn-secondary-bg);--ui-border: var(--btn-secondary-border);--ui-text-hover: var(--btn-secondary-text-hover);--ui-bg-hover: var(--btn-secondary-bg-hover);--ui-border-hover: var(--btn-secondary-border-hover);--ui-text-active: var(--btn-secondary-text-active);--ui-bg-active: var(--btn-secondary-bg-active);--ui-border-active: var(--btn-secondary-border-active)}.Ui--color-danger{--ui-text: var(--btn-danger-text);--ui-bg: var(--btn-danger-bg);--ui-border: var(--btn-danger-border);--ui-text-hover: var(--btn-danger-text-hover);--ui-bg-hover: var(--btn-danger-bg-hover);--ui-border-hover: var(--btn-danger-border-hover);--ui-text-active: var(--btn-danger-text-active);--ui-bg-active: var(--btn-danger-bg-active);--ui-border-active: var(--btn-danger-border-active)}.Ui--color-neutral{--ui-text: var(--btn-neutral-text);--ui-bg: var(--btn-neutral-bg);--ui-border: var(--btn-neutral-border);--ui-text-hover: var(--btn-neutral-text-hover);--ui-bg-hover: var(--btn-neutral-bg-hover);--ui-border-hover: var(--btn-neutral-border-hover);--ui-text-active: var(--btn-neutral-text-active);--ui-bg-active: var(--btn-neutral-bg-active);--ui-border-active: var(--btn-neutral-border-active)}.Ui--color-cancel{--ui-text: var(--btn-cancel-text);--ui-bg: var(--btn-cancel-bg);--ui-border: var(--btn-cancel-border);--ui-text-hover: var(--btn-cancel-text-hover);--ui-bg-hover: var(--btn-cancel-bg-hover);--ui-border-hover: var(--btn-cancel-border-hover);--ui-text-active: var(--btn-cancel-text-active);--ui-bg-active: var(--btn-cancel-bg-active);--ui-border-active: var(--btn-cancel-border-active)}.Ui--color-success{--ui-text: var(--success-text);--ui-bg: var(--success-bg);--ui-border: var(--success-border);--ui-text-hover: var(--success-text);--ui-bg-hover: color-mix(in srgb, var(--success-bg) 80%, var(--success-text));--ui-border-hover: var(--success-border);--ui-text-active: var(--success-text);--ui-bg-active: color-mix(in srgb, var(--success-bg) 65%, var(--success-text));--ui-border-active: var(--success-border)}.Ui--color-warning{--ui-text: var(--warning-text);--ui-bg: var(--warning-bg);--ui-border: var(--warning-border);--ui-text-hover: var(--warning-text);--ui-bg-hover: color-mix(in srgb, var(--warning-bg) 80%, var(--warning-text));--ui-border-hover: var(--warning-border);--ui-text-active: var(--warning-text);--ui-bg-active: color-mix(in srgb, var(--warning-bg) 65%, var(--warning-text));--ui-border-active: var(--warning-border)}.Ui--color-error{--ui-text: var(--error-text);--ui-bg: var(--error-bg);--ui-border: var(--error-border);--ui-text-hover: var(--error-text);--ui-bg-hover: color-mix(in srgb, var(--error-bg) 80%, var(--error-text));--ui-border-hover: var(--error-border);--ui-text-active: var(--error-text);--ui-bg-active: color-mix(in srgb, var(--error-bg) 65%, var(--error-text));--ui-border-active: var(--error-border)}.Ui--color-info{--ui-text: var(--info-text);--ui-bg: var(--info-bg);--ui-border: var(--info-border);--ui-text-hover: var(--info-text);--ui-bg-hover: color-mix(in srgb, var(--info-bg) 80%, var(--info-text));--ui-border-hover: var(--info-border);--ui-text-active: var(--info-text);--ui-bg-active: color-mix(in srgb, var(--info-bg) 65%, var(--info-text));--ui-border-active: var(--info-border)}.Ui--color-muted{--ui-text: var(--text-muted);--ui-bg: var(--surface-2, var(--surface));--ui-border: var(--border);--ui-text-hover: var(--text-base);--ui-bg-hover: var(--surface);--ui-border-hover: var(--border);--ui-text-active: var(--text-base);--ui-bg-active: var(--surface);--ui-border-active: var(--border)}.Ui--variant-solid,.Ui--solid{color:var(--ui-text);background-color:var(--ui-bg);border-color:var(--ui-border)}.Ui--variant-solid:hover:not(.Ui--disabled),.Ui--solid:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-solid:active:not(.Ui--disabled),.Ui--solid:active:not(.Ui--disabled){color:var(--ui-text-active);background-color:var(--ui-bg-active);border-color:var(--ui-border-active);opacity:.92}.Ui--variant-line,.Ui--line{color:var(--ui-text);background-color:transparent;border-color:var(--ui-border)}.Ui--variant-line:hover:not(.Ui--disabled),.Ui--line:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-line:active:not(.Ui--disabled),.Ui--line:active:not(.Ui--disabled){opacity:.85}.Ui--variant-ghost,.Ui--ghost{color:var(--ui-text);background-color:transparent;border-color:transparent}.Ui--variant-ghost:hover:not(.Ui--disabled),.Ui--ghost:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover)}.Ui--variant-ghost:active:not(.Ui--disabled),.Ui--ghost:active:not(.Ui--disabled){opacity:.75}.Ui--ripple:after{content:\"\";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity .35s ease}.Ui--ripple:active:not(.Ui--disabled):after{opacity:.14}.Ui--disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.Ui__Icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}.Ui__Label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TextBtn{padding:var(--ui-pad-y) var(--ui-pad-x);font-size:var(--ui-font);gap:var(--ui-gap)}.TextBtn--horizontal{flex-direction:row}.TextBtn--vertical{flex-direction:column;gap:calc(var(--ui-gap) * .75)}.IconBtn{width:32px;min-width:32px;padding:4px;flex-shrink:0}.IconBtn .Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}\n"], dependencies: [{ kind: "component", type: LucideIconComponent, selector: "lucide-icon", inputs: ["name", "size", "spin", "filled"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.11", ngImport: i0, type: IconBtnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'icon-btn', standalone: true, imports: [LucideIconComponent, RouterLink], template: `
+    @if (href()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [href]="disabled() ? null : href()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        [attr.aria-disabled]="disabled() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </a>
+    } @else if (routerLink()) {
+      <a
+        [class]="classes()"
+        [style]="hostStyle()"
+        [routerLink]="disabled() ? null : routerLink()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        [attr.aria-disabled]="disabled() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </a>
+    } @else {
+      <button
+        [class]="classes()"
+        [style]="hostStyle()"
+        [type]="buttonType()"
+        [disabled]="disabled()"
+        [attr.aria-label]="ariaLabel() || title() || icon()"
+        [attr.title]="title() || ariaLabel() || null"
+        (click)="onActivate($event)"
+      >
+        <span class="Ui__Icon" [class.Ui__Icon--spin]="spin()">
+          <lucide-icon [name]="icon()" [spin]="spin()"></lucide-icon>
+        </span>
+      </button>
+    }
+  `, styles: [".Ui,.IconBtn,.TextBtn{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active);display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;height:32px;min-height:32px;border:1px solid transparent;font-family:inherit;font-weight:var(--weight-semibold);line-height:1.2;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;transition:color .15s ease,background-color .15s ease,border-color .15s ease,opacity .15s ease;position:relative;overflow:hidden;max-width:100%;box-shadow:none}.Ui:focus-visible,.IconBtn:focus-visible,.TextBtn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}.Ui--fit-content{width:auto;max-width:100%}.Ui--fit-fill{width:100%;max-width:100%}.Ui--fit-fixed{max-width:100%}.Ui--size-sm{--ui-pad-y: 2px;--ui-pad-x: 4px;--ui-font: .8rem;--ui-icon: 14px;--ui-gap: 4px}.Ui--size-md{--ui-pad-y: 4px;--ui-pad-x: 8px;--ui-font: .875rem;--ui-icon: 16px;--ui-gap: 4px}.Ui--size-lg{--ui-pad-y: 4px;--ui-pad-x: 12px;--ui-font: 1rem;--ui-icon: 18px;--ui-gap: 8px}.Ui--rounded-full{border-radius:9999px}.Ui--rounded-medium{border-radius:var(--radius-xl, 24px)}.Ui--rounded-normal{border-radius:var(--radius-lg, 12px)}.Ui--rounded-small{border-radius:var(--radius-md, 8px)}.Ui--rounded-square{border-radius:var(--radius-sm, 4px)}.Ui--color-primary{--ui-text: var(--btn-primary-text);--ui-bg: var(--btn-primary-bg);--ui-border: var(--btn-primary-border);--ui-text-hover: var(--btn-primary-text-hover);--ui-bg-hover: var(--btn-primary-bg-hover);--ui-border-hover: var(--btn-primary-border-hover);--ui-text-active: var(--btn-primary-text-active);--ui-bg-active: var(--btn-primary-bg-active);--ui-border-active: var(--btn-primary-border-active)}.Ui--color-secondary{--ui-text: var(--btn-secondary-text);--ui-bg: var(--btn-secondary-bg);--ui-border: var(--btn-secondary-border);--ui-text-hover: var(--btn-secondary-text-hover);--ui-bg-hover: var(--btn-secondary-bg-hover);--ui-border-hover: var(--btn-secondary-border-hover);--ui-text-active: var(--btn-secondary-text-active);--ui-bg-active: var(--btn-secondary-bg-active);--ui-border-active: var(--btn-secondary-border-active)}.Ui--color-danger{--ui-text: var(--btn-danger-text);--ui-bg: var(--btn-danger-bg);--ui-border: var(--btn-danger-border);--ui-text-hover: var(--btn-danger-text-hover);--ui-bg-hover: var(--btn-danger-bg-hover);--ui-border-hover: var(--btn-danger-border-hover);--ui-text-active: var(--btn-danger-text-active);--ui-bg-active: var(--btn-danger-bg-active);--ui-border-active: var(--btn-danger-border-active)}.Ui--color-neutral{--ui-text: var(--btn-neutral-text);--ui-bg: var(--btn-neutral-bg);--ui-border: var(--btn-neutral-border);--ui-text-hover: var(--btn-neutral-text-hover);--ui-bg-hover: var(--btn-neutral-bg-hover);--ui-border-hover: var(--btn-neutral-border-hover);--ui-text-active: var(--btn-neutral-text-active);--ui-bg-active: var(--btn-neutral-bg-active);--ui-border-active: var(--btn-neutral-border-active)}.Ui--color-cancel{--ui-text: var(--btn-cancel-text);--ui-bg: var(--btn-cancel-bg);--ui-border: var(--btn-cancel-border);--ui-text-hover: var(--btn-cancel-text-hover);--ui-bg-hover: var(--btn-cancel-bg-hover);--ui-border-hover: var(--btn-cancel-border-hover);--ui-text-active: var(--btn-cancel-text-active);--ui-bg-active: var(--btn-cancel-bg-active);--ui-border-active: var(--btn-cancel-border-active)}.Ui--color-success{--ui-text: var(--success-text);--ui-bg: var(--success-bg);--ui-border: var(--success-border);--ui-text-hover: var(--success-text);--ui-bg-hover: color-mix(in srgb, var(--success-bg) 80%, var(--success-text));--ui-border-hover: var(--success-border);--ui-text-active: var(--success-text);--ui-bg-active: color-mix(in srgb, var(--success-bg) 65%, var(--success-text));--ui-border-active: var(--success-border)}.Ui--color-warning{--ui-text: var(--warning-text);--ui-bg: var(--warning-bg);--ui-border: var(--warning-border);--ui-text-hover: var(--warning-text);--ui-bg-hover: color-mix(in srgb, var(--warning-bg) 80%, var(--warning-text));--ui-border-hover: var(--warning-border);--ui-text-active: var(--warning-text);--ui-bg-active: color-mix(in srgb, var(--warning-bg) 65%, var(--warning-text));--ui-border-active: var(--warning-border)}.Ui--color-error{--ui-text: var(--error-text);--ui-bg: var(--error-bg);--ui-border: var(--error-border);--ui-text-hover: var(--error-text);--ui-bg-hover: color-mix(in srgb, var(--error-bg) 80%, var(--error-text));--ui-border-hover: var(--error-border);--ui-text-active: var(--error-text);--ui-bg-active: color-mix(in srgb, var(--error-bg) 65%, var(--error-text));--ui-border-active: var(--error-border)}.Ui--color-info{--ui-text: var(--info-text);--ui-bg: var(--info-bg);--ui-border: var(--info-border);--ui-text-hover: var(--info-text);--ui-bg-hover: color-mix(in srgb, var(--info-bg) 80%, var(--info-text));--ui-border-hover: var(--info-border);--ui-text-active: var(--info-text);--ui-bg-active: color-mix(in srgb, var(--info-bg) 65%, var(--info-text));--ui-border-active: var(--info-border)}.Ui--color-muted{--ui-text: var(--text-muted);--ui-bg: var(--surface-2, var(--surface));--ui-border: var(--border);--ui-text-hover: var(--text-base);--ui-bg-hover: var(--surface);--ui-border-hover: var(--border);--ui-text-active: var(--text-base);--ui-bg-active: var(--surface);--ui-border-active: var(--border)}.Ui--variant-solid,.Ui--solid{color:var(--ui-text);background-color:var(--ui-bg);border-color:var(--ui-border)}.Ui--variant-solid:hover:not(.Ui--disabled),.Ui--solid:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-solid:active:not(.Ui--disabled),.Ui--solid:active:not(.Ui--disabled){color:var(--ui-text-active);background-color:var(--ui-bg-active);border-color:var(--ui-border-active);opacity:.92}.Ui--variant-line,.Ui--line{color:var(--ui-text);background-color:transparent;border-color:var(--ui-border)}.Ui--variant-line:hover:not(.Ui--disabled),.Ui--line:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover);border-color:var(--ui-border-hover)}.Ui--variant-line:active:not(.Ui--disabled),.Ui--line:active:not(.Ui--disabled){opacity:.85}.Ui--variant-ghost,.Ui--ghost{color:var(--ui-text);background-color:transparent;border-color:transparent}.Ui--variant-ghost:hover:not(.Ui--disabled),.Ui--ghost:hover:not(.Ui--disabled){color:var(--ui-text-hover);background-color:var(--ui-bg-hover)}.Ui--variant-ghost:active:not(.Ui--disabled),.Ui--ghost:active:not(.Ui--disabled){opacity:.75}.Ui--ripple:after{content:\"\";position:absolute;inset:0;background:currentColor;opacity:0;pointer-events:none;transition:opacity .35s ease}.Ui--ripple:active:not(.Ui--disabled):after{opacity:.14}.Ui--disabled{cursor:not-allowed;opacity:.55;pointer-events:none}.Ui__Icon{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}.Ui__Label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.TextBtn{padding:var(--ui-pad-y) var(--ui-pad-x);font-size:var(--ui-font);gap:var(--ui-gap)}.TextBtn--horizontal{flex-direction:row}.TextBtn--vertical{flex-direction:column;gap:calc(var(--ui-gap) * .75)}.IconBtn{width:32px;min-width:32px;padding:4px;flex-shrink:0}.IconBtn .Ui__Icon .lucide-svg{width:var(--ui-icon);height:var(--ui-icon)}\n"] }]
+        }] });
+
+/*
+ * Public API Surface of @xosue-utils/actions
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { IconBtnComponent, LucideIconComponent, TextBtnComponent, buildUiClasses, buildUiHostStyle };
+//# sourceMappingURL=xosue-utils-actions.mjs.map

package/fesm2022/xosue-utils-actions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xosue-utils-actions.mjs","sources":["../../src/vendor/lucide-icon/lucide-icon.component.ts","../../src/lib/ui-interactive.model.ts","../../src/lib/text-btn/text-btn.component.ts","../../src/lib/icon-btn/icon-btn.component.ts","../../src/public-api.ts","../../src/xosue-utils-actions.ts"],"sourcesContent":["import { booleanAttribute, Component, computed, input } from '@angular/core';\r\nimport { LucideDynamicIcon } from '@lucide/angular';\r\n\r\n/**\r\n * Icono Lucide.\r\n *\r\n * HTML:\r\n *   <lucide-icon name=\"star\"></lucide-icon>\r\n *   <lucide-icon name=\"heart\" filled></lucide-icon>  // relleno + trazo\r\n *\r\n * SASS — variables CSS (heredan del padre):\r\n *   --lucide-stroke: var(--primary)\r\n *   --lucide-fill: var(--accent)\r\n *   --lucide-stroke-width: 2\r\n */\r\n@Component({\r\n  selector: 'lucide-icon',\r\n  standalone: true,\r\n  imports: [LucideDynamicIcon],\r\n  host: {\r\n    '[class.lucide-icon--filled]': 'filled()',\r\n    '[attr.filled]': 'filled() ? \"\" : null',\r\n  },\r\n  template: `\r\n    <svg\r\n      class=\"lucide-svg inline-block shrink-0 align-middle\"\r\n      [class.lucide-svg--filled]=\"filled()\"\r\n      [class.animate-spin]=\"spin()\"\r\n      [style.width]=\"dimStyle()?.width\"\r\n      [style.height]=\"dimStyle()?.height\"\r\n      [lucideIcon]=\"name()\"\r\n      aria-hidden=\"true\"\r\n    />\r\n  `,\r\n})\r\nexport class LucideIconComponent {\r\n  readonly name = input.required<string>();\r\n  readonly size = input<number | string | undefined>(undefined);\r\n  readonly spin = input(false, { transform: booleanAttribute });\r\n  /** Activa relleno (--lucide-fill); el trazo se conserva. */\r\n  readonly filled = input(false, { transform: booleanAttribute });\r\n\r\n  readonly dimStyle = computed(() => {\r\n    const s = this.size();\r\n    if (s === undefined || s === null || s === '') return null;\r\n    if (typeof s === 'number') {\r\n      return { width: `${s}px`, height: `${s}px` };\r\n    }\r\n    const trimmed = String(s).trim();\r\n    if (/^\\d+(\\.\\d+)?$/.test(trimmed)) {\r\n      return { width: `${trimmed}px`, height: `${trimmed}px` };\r\n    }\r\n    return { width: trimmed, height: trimmed };\r\n  });\r\n}\r\n","export type UiSize = 'sm' | 'md' | 'lg';\r\nexport type UiRounded = 'full' | 'medium' | 'normal' | 'small' | 'square';\r\nexport type UiVariant = 'solid' | 'line' | 'ghost';\r\nexport type UiColor =\r\n  | 'primary'\r\n  | 'secondary'\r\n  | 'danger'\r\n  | 'neutral'\r\n  | 'cancel'\r\n  | 'success'\r\n  | 'warning'\r\n  | 'error'\r\n  | 'info'\r\n  | 'muted';\r\nexport type UiFit = 'content' | 'fill' | 'fixed';\r\nexport type UiLayout = 'horizontal' | 'vertical';\r\nexport type UiIconPosition = 'left' | 'right';\r\n\r\nexport interface UiCustomColors {\r\n  text?: string | null;\r\n  bg?: string | null;\r\n  border?: string | null;\r\n}\r\n\r\nexport interface UiClassOptions {\r\n  base: 'TextBtn' | 'IconBtn';\r\n  size?: UiSize;\r\n  rounded?: UiRounded;\r\n  color?: UiColor;\r\n  variant?: UiVariant;\r\n  ripple?: boolean;\r\n  disabled?: boolean;\r\n  fit?: UiFit;\r\n  layout?: UiLayout;\r\n}\r\n\r\nexport function buildUiClasses(opts: UiClassOptions): string {\r\n  const classes = [\r\n    opts.base,\r\n    'Ui',\r\n    `Ui--size-${opts.size ?? 'md'}`,\r\n    `Ui--rounded-${opts.rounded ?? 'normal'}`,\r\n    `Ui--color-${opts.color ?? 'primary'}`,\r\n    `Ui--${opts.variant ?? 'solid'}`,\r\n    `Ui--fit-${opts.fit ?? 'content'}`,\r\n  ];\r\n\r\n  if (opts.ripple !== false) {\r\n    classes.push('Ui--ripple');\r\n  }\r\n  if (opts.disabled) {\r\n    classes.push('Ui--disabled');\r\n  }\r\n  if (opts.base === 'TextBtn') {\r\n    classes.push(`TextBtn--${opts.layout ?? 'horizontal'}`);\r\n  }\r\n\r\n  return classes.join(' ');\r\n}\r\n\r\nexport function buildUiHostStyle(\r\n  colors: UiCustomColors,\r\n  fit: UiFit,\r\n  width?: string | null,\r\n): Record<string, string> {\r\n  const style: Record<string, string> = {};\r\n\r\n  if (colors.text) style['--ui-text'] = colors.text;\r\n  if (colors.bg) style['--ui-bg'] = colors.bg;\r\n  if (colors.border) style['--ui-border'] = colors.border;\r\n\r\n  if (fit === 'fixed' && width) {\r\n    style['width'] = width;\r\n  }\r\n\r\n  return style;\r\n}\r\n","import { booleanAttribute, Component, computed, input, output } from '@angular/core';\r\nimport { NgTemplateOutlet } from '@angular/common';\r\nimport { RouterLink } from '@angular/router';\r\nimport { LucideIconComponent } from '../../vendor/lucide-icon/lucide-icon.component';\r\nimport {\r\n  buildUiClasses,\r\n  buildUiHostStyle,\r\n  UiColor,\r\n  UiFit,\r\n  UiIconPosition,\r\n  UiLayout,\r\n  UiRounded,\r\n  UiSize,\r\n  UiVariant,\r\n} from '../ui-interactive.model';\r\n\r\n@Component({\r\n  selector: 'text-btn',\r\n  standalone: true,\r\n  imports: [LucideIconComponent, RouterLink, NgTemplateOutlet],\r\n  template: `\r\n    @if (href()) {\r\n      <a\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [href]=\"disabled() ? null : href()\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        [attr.title]=\"title() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    } @else if (routerLink()) {\r\n      <a\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [routerLink]=\"disabled() ? null : routerLink()\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        [attr.title]=\"title() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </a>\r\n    } @else {\r\n      <button\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [type]=\"buttonType()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.title]=\"title() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"content\"></ng-container>\r\n      </button>\r\n    }\r\n\r\n    <ng-template #content>\r\n      @if (icon() && iconPosition() === 'left') {\r\n        <span class=\"Ui__Icon\" [class.Ui__Icon--spin]=\"iconSpin()\">\r\n          <lucide-icon [name]=\"icon()!\" [spin]=\"iconSpin()\"></lucide-icon>\r\n        </span>\r\n      }\r\n      @if (label()) {\r\n        <span class=\"Ui__Label\">{{ label() }}</span>\r\n      }\r\n      <ng-content></ng-content>\r\n      @if (icon() && iconPosition() === 'right') {\r\n        <span class=\"Ui__Icon\" [class.Ui__Icon--spin]=\"iconSpin()\">\r\n          <lucide-icon [name]=\"icon()!\" [spin]=\"iconSpin()\"></lucide-icon>\r\n        </span>\r\n      }\r\n    </ng-template>\r\n  `,\r\n  styleUrl: './text-btn.component.sass',\r\n})\r\nexport class TextBtnComponent {\r\n  readonly label = input<string>('');\r\n  readonly icon = input<string | null>(null);\r\n  readonly iconPosition = input<UiIconPosition>('left');\r\n  readonly iconSpin = input(false, { transform: booleanAttribute });\r\n  readonly layout = input<UiLayout>('horizontal');\r\n  readonly variant = input<UiVariant>('solid');\r\n  readonly color = input<UiColor>('primary');\r\n  readonly rounded = input<UiRounded>('normal');\r\n  readonly size = input<UiSize>('md');\r\n  readonly ripple = input(true, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly buttonType = input<'button' | 'submit' | 'reset'>('button');\r\n  readonly href = input<string | null>(null);\r\n  readonly routerLink = input<string | string[] | null>(null);\r\n  readonly fit = input<UiFit>('content');\r\n  readonly width = input<string | null>(null);\r\n  readonly textColor = input<string | null>(null);\r\n  readonly bgColor = input<string | null>(null);\r\n  readonly borderColor = input<string | null>(null);\r\n  readonly title = input<string | null>(null);\r\n\r\n  readonly clicked = output<MouseEvent>();\r\n\r\n  readonly classes = computed(() =>\r\n    buildUiClasses({\r\n      base: 'TextBtn',\r\n      size: this.size(),\r\n      rounded: this.rounded(),\r\n      color: this.color(),\r\n      variant: this.variant(),\r\n      ripple: this.ripple(),\r\n      disabled: this.disabled(),\r\n      fit: this.fit(),\r\n      layout: this.layout(),\r\n    }),\r\n  );\r\n\r\n  readonly hostStyle = computed(() =>\r\n    buildUiHostStyle(\r\n      {\r\n        text: this.textColor(),\r\n        bg: this.bgColor(),\r\n        border: this.borderColor(),\r\n      },\r\n      this.fit(),\r\n      this.width(),\r\n    ),\r\n  );\r\n\r\n  onActivate(event: MouseEvent): void {\r\n    if (this.disabled()) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n    this.clicked.emit(event);\r\n  }\r\n}\r\n","import { booleanAttribute, Component, computed, input, output } from '@angular/core';\r\nimport { RouterLink } from '@angular/router';\r\nimport { LucideIconComponent } from '../../vendor/lucide-icon/lucide-icon.component';\r\nimport {\r\n  buildUiClasses,\r\n  buildUiHostStyle,\r\n  UiColor,\r\n  UiFit,\r\n  UiRounded,\r\n  UiSize,\r\n  UiVariant,\r\n} from '../ui-interactive.model';\r\n\r\n@Component({\r\n  selector: 'icon-btn',\r\n  standalone: true,\r\n  imports: [LucideIconComponent, RouterLink],\r\n  template: `\r\n    @if (href()) {\r\n      <a\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [href]=\"disabled() ? null : href()\"\r\n        [attr.aria-label]=\"ariaLabel() || title() || icon()\"\r\n        [attr.title]=\"title() || ariaLabel() || null\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <span class=\"Ui__Icon\" [class.Ui__Icon--spin]=\"spin()\">\r\n          <lucide-icon [name]=\"icon()\" [spin]=\"spin()\"></lucide-icon>\r\n        </span>\r\n      </a>\r\n    } @else if (routerLink()) {\r\n      <a\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [routerLink]=\"disabled() ? null : routerLink()\"\r\n        [attr.aria-label]=\"ariaLabel() || title() || icon()\"\r\n        [attr.title]=\"title() || ariaLabel() || null\"\r\n        [attr.aria-disabled]=\"disabled() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <span class=\"Ui__Icon\" [class.Ui__Icon--spin]=\"spin()\">\r\n          <lucide-icon [name]=\"icon()\" [spin]=\"spin()\"></lucide-icon>\r\n        </span>\r\n      </a>\r\n    } @else {\r\n      <button\r\n        [class]=\"classes()\"\r\n        [style]=\"hostStyle()\"\r\n        [type]=\"buttonType()\"\r\n        [disabled]=\"disabled()\"\r\n        [attr.aria-label]=\"ariaLabel() || title() || icon()\"\r\n        [attr.title]=\"title() || ariaLabel() || null\"\r\n        (click)=\"onActivate($event)\"\r\n      >\r\n        <span class=\"Ui__Icon\" [class.Ui__Icon--spin]=\"spin()\">\r\n          <lucide-icon [name]=\"icon()\" [spin]=\"spin()\"></lucide-icon>\r\n        </span>\r\n      </button>\r\n    }\r\n  `,\r\n  styleUrl: './icon-btn.component.sass',\r\n})\r\nexport class IconBtnComponent {\r\n  readonly icon = input.required<string>();\r\n  readonly variant = input<UiVariant>('ghost');\r\n  readonly color = input<UiColor>('neutral');\r\n  readonly rounded = input<UiRounded>('normal');\r\n  readonly size = input<UiSize>('md');\r\n  readonly ripple = input(true, { transform: booleanAttribute });\r\n  readonly disabled = input(false, { transform: booleanAttribute });\r\n  readonly spin = input(false, { transform: booleanAttribute });\r\n  readonly buttonType = input<'button' | 'submit' | 'reset'>('button');\r\n  readonly href = input<string | null>(null);\r\n  readonly routerLink = input<string | string[] | null>(null);\r\n  readonly fit = input<UiFit>('content');\r\n  readonly width = input<string | null>(null);\r\n  readonly textColor = input<string | null>(null);\r\n  readonly bgColor = input<string | null>(null);\r\n  readonly borderColor = input<string | null>(null);\r\n  readonly title = input<string | null>(null);\r\n  readonly ariaLabel = input<string | null>(null);\r\n\r\n  readonly clicked = output<MouseEvent>();\r\n\r\n  readonly classes = computed(() =>\r\n    buildUiClasses({\r\n      base: 'IconBtn',\r\n      size: this.size(),\r\n      rounded: this.rounded(),\r\n      color: this.color(),\r\n      variant: this.variant(),\r\n      ripple: this.ripple(),\r\n      disabled: this.disabled(),\r\n      fit: this.fit(),\r\n    }),\r\n  );\r\n\r\n  readonly hostStyle = computed(() =>\r\n    buildUiHostStyle(\r\n      {\r\n        text: this.textColor(),\r\n        bg: this.bgColor(),\r\n        border: this.borderColor(),\r\n      },\r\n      this.fit(),\r\n      this.width(),\r\n    ),\r\n  );\r\n\r\n  onActivate(event: MouseEvent): void {\r\n    if (this.disabled()) {\r\n      event.preventDefault();\r\n      event.stopPropagation();\r\n      return;\r\n    }\r\n    this.clicked.emit(event);\r\n  }\r\n}\r\n","/*\r\n * Public API Surface of @xosue-utils/actions\r\n */\r\n\r\nexport * from './lib/index';\r\n\r\nexport { LucideIconComponent } from './vendor/lucide-icon/lucide-icon.component';\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@xosue-utils/actions" />
+export * from './public-api';

package/lib/icon-btn/icon-btn.component.d.ts

@@ -0,0 +1,28 @@
+import { UiColor, UiFit, UiRounded, UiSize, UiVariant } from '../ui-interactive.model';
+import * as i0 from "@angular/core";
+export declare class IconBtnComponent {
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly variant: import("@angular/core").InputSignal<UiVariant>;
+    readonly color: import("@angular/core").InputSignal<UiColor>;
+    readonly rounded: import("@angular/core").InputSignal<UiRounded>;
+    readonly size: import("@angular/core").InputSignal<UiSize>;
+    readonly ripple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly spin: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly buttonType: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
+    readonly href: import("@angular/core").InputSignal<string>;
+    readonly routerLink: import("@angular/core").InputSignal<string | string[]>;
+    readonly fit: import("@angular/core").InputSignal<UiFit>;
+    readonly width: import("@angular/core").InputSignal<string>;
+    readonly textColor: import("@angular/core").InputSignal<string>;
+    readonly bgColor: import("@angular/core").InputSignal<string>;
+    readonly borderColor: import("@angular/core").InputSignal<string>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly ariaLabel: import("@angular/core").InputSignal<string>;
+    readonly clicked: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly classes: import("@angular/core").Signal<string>;
+    readonly hostStyle: import("@angular/core").Signal<Record<string, string>>;
+    onActivate(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconBtnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconBtnComponent, "icon-btn", never, { "icon": { "alias": "icon"; "required": true; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ripple": { "alias": "ripple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "buttonType": { "alias": "buttonType"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, never, true, never>;
+}

package/lib/index.d.ts

@@ -0,0 +1,3 @@
+export { TextBtnComponent } from './text-btn/text-btn.component';
+export { IconBtnComponent } from './icon-btn/icon-btn.component';
+export * from './ui-interactive.model';

package/lib/text-btn/text-btn.component.d.ts

@@ -0,0 +1,30 @@
+import { UiColor, UiFit, UiIconPosition, UiLayout, UiRounded, UiSize, UiVariant } from '../ui-interactive.model';
+import * as i0 from "@angular/core";
+export declare class TextBtnComponent {
+    readonly label: import("@angular/core").InputSignal<string>;
+    readonly icon: import("@angular/core").InputSignal<string>;
+    readonly iconPosition: import("@angular/core").InputSignal<UiIconPosition>;
+    readonly iconSpin: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly layout: import("@angular/core").InputSignal<UiLayout>;
+    readonly variant: import("@angular/core").InputSignal<UiVariant>;
+    readonly color: import("@angular/core").InputSignal<UiColor>;
+    readonly rounded: import("@angular/core").InputSignal<UiRounded>;
+    readonly size: import("@angular/core").InputSignal<UiSize>;
+    readonly ripple: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly disabled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly buttonType: import("@angular/core").InputSignal<"button" | "submit" | "reset">;
+    readonly href: import("@angular/core").InputSignal<string>;
+    readonly routerLink: import("@angular/core").InputSignal<string | string[]>;
+    readonly fit: import("@angular/core").InputSignal<UiFit>;
+    readonly width: import("@angular/core").InputSignal<string>;
+    readonly textColor: import("@angular/core").InputSignal<string>;
+    readonly bgColor: import("@angular/core").InputSignal<string>;
+    readonly borderColor: import("@angular/core").InputSignal<string>;
+    readonly title: import("@angular/core").InputSignal<string>;
+    readonly clicked: import("@angular/core").OutputEmitterRef<MouseEvent>;
+    readonly classes: import("@angular/core").Signal<string>;
+    readonly hostStyle: import("@angular/core").Signal<Record<string, string>>;
+    onActivate(event: MouseEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<TextBtnComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextBtnComponent, "text-btn", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "icon": { "alias": "icon"; "required": false; "isSignal": true; }; "iconPosition": { "alias": "iconPosition"; "required": false; "isSignal": true; }; "iconSpin": { "alias": "iconSpin"; "required": false; "isSignal": true; }; "layout": { "alias": "layout"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "color": { "alias": "color"; "required": false; "isSignal": true; }; "rounded": { "alias": "rounded"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "ripple": { "alias": "ripple"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "buttonType": { "alias": "buttonType"; "required": false; "isSignal": true; }; "href": { "alias": "href"; "required": false; "isSignal": true; }; "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "fit": { "alias": "fit"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "textColor": { "alias": "textColor"; "required": false; "isSignal": true; }; "bgColor": { "alias": "bgColor"; "required": false; "isSignal": true; }; "borderColor": { "alias": "borderColor"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; }, { "clicked": "clicked"; }, never, ["*"], true, never>;
+}

package/lib/ui-interactive.model.d.ts

@@ -0,0 +1,25 @@
+export type UiSize = 'sm' | 'md' | 'lg';
+export type UiRounded = 'full' | 'medium' | 'normal' | 'small' | 'square';
+export type UiVariant = 'solid' | 'line' | 'ghost';
+export type UiColor = 'primary' | 'secondary' | 'danger' | 'neutral' | 'cancel' | 'success' | 'warning' | 'error' | 'info' | 'muted';
+export type UiFit = 'content' | 'fill' | 'fixed';
+export type UiLayout = 'horizontal' | 'vertical';
+export type UiIconPosition = 'left' | 'right';
+export interface UiCustomColors {
+    text?: string | null;
+    bg?: string | null;
+    border?: string | null;
+}
+export interface UiClassOptions {
+    base: 'TextBtn' | 'IconBtn';
+    size?: UiSize;
+    rounded?: UiRounded;
+    color?: UiColor;
+    variant?: UiVariant;
+    ripple?: boolean;
+    disabled?: boolean;
+    fit?: UiFit;
+    layout?: UiLayout;
+}
+export declare function buildUiClasses(opts: UiClassOptions): string;
+export declare function buildUiHostStyle(colors: UiCustomColors, fit: UiFit, width?: string | null): Record<string, string>;

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@xosue-utils/actions",
+  "version": "0.1.0",
+  "description": "Angular standalone action buttons (text-btn, icon-btn) with flat 32px aesthetic.",
+  "license": "UNLICENSED",
+  "private": false,
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/YOUR_ORG/xosue-utils.git"
+  },
+  "keywords": [
+    "angular",
+    "buttons",
+    "actions",
+    "xosue-utils"
+  ],
+  "peerDependencies": {
+    "@angular/common": "^19.0.0",
+    "@angular/core": "^19.0.0",
+    "@angular/router": "^19.0.0",
+    "@lucide/angular": "^0.500.0 || ^1.0.0",
+    "rxjs": "^7.8.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "module": "fesm2022/xosue-utils-actions.mjs",
+  "typings": "index.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./index.d.ts",
+      "default": "./fesm2022/xosue-utils-actions.mjs"
+    }
+  }
+}

package/public-api.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/index';
+export { LucideIconComponent } from './vendor/lucide-icon/lucide-icon.component';

package/vendor/lucide-icon/lucide-icon.component.d.ts

@@ -0,0 +1,26 @@
+import * as i0 from "@angular/core";
+/**
+ * Icono Lucide.
+ *
+ * HTML:
+ *   <lucide-icon name="star"></lucide-icon>
+ *   <lucide-icon name="heart" filled></lucide-icon>  // relleno + trazo
+ *
+ * SASS — variables CSS (heredan del padre):
+ *   --lucide-stroke: var(--primary)
+ *   --lucide-fill: var(--accent)
+ *   --lucide-stroke-width: 2
+ */
+export declare class LucideIconComponent {
+    readonly name: import("@angular/core").InputSignal<string>;
+    readonly size: import("@angular/core").InputSignal<string | number>;
+    readonly spin: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    /** Activa relleno (--lucide-fill); el trazo se conserva. */
+    readonly filled: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly dimStyle: import("@angular/core").Signal<{
+        width: string;
+        height: string;
+    }>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LucideIconComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LucideIconComponent, "lucide-icon", never, { "name": { "alias": "name"; "required": true; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "spin": { "alias": "spin"; "required": false; "isSignal": true; }; "filled": { "alias": "filled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}