shirkasoft-ui-components 1.2.0 → 1.3.1

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

@@ -0,0 +1,269 @@
+import * as i0 from '@angular/core';
+import { model, input, output, viewChild, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** SVG radial knob with drag and keyboard support. Implements ControlValueAccessor. */
+class KnobComponent {
+    constructor() {
+        /** Current value. Two-way bindable with [(value)]. */
+        this.value = model(0, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        /** Minimum value. */
+        this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        /** Maximum value. */
+        this.max = input(100, ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        /** Increment used by arrows and pointer drag rounding. */
+        this.step = input(1, ...(ngDevMode ? [{ debugName: "step" }] : /* istanbul ignore next */ []));
+        /** Diameter of the knob in px. */
+        this.size = input(100, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Thickness of the arc stroke. */
+        this.strokeWidth = input(14, ...(ngDevMode ? [{ debugName: "strokeWidth" }] : /* istanbul ignore next */ []));
+        /** Color of the filled arc. */
+        this.valueColor = input('var(--shk-primary-600)', ...(ngDevMode ? [{ debugName: "valueColor" }] : /* istanbul ignore next */ []));
+        /** Color of the track arc. */
+        this.rangeColor = input('var(--shk-surface-200)', ...(ngDevMode ? [{ debugName: "rangeColor" }] : /* istanbul ignore next */ []));
+        /** Whether the current value is shown in the center. */
+        this.showValue = input(true, ...(ngDevMode ? [{ debugName: "showValue" }] : /* istanbul ignore next */ []));
+        /** Disables user interaction. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Blocks editing but keeps the control styled as enabled. */
+        this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+        /** Accessible label. */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Emitted when the knob value changes. */
+        this.change = output();
+        /** Emitted when the user releases the pointer. */
+        this.end = output();
+        this.knobSvg = viewChild('knobSvg', ...(ngDevMode ? [{ debugName: "knobSvg" }] : /* istanbul ignore next */ []));
+        this.onChange = () => { };
+        this.onTouched = () => { };
+        this.dragging = false;
+        this.formDisabled = signal(false, ...(ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []));
+        /** Effective disabled state combining the `disabled` input and the form binding. */
+        this.effectiveDisabled = computed(() => this.disabled() || this.formDisabled(), ...(ngDevMode ? [{ debugName: "effectiveDisabled" }] : /* istanbul ignore next */ []));
+        this.r = computed(() => (this.size() - this.strokeWidth()) / 2, ...(ngDevMode ? [{ debugName: "r" }] : /* istanbul ignore next */ []));
+        this.center = computed(() => this.size() / 2, ...(ngDevMode ? [{ debugName: "center" }] : /* istanbul ignore next */ []));
+        this.fraction = computed(() => {
+            const range = this.max() - this.min();
+            if (range <= 0)
+                return 0;
+            return Math.max(0, Math.min(1, (this.value() - this.min()) / range));
+        }, ...(ngDevMode ? [{ debugName: "fraction" }] : /* istanbul ignore next */ []));
+        this.rangeArc = computed(() => this.getArcPath(135, 405), ...(ngDevMode ? [{ debugName: "rangeArc" }] : /* istanbul ignore next */ []));
+        this.valueArc = computed(() => this.getArcPath(135, 135 + 270 * this.fraction()), ...(ngDevMode ? [{ debugName: "valueArc" }] : /* istanbul ignore next */ []));
+    }
+    writeValue(value) {
+        this.value.set(this.clamp(Number(value) || this.min()));
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.formDisabled.set(isDisabled);
+    }
+    onPointerDown(event) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.dragging = true;
+        this.knobSvg()?.nativeElement.setPointerCapture(event.pointerId);
+        this.applyEvent(event);
+    }
+    onPointerMove(event) {
+        if (!this.dragging)
+            return;
+        this.applyEvent(event);
+    }
+    onPointerUp(event) {
+        if (!this.dragging)
+            return;
+        this.dragging = false;
+        try {
+            this.knobSvg()?.nativeElement.releasePointerCapture(event.pointerId);
+        }
+        catch {
+            /* noop */
+        }
+        this.change.emit(this.value());
+        this.end.emit(this.value());
+    }
+    updateByKey(step) {
+        if (this.effectiveDisabled() || this.readonly())
+            return;
+        this.setValue(this.value() + step);
+        this.onTouched();
+    }
+    applyEvent(event) {
+        const svg = this.knobSvg()?.nativeElement;
+        if (!svg)
+            return;
+        const rect = svg.getBoundingClientRect();
+        const cx = rect.left + rect.width / 2;
+        const cy = rect.top + rect.height / 2;
+        const angle = Math.atan2(event.clientY - cy, event.clientX - cx);
+        const deg = ((angle * 180) / Math.PI + 360) % 360;
+        let t = deg - 135;
+        if (t < 0)
+            t += 360;
+        let fraction;
+        if (t > 270) {
+            fraction = 360 - t < t - 270 ? 0 : 1;
+        }
+        else {
+            fraction = t / 270;
+        }
+        const raw = this.min() + fraction * (this.max() - this.min());
+        this.setValue(raw);
+        this.onTouched();
+    }
+    setValue(raw) {
+        const rounded = Math.round(raw / this.step()) * this.step();
+        const clamped = this.clamp(rounded);
+        this.value.set(clamped);
+        this.onChange(clamped);
+    }
+    clamp(value) {
+        return Math.max(this.min(), Math.min(this.max(), value));
+    }
+    getArcPath(startDeg, endDeg) {
+        const cx = this.center();
+        const cy = this.center();
+        const r = this.r();
+        const start = this.anglePoint(cx, cy, r, startDeg);
+        const end = this.anglePoint(cx, cy, r, endDeg);
+        const largeArc = endDeg - startDeg > 180 ? '1' : '0';
+        return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 ${largeArc} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;
+    }
+    anglePoint(cx, cy, r, angleDeg) {
+        const rad = (Math.PI * angleDeg) / 180;
+        return {
+            x: cx + r * Math.cos(rad),
+            y: cy + r * Math.sin(rad),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KnobComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: KnobComponent, isStandalone: true, selector: "shk-knob", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, step: { classPropertyName: "step", publicName: "step", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, strokeWidth: { classPropertyName: "strokeWidth", publicName: "strokeWidth", isSignal: true, isRequired: false, transformFunction: null }, valueColor: { classPropertyName: "valueColor", publicName: "valueColor", isSignal: true, isRequired: false, transformFunction: null }, rangeColor: { classPropertyName: "rangeColor", publicName: "rangeColor", isSignal: true, isRequired: false, transformFunction: null }, showValue: { classPropertyName: "showValue", publicName: "showValue", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", change: "change", end: "end" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => KnobComponent),
+                multi: true,
+            },
+        ], viewQueries: [{ propertyName: "knobSvg", first: true, predicate: ["knobSvg"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div
+      class="shk-knob"
+      [class.shk-knob-disabled]="effectiveDisabled()"
+      [style]="{ width: size() + 'px', height: size() + 'px' }"
+    >
+      <svg
+        #knobSvg
+        class="shk-knob-svg"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-label]="ariaLabel() || 'Valor'"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [class.shk-knob-svg-focusable]="!effectiveDisabled()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (keydown.arrowup)="updateByKey(step())"
+        (keydown.arrowright)="updateByKey(step())"
+        (keydown.arrowdown)="updateByKey(-step())"
+        (keydown.arrowleft)="updateByKey(-step())"
+      >
+        <path
+          [attr.d]="rangeArc()"
+          fill="none"
+          [style.stroke]="rangeColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+        <path
+          [attr.d]="valueArc()"
+          fill="none"
+          [style.stroke]="valueColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+      </svg>
+      @if (showValue()) {
+        <div class="shk-knob-label">{{ value() }}</div>
+      }
+    </div>
+  `, isInline: true, styles: [".shk-knob{position:relative;display:inline-block}.shk-knob-svg{display:block;touch-action:none}.shk-knob-svg-focusable{cursor:pointer;outline:none}.shk-knob-svg-focusable:focus-visible{border-radius:9999px;outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-knob-disabled{opacity:.55}.shk-knob-disabled .shk-knob-svg{cursor:not-allowed}.shk-knob-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.125rem;font-weight:600;color:var(--shk-surface-800);pointer-events:none;-webkit-user-select:none;user-select:none}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: KnobComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-knob', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-knob"
+      [class.shk-knob-disabled]="effectiveDisabled()"
+      [style]="{ width: size() + 'px', height: size() + 'px' }"
+    >
+      <svg
+        #knobSvg
+        class="shk-knob-svg"
+        [attr.width]="size()"
+        [attr.height]="size()"
+        [attr.viewBox]="'0 0 ' + size() + ' ' + size()"
+        role="slider"
+        tabindex="0"
+        [attr.aria-label]="ariaLabel() || 'Valor'"
+        [attr.aria-valuemin]="min()"
+        [attr.aria-valuemax]="max()"
+        [attr.aria-valuenow]="value()"
+        [class.shk-knob-svg-focusable]="!effectiveDisabled()"
+        (pointerdown)="onPointerDown($event)"
+        (pointermove)="onPointerMove($event)"
+        (pointerup)="onPointerUp($event)"
+        (pointercancel)="onPointerUp($event)"
+        (keydown.arrowup)="updateByKey(step())"
+        (keydown.arrowright)="updateByKey(step())"
+        (keydown.arrowdown)="updateByKey(-step())"
+        (keydown.arrowleft)="updateByKey(-step())"
+      >
+        <path
+          [attr.d]="rangeArc()"
+          fill="none"
+          [style.stroke]="rangeColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+        <path
+          [attr.d]="valueArc()"
+          fill="none"
+          [style.stroke]="valueColor()"
+          [attr.stroke-width]="strokeWidth()"
+          stroke-linecap="round"
+        ></path>
+      </svg>
+      @if (showValue()) {
+        <div class="shk-knob-label">{{ value() }}</div>
+      }
+    </div>
+  `, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => KnobComponent),
+                            multi: true,
+                        },
+                    ], styles: [".shk-knob{position:relative;display:inline-block}.shk-knob-svg{display:block;touch-action:none}.shk-knob-svg-focusable{cursor:pointer;outline:none}.shk-knob-svg-focusable:focus-visible{border-radius:9999px;outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-knob-disabled{opacity:.55}.shk-knob-disabled .shk-knob-svg{cursor:not-allowed}.shk-knob-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.125rem;font-weight:600;color:var(--shk-surface-800);pointer-events:none;-webkit-user-select:none;user-select:none}\n"] }]
+        }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], step: [{ type: i0.Input, args: [{ isSignal: true, alias: "step", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], strokeWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "strokeWidth", required: false }] }], valueColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueColor", required: false }] }], rangeColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "rangeColor", required: false }] }], showValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "showValue", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], change: [{ type: i0.Output, args: ["change"] }], end: [{ type: i0.Output, args: ["end"] }], knobSvg: [{ type: i0.ViewChild, args: ['knobSvg', { isSignal: true }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { KnobComponent };
+//# sourceMappingURL=shirkasoft-ui-components-knob.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-knob.mjs","sources":["../../../projects/ui-components/knob/knob.component.ts","../../../projects/ui-components/knob/shirkasoft-ui-components-knob.ts"],"sourcesContent":["import {\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  output,\n  signal,\n  viewChild,\n  ElementRef,\n  ChangeDetectionStrategy,\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';\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/** SVG radial knob with drag and keyboard support. Implements ControlValueAccessor. */\n@Component({\n  selector: 'shk-knob',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      class=\"shk-knob\"\n      [class.shk-knob-disabled]=\"effectiveDisabled()\"\n      [style]=\"{ width: size() + 'px', height: size() + 'px' }\"\n    >\n      <svg\n        #knobSvg\n        class=\"shk-knob-svg\"\n        [attr.width]=\"size()\"\n        [attr.height]=\"size()\"\n        [attr.viewBox]=\"'0 0 ' + size() + ' ' + size()\"\n        role=\"slider\"\n        tabindex=\"0\"\n        [attr.aria-label]=\"ariaLabel() || 'Valor'\"\n        [attr.aria-valuemin]=\"min()\"\n        [attr.aria-valuemax]=\"max()\"\n        [attr.aria-valuenow]=\"value()\"\n        [class.shk-knob-svg-focusable]=\"!effectiveDisabled()\"\n        (pointerdown)=\"onPointerDown($event)\"\n        (pointermove)=\"onPointerMove($event)\"\n        (pointerup)=\"onPointerUp($event)\"\n        (pointercancel)=\"onPointerUp($event)\"\n        (keydown.arrowup)=\"updateByKey(step())\"\n        (keydown.arrowright)=\"updateByKey(step())\"\n        (keydown.arrowdown)=\"updateByKey(-step())\"\n        (keydown.arrowleft)=\"updateByKey(-step())\"\n      >\n        <path\n          [attr.d]=\"rangeArc()\"\n          fill=\"none\"\n          [style.stroke]=\"rangeColor()\"\n          [attr.stroke-width]=\"strokeWidth()\"\n          stroke-linecap=\"round\"\n        ></path>\n        <path\n          [attr.d]=\"valueArc()\"\n          fill=\"none\"\n          [style.stroke]=\"valueColor()\"\n          [attr.stroke-width]=\"strokeWidth()\"\n          stroke-linecap=\"round\"\n        ></path>\n      </svg>\n      @if (showValue()) {\n        <div class=\"shk-knob-label\">{{ value() }}</div>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      .shk-knob {\n        position: relative;\n        display: inline-block;\n      }\n      .shk-knob-svg {\n        display: block;\n        touch-action: none;\n      }\n      .shk-knob-svg-focusable {\n        cursor: pointer;\n        outline: none;\n      }\n      .shk-knob-svg-focusable:focus-visible {\n        border-radius: 9999px;\n        outline: 2px solid var(--shk-primary-400);\n        outline-offset: 2px;\n      }\n      .shk-knob-disabled {\n        opacity: 0.55;\n      }\n      .shk-knob-disabled .shk-knob-svg {\n        cursor: not-allowed;\n      }\n      .shk-knob-label {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n        font-size: 1.125rem;\n        font-weight: 600;\n        color: var(--shk-surface-800);\n        pointer-events: none;\n        user-select: none;\n      }\n    `,\n  ],\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => KnobComponent),\n      multi: true,\n    },\n  ],\n})\nexport class KnobComponent implements ControlValueAccessor {\n  /** Current value. Two-way bindable with [(value)]. */\n  value = model<number>(0);\n  /** Minimum value. */\n  min = input<number>(0);\n  /** Maximum value. */\n  max = input<number>(100);\n  /** Increment used by arrows and pointer drag rounding. */\n  step = input<number>(1);\n  /** Diameter of the knob in px. */\n  size = input<number>(100);\n  /** Thickness of the arc stroke. */\n  strokeWidth = input<number>(14);\n  /** Color of the filled arc. */\n  valueColor = input<string>('var(--shk-primary-600)');\n  /** Color of the track arc. */\n  rangeColor = input<string>('var(--shk-surface-200)');\n  /** Whether the current value is shown in the center. */\n  showValue = input<boolean>(true);\n  /** Disables user interaction. */\n  disabled = input<boolean>(false);\n  /** Blocks editing but keeps the control styled as enabled. */\n  readonly = input<boolean>(false);\n  /** Accessible label. */\n  ariaLabel = input<string>('');\n\n  /** Emitted when the knob value changes. */\n  change = output<number>();\n  /** Emitted when the user releases the pointer. */\n  end = output<number>();\n\n  protected knobSvg = viewChild<ElementRef<SVGElement>>('knobSvg');\n\n  private onChange: (value: number) => void = () => {};\n  private onTouched: () => void = () => {};\n  private dragging = false;\n  private formDisabled = signal(false);\n\n  /** Effective disabled state combining the `disabled` input and the form binding. */\n  protected effectiveDisabled = computed(() => this.disabled() || this.formDisabled());\n\n  protected r = computed(() => (this.size() - this.strokeWidth()) / 2);\n  protected center = computed(() => this.size() / 2);\n  protected fraction = computed(() => {\n    const range = this.max() - this.min();\n    if (range <= 0) return 0;\n    return Math.max(0, Math.min(1, (this.value() - this.min()) / range));\n  });\n  protected rangeArc = computed(() => this.getArcPath(135, 405));\n  protected valueArc = computed(() => this.getArcPath(135, 135 + 270 * this.fraction()));\n\n  writeValue(value: any): void {\n    this.value.set(this.clamp(Number(value) || this.min()));\n  }\n\n  registerOnChange(fn: any): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: any): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(isDisabled: boolean): void {\n    this.formDisabled.set(isDisabled);\n  }\n\n  onPointerDown(event: PointerEvent): void {\n    if (this.effectiveDisabled() || this.readonly()) return;\n    this.dragging = true;\n    this.knobSvg()?.nativeElement.setPointerCapture(event.pointerId);\n    this.applyEvent(event);\n  }\n\n  onPointerMove(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.applyEvent(event);\n  }\n\n  onPointerUp(event: PointerEvent): void {\n    if (!this.dragging) return;\n    this.dragging = false;\n    try {\n      this.knobSvg()?.nativeElement.releasePointerCapture(event.pointerId);\n    } catch {\n      /* noop */\n    }\n    this.change.emit(this.value());\n    this.end.emit(this.value());\n  }\n\n  updateByKey(step: number): void {\n    if (this.effectiveDisabled() || this.readonly()) return;\n    this.setValue(this.value() + step);\n    this.onTouched();\n  }\n\n  private applyEvent(event: PointerEvent): void {\n    const svg = this.knobSvg()?.nativeElement;\n    if (!svg) return;\n    const rect = svg.getBoundingClientRect();\n    const cx = rect.left + rect.width / 2;\n    const cy = rect.top + rect.height / 2;\n    const angle = Math.atan2(event.clientY - cy, event.clientX - cx);\n    const deg = ((angle * 180) / Math.PI + 360) % 360;\n    let t = deg - 135;\n    if (t < 0) t += 360;\n    let fraction: number;\n    if (t > 270) {\n      fraction = 360 - t < t - 270 ? 0 : 1;\n    } else {\n      fraction = t / 270;\n    }\n    const raw = this.min() + fraction * (this.max() - this.min());\n    this.setValue(raw);\n    this.onTouched();\n  }\n\n  private setValue(raw: number): void {\n    const rounded = Math.round(raw / this.step()) * this.step();\n    const clamped = this.clamp(rounded);\n    this.value.set(clamped);\n    this.onChange(clamped);\n  }\n\n  private clamp(value: number): number {\n    return Math.max(this.min(), Math.min(this.max(), value));\n  }\n\n  private getArcPath(startDeg: number, endDeg: number): string {\n    const cx = this.center();\n    const cy = this.center();\n    const r = this.r();\n    const start = this.anglePoint(cx, cy, r, startDeg);\n    const end = this.anglePoint(cx, cy, r, endDeg);\n    const largeArc = endDeg - startDeg > 180 ? '1' : '0';\n    return `M ${start.x.toFixed(2)} ${start.y.toFixed(2)} A ${r.toFixed(2)} ${r.toFixed(2)} 0 ${largeArc} 1 ${end.x.toFixed(2)} ${end.y.toFixed(2)}`;\n  }\n\n  private anglePoint(\n    cx: number,\n    cy: number,\n    r: number,\n    angleDeg: number,\n  ): { x: number; y: number } {\n    const rad = (Math.PI * angleDeg) / 180;\n    return {\n      x: cx + r * Math.cos(rad),\n      y: cy + r * Math.sin(rad),\n    };\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AAcA;;;;AAIG;AAEH;MAmGa,aAAa,CAAA;AAlG1B,IAAA,WAAA,GAAA;;AAoGE,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,CAAC,4EAAC;;AAExB,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAS,CAAC,0EAAC;;AAEtB,QAAA,IAAA,CAAA,GAAG,GAAG,KAAK,CAAS,GAAG,0EAAC;;AAExB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,CAAC,2EAAC;;AAEvB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAS,GAAG,2EAAC;;AAEzB,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE,kFAAC;;AAE/B,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,wBAAwB,iFAAC;;AAEpD,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,wBAAwB,iFAAC;;AAEpD,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAU,IAAI,gFAAC;;AAEhC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAEhC,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAEhC,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;QAG7B,IAAA,CAAA,MAAM,GAAG,MAAM,EAAU;;QAEzB,IAAA,CAAA,GAAG,GAAG,MAAM,EAAU;AAEZ,QAAA,IAAA,CAAA,OAAO,GAAG,SAAS,CAAyB,SAAS,8EAAC;AAExD,QAAA,IAAA,CAAA,QAAQ,GAA4B,MAAK,EAAE,CAAC;AAC5C,QAAA,IAAA,CAAA,SAAS,GAAe,MAAK,EAAE,CAAC;QAChC,IAAA,CAAA,QAAQ,GAAG,KAAK;AAChB,QAAA,IAAA,CAAA,YAAY,GAAG,MAAM,CAAC,KAAK,mFAAC;;AAG1B,QAAA,IAAA,CAAA,iBAAiB,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,QAAQ,EAAE,IAAI,IAAI,CAAC,YAAY,EAAE,wFAAC;QAE1E,IAAA,CAAA,CAAC,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,WAAW,EAAE,IAAI,CAAC,wEAAC;AAC1D,QAAA,IAAA,CAAA,MAAM,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,6EAAC;AACxC,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;YACjC,MAAM,KAAK,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE;YACrC,IAAI,KAAK,IAAI,CAAC;AAAE,gBAAA,OAAO,CAAC;YACxB,OAAO,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,IAAI,KAAK,CAAC,CAAC;AACtE,QAAA,CAAC,+EAAC;AACQ,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,CAAC,+EAAC;QACpD,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,GAAG,EAAE,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,UAAA,EAAA,CAAA,8BAAA,EAAA,CAAA,CAAC;AAsGvF,IAAA;AApGC,IAAA,UAAU,CAAC,KAAU,EAAA;QACnB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,GAAG,EAAE,CAAC,CAAC;IACzD;AAEA,IAAA,gBAAgB,CAAC,EAAO,EAAA;AACtB,QAAA,IAAI,CAAC,QAAQ,GAAG,EAAE;IACpB;AAEA,IAAA,iBAAiB,CAAC,EAAO,EAAA;AACvB,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;IACrB;AAEA,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAClC,QAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC;IACnC;AAEA,IAAA,aAAa,CAAC,KAAmB,EAAA;QAC/B,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;AACjD,QAAA,IAAI,CAAC,QAAQ,GAAG,IAAI;AACpB,QAAA,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AAChE,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,aAAa,CAAC,KAAmB,EAAA;QAC/B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACxB;AAEA,IAAA,WAAW,CAAC,KAAmB,EAAA;QAC7B,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE;AACpB,QAAA,IAAI,CAAC,QAAQ,GAAG,KAAK;AACrB,QAAA,IAAI;AACF,YAAA,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa,CAAC,qBAAqB,CAAC,KAAK,CAAC,SAAS,CAAC;QACtE;AAAE,QAAA,MAAM;;QAER;QACA,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAC9B,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;IAC7B;AAEA,IAAA,WAAW,CAAC,IAAY,EAAA;QACtB,IAAI,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,QAAQ,EAAE;YAAE;QACjD,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,EAAE,GAAG,IAAI,CAAC;QAClC,IAAI,CAAC,SAAS,EAAE;IAClB;AAEQ,IAAA,UAAU,CAAC,KAAmB,EAAA;QACpC,MAAM,GAAG,GAAG,IAAI,CAAC,OAAO,EAAE,EAAE,aAAa;AACzC,QAAA,IAAI,CAAC,GAAG;YAAE;AACV,QAAA,MAAM,IAAI,GAAG,GAAG,CAAC,qBAAqB,EAAE;QACxC,MAAM,EAAE,GAAG,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,GAAG,CAAC;QACrC,MAAM,EAAE,GAAG,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,MAAM,GAAG,CAAC;AACrC,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,GAAG,EAAE,EAAE,KAAK,CAAC,OAAO,GAAG,EAAE,CAAC;AAChE,QAAA,MAAM,GAAG,GAAG,CAAC,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG;AACjD,QAAA,IAAI,CAAC,GAAG,GAAG,GAAG,GAAG;QACjB,IAAI,CAAC,GAAG,CAAC;YAAE,CAAC,IAAI,GAAG;AACnB,QAAA,IAAI,QAAgB;AACpB,QAAA,IAAI,CAAC,GAAG,GAAG,EAAE;AACX,YAAA,QAAQ,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC;QACtC;aAAO;AACL,YAAA,QAAQ,GAAG,CAAC,GAAG,GAAG;QACpB;QACA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE,GAAG,QAAQ,IAAI,IAAI,CAAC,GAAG,EAAE,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC;AAC7D,QAAA,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC;QAClB,IAAI,CAAC,SAAS,EAAE;IAClB;AAEQ,IAAA,QAAQ,CAAC,GAAW,EAAA;AAC1B,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QAC3D,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC;AACnC,QAAA,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC;AACvB,QAAA,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC;IACxB;AAEQ,IAAA,KAAK,CAAC,KAAa,EAAA;QACzB,OAAO,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,EAAE,EAAE,KAAK,CAAC,CAAC;IAC1D;IAEQ,UAAU,CAAC,QAAgB,EAAE,MAAc,EAAA;AACjD,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACxB,QAAA,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,EAAE;AACxB,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,CAAC,EAAE;AAClB,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,CAAC;AAClD,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,CAAC;AAC9C,QAAA,MAAM,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG;QACpD,OAAO,CAAA,EAAA,EAAK,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,GAAA,EAAM,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,GAAA,EAAM,QAAQ,CAAA,GAAA,EAAM,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAA,EAAI,GAAG,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CAAA,CAAE;IAClJ;AAEQ,IAAA,UAAU,CAChB,EAAU,EACV,EAAU,EACV,CAAS,EACT,QAAgB,EAAA;QAEhB,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,QAAQ,IAAI,GAAG;QACtC,OAAO;YACL,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;YACzB,CAAC,EAAE,EAAE,GAAG,CAAC,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC;SAC1B;IACH;+GAtJW,aAAa,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;AAAb,IAAA,SAAA,IAAA,CAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,SAAA,EAAA,IAAA,EAAA,aAAa,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,UAAA,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,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,GAAA,EAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,UAAA,EAAA,KAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,iBAAA,EAAA,YAAA,EAAA,UAAA,EAAA,YAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,QAAA,EAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,UAAA,EAAA,UAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,OAAA,EAAA,EAAA,KAAA,EAAA,aAAA,EAAA,MAAA,EAAA,QAAA,EAAA,GAAA,EAAA,KAAA,EAAA,EAAA,SAAA,EARb;AACT,YAAA;AACE,gBAAA,OAAO,EAAE,iBAAiB;AAC1B,gBAAA,WAAW,EAAE,UAAU,CAAC,MAAM,aAAa,CAAC;AAC5C,gBAAA,KAAK,EAAE,IAAI;AACZ,aAAA;SACF,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,SAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,SAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EA5FS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,ijBAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FA+CU,aAAa,EAAA,UAAA,EAAA,CAAA;kBAlGzB,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,UAAU,cACR,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CT,EAAA,SAAA,EAuCU;AACT,wBAAA;AACE,4BAAA,OAAO,EAAE,iBAAiB;AAC1B,4BAAA,WAAW,EAAE,UAAU,CAAC,mBAAmB,CAAC;AAC5C,4BAAA,KAAK,EAAE,IAAI;AACZ,yBAAA;AACF,qBAAA,EAAA,MAAA,EAAA,CAAA,ijBAAA,CAAA,EAAA;qzCAiCqD,SAAS,EAAA,EAAA,QAAA,EAAA,IAAA,EAAA,CAAA,EAAA,CAAA,EAAA,EAAA,CAAA;;ACtJjE;;AAEG;;;;"}

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

@@ -0,0 +1,255 @@
+import * as i0 from '@angular/core';
+import { input, ChangeDetectionStrategy, Component, computed } from '@angular/core';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Circular indeterminate spinner. */
+class LoadingSpinnerComponent {
+    constructor() {
+        /** Diameter of the spinner. */
+        this.size = input('2rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Border thickness in px. */
+        this.thickness = input(3, ...(ngDevMode ? [{ debugName: "thickness" }] : /* istanbul ignore next */ []));
+        /** Color of the moving arc. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Optional text shown under the spinner. */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingSpinnerComponent, isStandalone: true, selector: "shk-loading-spinner", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, thickness: { classPropertyName: "thickness", publicName: "thickness", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-spinner"
+      [style]="{
+        width: size(),
+        height: size(),
+      }"
+      role="status"
+      aria-label="Cargando"
+    >
+      <div
+        class="shk-loading-spinner-circle"
+        [style]="{
+          borderWidth: thickness(),
+          borderTopColor: color() || undefined,
+        }"
+      ></div>
+    </div>
+    @if (label()) {
+      <span class="shk-loading-spinner-label">{{ label() }}</span>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.shk-loading-spinner{display:inline-block}.shk-loading-spinner-circle{width:100%;height:100%;border-radius:9999px;border-style:solid;border-color:color-mix(in srgb,var(--shk-primary-600) 20%,transparent);border-top-color:var(--shk-primary-600);animation:shk-loading-spin .8s linear infinite}.shk-loading-spinner-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-spin{to{transform:rotate(360deg)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-spinner', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-loading-spinner"
+      [style]="{
+        width: size(),
+        height: size(),
+      }"
+      role="status"
+      aria-label="Cargando"
+    >
+      <div
+        class="shk-loading-spinner-circle"
+        [style]="{
+          borderWidth: thickness(),
+          borderTopColor: color() || undefined,
+        }"
+      ></div>
+    </div>
+    @if (label()) {
+      <span class="shk-loading-spinner-label">{{ label() }}</span>
+    }
+  `, styles: [":host{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem}.shk-loading-spinner{display:inline-block}.shk-loading-spinner-circle{width:100%;height:100%;border-radius:9999px;border-style:solid;border-color:color-mix(in srgb,var(--shk-primary-600) 20%,transparent);border-top-color:var(--shk-primary-600);animation:shk-loading-spin .8s linear infinite}.shk-loading-spinner-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], thickness: [{ type: i0.Input, args: [{ isSignal: true, alias: "thickness", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Progress bar with an indeterminate sweep or a determinate percentage. */
+class LoadingBarComponent {
+    constructor() {
+        /** Height of the bar. */
+        this.height = input('0.25rem', ...(ngDevMode ? [{ debugName: "height" }] : /* istanbul ignore next */ []));
+        /** When true the bar animates without a known percentage. */
+        this.indeterminate = input(true, ...(ngDevMode ? [{ debugName: "indeterminate" }] : /* istanbul ignore next */ []));
+        /** Current progress 0-100 when `indeterminate` is false. */
+        this.progress = input(0, ...(ngDevMode ? [{ debugName: "progress" }] : /* istanbul ignore next */ []));
+        /** Fill color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Renders fully rounded ends. */
+        this.rounded = input(true, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /** Fill width/style for the determinate mode, empty for indeterminate. */
+        this.fillStyle = computed(() => {
+            if (this.indeterminate())
+                return {};
+            return { width: `${Math.max(0, Math.min(100, this.progress()))}%` };
+        }, ...(ngDevMode ? [{ debugName: "fillStyle" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.18", type: LoadingBarComponent, isStandalone: true, selector: "shk-loading-bar", inputs: { height: { classPropertyName: "height", publicName: "height", isSignal: true, isRequired: false, transformFunction: null }, indeterminate: { classPropertyName: "indeterminate", publicName: "indeterminate", isSignal: true, isRequired: false, transformFunction: null }, progress: { classPropertyName: "progress", publicName: "progress", 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 } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-bar"
+      [class.shk-loading-bar-indeterminate]="indeterminate()"
+      [style]="{ height: height(), borderRadius: rounded() ? '9999px' : undefined }"
+      role="progressbar"
+      [attr.aria-valuenow]="indeterminate() ? undefined : progress()"
+      aria-label="Progreso"
+    >
+      <div
+        class="shk-loading-bar-fill"
+        [style]="fillStyle()"
+        [style.background-color]="color() || undefined"
+        [style.border-radius]="rounded() ? '9999px' : undefined"
+      ></div>
+    </div>
+  `, isInline: true, styles: [".shk-loading-bar{width:100%;position:relative;overflow:hidden;background-color:var(--shk-surface-200)}.shk-loading-bar-fill{height:100%;background-color:var(--shk-primary-600);transition:width .3s ease-in-out}.shk-loading-bar-indeterminate .shk-loading-bar-fill{width:40%;animation:shk-loading-bar-sweep 1.2s ease-in-out infinite}@keyframes shk-loading-bar-sweep{0%{transform:translate(-100%)}to{transform:translate(350%)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-bar', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <div
+      class="shk-loading-bar"
+      [class.shk-loading-bar-indeterminate]="indeterminate()"
+      [style]="{ height: height(), borderRadius: rounded() ? '9999px' : undefined }"
+      role="progressbar"
+      [attr.aria-valuenow]="indeterminate() ? undefined : progress()"
+      aria-label="Progreso"
+    >
+      <div
+        class="shk-loading-bar-fill"
+        [style]="fillStyle()"
+        [style.background-color]="color() || undefined"
+        [style.border-radius]="rounded() ? '9999px' : undefined"
+      ></div>
+    </div>
+  `, styles: [".shk-loading-bar{width:100%;position:relative;overflow:hidden;background-color:var(--shk-surface-200)}.shk-loading-bar-fill{height:100%;background-color:var(--shk-primary-600);transition:width .3s ease-in-out}.shk-loading-bar-indeterminate .shk-loading-bar-fill{width:40%;animation:shk-loading-bar-sweep 1.2s ease-in-out infinite}@keyframes shk-loading-bar-sweep{0%{transform:translate(-100%)}to{transform:translate(350%)}}\n"] }]
+        }], propDecorators: { height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], indeterminate: [{ type: i0.Input, args: [{ isSignal: true, alias: "indeterminate", required: false }] }], progress: [{ type: i0.Input, args: [{ isSignal: true, alias: "progress", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Wraps content and shows a centered spinner over it while `visible` is true. */
+class LoadingOverlayComponent {
+    constructor() {
+        /** Controls whether the spinner layer is shown. */
+        this.visible = input(false, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        /** Optional text under the spinner. */
+        this.message = input('', ...(ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []));
+        /** Diameter of the spinner. */
+        this.spinnerSize = input('2.5rem', ...(ngDevMode ? [{ debugName: "spinnerSize" }] : /* istanbul ignore next */ []));
+        /** Spinner color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Backdrop behind the spinner. */
+        this.backdrop = input('transparent', ...(ngDevMode ? [{ debugName: "backdrop" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingOverlayComponent, isStandalone: true, selector: "shk-loading-overlay", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, message: { classPropertyName: "message", publicName: "message", isSignal: true, isRequired: false, transformFunction: null }, spinnerSize: { classPropertyName: "spinnerSize", publicName: "spinnerSize", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, backdrop: { classPropertyName: "backdrop", publicName: "backdrop", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <div
+      class="shk-loading-overlay"
+      [class.shk-loading-overlay-light]="backdrop() === 'light'"
+      [class.shk-loading-overlay-dark]="backdrop() === 'dark'"
+    >
+      <ng-content></ng-content>
+      @if (visible()) {
+        <div class="shk-loading-overlay-layer">
+          <shk-loading-spinner [size]="spinnerSize()" [color]="color()" [label]="message()" />
+        </div>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}.shk-loading-overlay{position:relative;min-height:1.5rem}.shk-loading-overlay-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}.shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#ffffffa6}.dark .shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#0000008c}.shk-loading-overlay-dark .shk-loading-overlay-layer{background-color:#0006}\n"], dependencies: [{ kind: "component", type: LoadingSpinnerComponent, selector: "shk-loading-spinner", inputs: ["size", "thickness", "color", "label"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingOverlayComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-overlay', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LoadingSpinnerComponent], template: `
+    <div
+      class="shk-loading-overlay"
+      [class.shk-loading-overlay-light]="backdrop() === 'light'"
+      [class.shk-loading-overlay-dark]="backdrop() === 'dark'"
+    >
+      <ng-content></ng-content>
+      @if (visible()) {
+        <div class="shk-loading-overlay-layer">
+          <shk-loading-spinner [size]="spinnerSize()" [color]="color()" [label]="message()" />
+        </div>
+      }
+    </div>
+  `, styles: [":host{display:block}.shk-loading-overlay{position:relative;min-height:1.5rem}.shk-loading-overlay-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:10}.shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#ffffffa6}.dark .shk-loading-overlay-light .shk-loading-overlay-layer{background-color:#0000008c}.shk-loading-overlay-dark .shk-loading-overlay-layer{background-color:#0006}\n"] }]
+        }], propDecorators: { visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], message: [{ type: i0.Input, args: [{ isSignal: true, alias: "message", required: false }] }], spinnerSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "spinnerSize", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }] } });
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Bouncing dots loading indicator. */
+class LoadingDotsComponent {
+    constructor() {
+        /** Diameter of each dot. */
+        this.size = input('0.5rem', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Dot color. Defaults to the primary token. */
+        this.color = input('', ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
+        /** Number of dots. */
+        this.count = input(3, ...(ngDevMode ? [{ debugName: "count" }] : /* istanbul ignore next */ []));
+        /** Optional text shown next to the dots. */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Array of dot indices to render based on the `count` input. */
+        this.dots = computed(() => Array.from({ length: Math.max(1, this.count()) }), ...(ngDevMode ? [{ debugName: "dots" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingDotsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: LoadingDotsComponent, isStandalone: true, selector: "shk-loading-dots", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <span class="shk-loading-dots" role="status" aria-label="Cargando">
+      @for (dot of dots(); track $index) {
+        <span
+          class="shk-loading-dot"
+          [style]="{
+            width: size(),
+            height: size(),
+            backgroundColor: color() || undefined,
+            animationDelay: $index * 0.12 + 's',
+          }"
+        ></span>
+      }
+    </span>
+    @if (label()) {
+      <span class="shk-loading-dots-label">{{ label() }}</span>
+    }
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;gap:.5rem}.shk-loading-dots{display:inline-flex;align-items:center;gap:.25rem}.shk-loading-dot{border-radius:9999px;background-color:var(--shk-primary-600);animation:shk-loading-dots-bounce 1.4s ease-in-out infinite}.shk-loading-dots-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-dots-bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: LoadingDotsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-loading-dots', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <span class="shk-loading-dots" role="status" aria-label="Cargando">
+      @for (dot of dots(); track $index) {
+        <span
+          class="shk-loading-dot"
+          [style]="{
+            width: size(),
+            height: size(),
+            backgroundColor: color() || undefined,
+            animationDelay: $index * 0.12 + 's',
+          }"
+        ></span>
+      }
+    </span>
+    @if (label()) {
+      <span class="shk-loading-dots-label">{{ label() }}</span>
+    }
+  `, styles: [":host{display:inline-flex;align-items:center;gap:.5rem}.shk-loading-dots{display:inline-flex;align-items:center;gap:.25rem}.shk-loading-dot{border-radius:9999px;background-color:var(--shk-primary-600);animation:shk-loading-dots-bounce 1.4s ease-in-out infinite}.shk-loading-dots-label{font-size:.8125rem;color:var(--shk-surface-500)}@keyframes shk-loading-dots-bounce{0%,80%,to{transform:scale(.6);opacity:.5}40%{transform:scale(1);opacity:1}}\n"] }]
+        }], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { LoadingBarComponent, LoadingDotsComponent, LoadingOverlayComponent, LoadingSpinnerComponent };
+//# sourceMappingURL=shirkasoft-ui-components-loading.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-loading.mjs","sources":["../../../projects/ui-components/loading/loading-spinner.component.ts","../../../projects/ui-components/loading/loading-bar.component.ts","../../../projects/ui-components/loading/loading-overlay.component.ts","../../../projects/ui-components/loading/loading-dots.component.ts","../../../projects/ui-components/loading/shirkasoft-ui-components-loading.ts"],"sourcesContent":["import { Component, input, ChangeDetectionStrategy } from '@angular/core';\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/** Circular indeterminate spinner. */\n@Component({\n  selector: 'shk-loading-spinner',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      class=\"shk-loading-spinner\"\n      [style]=\"{\n        width: size(),\n        height: size(),\n      }\"\n      role=\"status\"\n      aria-label=\"Cargando\"\n    >\n      <div\n        class=\"shk-loading-spinner-circle\"\n        [style]=\"{\n          borderWidth: thickness(),\n          borderTopColor: color() || undefined,\n        }\"\n      ></div>\n    </div>\n    @if (label()) {\n      <span class=\"shk-loading-spinner-label\">{{ label() }}</span>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n      }\n      .shk-loading-spinner {\n        display: inline-block;\n      }\n      .shk-loading-spinner-circle {\n        width: 100%;\n        height: 100%;\n        border-radius: 9999px;\n        border-style: solid;\n        border-color: color-mix(in srgb, var(--shk-primary-600) 20%, transparent);\n        border-top-color: var(--shk-primary-600);\n        animation: shk-loading-spin 0.8s linear infinite;\n      }\n      .shk-loading-spinner-label {\n        font-size: 0.8125rem;\n        color: var(--shk-surface-500);\n      }\n      @keyframes shk-loading-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ],\n})\nexport class LoadingSpinnerComponent {\n  /** Diameter of the spinner. */\n  size = input<string>('2rem');\n  /** Border thickness in px. */\n  thickness = input<number>(3);\n  /** Color of the moving arc. Defaults to the primary token. */\n  color = input<string>('');\n  /** Optional text shown under the spinner. */\n  label = input<string>('');\n}\n","import { Component, computed, input, ChangeDetectionStrategy } from '@angular/core';\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/** Progress bar with an indeterminate sweep or a determinate percentage. */\n@Component({\n  selector: 'shk-loading-bar',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <div\n      class=\"shk-loading-bar\"\n      [class.shk-loading-bar-indeterminate]=\"indeterminate()\"\n      [style]=\"{ height: height(), borderRadius: rounded() ? '9999px' : undefined }\"\n      role=\"progressbar\"\n      [attr.aria-valuenow]=\"indeterminate() ? undefined : progress()\"\n      aria-label=\"Progreso\"\n    >\n      <div\n        class=\"shk-loading-bar-fill\"\n        [style]=\"fillStyle()\"\n        [style.background-color]=\"color() || undefined\"\n        [style.border-radius]=\"rounded() ? '9999px' : undefined\"\n      ></div>\n    </div>\n  `,\n  styles: [\n    `\n      .shk-loading-bar {\n        width: 100%;\n        position: relative;\n        overflow: hidden;\n        background-color: var(--shk-surface-200);\n      }\n      .shk-loading-bar-fill {\n        height: 100%;\n        background-color: var(--shk-primary-600);\n        transition: width 0.3s ease-in-out;\n      }\n      .shk-loading-bar-indeterminate .shk-loading-bar-fill {\n        width: 40%;\n        animation: shk-loading-bar-sweep 1.2s ease-in-out infinite;\n      }\n      @keyframes shk-loading-bar-sweep {\n        0% {\n          transform: translateX(-100%);\n        }\n        100% {\n          transform: translateX(350%);\n        }\n      }\n    `,\n  ],\n})\nexport class LoadingBarComponent {\n  /** Height of the bar. */\n  height = input<string>('0.25rem');\n  /** When true the bar animates without a known percentage. */\n  indeterminate = input<boolean>(true);\n  /** Current progress 0-100 when `indeterminate` is false. */\n  progress = input<number>(0);\n  /** Fill color. Defaults to the primary token. */\n  color = input<string>('');\n  /** Renders fully rounded ends. */\n  rounded = input<boolean>(true);\n\n  /** Fill width/style for the determinate mode, empty for indeterminate. */\n  protected fillStyle = computed(() => {\n    if (this.indeterminate()) return {};\n    return { width: `${Math.max(0, Math.min(100, this.progress()))}%` };\n  });\n}\n","import { Component, input, ChangeDetectionStrategy } from '@angular/core';\nimport { LoadingSpinnerComponent } from './loading-spinner.component';\n\n/** Backdrop style behind the overlay: none, light or dark. */\nexport type LoadingOverlayBackdrop = 'transparent' | 'light' | 'dark';\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/** Wraps content and shows a centered spinner over it while `visible` is true. */\n@Component({\n  selector: 'shk-loading-overlay',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LoadingSpinnerComponent],\n  template: `\n    <div\n      class=\"shk-loading-overlay\"\n      [class.shk-loading-overlay-light]=\"backdrop() === 'light'\"\n      [class.shk-loading-overlay-dark]=\"backdrop() === 'dark'\"\n    >\n      <ng-content></ng-content>\n      @if (visible()) {\n        <div class=\"shk-loading-overlay-layer\">\n          <shk-loading-spinner [size]=\"spinnerSize()\" [color]=\"color()\" [label]=\"message()\" />\n        </div>\n      }\n    </div>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      .shk-loading-overlay {\n        position: relative;\n        min-height: 1.5rem;\n      }\n      .shk-loading-overlay-layer {\n        position: absolute;\n        inset: 0;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 10;\n      }\n      .shk-loading-overlay-light .shk-loading-overlay-layer {\n        background-color: rgba(255, 255, 255, 0.65);\n      }\n      .dark .shk-loading-overlay-light .shk-loading-overlay-layer {\n        background-color: rgba(0, 0, 0, 0.55);\n      }\n      .shk-loading-overlay-dark .shk-loading-overlay-layer {\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n    `,\n  ],\n})\nexport class LoadingOverlayComponent {\n  /** Controls whether the spinner layer is shown. */\n  visible = input<boolean>(false);\n  /** Optional text under the spinner. */\n  message = input<string>('');\n  /** Diameter of the spinner. */\n  spinnerSize = input<string>('2.5rem');\n  /** Spinner color. Defaults to the primary token. */\n  color = input<string>('');\n  /** Backdrop behind the spinner. */\n  backdrop = input<LoadingOverlayBackdrop>('transparent');\n}\n","import { Component, computed, input, ChangeDetectionStrategy } from '@angular/core';\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/** Bouncing dots loading indicator. */\n@Component({\n  selector: 'shk-loading-dots',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <span class=\"shk-loading-dots\" role=\"status\" aria-label=\"Cargando\">\n      @for (dot of dots(); track $index) {\n        <span\n          class=\"shk-loading-dot\"\n          [style]=\"{\n            width: size(),\n            height: size(),\n            backgroundColor: color() || undefined,\n            animationDelay: $index * 0.12 + 's',\n          }\"\n        ></span>\n      }\n    </span>\n    @if (label()) {\n      <span class=\"shk-loading-dots-label\">{{ label() }}</span>\n    }\n  `,\n  styles: [\n    `\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.5rem;\n      }\n      .shk-loading-dots {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.25rem;\n      }\n      .shk-loading-dot {\n        border-radius: 9999px;\n        background-color: var(--shk-primary-600);\n        animation: shk-loading-dots-bounce 1.4s ease-in-out infinite;\n      }\n      .shk-loading-dots-label {\n        font-size: 0.8125rem;\n        color: var(--shk-surface-500);\n      }\n      @keyframes shk-loading-dots-bounce {\n        0%,\n        80%,\n        100% {\n          transform: scale(0.6);\n          opacity: 0.5;\n        }\n        40% {\n          transform: scale(1);\n          opacity: 1;\n        }\n      }\n    `,\n  ],\n})\nexport class LoadingDotsComponent {\n  /** Diameter of each dot. */\n  size = input<string>('0.5rem');\n  /** Dot color. Defaults to the primary token. */\n  color = input<string>('');\n  /** Number of dots. */\n  count = input<number>(3);\n  /** Optional text shown next to the dots. */\n  label = input<string>('');\n\n  /** Array of dot indices to render based on the `count` input. */\n  protected dots = computed(() => Array.from({ length: Math.max(1, this.count()) }));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}