shirkasoft-ui-components 1.2.0 → 1.3.1

package/fesm2022/shirkasoft-ui-components-toggle.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-toggle.mjs","sources":["../../../projects/ui-components/toggle/toggle.component.ts","../../../projects/ui-components/toggle/shirkasoft-ui-components-toggle.ts"],"sourcesContent":["import { Component, forwardRef, input, output, signal, effect } from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { CommonModule } from '@angular/common';\n\n/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\n\n/**\n * Switch / checkbox component that implements ControlValueAccessor so it can\n * be used with reactive and template-driven forms.\n */\n@Component({\n  selector: 'shk-toggle',\n  standalone: true,\n  imports: [CommonModule],\n  template: `\n    <div class=\"relative\">\n      <label\n        class=\"inline-flex items-center gap-3 cursor-pointer select-none\"\n        [class.opacity-50]=\"_disabled()\"\n        [class.cursor-not-allowed]=\"_disabled()\"\n      >\n        @if (mode() === 'toggle') {\n          <div class=\"relative flex-shrink-0\" (click)=\"toggle()\">\n            <div\n              class=\"w-10 h-6 rounded-full transition-colors duration-200\"\n              [class._shk-bg-primary]=\"_value()\"\n              [class._shk-bg-surface-300]=\"!_value()\"\n              [class._shk-dark-bg-surface-600]=\"!_value()\"\n            ></div>\n            <div\n              class=\"absolute top-0.5 left-0.5 w-5 h-5 _shk-bg-white rounded-full shadow transition-transform duration-200\"\n              [class.translate-x-4]=\"_value()\"\n            ></div>\n          </div>\n        } @else {\n          <div\n            class=\"flex-shrink-0 w-4 h-4 rounded border-2 transition-colors duration-200 flex items-center justify-center\"\n            [class._shk-bg-primary]=\"_value()\"\n            [class._shk-border-primary]=\"_value()\"\n            [class._shk-border-surface-300]=\"!_value()\"\n            [class._shk-dark-border-surface-600]=\"!_value()\"\n            (click)=\"toggle()\"\n          >\n            @if (_value()) {\n              <svg class=\"w-3 h-3 text-white\" viewBox=\"0 0 12 12\" fill=\"none\">\n                <path d=\"M2 6l3 3 5-5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n              </svg>\n            }\n          </div>\n        }\n        @if (label()) {\n          <span class=\"text-sm _shk-text-surface-700 _shk-dark-text-surface-300\">\n            {{ label() }}\n          </span>\n        }\n      </label>\n    </div>\n  `,\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => ToggleComponent),\n      multi: true,\n    },\n  ],\n})\nexport class ToggleComponent implements ControlValueAccessor {\n  /** Text displayed next to the control. */\n  label = input<string>('');\n  /** Visual style: 'toggle' (switch) or 'checkbox'. Defaults to 'toggle'. */\n  mode = input<'toggle' | 'checkbox'>('toggle');\n  /** Manually controlled checked state (supports one-way binding). */\n  checked = input<boolean | undefined>(undefined);\n  /** Emitted with the new value when the user toggles the control. */\n  checkedChange = output<boolean>();\n\n  /** Internal controlled/reactive value. */\n  _value = signal(false);\n  /** Reactive disabled state. */\n  _disabled = signal(false);\n\n  /** Callback notified with the new value on change (ControlValueAccessor). */\n  private onChange: (value: boolean) => void = () => {};\n\n  /** Callback notified when the control loses focus or is touched. */\n  private onTouched: () => void = () => {};\n\n  constructor() {\n    effect(() => {\n      const manual = this.checked();\n      if (manual !== undefined) {\n        this._value.set(manual);\n      }\n    });\n  }\n\n  /** Sets the value from the form control. */\n  writeValue(value: any): void {\n    this._value.set(!!value);\n  }\n\n  /** Registers the callback invoked on value changes (ControlValueAccessor). */\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  /** Registers the callback invoked when the control is touched. */\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  /** Reflects the disabled state of the form control. */\n  setDisabledState(isDisabled: boolean): void {\n    this._disabled.set(isDisabled);\n  }\n\n  /**\n   * Inverts the current value (unless disabled), notifies the form control,\n   * marks the control as touched and emits `checkedChange`.\n   */\n  toggle(): void {\n    if (this._disabled()) return;\n    const newValue = !this._value();\n    this._value.set(newValue);\n    this.onChange(newValue);\n    this.onTouched();\n    this.checkedChange.emit(newValue);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AAIA;;;;AAIG;AAEH;;;AAGG;MAyDU,eAAe,CAAA;AAqB1B,IAAA,WAAA,GAAA;;AAnBA,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;;AAEzB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAwB,QAAQ,2EAAC;;AAE7C,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAsB,SAAS,8EAAC;;QAE/C,IAAA,CAAA,aAAa,GAAG,MAAM,EAAW;;AAGjC,QAAA,IAAA,CAAA,MAAM,GAAG,MAAM,CAAC,KAAK,6EAAC;;AAEtB,QAAA,IAAA,CAAA,SAAS,GAAG,MAAM,CAAC,KAAK,gFAAC;;AAGjB,QAAA,IAAA,CAAA,QAAQ,GAA6B,MAAK,EAAE,CAAC;;AAG7C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;QAGtC,MAAM,CAAC,MAAK;AACV,YAAA,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE;AAC7B,YAAA,IAAI,MAAM,KAAK,SAAS,EAAE;AACxB,gBAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,MAAM,CAAC;YACzB;AACF,QAAA,CAAC,CAAC;IACJ;;AAGA,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;IAC1B;;AAGA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;;AAGA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;;AAGA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,UAAU,CAAC;IAChC;AAEA;;;AAGG;IACH,MAAM,GAAA;QACJ,IAAI,IAAI,CAAC,SAAS,EAAE;YAAE;AACtB,QAAA,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,MAAM,EAAE;AAC/B,QAAA,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,QAAQ,CAAC;AACzB,QAAA,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;QACvB,IAAI,CAAC,SAAS,EAAE;AAChB,QAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,QAAQ,CAAC;IACnC;+GA7DW,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAf,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,YAAA,EAAA,MAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,aAAA,EAAA,eAAA,EAAA,EAAA,SAAA,EARf;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EAlDS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EA5CS,YAAY,EAAA,CAAA,EAAA,CAAA,CAAA;;4FAqDX,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxD3B,SAAS;AAAC,YAAA,IAAA,EAAA,CAAA;AACT,oBAAA,QAAQ,EAAE,YAAY;AACtB,oBAAA,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,YAAY,CAAC;AACvB,oBAAA,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CT,EAAA,CAAA;AACD,oBAAA,SAAS,EAAE;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,qBAAqB,CAAC;AAC9C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA;AACF,iBAAA;;;ACrED;;AAEG;;;;"}

package/fesm2022/shirkasoft-ui-components-tooltip.mjs

@@ -0,0 +1,169 @@
+import * as i0 from '@angular/core';
+import { input, inject, ElementRef, HostListener, Component } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+
+const TOOLTIP_Z_INDEX = '2147483647';
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Tooltip rendered in `document.body` with `position: fixed`, so it always
+ * floats above any container (tables with `overflow: hidden`, modals, scroll
+ * wrappers, etc.) and never gets clipped or hidden behind its anchor element.
+ */
+class TooltipComponent {
+    constructor() {
+        /** Content of the tooltip. */
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Preferred placement relative to the trigger. */
+        this.position = input('bottom', ...(ngDevMode ? [{ debugName: "position" }] : /* istanbul ignore next */ []));
+        /** 'hover' shows on mouse enter; 'fixed' stays pinned to the content. */
+        this.mode = input('hover', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        /** Distance (px) between the tooltip and the trigger. */
+        this.offset = input(8, ...(ngDevMode ? [{ debugName: "offset" }] : /* istanbul ignore next */ []));
+        this.host = inject((ElementRef));
+        this.document = inject(DOCUMENT);
+        /** The dynamically created tooltip element. */
+        this.tooltipEl = null;
+        /** Unsubscribe callbacks for the scroll/resize listeners. */
+        this.cleanup = null;
+    }
+    /** Shows the tooltip over the host trigger on mouseenter. */
+    onMouseEnter() {
+        if (!this.text())
+            return;
+        const trigger = this.host.nativeElement.querySelector('.shk-tooltip-trigger');
+        if (!trigger)
+            return;
+        this.show(trigger);
+    }
+    /** Hides the tooltip on mouseleave. */
+    onMouseLeave() {
+        this.hide();
+    }
+    /** Creates and positions the tooltip element on `document.body`. */
+    show(trigger) {
+        this.removeTooltip();
+        const el = this.document.createElement('span');
+        el.className = 'shk-tooltip-dynamic';
+        el.textContent = this.text();
+        Object.assign(el.style, {
+            position: 'fixed',
+            zIndex: TOOLTIP_Z_INDEX,
+            backgroundColor: 'var(--shk-tooltip-bg, #27272a)',
+            color: 'var(--shk-tooltip-text, #fff)',
+            padding: '4px 8px',
+            borderRadius: '6px',
+            fontSize: '12px',
+            lineHeight: '1.4',
+            whiteSpace: 'normal',
+            maxWidth: 'min(80vw, 22rem)',
+            boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
+            pointerEvents: 'none',
+            opacity: '0',
+            transition: 'opacity 0.15s ease',
+        });
+        this.document.body.appendChild(el);
+        this.tooltipEl = el;
+        const place = () => {
+            const rect = trigger.getBoundingClientRect();
+            const w = el.offsetWidth;
+            const h = el.offsetHeight;
+            const { left, top } = this.computePosition(rect, w, h);
+            el.style.left = `${left}px`;
+            el.style.top = `${top}px`;
+        };
+        place();
+        requestAnimationFrame(() => {
+            if (this.tooltipEl === el) {
+                el.style.opacity = '1';
+            }
+        });
+        const onScrollOrResize = () => place();
+        window.addEventListener('scroll', onScrollOrResize, true);
+        window.addEventListener('resize', onScrollOrResize);
+        this.cleanup = () => {
+            window.removeEventListener('scroll', onScrollOrResize, true);
+            window.removeEventListener('resize', onScrollOrResize);
+        };
+    }
+    /** Computes the tooltip position, clamped to the viewport. */
+    computePosition(rect, width, height) {
+        const off = this.offset();
+        const viewportW = this.document.defaultView?.innerWidth ?? 0;
+        const viewportH = this.document.defaultView?.innerHeight ?? 0;
+        let x;
+        let y;
+        if (this.position() === 'right') {
+            x = rect.right + off;
+            y = rect.top + rect.height / 2 - height / 2;
+        }
+        else if (this.position() === 'bottom') {
+            x = rect.left + rect.width / 2 - width / 2;
+            y = rect.bottom + off;
+        }
+        else {
+            x = rect.left + rect.width / 2 - width / 2;
+            y = rect.top - off - height;
+        }
+        const margin = 4;
+        const left = Math.max(margin, Math.min(x, Math.max(margin, viewportW - width - margin)));
+        const top = Math.max(margin, Math.min(y, Math.max(margin, viewportH - height - margin)));
+        return { left, top };
+    }
+    /** Fades the tooltip out and removes it from the DOM. */
+    hide() {
+        if (!this.tooltipEl)
+            return;
+        const el = this.tooltipEl;
+        el.style.opacity = '0';
+        this.tooltipEl = null;
+        setTimeout(() => {
+            el.remove();
+        }, 150);
+    }
+    /** Removes the tooltip and its listeners. */
+    removeTooltip() {
+        this.cleanup?.();
+        this.cleanup = null;
+        this.tooltipEl?.remove();
+        this.tooltipEl = null;
+    }
+    /** Cleans up the tooltip on component destroy. */
+    ngOnDestroy() {
+        this.removeTooltip();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: TooltipComponent, isStandalone: true, selector: "shk-tooltip", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, offset: { classPropertyName: "offset", publicName: "offset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0, template: `
+    <div class="shk-tooltip-trigger inline-flex">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: TooltipComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-tooltip',
+                    standalone: true,
+                    template: `
+    <div class="shk-tooltip-trigger inline-flex">
+      <ng-content></ng-content>
+    </div>
+  `,
+                }]
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], offset: [{ type: i0.Input, args: [{ isSignal: true, alias: "offset", required: false }] }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TooltipComponent };
+//# sourceMappingURL=shirkasoft-ui-components-tooltip.mjs.map

package/fesm2022/shirkasoft-ui-components-tooltip.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-tooltip.mjs","sources":["../../../projects/ui-components/tooltip/tooltip.component.ts","../../../projects/ui-components/tooltip/shirkasoft-ui-components-tooltip.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  ElementRef,\n  inject,\n  HostListener,\n  OnDestroy,\n} from '@angular/core';\nimport { DOCUMENT } from '@angular/common';\n\nconst TOOLTIP_Z_INDEX = '2147483647';\n\n/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\n\n/**\n * Tooltip rendered in `document.body` with `position: fixed`, so it always\n * floats above any container (tables with `overflow: hidden`, modals, scroll\n * wrappers, etc.) and never gets clipped or hidden behind its anchor element.\n */\n@Component({\n  selector: 'shk-tooltip',\n  standalone: true,\n  template: `\n    <div class=\"shk-tooltip-trigger inline-flex\">\n      <ng-content></ng-content>\n    </div>\n  `,\n})\nexport class TooltipComponent implements OnDestroy {\n  /** Content of the tooltip. */\n  readonly text = input<string>('');\n  /** Preferred placement relative to the trigger. */\n  readonly position = input<'top' | 'bottom' | 'right'>('bottom');\n  /** 'hover' shows on mouse enter; 'fixed' stays pinned to the content. */\n  readonly mode = input<'hover' | 'fixed'>('hover');\n  /** Distance (px) between the tooltip and the trigger. */\n  readonly offset = input(8);\n\n  private readonly host = inject(ElementRef<HTMLElement>);\n  private readonly document = inject(DOCUMENT);\n\n  /** The dynamically created tooltip element. */\n  private tooltipEl: HTMLElement | null = null;\n  /** Unsubscribe callbacks for the scroll/resize listeners. */\n  private cleanup: (() => void) | null = null;\n\n  /** Shows the tooltip over the host trigger on mouseenter. */\n  @HostListener('mouseenter')\n  onMouseEnter(): void {\n    if (!this.text()) return;\n    const trigger = this.host.nativeElement.querySelector(\n      '.shk-tooltip-trigger',\n    ) as HTMLElement | null;\n    if (!trigger) return;\n    this.show(trigger);\n  }\n\n  /** Hides the tooltip on mouseleave. */\n  @HostListener('mouseleave')\n  onMouseLeave(): void {\n    this.hide();\n  }\n\n  /** Creates and positions the tooltip element on `document.body`. */\n  private show(trigger: HTMLElement): void {\n    this.removeTooltip();\n\n    const el = this.document.createElement('span');\n    el.className = 'shk-tooltip-dynamic';\n    el.textContent = this.text();\n    Object.assign(el.style, {\n      position: 'fixed',\n      zIndex: TOOLTIP_Z_INDEX,\n      backgroundColor: 'var(--shk-tooltip-bg, #27272a)',\n      color: 'var(--shk-tooltip-text, #fff)',\n      padding: '4px 8px',\n      borderRadius: '6px',\n      fontSize: '12px',\n      lineHeight: '1.4',\n      whiteSpace: 'normal',\n      maxWidth: 'min(80vw, 22rem)',\n      boxShadow:\n        '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',\n      pointerEvents: 'none',\n      opacity: '0',\n      transition: 'opacity 0.15s ease',\n    });\n\n    this.document.body.appendChild(el);\n    this.tooltipEl = el;\n\n    const place = () => {\n      const rect = trigger.getBoundingClientRect();\n      const w = el.offsetWidth;\n      const h = el.offsetHeight;\n      const { left, top } = this.computePosition(rect, w, h);\n      el.style.left = `${left}px`;\n      el.style.top = `${top}px`;\n    };\n\n    place();\n    requestAnimationFrame(() => {\n      if (this.tooltipEl === el) {\n        el.style.opacity = '1';\n      }\n    });\n\n    const onScrollOrResize = () => place();\n    window.addEventListener('scroll', onScrollOrResize, true);\n    window.addEventListener('resize', onScrollOrResize);\n    this.cleanup = () => {\n      window.removeEventListener('scroll', onScrollOrResize, true);\n      window.removeEventListener('resize', onScrollOrResize);\n    };\n  }\n\n  /** Computes the tooltip position, clamped to the viewport. */\n  private computePosition(\n    rect: DOMRect,\n    width: number,\n    height: number,\n  ): { left: number; top: number } {\n    const off = this.offset();\n    const viewportW = this.document.defaultView?.innerWidth ?? 0;\n    const viewportH = this.document.defaultView?.innerHeight ?? 0;\n\n    let x: number;\n    let y: number;\n\n    if (this.position() === 'right') {\n      x = rect.right + off;\n      y = rect.top + rect.height / 2 - height / 2;\n    } else if (this.position() === 'bottom') {\n      x = rect.left + rect.width / 2 - width / 2;\n      y = rect.bottom + off;\n    } else {\n      x = rect.left + rect.width / 2 - width / 2;\n      y = rect.top - off - height;\n    }\n\n    const margin = 4;\n    const left = Math.max(\n      margin,\n      Math.min(x, Math.max(margin, viewportW - width - margin)),\n    );\n    const top = Math.max(\n      margin,\n      Math.min(y, Math.max(margin, viewportH - height - margin)),\n    );\n    return { left, top };\n  }\n\n  /** Fades the tooltip out and removes it from the DOM. */\n  private hide(): void {\n    if (!this.tooltipEl) return;\n    const el = this.tooltipEl;\n    el.style.opacity = '0';\n    this.tooltipEl = null;\n    setTimeout(() => {\n      el.remove();\n    }, 150);\n  }\n\n  /** Removes the tooltip and its listeners. */\n  private removeTooltip(): void {\n    this.cleanup?.();\n    this.cleanup = null;\n    this.tooltipEl?.remove();\n    this.tooltipEl = null;\n  }\n\n  /** Cleans up the tooltip on component destroy. */\n  ngOnDestroy(): void {\n    this.removeTooltip();\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/shirkasoft-ui-components-utils.mjs

@@ -0,0 +1,69 @@
+import { LucideX, LucideUpload, LucideTriangleAlert, LucideTrash2, LucideSearch, LucideRefreshCw, LucidePlus, LucidePanelRight, LucideMinimize2, LucideMenu, LucideMaximize2, LucideLogOut, LucideLoaderCircle, LucideLoader, LucideInfo, LucideInbox, LucideGlobe, LucideFunnel, LucideFileText, LucideFileSpreadsheet, LucideFile, LucideEyeOff, LucideEye, LucideDownload, LucideCirclePlus, LucideCircleQuestionMark, LucideChevronsRight, LucideChevronsLeft, LucideChevronRight, LucideChevronLeft, LucideChevronDown, LucideCalendarDays, LucideCheck, LucideArrowUpDown, LucideArrowUp, LucideArrowDown, LucideArrowLeft } from '@lucide/angular';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Maps the icon names used across the library to their Lucide component. */
+const ICONS = {
+    'arrow-left': LucideArrowLeft,
+    'arrow-down': LucideArrowDown,
+    'arrow-up': LucideArrowUp,
+    'arrow-up-down': LucideArrowUpDown,
+    check: LucideCheck,
+    'calendar-days': LucideCalendarDays,
+    'chevron-down': LucideChevronDown,
+    'chevron-left': LucideChevronLeft,
+    'chevron-right': LucideChevronRight,
+    'chevrons-left': LucideChevronsLeft,
+    'chevrons-right': LucideChevronsRight,
+    'circle-help': LucideCircleQuestionMark,
+    'circle-plus': LucideCirclePlus,
+    download: LucideDownload,
+    eye: LucideEye,
+    'eye-off': LucideEyeOff,
+    file: LucideFile,
+    'file-spreadsheet': LucideFileSpreadsheet,
+    'file-text': LucideFileText,
+    filter: LucideFunnel,
+    globe: LucideGlobe,
+    inbox: LucideInbox,
+    info: LucideInfo,
+    loader: LucideLoader,
+    'loader-circle': LucideLoaderCircle,
+    'log-out': LucideLogOut,
+    'maximize-2': LucideMaximize2,
+    menu: LucideMenu,
+    'minimize-2': LucideMinimize2,
+    'panel-right': LucidePanelRight,
+    plus: LucidePlus,
+    refresh: LucideRefreshCw,
+    search: LucideSearch,
+    'trash-2': LucideTrash2,
+    'triangle-alert': LucideTriangleAlert,
+    upload: LucideUpload,
+    x: LucideX,
+};
+/**
+ * Resolves the icon passed to a component into a lucide component.
+ * Accepts a registered string name, an existing lucide component or a LucideIconData object.
+ */
+function getIcon(icon, fallback = LucideCircleQuestionMark) {
+    if (!icon)
+        return null;
+    if (typeof icon === 'string') {
+        return ICONS[icon] ?? fallback;
+    }
+    if (typeof icon === 'function') {
+        return icon;
+    }
+    return fallback;
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ICONS, getIcon };
+//# sourceMappingURL=shirkasoft-ui-components-utils.mjs.map

package/fesm2022/shirkasoft-ui-components-utils.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-utils.mjs","sources":["../../../projects/ui-components/utils/icons.ts","../../../projects/ui-components/utils/shirkasoft-ui-components-utils.ts"],"sourcesContent":["/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\nimport {\n  LucideArrowDown,\n  LucideArrowLeft,\n  LucideArrowUp,\n  LucideArrowUpDown,\n  LucideCalendarDays,\n  LucideCheck,\n  LucideChevronDown,\n  LucideChevronLeft,\n  LucideChevronRight,\n  LucideChevronsLeft,\n  LucideChevronsRight,\n  LucideCircleQuestionMark,\n  LucideCirclePlus,\nLucideDownload,\n  LucideEye,\n  LucideEyeOff,\n  LucideFile,\n  LucideFileSpreadsheet,\n  LucideFileText,\n  LucideFunnel,\n  LucideGlobe,\n  LucideInbox,\n  LucideInfo,\n  LucideLoader,\n  LucideLoaderCircle,\n  LucideLogOut,\n  LucideMaximize2,\n  LucideMenu,\n  LucideMinimize2,\n  LucidePanelRight,\n  LucidePlus,\n  LucideRefreshCw,\n  LucideSearch,\n  LucideTrash2,\n  LucideTriangleAlert,\n  LucideUpload,\n  LucideX,\n} from '@lucide/angular';\n\n/** Maps the icon names used across the library to their Lucide component. */\nexport const ICONS: Record<string, any> = {\n  'arrow-left': LucideArrowLeft,\n  'arrow-down': LucideArrowDown,\n  'arrow-up': LucideArrowUp,\n  'arrow-up-down': LucideArrowUpDown,\n  check: LucideCheck,\n  'calendar-days': LucideCalendarDays,\n  'chevron-down': LucideChevronDown,\n  'chevron-left': LucideChevronLeft,\n  'chevron-right': LucideChevronRight,\n  'chevrons-left': LucideChevronsLeft,\n  'chevrons-right': LucideChevronsRight,\n  'circle-help': LucideCircleQuestionMark,\n  'circle-plus': LucideCirclePlus,\n  download: LucideDownload,\n  eye: LucideEye,\n  'eye-off': LucideEyeOff,\n  file: LucideFile,\n  'file-spreadsheet': LucideFileSpreadsheet,\n  'file-text': LucideFileText,\n  filter: LucideFunnel,\n  globe: LucideGlobe,\n  inbox: LucideInbox,\n  info: LucideInfo,\n  loader: LucideLoader,\n  'loader-circle': LucideLoaderCircle,\n  'log-out': LucideLogOut,\n  'maximize-2': LucideMaximize2,\n  menu: LucideMenu,\n  'minimize-2': LucideMinimize2,\n  'panel-right': LucidePanelRight,\n  plus: LucidePlus,\n  refresh: LucideRefreshCw,\n  search: LucideSearch,\n  'trash-2': LucideTrash2,\n  'triangle-alert': LucideTriangleAlert,\n  upload: LucideUpload,\n  x: LucideX,\n};\n\n/**\n * Resolves the icon passed to a component into a lucide component.\n * Accepts a registered string name, an existing lucide component or a LucideIconData object.\n */\nexport function getIcon(icon?: any, fallback: any = LucideCircleQuestionMark): any {\n  if (!icon) return null;\n  if (typeof icon === 'string') {\n    return ICONS[icon] ?? fallback;\n  }\n  if (typeof icon === 'function') {\n    return icon;\n  }\n  return fallback;\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;AAAA;;;;AAIG;AAyCH;AACO,MAAM,KAAK,GAAwB;AACxC,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,UAAU,EAAE,aAAa;AACzB,IAAA,eAAe,EAAE,iBAAiB;AAClC,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,eAAe,EAAE,kBAAkB;AACnC,IAAA,cAAc,EAAE,iBAAiB;AACjC,IAAA,cAAc,EAAE,iBAAiB;AACjC,IAAA,eAAe,EAAE,kBAAkB;AACnC,IAAA,eAAe,EAAE,kBAAkB;AACnC,IAAA,gBAAgB,EAAE,mBAAmB;AACrC,IAAA,aAAa,EAAE,wBAAwB;AACvC,IAAA,aAAa,EAAE,gBAAgB;AAC/B,IAAA,QAAQ,EAAE,cAAc;AACxB,IAAA,GAAG,EAAE,SAAS;AACd,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,kBAAkB,EAAE,qBAAqB;AACzC,IAAA,WAAW,EAAE,cAAc;AAC3B,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,KAAK,EAAE,WAAW;AAClB,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,eAAe,EAAE,kBAAkB;AACnC,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,YAAY,EAAE,eAAe;AAC7B,IAAA,aAAa,EAAE,gBAAgB;AAC/B,IAAA,IAAI,EAAE,UAAU;AAChB,IAAA,OAAO,EAAE,eAAe;AACxB,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,gBAAgB,EAAE,mBAAmB;AACrC,IAAA,MAAM,EAAE,YAAY;AACpB,IAAA,CAAC,EAAE,OAAO;;AAGZ;;;AAGG;SACa,OAAO,CAAC,IAAU,EAAE,WAAgB,wBAAwB,EAAA;AAC1E,IAAA,IAAI,CAAC,IAAI;AAAE,QAAA,OAAO,IAAI;AACtB,IAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;AAC5B,QAAA,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,QAAQ;IAChC;AACA,IAAA,IAAI,OAAO,IAAI,KAAK,UAAU,EAAE;AAC9B,QAAA,OAAO,IAAI;IACb;AACA,IAAA,OAAO,QAAQ;AACjB;;ACnGA;;AAEG;;;;"}

package/fesm2022/shirkasoft-ui-components-wizard.mjs

@@ -0,0 +1,167 @@
+import * as i0 from '@angular/core';
+import { input, Directive, model, output, contentChildren, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { LucideChevronRight, LucideDynamicIcon } from '@lucide/angular';
+import { getIcon } from 'shirkasoft-ui-components/utils';
+
+/** Declares a step's content template: <ng-template shkWizardStepContent="stepId">…</ng-template>. */
+class ShkWizardStepContent {
+    constructor(templateRef) {
+        this.templateRef = templateRef;
+        this.stepId = input.required({ ...(ngDevMode ? { debugName: "stepId" } : /* istanbul ignore next */ {}), alias: 'shkWizardStepContent' });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ShkWizardStepContent, deps: [{ token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.18", type: ShkWizardStepContent, isStandalone: true, selector: "ng-template[shkWizardStepContent]", inputs: { stepId: { classPropertyName: "stepId", publicName: "shkWizardStepContent", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ShkWizardStepContent, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'ng-template[shkWizardStepContent]',
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [{ type: i0.TemplateRef }], propDecorators: { stepId: [{ type: i0.Input, args: [{ isSignal: true, alias: "shkWizardStepContent", required: true }] }] } });
+let wizardCounter = 0;
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Multi-step wizard with a progress stepper, header, footer actions and
+ * content templates declared with `shkWizardStepContent`.
+ */
+class WizardComponent {
+    constructor() {
+        this.getIcon = (name) => getIcon(name, LucideChevronRight);
+        /** Steps definition shown in the stepper and used to resolve step content. */
+        this.steps = input([], ...(ngDevMode ? [{ debugName: "steps" }] : /* istanbul ignore next */ []));
+        /** Active step id. Two-way bindable with [(currentStep)]. Null resolves to the first step. */
+        this.currentStep = model(null, ...(ngDevMode ? [{ debugName: "currentStep" }] : /* istanbul ignore next */ []));
+        // Header
+        /** Shows the sticky header (back button + title). */
+        this.showHeader = input(true, ...(ngDevMode ? [{ debugName: "showHeader" }] : /* istanbul ignore next */ []));
+        this.headerTitle = input('', ...(ngDevMode ? [{ debugName: "headerTitle" }] : /* istanbul ignore next */ []));
+        this.headerSubtitle = input('', ...(ngDevMode ? [{ debugName: "headerSubtitle" }] : /* istanbul ignore next */ []));
+        /** Shows the round back button in the header. */
+        this.showBackButton = input(true, ...(ngDevMode ? [{ debugName: "showBackButton" }] : /* istanbul ignore next */ []));
+        this.backTooltip = input('Atrás', ...(ngDevMode ? [{ debugName: "backTooltip" }] : /* istanbul ignore next */ []));
+        /** Optional lucide icon shown before the title. */
+        this.headerIcon = input('', ...(ngDevMode ? [{ debugName: "headerIcon" }] : /* istanbul ignore next */ []));
+        // Stepper
+        /** Shows the progress stepper (hide it for edit mode, like wac-app does). */
+        this.showStepper = input(true, ...(ngDevMode ? [{ debugName: "showStepper" }] : /* istanbul ignore next */ []));
+        /** Lets the user click on previous steps to jump back. */
+        this.stepperClickable = input(false, ...(ngDevMode ? [{ debugName: "stepperClickable" }] : /* istanbul ignore next */ []));
+        // Footer
+        this.showFooter = input(true, ...(ngDevMode ? [{ debugName: "showFooter" }] : /* istanbul ignore next */ []));
+        /** Shows a "Paso X / N" counter on the left of the footer. */
+        this.showStepCounter = input(false, ...(ngDevMode ? [{ debugName: "showStepCounter" }] : /* istanbul ignore next */ []));
+        this.stepCounterPrefix = input('Paso', ...(ngDevMode ? [{ debugName: "stepCounterPrefix" }] : /* istanbul ignore next */ []));
+        /** Shows the Cancel button on the first step (instead of a back button). */
+        this.showCancel = input(true, ...(ngDevMode ? [{ debugName: "showCancel" }] : /* istanbul ignore next */ []));
+        /** Auto-advances to the next step on the primary button when it is not the last step. */
+        this.advanceOnNext = input(true, ...(ngDevMode ? [{ debugName: "advanceOnNext" }] : /* istanbul ignore next */ []));
+        this.prevLabel = input('Atrás', ...(ngDevMode ? [{ debugName: "prevLabel" }] : /* istanbul ignore next */ []));
+        this.prevIcon = input('chevron-left', ...(ngDevMode ? [{ debugName: "prevIcon" }] : /* istanbul ignore next */ []));
+        this.cancelLabel = input('Cancelar', ...(ngDevMode ? [{ debugName: "cancelLabel" }] : /* istanbul ignore next */ []));
+        this.cancelIcon = input('x', ...(ngDevMode ? [{ debugName: "cancelIcon" }] : /* istanbul ignore next */ []));
+        this.nextLabel = input('Continuar', ...(ngDevMode ? [{ debugName: "nextLabel" }] : /* istanbul ignore next */ []));
+        this.nextIcon = input('chevron-right', ...(ngDevMode ? [{ debugName: "nextIcon" }] : /* istanbul ignore next */ []));
+        this.finishLabel = input('Finalizar', ...(ngDevMode ? [{ debugName: "finishLabel" }] : /* istanbul ignore next */ []));
+        this.finishIcon = input('check', ...(ngDevMode ? [{ debugName: "finishIcon" }] : /* istanbul ignore next */ []));
+        /** Overrides the primary footer button label for every step. */
+        this.primaryLabel = input(null, ...(ngDevMode ? [{ debugName: "primaryLabel" }] : /* istanbul ignore next */ []));
+        /** Overrides the primary footer button icon for every step. */
+        this.primaryIcon = input(null, ...(ngDevMode ? [{ debugName: "primaryIcon" }] : /* istanbul ignore next */ []));
+        /** Shows a loading spinner on the primary button and disables it. */
+        this.primaryLoading = input(false, ...(ngDevMode ? [{ debugName: "primaryLoading" }] : /* istanbul ignore next */ []));
+        /** Disables the primary footer button (e.g. while the step form is invalid). */
+        this.primaryDisabled = input(false, ...(ngDevMode ? [{ debugName: "primaryDisabled" }] : /* istanbul ignore next */ []));
+        // Outputs
+        this.back = output();
+        this.cancel = output();
+        this.prev = output();
+        this.next = output();
+        this.finish = output();
+        this.stepChange = output();
+        this.stepContents = contentChildren(ShkWizardStepContent, ...(ngDevMode ? [{ debugName: "stepContents" }] : /* istanbul ignore next */ []));
+        this.currentIndex = computed(() => {
+            const id = this.currentStep();
+            if (id == null)
+                return this.steps().length > 0 ? 0 : -1;
+            return this.steps().findIndex((s) => s.id === id);
+        }, ...(ngDevMode ? [{ debugName: "currentIndex" }] : /* istanbul ignore next */ []));
+        this.currentStepObj = computed(() => this.steps()[this.currentIndex()] ?? null, ...(ngDevMode ? [{ debugName: "currentStepObj" }] : /* istanbul ignore next */ []));
+        this.isFirstStep = computed(() => this.currentIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirstStep" }] : /* istanbul ignore next */ []));
+        this.isLastStep = computed(() => this.currentIndex() === this.steps().length - 1, ...(ngDevMode ? [{ debugName: "isLastStep" }] : /* istanbul ignore next */ []));
+        this.primaryActionLabel = computed(() => {
+            if (this.primaryLabel())
+                return this.primaryLabel();
+            const step = this.currentStepObj();
+            if (step?.primaryLabel)
+                return step.primaryLabel;
+            return this.isLastStep() ? this.finishLabel() : this.nextLabel();
+        }, ...(ngDevMode ? [{ debugName: "primaryActionLabel" }] : /* istanbul ignore next */ []));
+        this.primaryActionIcon = computed(() => {
+            if (this.primaryIcon())
+                return this.primaryIcon();
+            const step = this.currentStepObj();
+            if (step?.primaryIcon)
+                return step.primaryIcon;
+            return this.isLastStep() ? this.finishIcon() : this.nextIcon();
+        }, ...(ngDevMode ? [{ debugName: "primaryActionIcon" }] : /* istanbul ignore next */ []));
+    }
+    getStepTemplate(id) {
+        return this.stepContents().find((c) => c.stepId() === id)?.templateRef;
+    }
+    goTo(stepId) {
+        const idx = this.steps().findIndex((s) => s.id === stepId);
+        if (idx < 0)
+            return;
+        if (this.currentStep() === stepId)
+            return;
+        this.currentStep.set(stepId);
+        this.stepChange.emit({ step: this.steps()[idx], index: idx });
+    }
+    onPrev() {
+        const idx = this.currentIndex();
+        if (idx <= 0)
+            return;
+        this.prev.emit();
+        this.goTo(this.steps()[idx - 1].id);
+    }
+    onNext() {
+        const idx = this.currentIndex();
+        const next = this.steps()[idx + 1];
+        if (!next)
+            return;
+        this.next.emit();
+        if (this.advanceOnNext()) {
+            this.goTo(next.id);
+        }
+    }
+    onPrimary() {
+        if (this.primaryLoading() || this.primaryDisabled())
+            return;
+        if (this.isLastStep()) {
+            this.finish.emit();
+        }
+        else {
+            this.onNext();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WizardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: WizardComponent, isStandalone: true, selector: "shk-wizard", inputs: { steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, currentStep: { classPropertyName: "currentStep", publicName: "currentStep", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, headerTitle: { classPropertyName: "headerTitle", publicName: "headerTitle", isSignal: true, isRequired: false, transformFunction: null }, headerSubtitle: { classPropertyName: "headerSubtitle", publicName: "headerSubtitle", isSignal: true, isRequired: false, transformFunction: null }, showBackButton: { classPropertyName: "showBackButton", publicName: "showBackButton", isSignal: true, isRequired: false, transformFunction: null }, backTooltip: { classPropertyName: "backTooltip", publicName: "backTooltip", isSignal: true, isRequired: false, transformFunction: null }, headerIcon: { classPropertyName: "headerIcon", publicName: "headerIcon", isSignal: true, isRequired: false, transformFunction: null }, showStepper: { classPropertyName: "showStepper", publicName: "showStepper", isSignal: true, isRequired: false, transformFunction: null }, stepperClickable: { classPropertyName: "stepperClickable", publicName: "stepperClickable", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showStepCounter: { classPropertyName: "showStepCounter", publicName: "showStepCounter", isSignal: true, isRequired: false, transformFunction: null }, stepCounterPrefix: { classPropertyName: "stepCounterPrefix", publicName: "stepCounterPrefix", isSignal: true, isRequired: false, transformFunction: null }, showCancel: { classPropertyName: "showCancel", publicName: "showCancel", isSignal: true, isRequired: false, transformFunction: null }, advanceOnNext: { classPropertyName: "advanceOnNext", publicName: "advanceOnNext", isSignal: true, isRequired: false, transformFunction: null }, prevLabel: { classPropertyName: "prevLabel", publicName: "prevLabel", isSignal: true, isRequired: false, transformFunction: null }, prevIcon: { classPropertyName: "prevIcon", publicName: "prevIcon", isSignal: true, isRequired: false, transformFunction: null }, cancelLabel: { classPropertyName: "cancelLabel", publicName: "cancelLabel", isSignal: true, isRequired: false, transformFunction: null }, cancelIcon: { classPropertyName: "cancelIcon", publicName: "cancelIcon", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, nextIcon: { classPropertyName: "nextIcon", publicName: "nextIcon", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, finishIcon: { classPropertyName: "finishIcon", publicName: "finishIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLabel: { classPropertyName: "primaryLabel", publicName: "primaryLabel", isSignal: true, isRequired: false, transformFunction: null }, primaryIcon: { classPropertyName: "primaryIcon", publicName: "primaryIcon", isSignal: true, isRequired: false, transformFunction: null }, primaryLoading: { classPropertyName: "primaryLoading", publicName: "primaryLoading", isSignal: true, isRequired: false, transformFunction: null }, primaryDisabled: { classPropertyName: "primaryDisabled", publicName: "primaryDisabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentStep: "currentStepChange", back: "back", cancel: "cancel", prev: "prev", next: "next", finish: "finish", stepChange: "stepChange" }, queries: [{ propertyName: "stepContents", predicate: ShkWizardStepContent, isSignal: true }], ngImport: i0, template: "<div class=\"min-h-full bg-transparent\">\n\n  <!-- ============ Sticky Header + Stepper ============ -->\n  @if (showHeader()) {\n    <div\n      class=\"sticky top-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4\">\n        <div class=\"flex items-center gap-4 mb-4\">\n          @if (showBackButton()) {\n            <button\n              type=\"button\"\n              (click)=\"back.emit()\"\n              [attr.aria-label]=\"backTooltip()\"\n              [attr.title]=\"backTooltip()\"\n              class=\"shk-wizard-icon-btn shrink-0\"\n            >\n              <svg [lucideIcon]=\"getIcon('arrow-left')\" class=\"w-4 h-4\"></svg>\n            </button>\n          }\n          <div class=\"flex-1 min-w-0 flex items-center gap-2.5\">\n            @if (headerIcon()) {\n              <span class=\"w-9 h-9 rounded-lg _shk-bg-primary-soft _shk-text-primary flex items-center justify-center shrink-0\">\n                <svg [lucideIcon]=\"getIcon(headerIcon())\" class=\"w-4 h-4\"></svg>\n              </span>\n            }\n            <div class=\"min-w-0\">\n              <h1 class=\"text-xl font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)] truncate\">\n                {{ headerTitle() }}\n              </h1>\n              @if (headerSubtitle()) {\n                <p class=\"text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mt-0.5 truncate\">\n                  {{ headerSubtitle() }}\n                </p>\n              }\n            </div>\n          </div>\n          <ng-content select=\"[shkWizardHeaderActions]\"></ng-content>\n        </div>\n\n        <!-- Stepper -->\n        @if (showStepper() && steps().length > 1) {\n          <div class=\"flex items-center gap-2 w-full max-w-3xl mx-auto\">\n            @for (step of steps(); track step.id; let i = $index, last = $last) {\n              <div class=\"flex items-center gap-3 shrink-0\">\n                <button\n                  type=\"button\"\n                  (click)=\"goTo(step.id)\"\n                  [disabled]=\"!stepperClickable() || currentIndex() < i\"\n                  [attr.aria-label]=\"step.label\"\n                  class=\"shk-wizard-stepper-dot\"\n                  [class._shk-bg-primary]=\"currentIndex() > i || currentIndex() === i\"\n                  [class.text-white]=\"currentIndex() > i || currentIndex() === i\"\n                  [class._shk-bg-surface-200]=\"currentIndex() < i\"\n                  [class._shk-text-surface-500]=\"currentIndex() < i\"\n                  [class.cursor-pointer]=\"stepperClickable() && currentIndex() >= i\"\n                  [class.cursor-default]=\"!stepperClickable() || currentIndex() < i\"\n                >\n                  @if (currentIndex() > i) {\n                    <svg [lucideIcon]=\"getIcon(step.icon || 'check')\" class=\"w-4 h-4\"></svg>\n                  } @else if (step.icon) {\n                    <svg [lucideIcon]=\"getIcon(step.icon)\" class=\"w-4 h-4\"></svg>\n                  } @else {\n                    {{ i + 1 }}\n                  }\n                </button>\n                <span\n                  class=\"text-sm font-semibold transition-colors whitespace-nowrap hidden sm:inline\"\n                  [class._shk-text-surface-800]=\"currentIndex() === i\"\n                  [class._shk-text-surface-500]=\"currentIndex() !== i\"\n                  [class.dark:[color:var(--shk-surface-800)]]=\"currentIndex() === i\"\n                  [class.dark:[color:var(--shk-surface-500)]]=\"currentIndex() !== i\"\n                >\n                  {{ step.label }}\n                </span>\n              </div>\n\n              @if (!last) {\n                <div class=\"flex-1 h-0.5 _shk-bg-surface-200 dark:[background-color:var(--shk-surface-200)] relative overflow-hidden rounded-full\">\n                  <div\n                    class=\"absolute inset-y-0 left-0 _shk-bg-primary transition-all duration-300\"\n                    [class.w-full]=\"currentIndex() > i\"\n                    [class.w-0]=\"currentIndex() <= i\"\n                  ></div>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Active step content ============ -->\n  <div class=\"w-full px-4 sm:px-6 lg:px-8 py-6 pb-28\">\n    @if (currentIndex() >= 0) {\n      @if (getStepTemplate(steps()[currentIndex()].id); as tpl) {\n        <div class=\"shk-wizard-fade\" [style.view-transition-name]=\"'shk-wizard-step'\">\n          <ng-container\n            *ngTemplateOutlet=\"tpl; context: { step: currentStepObj(), index: currentIndex() }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\">\n          No hay contenido definido para el paso \u00AB{{ steps()[currentIndex()].label }}\u00BB.\n        </p>\n      }\n    }\n  </div>\n\n  <!-- ============ Sticky Footer ============ -->\n  @if (showFooter() && steps().length > 0) {\n    <div\n      class=\"sticky bottom-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-t _shk-border dark:[border-color:var(--shk-surface-200)] shadow-[0_-4px_12px_rgba(0,0,0,0.04)] mt-8\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-end gap-3\">\n        @if (showStepCounter()) {\n          <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mr-auto\">\n            {{ stepCounterPrefix() }} {{ currentIndex() + 1 }} / {{ steps().length }}\n          </span>\n        }\n\n        @if (isFirstStep()) {\n          @if (showCancel()) {\n            <button type=\"button\" (click)=\"cancel.emit()\" class=\"shk-wizard-btn-secondary\">\n              @if (cancelIcon()) {\n                <svg [lucideIcon]=\"getIcon(cancelIcon())\" class=\"w-4 h-4\"></svg>\n              }\n              {{ cancelLabel() }}\n            </button>\n          }\n        } @else {\n          <button type=\"button\" (click)=\"onPrev()\" class=\"shk-wizard-btn-secondary\">\n            <svg [lucideIcon]=\"getIcon(prevIcon())\" class=\"w-4 h-4\"></svg>\n            {{ prevLabel() }}\n          </button>\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"onPrimary()\"\n          [disabled]=\"primaryDisabled() || primaryLoading()\"\n          class=\"shk-wizard-btn-primary\"\n        >\n          @if (primaryLoading()) {\n            <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 shk-wizard-spin\"></svg>\n          } @else {\n            @if (primaryActionIcon()) {\n              <svg [lucideIcon]=\"getIcon(primaryActionIcon())\" class=\"w-4 h-4\"></svg>\n            }\n          }\n          {{ primaryActionLabel() }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.shk-wizard-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:var(--shk-surface-600);transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-icon-btn:hover:not(:disabled){background-color:var(--shk-surface-100);color:var(--shk-surface-800)}.shk-wizard-icon-btn:disabled{cursor:default}.shk-wizard-icon-btn svg{width:1rem!important;height:1rem!important}.shk-wizard-stepper-dot{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:9999px;font-size:.875rem;font-weight:700;flex-shrink:0;transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-stepper-dot svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--shk-surface-700);background-color:transparent;border:1px solid var(--shk-surface-200);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-btn-secondary:hover:not(:disabled){background-color:var(--shk-surface-100);border-color:var(--shk-surface-300);color:var(--shk-surface-900)}.shk-wizard-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.shk-wizard-btn-secondary svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#fff;background-color:var(--shk-primary-600);box-shadow:0 6px 20px -6px color-mix(in srgb,var(--shk-primary-600) 55%,transparent);transition:background-color .15s ease-in-out,opacity .15s ease-in-out}.shk-wizard-btn-primary:hover:not(:disabled){background-color:var(--shk-primary-700)}.shk-wizard-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.shk-wizard-btn-primary svg{width:1rem!important;height:1rem!important}.shk-wizard-spin{animation:shk-wizard-spin .8s linear infinite}@keyframes shk-wizard-spin{to{transform:rotate(360deg)}}.shk-wizard-fade{animation:shk-wizard-fade .25s ease-out}@keyframes shk-wizard-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideDynamicIcon, selector: "svg[lucideIcon]", inputs: ["lucideIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: WizardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-wizard', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, LucideDynamicIcon], template: "<div class=\"min-h-full bg-transparent\">\n\n  <!-- ============ Sticky Header + Stepper ============ -->\n  @if (showHeader()) {\n    <div\n      class=\"sticky top-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4\">\n        <div class=\"flex items-center gap-4 mb-4\">\n          @if (showBackButton()) {\n            <button\n              type=\"button\"\n              (click)=\"back.emit()\"\n              [attr.aria-label]=\"backTooltip()\"\n              [attr.title]=\"backTooltip()\"\n              class=\"shk-wizard-icon-btn shrink-0\"\n            >\n              <svg [lucideIcon]=\"getIcon('arrow-left')\" class=\"w-4 h-4\"></svg>\n            </button>\n          }\n          <div class=\"flex-1 min-w-0 flex items-center gap-2.5\">\n            @if (headerIcon()) {\n              <span class=\"w-9 h-9 rounded-lg _shk-bg-primary-soft _shk-text-primary flex items-center justify-center shrink-0\">\n                <svg [lucideIcon]=\"getIcon(headerIcon())\" class=\"w-4 h-4\"></svg>\n              </span>\n            }\n            <div class=\"min-w-0\">\n              <h1 class=\"text-xl font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)] truncate\">\n                {{ headerTitle() }}\n              </h1>\n              @if (headerSubtitle()) {\n                <p class=\"text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mt-0.5 truncate\">\n                  {{ headerSubtitle() }}\n                </p>\n              }\n            </div>\n          </div>\n          <ng-content select=\"[shkWizardHeaderActions]\"></ng-content>\n        </div>\n\n        <!-- Stepper -->\n        @if (showStepper() && steps().length > 1) {\n          <div class=\"flex items-center gap-2 w-full max-w-3xl mx-auto\">\n            @for (step of steps(); track step.id; let i = $index, last = $last) {\n              <div class=\"flex items-center gap-3 shrink-0\">\n                <button\n                  type=\"button\"\n                  (click)=\"goTo(step.id)\"\n                  [disabled]=\"!stepperClickable() || currentIndex() < i\"\n                  [attr.aria-label]=\"step.label\"\n                  class=\"shk-wizard-stepper-dot\"\n                  [class._shk-bg-primary]=\"currentIndex() > i || currentIndex() === i\"\n                  [class.text-white]=\"currentIndex() > i || currentIndex() === i\"\n                  [class._shk-bg-surface-200]=\"currentIndex() < i\"\n                  [class._shk-text-surface-500]=\"currentIndex() < i\"\n                  [class.cursor-pointer]=\"stepperClickable() && currentIndex() >= i\"\n                  [class.cursor-default]=\"!stepperClickable() || currentIndex() < i\"\n                >\n                  @if (currentIndex() > i) {\n                    <svg [lucideIcon]=\"getIcon(step.icon || 'check')\" class=\"w-4 h-4\"></svg>\n                  } @else if (step.icon) {\n                    <svg [lucideIcon]=\"getIcon(step.icon)\" class=\"w-4 h-4\"></svg>\n                  } @else {\n                    {{ i + 1 }}\n                  }\n                </button>\n                <span\n                  class=\"text-sm font-semibold transition-colors whitespace-nowrap hidden sm:inline\"\n                  [class._shk-text-surface-800]=\"currentIndex() === i\"\n                  [class._shk-text-surface-500]=\"currentIndex() !== i\"\n                  [class.dark:[color:var(--shk-surface-800)]]=\"currentIndex() === i\"\n                  [class.dark:[color:var(--shk-surface-500)]]=\"currentIndex() !== i\"\n                >\n                  {{ step.label }}\n                </span>\n              </div>\n\n              @if (!last) {\n                <div class=\"flex-1 h-0.5 _shk-bg-surface-200 dark:[background-color:var(--shk-surface-200)] relative overflow-hidden rounded-full\">\n                  <div\n                    class=\"absolute inset-y-0 left-0 _shk-bg-primary transition-all duration-300\"\n                    [class.w-full]=\"currentIndex() > i\"\n                    [class.w-0]=\"currentIndex() <= i\"\n                  ></div>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Active step content ============ -->\n  <div class=\"w-full px-4 sm:px-6 lg:px-8 py-6 pb-28\">\n    @if (currentIndex() >= 0) {\n      @if (getStepTemplate(steps()[currentIndex()].id); as tpl) {\n        <div class=\"shk-wizard-fade\" [style.view-transition-name]=\"'shk-wizard-step'\">\n          <ng-container\n            *ngTemplateOutlet=\"tpl; context: { step: currentStepObj(), index: currentIndex() }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\">\n          No hay contenido definido para el paso \u00AB{{ steps()[currentIndex()].label }}\u00BB.\n        </p>\n      }\n    }\n  </div>\n\n  <!-- ============ Sticky Footer ============ -->\n  @if (showFooter() && steps().length > 0) {\n    <div\n      class=\"sticky bottom-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-t _shk-border dark:[border-color:var(--shk-surface-200)] shadow-[0_-4px_12px_rgba(0,0,0,0.04)] mt-8\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-end gap-3\">\n        @if (showStepCounter()) {\n          <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mr-auto\">\n            {{ stepCounterPrefix() }} {{ currentIndex() + 1 }} / {{ steps().length }}\n          </span>\n        }\n\n        @if (isFirstStep()) {\n          @if (showCancel()) {\n            <button type=\"button\" (click)=\"cancel.emit()\" class=\"shk-wizard-btn-secondary\">\n              @if (cancelIcon()) {\n                <svg [lucideIcon]=\"getIcon(cancelIcon())\" class=\"w-4 h-4\"></svg>\n              }\n              {{ cancelLabel() }}\n            </button>\n          }\n        } @else {\n          <button type=\"button\" (click)=\"onPrev()\" class=\"shk-wizard-btn-secondary\">\n            <svg [lucideIcon]=\"getIcon(prevIcon())\" class=\"w-4 h-4\"></svg>\n            {{ prevLabel() }}\n          </button>\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"onPrimary()\"\n          [disabled]=\"primaryDisabled() || primaryLoading()\"\n          class=\"shk-wizard-btn-primary\"\n        >\n          @if (primaryLoading()) {\n            <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 shk-wizard-spin\"></svg>\n          } @else {\n            @if (primaryActionIcon()) {\n              <svg [lucideIcon]=\"getIcon(primaryActionIcon())\" class=\"w-4 h-4\"></svg>\n            }\n          }\n          {{ primaryActionLabel() }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:block}.shk-wizard-icon-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:9999px;color:var(--shk-surface-600);transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-icon-btn:hover:not(:disabled){background-color:var(--shk-surface-100);color:var(--shk-surface-800)}.shk-wizard-icon-btn:disabled{cursor:default}.shk-wizard-icon-btn svg{width:1rem!important;height:1rem!important}.shk-wizard-stepper-dot{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:9999px;font-size:.875rem;font-weight:700;flex-shrink:0;transition:background-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-stepper-dot svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-secondary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:var(--shk-surface-700);background-color:transparent;border:1px solid var(--shk-surface-200);transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out}.shk-wizard-btn-secondary:hover:not(:disabled){background-color:var(--shk-surface-100);border-color:var(--shk-surface-300);color:var(--shk-surface-900)}.shk-wizard-btn-secondary:disabled{opacity:.5;cursor:not-allowed}.shk-wizard-btn-secondary svg{width:1rem!important;height:1rem!important}.shk-wizard-btn-primary{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;font-size:.875rem;font-weight:500;color:#fff;background-color:var(--shk-primary-600);box-shadow:0 6px 20px -6px color-mix(in srgb,var(--shk-primary-600) 55%,transparent);transition:background-color .15s ease-in-out,opacity .15s ease-in-out}.shk-wizard-btn-primary:hover:not(:disabled){background-color:var(--shk-primary-700)}.shk-wizard-btn-primary:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.shk-wizard-btn-primary svg{width:1rem!important;height:1rem!important}.shk-wizard-spin{animation:shk-wizard-spin .8s linear infinite}@keyframes shk-wizard-spin{to{transform:rotate(360deg)}}.shk-wizard-fade{animation:shk-wizard-fade .25s ease-out}@keyframes shk-wizard-fade{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], propDecorators: { steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], currentStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentStep", required: false }] }, { type: i0.Output, args: ["currentStepChange"] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], headerTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTitle", required: false }] }], headerSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerSubtitle", required: false }] }], showBackButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackButton", required: false }] }], backTooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "backTooltip", required: false }] }], headerIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerIcon", required: false }] }], showStepper: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepper", required: false }] }], stepperClickable: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepperClickable", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showStepCounter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStepCounter", required: false }] }], stepCounterPrefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "stepCounterPrefix", required: false }] }], showCancel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCancel", required: false }] }], advanceOnNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "advanceOnNext", required: false }] }], prevLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevLabel", required: false }] }], prevIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prevIcon", required: false }] }], cancelLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelLabel", required: false }] }], cancelIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "cancelIcon", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], nextIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextIcon", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], finishIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishIcon", required: false }] }], primaryLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLabel", required: false }] }], primaryIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryIcon", required: false }] }], primaryLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryLoading", required: false }] }], primaryDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "primaryDisabled", required: false }] }], back: [{ type: i0.Output, args: ["back"] }], cancel: [{ type: i0.Output, args: ["cancel"] }], prev: [{ type: i0.Output, args: ["prev"] }], next: [{ type: i0.Output, args: ["next"] }], finish: [{ type: i0.Output, args: ["finish"] }], stepChange: [{ type: i0.Output, args: ["stepChange"] }], stepContents: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => ShkWizardStepContent), { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ShkWizardStepContent, WizardComponent };
+//# sourceMappingURL=shirkasoft-ui-components-wizard.mjs.map

package/fesm2022/shirkasoft-ui-components-wizard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-wizard.mjs","sources":["../../../projects/ui-components/wizard/wizard.component.ts","../../../projects/ui-components/wizard/wizard.component.html","../../../projects/ui-components/wizard/shirkasoft-ui-components-wizard.ts"],"sourcesContent":["import {\n  Component,\n  Directive,\n  TemplateRef,\n  ChangeDetectionStrategy,\n  computed,\n  contentChildren,\n  input,\n  model,\n  output,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { LucideDynamicIcon, LucideChevronRight } from '@lucide/angular';\nimport { getIcon as getIconFromCentral } from 'shirkasoft-ui-components/utils';\n\n/** A step of the wizard shown in the stepper. */\nexport interface WizardStep {\n  id: string | number;\n  label: string;\n  /** Optional lucide icon rendered inside the step circle. */\n  icon?: string;\n  /** Overrides the primary footer button label for this step. */\n  primaryLabel?: string;\n  /** Overrides the primary footer button icon for this step. */\n  primaryIcon?: string;\n}\n\n/** Declares a step's content template: <ng-template shkWizardStepContent=\"stepId\">…</ng-template>. */\n@Directive({\n  selector: 'ng-template[shkWizardStepContent]',\n  standalone: true,\n})\nexport class ShkWizardStepContent {\n  stepId = input.required<string | number>({ alias: 'shkWizardStepContent' });\n  constructor(public templateRef: TemplateRef<unknown>) {}\n}\n\nlet wizardCounter = 0;\n\n/**\n * Shirkasoft UI Components.\n * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).\n * Belongs to Shirkasoft.\n */\n\n/**\n * Multi-step wizard with a progress stepper, header, footer actions and\n * content templates declared with `shkWizardStepContent`.\n */\n@Component({\n  selector: 'shk-wizard',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [CommonModule, LucideDynamicIcon],\n  templateUrl: './wizard.component.html',\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      .shk-wizard-icon-btn {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        width: 2rem;\n        height: 2rem;\n        border-radius: 9999px;\n        color: var(--shk-surface-600);\n        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n      }\n      .shk-wizard-icon-btn:hover:not(:disabled) {\n        background-color: var(--shk-surface-100);\n        color: var(--shk-surface-800);\n      }\n      .shk-wizard-icon-btn:disabled {\n        cursor: default;\n      }\n      .shk-wizard-icon-btn svg {\n        width: 1rem !important;\n        height: 1rem !important;\n      }\n      .shk-wizard-stepper-dot {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 2.25rem;\n        height: 2.25rem;\n        border-radius: 9999px;\n        font-size: 0.875rem;\n        font-weight: 700;\n        flex-shrink: 0;\n        transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;\n      }\n      .shk-wizard-stepper-dot svg {\n        width: 1rem !important;\n        height: 1rem !important;\n      }\n      .shk-wizard-btn-secondary {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0.5rem 1rem;\n        border-radius: 0.5rem;\n        font-size: 0.875rem;\n        font-weight: 500;\n        color: var(--shk-surface-700);\n        background-color: transparent;\n        border: 1px solid var(--shk-surface-200);\n        transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,\n          color 0.15s ease-in-out;\n      }\n      .shk-wizard-btn-secondary:hover:not(:disabled) {\n        background-color: var(--shk-surface-100);\n        border-color: var(--shk-surface-300);\n        color: var(--shk-surface-900);\n      }\n      .shk-wizard-btn-secondary:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n      .shk-wizard-btn-secondary svg {\n        width: 1rem !important;\n        height: 1rem !important;\n      }\n      .shk-wizard-btn-primary {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n        padding: 0.5rem 1rem;\n        border-radius: 0.5rem;\n        font-size: 0.875rem;\n        font-weight: 500;\n        color: #fff;\n        background-color: var(--shk-primary-600);\n        box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--shk-primary-600) 55%, transparent);\n        transition: background-color 0.15s ease-in-out, opacity 0.15s ease-in-out;\n      }\n      .shk-wizard-btn-primary:hover:not(:disabled) {\n        background-color: var(--shk-primary-700);\n      }\n      .shk-wizard-btn-primary:disabled {\n        opacity: 0.5;\n        cursor: not-allowed;\n        box-shadow: none;\n      }\n      .shk-wizard-btn-primary svg {\n        width: 1rem !important;\n        height: 1rem !important;\n      }\n      .shk-wizard-spin {\n        animation: shk-wizard-spin 0.8s linear infinite;\n      }\n      @keyframes shk-wizard-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n      .shk-wizard-fade {\n        animation: shk-wizard-fade 0.25s ease-out;\n      }\n      @keyframes shk-wizard-fade {\n        from {\n          opacity: 0;\n          transform: translateY(4px);\n        }\n        to {\n          opacity: 1;\n          transform: translateY(0);\n        }\n      }\n    `,\n  ],\n})\nexport class WizardComponent {\n  protected getIcon = (name: any) => getIconFromCentral(name, LucideChevronRight);\n\n  /** Steps definition shown in the stepper and used to resolve step content. */\n  steps = input<WizardStep[]>([]);\n  /** Active step id. Two-way bindable with [(currentStep)]. Null resolves to the first step. */\n  currentStep = model<string | number | null>(null);\n\n  // Header\n  /** Shows the sticky header (back button + title). */\n  showHeader = input<boolean>(true);\n  headerTitle = input<string>('');\n  headerSubtitle = input<string>('');\n  /** Shows the round back button in the header. */\n  showBackButton = input<boolean>(true);\n  backTooltip = input<string>('Atrás');\n  /** Optional lucide icon shown before the title. */\n  headerIcon = input<string>('');\n\n  // Stepper\n  /** Shows the progress stepper (hide it for edit mode, like wac-app does). */\n  showStepper = input<boolean>(true);\n  /** Lets the user click on previous steps to jump back. */\n  stepperClickable = input<boolean>(false);\n\n  // Footer\n  showFooter = input<boolean>(true);\n  /** Shows a \"Paso X / N\" counter on the left of the footer. */\n  showStepCounter = input<boolean>(false);\n  stepCounterPrefix = input<string>('Paso');\n  /** Shows the Cancel button on the first step (instead of a back button). */\n  showCancel = input<boolean>(true);\n  /** Auto-advances to the next step on the primary button when it is not the last step. */\n  advanceOnNext = input<boolean>(true);\n\n  prevLabel = input<string>('Atrás');\n  prevIcon = input<string>('chevron-left');\n  cancelLabel = input<string>('Cancelar');\n  cancelIcon = input<string>('x');\n  nextLabel = input<string>('Continuar');\n  nextIcon = input<string>('chevron-right');\n  finishLabel = input<string>('Finalizar');\n  finishIcon = input<string>('check');\n\n  /** Overrides the primary footer button label for every step. */\n  primaryLabel = input<string | null>(null);\n  /** Overrides the primary footer button icon for every step. */\n  primaryIcon = input<string | null>(null);\n  /** Shows a loading spinner on the primary button and disables it. */\n  primaryLoading = input<boolean>(false);\n  /** Disables the primary footer button (e.g. while the step form is invalid). */\n  primaryDisabled = input<boolean>(false);\n\n  // Outputs\n  back = output<void>();\n  cancel = output<void>();\n  prev = output<void>();\n  next = output<void>();\n  finish = output<void>();\n  stepChange = output<{ step: WizardStep | null; index: number }>();\n\n  readonly stepContents = contentChildren(ShkWizardStepContent);\n\n  currentIndex = computed(() => {\n    const id = this.currentStep();\n    if (id == null) return this.steps().length > 0 ? 0 : -1;\n    return this.steps().findIndex((s) => s.id === id);\n  });\n\n  currentStepObj = computed(() => this.steps()[this.currentIndex()] ?? null);\n  isFirstStep = computed(() => this.currentIndex() === 0);\n  isLastStep = computed(() => this.currentIndex() === this.steps().length - 1);\n\n  primaryActionLabel = computed(() => {\n    if (this.primaryLabel()) return this.primaryLabel()!;\n    const step = this.currentStepObj();\n    if (step?.primaryLabel) return step.primaryLabel;\n    return this.isLastStep() ? this.finishLabel() : this.nextLabel();\n  });\n\n  primaryActionIcon = computed(() => {\n    if (this.primaryIcon()) return this.primaryIcon()!;\n    const step = this.currentStepObj();\n    if (step?.primaryIcon) return step.primaryIcon;\n    return this.isLastStep() ? this.finishIcon() : this.nextIcon();\n  });\n\n  getStepTemplate(id: string | number): TemplateRef<unknown> | undefined {\n    return this.stepContents().find((c) => c.stepId() === id)?.templateRef;\n  }\n\n  goTo(stepId: string | number): void {\n    const idx = this.steps().findIndex((s) => s.id === stepId);\n    if (idx < 0) return;\n    if (this.currentStep() === stepId) return;\n    this.currentStep.set(stepId);\n    this.stepChange.emit({ step: this.steps()[idx], index: idx });\n  }\n\n  onPrev(): void {\n    const idx = this.currentIndex();\n    if (idx <= 0) return;\n    this.prev.emit();\n    this.goTo(this.steps()[idx - 1].id);\n  }\n\n  onNext(): void {\n    const idx = this.currentIndex();\n    const next = this.steps()[idx + 1];\n    if (!next) return;\n    this.next.emit();\n    if (this.advanceOnNext()) {\n      this.goTo(next.id);\n    }\n  }\n\n  onPrimary(): void {\n    if (this.primaryLoading() || this.primaryDisabled()) return;\n    if (this.isLastStep()) {\n      this.finish.emit();\n    } else {\n      this.onNext();\n    }\n  }\n}\n","<div class=\"min-h-full bg-transparent\">\n\n  <!-- ============ Sticky Header + Stepper ============ -->\n  @if (showHeader()) {\n    <div\n      class=\"sticky top-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-b _shk-border dark:[border-color:var(--shk-surface-200)] shadow-sm\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4\">\n        <div class=\"flex items-center gap-4 mb-4\">\n          @if (showBackButton()) {\n            <button\n              type=\"button\"\n              (click)=\"back.emit()\"\n              [attr.aria-label]=\"backTooltip()\"\n              [attr.title]=\"backTooltip()\"\n              class=\"shk-wizard-icon-btn shrink-0\"\n            >\n              <svg [lucideIcon]=\"getIcon('arrow-left')\" class=\"w-4 h-4\"></svg>\n            </button>\n          }\n          <div class=\"flex-1 min-w-0 flex items-center gap-2.5\">\n            @if (headerIcon()) {\n              <span class=\"w-9 h-9 rounded-lg _shk-bg-primary-soft _shk-text-primary flex items-center justify-center shrink-0\">\n                <svg [lucideIcon]=\"getIcon(headerIcon())\" class=\"w-4 h-4\"></svg>\n              </span>\n            }\n            <div class=\"min-w-0\">\n              <h1 class=\"text-xl font-bold _shk-text-surface-800 dark:[color:var(--shk-surface-800)] truncate\">\n                {{ headerTitle() }}\n              </h1>\n              @if (headerSubtitle()) {\n                <p class=\"text-xs _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mt-0.5 truncate\">\n                  {{ headerSubtitle() }}\n                </p>\n              }\n            </div>\n          </div>\n          <ng-content select=\"[shkWizardHeaderActions]\"></ng-content>\n        </div>\n\n        <!-- Stepper -->\n        @if (showStepper() && steps().length > 1) {\n          <div class=\"flex items-center gap-2 w-full max-w-3xl mx-auto\">\n            @for (step of steps(); track step.id; let i = $index, last = $last) {\n              <div class=\"flex items-center gap-3 shrink-0\">\n                <button\n                  type=\"button\"\n                  (click)=\"goTo(step.id)\"\n                  [disabled]=\"!stepperClickable() || currentIndex() < i\"\n                  [attr.aria-label]=\"step.label\"\n                  class=\"shk-wizard-stepper-dot\"\n                  [class._shk-bg-primary]=\"currentIndex() > i || currentIndex() === i\"\n                  [class.text-white]=\"currentIndex() > i || currentIndex() === i\"\n                  [class._shk-bg-surface-200]=\"currentIndex() < i\"\n                  [class._shk-text-surface-500]=\"currentIndex() < i\"\n                  [class.cursor-pointer]=\"stepperClickable() && currentIndex() >= i\"\n                  [class.cursor-default]=\"!stepperClickable() || currentIndex() < i\"\n                >\n                  @if (currentIndex() > i) {\n                    <svg [lucideIcon]=\"getIcon(step.icon || 'check')\" class=\"w-4 h-4\"></svg>\n                  } @else if (step.icon) {\n                    <svg [lucideIcon]=\"getIcon(step.icon)\" class=\"w-4 h-4\"></svg>\n                  } @else {\n                    {{ i + 1 }}\n                  }\n                </button>\n                <span\n                  class=\"text-sm font-semibold transition-colors whitespace-nowrap hidden sm:inline\"\n                  [class._shk-text-surface-800]=\"currentIndex() === i\"\n                  [class._shk-text-surface-500]=\"currentIndex() !== i\"\n                  [class.dark:[color:var(--shk-surface-800)]]=\"currentIndex() === i\"\n                  [class.dark:[color:var(--shk-surface-500)]]=\"currentIndex() !== i\"\n                >\n                  {{ step.label }}\n                </span>\n              </div>\n\n              @if (!last) {\n                <div class=\"flex-1 h-0.5 _shk-bg-surface-200 dark:[background-color:var(--shk-surface-200)] relative overflow-hidden rounded-full\">\n                  <div\n                    class=\"absolute inset-y-0 left-0 _shk-bg-primary transition-all duration-300\"\n                    [class.w-full]=\"currentIndex() > i\"\n                    [class.w-0]=\"currentIndex() <= i\"\n                  ></div>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- ============ Active step content ============ -->\n  <div class=\"w-full px-4 sm:px-6 lg:px-8 py-6 pb-28\">\n    @if (currentIndex() >= 0) {\n      @if (getStepTemplate(steps()[currentIndex()].id); as tpl) {\n        <div class=\"shk-wizard-fade\" [style.view-transition-name]=\"'shk-wizard-step'\">\n          <ng-container\n            *ngTemplateOutlet=\"tpl; context: { step: currentStepObj(), index: currentIndex() }\"\n          ></ng-container>\n        </div>\n      } @else {\n        <p class=\"text-sm _shk-text-surface-400 dark:[color:var(--shk-surface-400)]\">\n          No hay contenido definido para el paso «{{ steps()[currentIndex()].label }}».\n        </p>\n      }\n    }\n  </div>\n\n  <!-- ============ Sticky Footer ============ -->\n  @if (showFooter() && steps().length > 0) {\n    <div\n      class=\"sticky bottom-0 z-20 bg-white dark:[background-color:var(--shk-surface-50)] border-t _shk-border dark:[border-color:var(--shk-surface-200)] shadow-[0_-4px_12px_rgba(0,0,0,0.04)] mt-8\"\n    >\n      <div class=\"w-full px-4 sm:px-6 lg:px-8 py-4 flex items-center justify-end gap-3\">\n        @if (showStepCounter()) {\n          <span class=\"text-sm _shk-text-surface-500 dark:[color:var(--shk-surface-500)] mr-auto\">\n            {{ stepCounterPrefix() }} {{ currentIndex() + 1 }} / {{ steps().length }}\n          </span>\n        }\n\n        @if (isFirstStep()) {\n          @if (showCancel()) {\n            <button type=\"button\" (click)=\"cancel.emit()\" class=\"shk-wizard-btn-secondary\">\n              @if (cancelIcon()) {\n                <svg [lucideIcon]=\"getIcon(cancelIcon())\" class=\"w-4 h-4\"></svg>\n              }\n              {{ cancelLabel() }}\n            </button>\n          }\n        } @else {\n          <button type=\"button\" (click)=\"onPrev()\" class=\"shk-wizard-btn-secondary\">\n            <svg [lucideIcon]=\"getIcon(prevIcon())\" class=\"w-4 h-4\"></svg>\n            {{ prevLabel() }}\n          </button>\n        }\n\n        <button\n          type=\"button\"\n          (click)=\"onPrimary()\"\n          [disabled]=\"primaryDisabled() || primaryLoading()\"\n          class=\"shk-wizard-btn-primary\"\n        >\n          @if (primaryLoading()) {\n            <svg [lucideIcon]=\"getIcon('loader-circle')\" class=\"w-4 h-4 shk-wizard-spin\"></svg>\n          } @else {\n            @if (primaryActionIcon()) {\n              <svg [lucideIcon]=\"getIcon(primaryActionIcon())\" class=\"w-4 h-4\"></svg>\n            }\n          }\n          {{ primaryActionLabel() }}\n        </button>\n      </div>\n    </div>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":["getIconFromCentral"],"mappings":"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"}