shirkasoft-ui-components 1.2.0 → 1.3.0

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

@@ -0,0 +1,199 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, input, signal, computed, effect, ChangeDetectionStrategy, Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { BehaviorSubject } from 'rxjs';
+
+/**
+ * Global breadcrumb state. Components and pages write the current trail via
+ * `set()` and observatories read it through `breadcrumbs$`.
+ */
+class BreadcrumbService {
+    constructor() {
+        /** Internal buffer holding the current breadcrumb trail. */
+        this.breadcrumbsSubject = new BehaviorSubject([]);
+        /** Observable emitted with the latest breadcrumb trail. */
+        this.breadcrumbs$ = this.breadcrumbsSubject.asObservable();
+    }
+    /** Replaces the whole breadcrumb trail. */
+    set(items) {
+        this.breadcrumbsSubject.next(items);
+    }
+    /** Empties the breadcrumb trail. */
+    clear() {
+        this.breadcrumbsSubject.next([]);
+    }
+    /** Returns the breadcrumb trail currently held (snapshot). */
+    getCurrent() {
+        return this.breadcrumbsSubject.getValue();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Navigation breadcrumb showing the current page hierarchy. Can be fed with
+ * static items or driven by the shared BreadcrumbService.
+ */
+class BreadcrumbComponent {
+    constructor() {
+        this.breadcrumbService = inject(BreadcrumbService);
+        /** Static list of breadcrumb items. Takes precedence over the service items. */
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        /** Visual separator between items: 'chevron', 'slash' or 'arrow'. */
+        this.separator = input('chevron', ...(ngDevMode ? [{ debugName: "separator" }] : /* istanbul ignore next */ []));
+        /** When true, subscribes to the BreadcrumbService to resolve items. */
+        this.useService = input(true, ...(ngDevMode ? [{ debugName: "useService" }] : /* istanbul ignore next */ []));
+        /** Items received from the BreadcrumbService. */
+        this.serviceItems = signal([], ...(ngDevMode ? [{ debugName: "serviceItems" }] : /* istanbul ignore next */ []));
+        /** Final items: static `items` if provided, otherwise the service items. */
+        this.resolvedItems = computed(() => {
+            const staticItems = this.items();
+            if (staticItems.length > 0)
+                return staticItems;
+            if (this.useService())
+                return this.serviceItems();
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "resolvedItems" }] : /* istanbul ignore next */ []));
+        /** Active subscription to the breadcrumb stream. */
+        this.serviceSub = null;
+        effect(() => {
+            this.resolvedItems();
+        });
+    }
+    /** Subscribes to the BreadcrumbService when `useService` is enabled. */
+    ngOnInit() {
+        if (this.useService()) {
+            this.serviceSub = this.breadcrumbService.breadcrumbs$.subscribe((items) => {
+                this.serviceItems.set(items);
+            });
+        }
+    }
+    /** Unsubscribes from the breadcrumb stream to avoid leaks. */
+    ngOnDestroy() {
+        this.serviceSub?.unsubscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: BreadcrumbComponent, isStandalone: true, selector: "shk-breadcrumb", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, separator: { classPropertyName: "separator", publicName: "separator", isSignal: true, isRequired: false, transformFunction: null }, useService: { classPropertyName: "useService", publicName: "useService", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
+    <nav class="shk-breadcrumb" aria-label="Breadcrumb">
+      <ol class="shk-breadcrumb-list">
+        @for (item of resolvedItems(); track $index; let last = $last) {
+          <li class="shk-breadcrumb-item">
+            @if (!last && item.route) {
+              <a
+                [routerLink]="item.route"
+                class="shk-breadcrumb-link"
+                [attr.aria-current]="null"
+              >
+                {{ item.label }}
+              </a>
+            } @else {
+              <span
+                class="shk-breadcrumb-current"
+                [attr.aria-current]="last ? 'page' : null"
+              >
+                {{ item.label }}
+              </span>
+            }
+            @if (!last) {
+              <span class="shk-breadcrumb-separator" aria-hidden="true">
+                @switch (separator()) {
+                  @case ('slash') {
+                    <span class="shk-breadcrumb-separator-text">/</span>
+                  }
+                  @case ('arrow') {
+                    <span class="shk-breadcrumb-separator-text">&gt;</span>
+                  }
+                  @default {
+                    <svg
+                      class="shk-breadcrumb-separator-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  }
+                }
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, isInline: true, styles: [":host{display:block}.shk-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.25rem}.shk-breadcrumb-item{display:inline-flex;align-items:center;gap:.375rem;min-width:0}.shk-breadcrumb-link{color:var(--shk-surface-500);text-decoration:none;transition:color .15s ease;cursor:pointer}.shk-breadcrumb-link:hover{color:var(--shk-primary-600)}.shk-breadcrumb-current{color:var(--shk-primary-700);font-weight:600}.shk-breadcrumb-separator{display:inline-flex;align-items:center;justify-content:center;color:var(--shk-surface-300);-webkit-user-select:none;user-select:none;margin:0 .25rem}.shk-breadcrumb-separator-text{font-size:.875rem}.shk-breadcrumb-separator-icon{width:.875rem;height:.875rem}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-breadcrumb', standalone: true, imports: [RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: `
+    <nav class="shk-breadcrumb" aria-label="Breadcrumb">
+      <ol class="shk-breadcrumb-list">
+        @for (item of resolvedItems(); track $index; let last = $last) {
+          <li class="shk-breadcrumb-item">
+            @if (!last && item.route) {
+              <a
+                [routerLink]="item.route"
+                class="shk-breadcrumb-link"
+                [attr.aria-current]="null"
+              >
+                {{ item.label }}
+              </a>
+            } @else {
+              <span
+                class="shk-breadcrumb-current"
+                [attr.aria-current]="last ? 'page' : null"
+              >
+                {{ item.label }}
+              </span>
+            }
+            @if (!last) {
+              <span class="shk-breadcrumb-separator" aria-hidden="true">
+                @switch (separator()) {
+                  @case ('slash') {
+                    <span class="shk-breadcrumb-separator-text">/</span>
+                  }
+                  @case ('arrow') {
+                    <span class="shk-breadcrumb-separator-text">&gt;</span>
+                  }
+                  @default {
+                    <svg
+                      class="shk-breadcrumb-separator-icon"
+                      viewBox="0 0 24 24"
+                      fill="none"
+                      stroke="currentColor"
+                      stroke-width="2"
+                      stroke-linecap="round"
+                      stroke-linejoin="round"
+                    >
+                      <polyline points="9 18 15 12 9 6" />
+                    </svg>
+                  }
+                }
+              </span>
+            }
+          </li>
+        }
+      </ol>
+    </nav>
+  `, styles: [":host{display:block}.shk-breadcrumb-list{display:flex;align-items:center;flex-wrap:wrap;gap:.375rem;list-style:none;margin:0;padding:0;font-size:.9375rem;line-height:1.25rem}.shk-breadcrumb-item{display:inline-flex;align-items:center;gap:.375rem;min-width:0}.shk-breadcrumb-link{color:var(--shk-surface-500);text-decoration:none;transition:color .15s ease;cursor:pointer}.shk-breadcrumb-link:hover{color:var(--shk-primary-600)}.shk-breadcrumb-current{color:var(--shk-primary-700);font-weight:600}.shk-breadcrumb-separator{display:inline-flex;align-items:center;justify-content:center;color:var(--shk-surface-300);-webkit-user-select:none;user-select:none;margin:0 .25rem}.shk-breadcrumb-separator-text{font-size:.875rem}.shk-breadcrumb-separator-icon{width:.875rem;height:.875rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], separator: [{ type: i0.Input, args: [{ isSignal: true, alias: "separator", required: false }] }], useService: [{ type: i0.Input, args: [{ isSignal: true, alias: "useService", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent, BreadcrumbService };
+//# sourceMappingURL=shirkasoft-ui-components-breadcrumb.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-breadcrumb.mjs","sources":["../../../projects/ui-components/breadcrumb/breadcrumb.service.ts","../../../projects/ui-components/breadcrumb/breadcrumb.component.ts","../../../projects/ui-components/breadcrumb/shirkasoft-ui-components-breadcrumb.ts"],"sourcesContent":["import { Injectable } from '@angular/core';\nimport { BehaviorSubject, Observable } from 'rxjs';\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/** A single breadcrumb entry with an optional navigation route. */\nexport interface BreadcrumbItem {\n  label: string;\n  route?: string;\n}\n\n/**\n * Global breadcrumb state. Components and pages write the current trail via\n * `set()` and observatories read it through `breadcrumbs$`.\n */\n@Injectable({\n  providedIn: 'root',\n})\nexport class BreadcrumbService {\n  /** Internal buffer holding the current breadcrumb trail. */\n  private breadcrumbsSubject = new BehaviorSubject<BreadcrumbItem[]>([]);\n  /** Observable emitted with the latest breadcrumb trail. */\n  breadcrumbs$: Observable<BreadcrumbItem[]> = this.breadcrumbsSubject.asObservable();\n\n  /** Replaces the whole breadcrumb trail. */\n  set(items: BreadcrumbItem[]): void {\n    this.breadcrumbsSubject.next(items);\n  }\n\n  /** Empties the breadcrumb trail. */\n  clear(): void {\n    this.breadcrumbsSubject.next([]);\n  }\n\n  /** Returns the breadcrumb trail currently held (snapshot). */\n  getCurrent(): BreadcrumbItem[] {\n    return this.breadcrumbsSubject.getValue();\n  }\n}","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  OnDestroy,\n  OnInit,\n  signal,\n} from '@angular/core';\nimport { RouterLink } from '@angular/router';\nimport { BreadcrumbItem, BreadcrumbService } from './breadcrumb.service';\n\nexport type BreadcrumbSeparator = 'chevron' | 'slash' | 'arrow';\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 * Navigation breadcrumb showing the current page hierarchy. Can be fed with\n * static items or driven by the shared BreadcrumbService.\n */\n@Component({\n  selector: 'shk-breadcrumb',\n  standalone: true,\n  imports: [RouterLink],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  template: `\n    <nav class=\"shk-breadcrumb\" aria-label=\"Breadcrumb\">\n      <ol class=\"shk-breadcrumb-list\">\n        @for (item of resolvedItems(); track $index; let last = $last) {\n          <li class=\"shk-breadcrumb-item\">\n            @if (!last && item.route) {\n              <a\n                [routerLink]=\"item.route\"\n                class=\"shk-breadcrumb-link\"\n                [attr.aria-current]=\"null\"\n              >\n                {{ item.label }}\n              </a>\n            } @else {\n              <span\n                class=\"shk-breadcrumb-current\"\n                [attr.aria-current]=\"last ? 'page' : null\"\n              >\n                {{ item.label }}\n              </span>\n            }\n            @if (!last) {\n              <span class=\"shk-breadcrumb-separator\" aria-hidden=\"true\">\n                @switch (separator()) {\n                  @case ('slash') {\n                    <span class=\"shk-breadcrumb-separator-text\">/</span>\n                  }\n                  @case ('arrow') {\n                    <span class=\"shk-breadcrumb-separator-text\">&gt;</span>\n                  }\n                  @default {\n                    <svg\n                      class=\"shk-breadcrumb-separator-icon\"\n                      viewBox=\"0 0 24 24\"\n                      fill=\"none\"\n                      stroke=\"currentColor\"\n                      stroke-width=\"2\"\n                      stroke-linecap=\"round\"\n                      stroke-linejoin=\"round\"\n                    >\n                      <polyline points=\"9 18 15 12 9 6\" />\n                    </svg>\n                  }\n                }\n              </span>\n            }\n          </li>\n        }\n      </ol>\n    </nav>\n  `,\n  styles: [\n    `\n      :host {\n        display: block;\n      }\n      .shk-breadcrumb-list {\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n        gap: 0.375rem;\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        font-size: 0.9375rem;\n        line-height: 1.25rem;\n      }\n      .shk-breadcrumb-item {\n        display: inline-flex;\n        align-items: center;\n        gap: 0.375rem;\n        min-width: 0;\n      }\n      .shk-breadcrumb-link {\n        color: var(--shk-surface-500);\n        text-decoration: none;\n        transition: color 0.15s ease;\n        cursor: pointer;\n      }\n      .shk-breadcrumb-link:hover {\n        color: var(--shk-primary-600);\n      }\n      .shk-breadcrumb-current {\n        color: var(--shk-primary-700);\n        font-weight: 600;\n      }\n      .shk-breadcrumb-separator {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        color: var(--shk-surface-300);\n        user-select: none;\n        margin: 0 0.25rem;\n      }\n      .shk-breadcrumb-separator-text {\n        font-size: 0.875rem;\n      }\n      .shk-breadcrumb-separator-icon {\n        width: 0.875rem;\n        height: 0.875rem;\n      }\n    `,\n  ],\n})\nexport class BreadcrumbComponent implements OnInit, OnDestroy {\n  private readonly breadcrumbService = inject(BreadcrumbService);\n\n  /** Static list of breadcrumb items. Takes precedence over the service items. */\n  items = input<BreadcrumbItem[]>([]);\n  /** Visual separator between items: 'chevron', 'slash' or 'arrow'. */\n  separator = input<BreadcrumbSeparator>('chevron');\n  /** When true, subscribes to the BreadcrumbService to resolve items. */\n  useService = input<boolean>(true);\n\n  /** Items received from the BreadcrumbService. */\n  protected serviceItems = signal<BreadcrumbItem[]>([]);\n\n  /** Final items: static `items` if provided, otherwise the service items. */\n  protected resolvedItems = computed<BreadcrumbItem[]>(() => {\n    const staticItems = this.items();\n    if (staticItems.length > 0) return staticItems;\n    if (this.useService()) return this.serviceItems();\n    return [];\n  });\n\n  /** Active subscription to the breadcrumb stream. */\n  private serviceSub: { unsubscribe(): void } | null = null;\n\n  constructor() {\n    effect(() => {\n      this.resolvedItems();\n    });\n  }\n\n  /** Subscribes to the BreadcrumbService when `useService` is enabled. */\n  ngOnInit(): void {\n    if (this.useService()) {\n      this.serviceSub = this.breadcrumbService.breadcrumbs$.subscribe((items) => {\n        this.serviceItems.set(items);\n      });\n    }\n  }\n\n  /** Unsubscribes from the breadcrumb stream to avoid leaks. */\n  ngOnDestroy(): void {\n    this.serviceSub?.unsubscribe();\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-button.mjs

@@ -0,0 +1,148 @@
+import * as i0 from '@angular/core';
+import { input, output, computed, ChangeDetectionStrategy, Component } from '@angular/core';
+import { LucideDynamicIcon } from '@lucide/angular';
+import { getIcon } from 'shirkasoft-ui-components/utils';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Generic button with icon, severity variants, loading state and sizes. */
+class ButtonComponent {
+    constructor() {
+        /** Text shown inside the button. */
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+        /** Optional leading lucide icon name or component. */
+        this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        /** Position of the icon relative to the label. */
+        this.iconPos = input('left', ...(ngDevMode ? [{ debugName: "iconPos" }] : /* istanbul ignore next */ []));
+        /** Color variant. Defaults to 'primary'. */
+        this.severity = input('primary', ...(ngDevMode ? [{ debugName: "severity" }] : /* istanbul ignore next */ []));
+        /** Transparent background with a colored border. */
+        this.outlined = input(false, ...(ngDevMode ? [{ debugName: "outlined" }] : /* istanbul ignore next */ []));
+        /** Borderless button with a colored label. */
+        this.text = input(false, ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        /** Adds a soft shadow. */
+        this.raised = input(false, ...(ngDevMode ? [{ debugName: "raised" }] : /* istanbul ignore next */ []));
+        /** Fully rounded corners (pill). */
+        this.rounded = input(false, ...(ngDevMode ? [{ debugName: "rounded" }] : /* istanbul ignore next */ []));
+        /** Size variant. */
+        this.size = input(undefined, ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+        /** Disables the button. */
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
+        /** Shows a spinner and disables the button. */
+        this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        /** Icon shown while loading. Defaults to 'refresh'. */
+        this.loadingIcon = input('refresh', ...(ngDevMode ? [{ debugName: "loadingIcon" }] : /* istanbul ignore next */ []));
+        /** Optional text shown instead of the label while loading. */
+        this.loadingText = input('', ...(ngDevMode ? [{ debugName: "loadingText" }] : /* istanbul ignore next */ []));
+        /** Native button type. */
+        this.type = input('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Accessible label when the button is icon-only. */
+        this.ariaLabel = input('', ...(ngDevMode ? [{ debugName: "ariaLabel" }] : /* istanbul ignore next */ []));
+        /** Native title tooltip. */
+        this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Inline styles applied to the button. */
+        this.style = input({}, ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
+        /** Extra CSS classes. */
+        this.styleClass = input('', ...(ngDevMode ? [{ debugName: "styleClass" }] : /* istanbul ignore next */ []));
+        /** Emitted on click with the original MouseEvent. */
+        this.onClick = output();
+        this.getIcon = getIcon;
+        this.iconOnly = computed(() => !this.label() && !!this.icon(), ...(ngDevMode ? [{ debugName: "iconOnly" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: ButtonComponent, isStandalone: true, selector: "shk-button", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconPos: { classPropertyName: "iconPos", publicName: "iconPos", isSignal: true, isRequired: false, transformFunction: null }, severity: { classPropertyName: "severity", publicName: "severity", isSignal: true, isRequired: false, transformFunction: null }, outlined: { classPropertyName: "outlined", publicName: "outlined", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, raised: { classPropertyName: "raised", publicName: "raised", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, loadingIcon: { classPropertyName: "loadingIcon", publicName: "loadingIcon", isSignal: true, isRequired: false, transformFunction: null }, loadingText: { classPropertyName: "loadingText", publicName: "loadingText", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onClick: "onClick" }, ngImport: i0, template: `
+    <button
+      [attr.type]="type()"
+      class="shk-button"
+      [class.shk-button-primary]="severity() === 'primary' || !severity()"
+      [class.shk-button-secondary]="severity() === 'secondary'"
+      [class.shk-button-success]="severity() === 'success'"
+      [class.shk-button-info]="severity() === 'info'"
+      [class.shk-button-warning]="severity() === 'warning'"
+      [class.shk-button-danger]="severity() === 'danger'"
+      [class.shk-button-help]="severity() === 'help'"
+      [class.shk-button-contrast]="severity() === 'contrast'"
+      [class.shk-button-outlined]="outlined()"
+      [class.shk-button-text]="text()"
+      [class.shk-button-raised]="raised()"
+      [class.shk-button-rounded]="rounded()"
+      [class.shk-button-sm]="size() === 'small'"
+      [class.shk-button-lg]="size() === 'large'"
+      [class.shk-button-icon-right]="iconPos() === 'right'"
+      [class.shk-button-icon-top]="iconPos() === 'top'"
+      [class.shk-button-icon-bottom]="iconPos() === 'bottom'"
+      [class.shk-button-icon-only]="iconOnly()"
+      [class.shk-button-loading]="loading()"
+      [class]="styleClass()"
+      [style]="style()"
+      [disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() || undefined"
+      [attr.title]="title() || undefined"
+      (click)="onClick.emit($event)"
+    >
+      @if (loading()) {
+        <svg [lucideIcon]="getIcon(loadingIcon())" class="shk-button-icon shk-button-spin"></svg>
+      } @else if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-button-icon"></svg>
+      }
+      @if (label()) {
+        <span>{{ loading() && loadingText() ? loadingText() : label() }}</span>
+      }
+      <ng-content></ng-content>
+    </button>
+  `, isInline: true, styles: [":host{display:inline-block}.shk-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:500;line-height:1.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .15s ease-in-out}.shk-button:focus-visible{outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-button:disabled{opacity:.55;cursor:not-allowed}.shk-button-icon{width:1rem;height:1rem;flex-shrink:0}.shk-button-primary{--shk-btn-bg: var(--shk-primary-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-600)}.shk-button-secondary{--shk-btn-bg: var(--shk-surface-100);--shk-btn-color: var(--shk-surface-700);--shk-btn-border: var(--shk-surface-200)}.shk-button-success{--shk-btn-bg: var(--shk-success-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-success-600)}.shk-button-info{--shk-btn-bg: var(--shk-info-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-info-600)}.shk-button-warning{--shk-btn-bg: var(--shk-warning-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-warning-600)}.shk-button-danger{--shk-btn-bg: var(--shk-error-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-error-600)}.shk-button-help{--shk-btn-bg: var(--shk-primary-500);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-500)}.shk-button-contrast{--shk-btn-bg: var(--shk-surface-900);--shk-btn-color: var(--shk-surface-50);--shk-btn-border: var(--shk-surface-900)}.shk-button{background-color:var(--shk-btn-bg);color:var(--shk-btn-color);border-color:var(--shk-btn-border)}.shk-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-bg) 88%,#000000)}.shk-button-outlined,.shk-button-text{background-color:transparent}.shk-button-outlined{border-color:var(--shk-btn-color)}.shk-button-text{border-color:transparent}.shk-button-text:hover:not(:disabled),.shk-button-outlined:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-color) 12%,transparent)}.shk-button-raised{box-shadow:0 1px 2px #0000000f,0 4px 8px #0000001a}.shk-button-rounded{border-radius:9999px}.shk-button-sm{padding:.375rem .75rem;font-size:.8125rem}.shk-button-sm .shk-button-icon{width:.875rem;height:.875rem}.shk-button-lg{padding:.75rem 1.5rem;font-size:1rem}.shk-button-lg .shk-button-icon{width:1.25rem;height:1.25rem}.shk-button-icon-only{padding:.5rem}.shk-button-sm.shk-button-icon-only{padding:.375rem}.shk-button-lg.shk-button-icon-only{padding:.75rem}.shk-button-icon-right{flex-direction:row-reverse}.shk-button-icon-top{flex-direction:column}.shk-button-icon-bottom{flex-direction:column-reverse}.shk-button-loading .shk-button-spin{animation:shk-button-spin 1s linear infinite}@keyframes shk-button-spin{to{transform:rotate(360deg)}}\n"], dependencies: [{ 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: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'shk-button', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [LucideDynamicIcon], template: `
+    <button
+      [attr.type]="type()"
+      class="shk-button"
+      [class.shk-button-primary]="severity() === 'primary' || !severity()"
+      [class.shk-button-secondary]="severity() === 'secondary'"
+      [class.shk-button-success]="severity() === 'success'"
+      [class.shk-button-info]="severity() === 'info'"
+      [class.shk-button-warning]="severity() === 'warning'"
+      [class.shk-button-danger]="severity() === 'danger'"
+      [class.shk-button-help]="severity() === 'help'"
+      [class.shk-button-contrast]="severity() === 'contrast'"
+      [class.shk-button-outlined]="outlined()"
+      [class.shk-button-text]="text()"
+      [class.shk-button-raised]="raised()"
+      [class.shk-button-rounded]="rounded()"
+      [class.shk-button-sm]="size() === 'small'"
+      [class.shk-button-lg]="size() === 'large'"
+      [class.shk-button-icon-right]="iconPos() === 'right'"
+      [class.shk-button-icon-top]="iconPos() === 'top'"
+      [class.shk-button-icon-bottom]="iconPos() === 'bottom'"
+      [class.shk-button-icon-only]="iconOnly()"
+      [class.shk-button-loading]="loading()"
+      [class]="styleClass()"
+      [style]="style()"
+      [disabled]="disabled() || loading()"
+      [attr.aria-label]="ariaLabel() || undefined"
+      [attr.title]="title() || undefined"
+      (click)="onClick.emit($event)"
+    >
+      @if (loading()) {
+        <svg [lucideIcon]="getIcon(loadingIcon())" class="shk-button-icon shk-button-spin"></svg>
+      } @else if (icon()) {
+        <svg [lucideIcon]="getIcon(icon())" class="shk-button-icon"></svg>
+      }
+      @if (label()) {
+        <span>{{ loading() && loadingText() ? loadingText() : label() }}</span>
+      }
+      <ng-content></ng-content>
+    </button>
+  `, styles: [":host{display:inline-block}.shk-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem 1rem;border-radius:.5rem;border:1px solid transparent;font-size:.875rem;font-weight:500;line-height:1.25rem;cursor:pointer;-webkit-user-select:none;user-select:none;white-space:nowrap;transition:background-color .15s ease-in-out,border-color .15s ease-in-out,color .15s ease-in-out,box-shadow .15s ease-in-out,opacity .15s ease-in-out}.shk-button:focus-visible{outline:2px solid var(--shk-primary-400);outline-offset:2px}.shk-button:disabled{opacity:.55;cursor:not-allowed}.shk-button-icon{width:1rem;height:1rem;flex-shrink:0}.shk-button-primary{--shk-btn-bg: var(--shk-primary-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-600)}.shk-button-secondary{--shk-btn-bg: var(--shk-surface-100);--shk-btn-color: var(--shk-surface-700);--shk-btn-border: var(--shk-surface-200)}.shk-button-success{--shk-btn-bg: var(--shk-success-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-success-600)}.shk-button-info{--shk-btn-bg: var(--shk-info-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-info-600)}.shk-button-warning{--shk-btn-bg: var(--shk-warning-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-warning-600)}.shk-button-danger{--shk-btn-bg: var(--shk-error-600);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-error-600)}.shk-button-help{--shk-btn-bg: var(--shk-primary-500);--shk-btn-color: #ffffff;--shk-btn-border: var(--shk-primary-500)}.shk-button-contrast{--shk-btn-bg: var(--shk-surface-900);--shk-btn-color: var(--shk-surface-50);--shk-btn-border: var(--shk-surface-900)}.shk-button{background-color:var(--shk-btn-bg);color:var(--shk-btn-color);border-color:var(--shk-btn-border)}.shk-button:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-bg) 88%,#000000)}.shk-button-outlined,.shk-button-text{background-color:transparent}.shk-button-outlined{border-color:var(--shk-btn-color)}.shk-button-text{border-color:transparent}.shk-button-text:hover:not(:disabled),.shk-button-outlined:hover:not(:disabled){background-color:color-mix(in srgb,var(--shk-btn-color) 12%,transparent)}.shk-button-raised{box-shadow:0 1px 2px #0000000f,0 4px 8px #0000001a}.shk-button-rounded{border-radius:9999px}.shk-button-sm{padding:.375rem .75rem;font-size:.8125rem}.shk-button-sm .shk-button-icon{width:.875rem;height:.875rem}.shk-button-lg{padding:.75rem 1.5rem;font-size:1rem}.shk-button-lg .shk-button-icon{width:1.25rem;height:1.25rem}.shk-button-icon-only{padding:.5rem}.shk-button-sm.shk-button-icon-only{padding:.375rem}.shk-button-lg.shk-button-icon-only{padding:.75rem}.shk-button-icon-right{flex-direction:row-reverse}.shk-button-icon-top{flex-direction:column}.shk-button-icon-bottom{flex-direction:column-reverse}.shk-button-loading .shk-button-spin{animation:shk-button-spin 1s linear infinite}@keyframes shk-button-spin{to{transform:rotate(360deg)}}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconPos: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPos", required: false }] }], severity: [{ type: i0.Input, args: [{ isSignal: true, alias: "severity", required: false }] }], outlined: [{ type: i0.Input, args: [{ isSignal: true, alias: "outlined", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], raised: [{ type: i0.Input, args: [{ isSignal: true, alias: "raised", required: false }] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], loadingIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingIcon", required: false }] }], loadingText: [{ type: i0.Input, args: [{ isSignal: true, alias: "loadingText", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], onClick: [{ type: i0.Output, args: ["onClick"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ButtonComponent };
+//# sourceMappingURL=shirkasoft-ui-components-button.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-button.mjs","sources":["../../../projects/ui-components/button/button.component.ts","../../../projects/ui-components/button/shirkasoft-ui-components-button.ts"],"sourcesContent":["import { Component, computed, input, output, ChangeDetectionStrategy } from '@angular/core';\nimport { LucideDynamicIcon } from '@lucide/angular';\nimport { getIcon } from 'shirkasoft-ui-components/utils';\n\nexport type ButtonSeverity =\n  'primary' | 'secondary' | 'success' | 'info' | 'warning' | 'danger' | 'help' | 'contrast';\nexport type ButtonSize = 'small' | 'large';\nexport type ButtonIconPosition = 'left' | 'right' | 'top' | 'bottom';\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/** Generic button with icon, severity variants, loading state and sizes. */\n@Component({\n  selector: 'shk-button',\n  standalone: true,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [LucideDynamicIcon],\n  template: `\n    <button\n      [attr.type]=\"type()\"\n      class=\"shk-button\"\n      [class.shk-button-primary]=\"severity() === 'primary' || !severity()\"\n      [class.shk-button-secondary]=\"severity() === 'secondary'\"\n      [class.shk-button-success]=\"severity() === 'success'\"\n      [class.shk-button-info]=\"severity() === 'info'\"\n      [class.shk-button-warning]=\"severity() === 'warning'\"\n      [class.shk-button-danger]=\"severity() === 'danger'\"\n      [class.shk-button-help]=\"severity() === 'help'\"\n      [class.shk-button-contrast]=\"severity() === 'contrast'\"\n      [class.shk-button-outlined]=\"outlined()\"\n      [class.shk-button-text]=\"text()\"\n      [class.shk-button-raised]=\"raised()\"\n      [class.shk-button-rounded]=\"rounded()\"\n      [class.shk-button-sm]=\"size() === 'small'\"\n      [class.shk-button-lg]=\"size() === 'large'\"\n      [class.shk-button-icon-right]=\"iconPos() === 'right'\"\n      [class.shk-button-icon-top]=\"iconPos() === 'top'\"\n      [class.shk-button-icon-bottom]=\"iconPos() === 'bottom'\"\n      [class.shk-button-icon-only]=\"iconOnly()\"\n      [class.shk-button-loading]=\"loading()\"\n      [class]=\"styleClass()\"\n      [style]=\"style()\"\n      [disabled]=\"disabled() || loading()\"\n      [attr.aria-label]=\"ariaLabel() || undefined\"\n      [attr.title]=\"title() || undefined\"\n      (click)=\"onClick.emit($event)\"\n    >\n      @if (loading()) {\n        <svg [lucideIcon]=\"getIcon(loadingIcon())\" class=\"shk-button-icon shk-button-spin\"></svg>\n      } @else if (icon()) {\n        <svg [lucideIcon]=\"getIcon(icon())\" class=\"shk-button-icon\"></svg>\n      }\n      @if (label()) {\n        <span>{{ loading() && loadingText() ? loadingText() : label() }}</span>\n      }\n      <ng-content></ng-content>\n    </button>\n  `,\n  styles: [\n    `\n      :host {\n        display: inline-block;\n      }\n      .shk-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        gap: 0.5rem;\n        padding: 0.5rem 1rem;\n        border-radius: 0.5rem;\n        border: 1px solid transparent;\n        font-size: 0.875rem;\n        font-weight: 500;\n        line-height: 1.25rem;\n        cursor: pointer;\n        user-select: none;\n        white-space: nowrap;\n        transition:\n          background-color 0.15s ease-in-out,\n          border-color 0.15s ease-in-out,\n          color 0.15s ease-in-out,\n          box-shadow 0.15s ease-in-out,\n          opacity 0.15s ease-in-out;\n      }\n      .shk-button:focus-visible {\n        outline: 2px solid var(--shk-primary-400);\n        outline-offset: 2px;\n      }\n      .shk-button:disabled {\n        opacity: 0.55;\n        cursor: not-allowed;\n      }\n      .shk-button-icon {\n        width: 1rem;\n        height: 1rem;\n        flex-shrink: 0;\n      }\n\n      .shk-button-primary {\n        --shk-btn-bg: var(--shk-primary-600);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-primary-600);\n      }\n      .shk-button-secondary {\n        --shk-btn-bg: var(--shk-surface-100);\n        --shk-btn-color: var(--shk-surface-700);\n        --shk-btn-border: var(--shk-surface-200);\n      }\n      .shk-button-success {\n        --shk-btn-bg: var(--shk-success-600);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-success-600);\n      }\n      .shk-button-info {\n        --shk-btn-bg: var(--shk-info-600);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-info-600);\n      }\n      .shk-button-warning {\n        --shk-btn-bg: var(--shk-warning-600);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-warning-600);\n      }\n      .shk-button-danger {\n        --shk-btn-bg: var(--shk-error-600);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-error-600);\n      }\n      .shk-button-help {\n        --shk-btn-bg: var(--shk-primary-500);\n        --shk-btn-color: #ffffff;\n        --shk-btn-border: var(--shk-primary-500);\n      }\n      .shk-button-contrast {\n        --shk-btn-bg: var(--shk-surface-900);\n        --shk-btn-color: var(--shk-surface-50);\n        --shk-btn-border: var(--shk-surface-900);\n      }\n\n      .shk-button {\n        background-color: var(--shk-btn-bg);\n        color: var(--shk-btn-color);\n        border-color: var(--shk-btn-border);\n      }\n      .shk-button:hover:not(:disabled) {\n        background-color: color-mix(in srgb, var(--shk-btn-bg) 88%, #000000);\n      }\n      .shk-button-outlined,\n      .shk-button-text {\n        background-color: transparent;\n      }\n      .shk-button-outlined {\n        border-color: var(--shk-btn-color);\n      }\n      .shk-button-text {\n        border-color: transparent;\n      }\n      .shk-button-text:hover:not(:disabled),\n      .shk-button-outlined:hover:not(:disabled) {\n        background-color: color-mix(in srgb, var(--shk-btn-color) 12%, transparent);\n      }\n      .shk-button-raised {\n        box-shadow:\n          0 1px 2px rgba(0, 0, 0, 0.06),\n          0 4px 8px rgba(0, 0, 0, 0.1);\n      }\n      .shk-button-rounded {\n        border-radius: 9999px;\n      }\n      .shk-button-sm {\n        padding: 0.375rem 0.75rem;\n        font-size: 0.8125rem;\n      }\n      .shk-button-sm .shk-button-icon {\n        width: 0.875rem;\n        height: 0.875rem;\n      }\n      .shk-button-lg {\n        padding: 0.75rem 1.5rem;\n        font-size: 1rem;\n      }\n      .shk-button-lg .shk-button-icon {\n        width: 1.25rem;\n        height: 1.25rem;\n      }\n      .shk-button-icon-only {\n        padding: 0.5rem;\n      }\n      .shk-button-sm.shk-button-icon-only {\n        padding: 0.375rem;\n      }\n      .shk-button-lg.shk-button-icon-only {\n        padding: 0.75rem;\n      }\n      .shk-button-icon-right {\n        flex-direction: row-reverse;\n      }\n      .shk-button-icon-top {\n        flex-direction: column;\n      }\n      .shk-button-icon-bottom {\n        flex-direction: column-reverse;\n      }\n      .shk-button-loading .shk-button-spin {\n        animation: shk-button-spin 1s linear infinite;\n      }\n      @keyframes shk-button-spin {\n        to {\n          transform: rotate(360deg);\n        }\n      }\n    `,\n  ],\n})\nexport class ButtonComponent {\n  /** Text shown inside the button. */\n  label = input<string>('');\n  /** Optional leading lucide icon name or component. */\n  icon = input<string | any>('');\n  /** Position of the icon relative to the label. */\n  iconPos = input<ButtonIconPosition>('left');\n  /** Color variant. Defaults to 'primary'. */\n  severity = input<ButtonSeverity>('primary');\n  /** Transparent background with a colored border. */\n  outlined = input<boolean>(false);\n  /** Borderless button with a colored label. */\n  text = input<boolean>(false);\n  /** Adds a soft shadow. */\n  raised = input<boolean>(false);\n  /** Fully rounded corners (pill). */\n  rounded = input<boolean>(false);\n  /** Size variant. */\n  size = input<ButtonSize | undefined>(undefined);\n  /** Disables the button. */\n  disabled = input<boolean>(false);\n  /** Shows a spinner and disables the button. */\n  loading = input<boolean>(false);\n  /** Icon shown while loading. Defaults to 'refresh'. */\n  loadingIcon = input<string>('refresh');\n  /** Optional text shown instead of the label while loading. */\n  loadingText = input<string>('');\n  /** Native button type. */\n  type = input<'button' | 'submit' | 'reset'>('button');\n  /** Accessible label when the button is icon-only. */\n  ariaLabel = input<string>('');\n  /** Native title tooltip. */\n  title = input<string>('');\n  /** Inline styles applied to the button. */\n  style = input<Record<string, string | number>>({});\n  /** Extra CSS classes. */\n  styleClass = input<string>('');\n\n  /** Emitted on click with the original MouseEvent. */\n  onClick = output<MouseEvent>();\n\n  protected getIcon = getIcon;\n\n  protected iconOnly = computed(() => !this.label() && !!this.icon());\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;AASA;;;;AAIG;AAEH;MA2Ma,eAAe,CAAA;AA1M5B,IAAA,WAAA,GAAA;;AA4ME,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;;AAEzB,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAe,EAAE,2EAAC;;AAE9B,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAqB,MAAM,8EAAC;;AAE3C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAiB,SAAS,+EAAC;;AAE3C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAEhC,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAU,KAAK,2EAAC;;AAE5B,QAAA,IAAA,CAAA,MAAM,GAAG,KAAK,CAAU,KAAK,6EAAC;;AAE9B,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;;AAE/B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAyB,SAAS,2EAAC;;AAE/C,QAAA,IAAA,CAAA,QAAQ,GAAG,KAAK,CAAU,KAAK,+EAAC;;AAEhC,QAAA,IAAA,CAAA,OAAO,GAAG,KAAK,CAAU,KAAK,8EAAC;;AAE/B,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,SAAS,kFAAC;;AAEtC,QAAA,IAAA,CAAA,WAAW,GAAG,KAAK,CAAS,EAAE,kFAAC;;AAE/B,QAAA,IAAA,CAAA,IAAI,GAAG,KAAK,CAAgC,QAAQ,2EAAC;;AAErD,QAAA,IAAA,CAAA,SAAS,GAAG,KAAK,CAAS,EAAE,gFAAC;;AAE7B,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAS,EAAE,4EAAC;;AAEzB,QAAA,IAAA,CAAA,KAAK,GAAG,KAAK,CAAkC,EAAE,4EAAC;;AAElD,QAAA,IAAA,CAAA,UAAU,GAAG,KAAK,CAAS,EAAE,iFAAC;;QAG9B,IAAA,CAAA,OAAO,GAAG,MAAM,EAAc;QAEpB,IAAA,CAAA,OAAO,GAAG,OAAO;AAEjB,QAAA,IAAA,CAAA,QAAQ,GAAG,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,+EAAC;AACpE,IAAA;+GA5CY,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,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,MAAA,EAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,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,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,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,OAAA,EAAA,EAAA,iBAAA,EAAA,SAAA,EAAA,UAAA,EAAA,SAAA,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,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,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,SAAA,EAAA,EAAA,iBAAA,EAAA,WAAA,EAAA,UAAA,EAAA,WAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,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,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,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,EAAA,OAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EArMhB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT,EAAA,CAAA,EAAA,QAAA,EAAA,IAAA,EAAA,MAAA,EAAA,CAAA,k4FAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAzCS,iBAAiB,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,CAAA,YAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA,CAAA;;4FAsMhB,eAAe,EAAA,UAAA,EAAA,CAAA;kBA1M3B,SAAS;+BACE,YAAY,EAAA,UAAA,EACV,IAAI,EAAA,eAAA,EACC,uBAAuB,CAAC,MAAM,EAAA,OAAA,EACtC,CAAC,iBAAiB,CAAC,EAAA,QAAA,EAClB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwCT,EAAA,CAAA,EAAA,MAAA,EAAA,CAAA,k4FAAA,CAAA,EAAA;;;AC7DH;;AAEG;;;;"}

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

@@ -0,0 +1,153 @@
+import * as i0 from '@angular/core';
+import { input, viewChild, effect, untracked, Component } from '@angular/core';
+import { Chart, registerables } from 'chart.js';
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/**
+ * Chart.js wrapper that renders line, bar, pie, doughnut or polarArea charts
+ * and updates them reactively as the inputs change.
+ */
+class ChartComponent {
+    /** Guarantees Chart.js plugins are only registered once. */
+    static { this.registered = false; }
+    constructor() {
+        /** Type of chart to render. */
+        this.type = input('bar', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+        /** Chart.js datasets payload. */
+        this.data = input({ datasets: [] }, ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        /** Chart.js options object. */
+        this.options = input({}, ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        /** Reference to the inner canvas element. */
+        this.canvasRef = viewChild.required('canvas');
+        /** Live Chart.js instance. */
+        this.chartInstance = null;
+        /** Whether the view has been initialized yet. */
+        this.initialized = false;
+        if (!ChartComponent.registered) {
+            Chart.register(...registerables);
+            ChartComponent.registered = true;
+        }
+        effect(() => {
+            const t = this.type();
+            const d = this.data();
+            const o = this.options();
+            untracked(() => {
+                if (!this.initialized)
+                    return;
+                this.updateChart(t, d, o);
+            });
+        });
+    }
+    /** Creates the initial chart once the canvas is available. */
+    ngAfterViewInit() {
+        this.initialized = true;
+        this.initChart();
+    }
+    /** Destroys the Chart.js instance. */
+    ngOnDestroy() {
+        this.chartInstance?.destroy();
+    }
+    /** Clears the canvas by reassigning its width. */
+    resetCanvas() {
+        const canvas = this.canvasRef().nativeElement;
+        canvas.width = canvas.width;
+    }
+    /** Creates a new Chart.js instance on the canvas. */
+    initChart() {
+        this.resetCanvas();
+        const canvas = this.canvasRef().nativeElement;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        this.chartInstance = new Chart(ctx, {
+            type: this.type(),
+            data: this.deepClone(this.data()),
+            options: this.deepClone(this.options()),
+        });
+        this.chartInstance.resize();
+    }
+    /** Deep clones a value to detach it from Angular's reactive objects. */
+    deepClone(value) {
+        try {
+            if (typeof structuredClone === 'function')
+                return structuredClone(value);
+        }
+        catch { }
+        return JSON.parse(JSON.stringify(value));
+    }
+    /** Applies the new data/options, rebuilding the chart when the type changes. */
+    updateChart(type, data, options) {
+        if (!this.chartInstance) {
+            this.initChart();
+            return;
+        }
+        const config = this.chartInstance.config;
+        if (type !== config.type) {
+            this.chartInstance.stop();
+            this.chartInstance.destroy();
+            this.chartInstance = null;
+            this.resetCanvas();
+            this.initChart();
+            return;
+        }
+        this.chartInstance.data = data;
+        this.chartInstance.options = options;
+        this.chartInstance.update();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.18", type: ChartComponent, isStandalone: true, selector: "shk-chart", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true, isSignal: true }], ngImport: i0, template: `
+    <div class="relative h-full w-full">
+      <canvas #canvas></canvas>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: ChartComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'shk-chart',
+                    standalone: true,
+                    template: `
+    <div class="relative h-full w-full">
+      <canvas #canvas></canvas>
+    </div>
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], canvasRef: [{ type: i0.ViewChild, args: ['canvas', { isSignal: true }] }] } });
+
+/**
+ * Shirkasoft UI Components.
+ * Authors: Roberto Valladares Martin (Ansem13), Julio César García García (Sanjuli14).
+ * Belongs to Shirkasoft.
+ */
+/** Default dataset colors used by the ChartComponent when no palette is provided. */
+const COLOR_PALETTE = [
+    { bg: 'rgba(59, 130, 246, 0.2)', border: 'rgb(59, 130, 246)' },
+    { bg: 'rgba(34, 197, 94, 0.2)', border: 'rgb(34, 197, 94)' },
+    { bg: 'rgba(249, 115, 22, 0.2)', border: 'rgb(249, 115, 22)' },
+    { bg: 'rgba(139, 92, 246, 0.2)', border: 'rgb(139, 92, 246)' },
+    { bg: 'rgba(236, 72, 153, 0.2)', border: 'rgb(236, 72, 153)' },
+    { bg: 'rgba(6, 182, 212, 0.2)', border: 'rgb(6, 182, 212)' },
+];
+/**
+ * Reads the current `--shk-*` CSS variables from the document and returns
+ * the text, muted and border colors used by charts to follow the active theme.
+ */
+function readThemeColors() {
+    const docStyle = getComputedStyle(document.documentElement);
+    return {
+        text: docStyle.getPropertyValue('--shk-surface-900') || '#27272a',
+        muted: docStyle.getPropertyValue('--shk-surface-500') || '#71717a',
+        border: docStyle.getPropertyValue('--shk-surface-200') || '#e4e4e7',
+    };
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { COLOR_PALETTE, ChartComponent, readThemeColors };
+//# sourceMappingURL=shirkasoft-ui-components-chart.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"shirkasoft-ui-components-chart.mjs","sources":["../../../projects/ui-components/chart/chart.component.ts","../../../projects/ui-components/chart/chart.utils.ts","../../../projects/ui-components/chart/shirkasoft-ui-components-chart.ts"],"sourcesContent":["import {\n  Component,\n  input,\n  viewChild,\n  ElementRef,\n  effect,\n  untracked,\n  AfterViewInit,\n  OnDestroy,\n} from '@angular/core';\nimport { Chart, registerables } from 'chart.js';\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 * Chart.js wrapper that renders line, bar, pie, doughnut or polarArea charts\n * and updates them reactively as the inputs change.\n */\n@Component({\n  selector: 'shk-chart',\n  standalone: true,\n  template: `\n    <div class=\"relative h-full w-full\">\n      <canvas #canvas></canvas>\n    </div>\n  `,\n})\nexport class ChartComponent implements AfterViewInit, OnDestroy {\n  /** Guarantees Chart.js plugins are only registered once. */\n  private static registered = false;\n\n  /** Type of chart to render. */\n  type = input<'line' | 'bar' | 'pie' | 'doughnut' | 'polarArea'>('bar');\n  /** Chart.js datasets payload. */\n  data = input<any>({ datasets: [] });\n  /** Chart.js options object. */\n  options = input<any>({});\n\n  /** Reference to the inner canvas element. */\n  private canvasRef = viewChild.required<ElementRef<HTMLCanvasElement>>('canvas');\n  /** Live Chart.js instance. */\n  private chartInstance: Chart | null = null;\n  /** Whether the view has been initialized yet. */\n  private initialized = false;\n\n  constructor() {\n    if (!ChartComponent.registered) {\n      Chart.register(...registerables);\n      ChartComponent.registered = true;\n    }\n\n    effect(() => {\n      const t = this.type();\n      const d = this.data();\n      const o = this.options();\n      untracked(() => {\n        if (!this.initialized) return;\n        this.updateChart(t, d, o);\n      });\n    });\n  }\n\n  /** Creates the initial chart once the canvas is available. */\n  ngAfterViewInit(): void {\n    this.initialized = true;\n    this.initChart();\n  }\n\n  /** Destroys the Chart.js instance. */\n  ngOnDestroy(): void {\n    this.chartInstance?.destroy();\n  }\n\n  /** Clears the canvas by reassigning its width. */\n  private resetCanvas(): void {\n    const canvas = this.canvasRef().nativeElement;\n    canvas.width = canvas.width;\n  }\n\n  /** Creates a new Chart.js instance on the canvas. */\n  private initChart(): void {\n    this.resetCanvas();\n    const canvas = this.canvasRef().nativeElement;\n    const ctx = canvas.getContext('2d');\n    if (!ctx) return;\n    this.chartInstance = new Chart(ctx, {\n      type: this.type(),\n      data: this.deepClone(this.data()),\n      options: this.deepClone(this.options()),\n    });\n    this.chartInstance.resize();\n  }\n\n  /** Deep clones a value to detach it from Angular's reactive objects. */\n  private deepClone<T>(value: T): T {\n    try {\n      if (typeof structuredClone === 'function') return structuredClone(value);\n    } catch {}\n    return JSON.parse(JSON.stringify(value));\n  }\n\n  /** Applies the new data/options, rebuilding the chart when the type changes. */\n  private updateChart(type: string, data: any, options: any): void {\n    if (!this.chartInstance) {\n      this.initChart();\n      return;\n    }\n\n    const config = this.chartInstance.config as any;\n    if (type !== config.type) {\n      this.chartInstance.stop();\n      this.chartInstance.destroy();\n      this.chartInstance = null;\n      this.resetCanvas();\n      this.initChart();\n      return;\n    }\n\n    this.chartInstance.data = data;\n    this.chartInstance.options = options;\n    this.chartInstance.update();\n  }\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/** Default dataset colors used by the ChartComponent when no palette is provided. */\nexport const COLOR_PALETTE = [\n  { bg: 'rgba(59, 130, 246, 0.2)', border: 'rgb(59, 130, 246)' },\n  { bg: 'rgba(34, 197, 94, 0.2)', border: 'rgb(34, 197, 94)' },\n  { bg: 'rgba(249, 115, 22, 0.2)', border: 'rgb(249, 115, 22)' },\n  { bg: 'rgba(139, 92, 246, 0.2)', border: 'rgb(139, 92, 246)' },\n  { bg: 'rgba(236, 72, 153, 0.2)', border: 'rgb(236, 72, 153)' },\n  { bg: 'rgba(6, 182, 212, 0.2)', border: 'rgb(6, 182, 212)' },\n];\n\n/**\n * Reads the current `--shk-*` CSS variables from the document and returns\n * the text, muted and border colors used by charts to follow the active theme.\n */\nexport function readThemeColors() {\n  const docStyle = getComputedStyle(document.documentElement);\n  return {\n    text: docStyle.getPropertyValue('--shk-surface-900') || '#27272a',\n    muted: docStyle.getPropertyValue('--shk-surface-500') || '#71717a',\n    border: docStyle.getPropertyValue('--shk-surface-200') || '#e4e4e7',\n  };\n}","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}